From 36c0fd4d38fc9a29e583b5140169eee7ba50f57b Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Thu, 15 Aug 2024 13:04:11 -0700
Subject: [PATCH 01/13] Added basic enter button and arrow keys Moving on to
 create a joystick

---
 fission/src/Synthesis.tsx                   |   2 +
 fission/src/ui/components/TouchControls.tsx | 138 ++++++++++++++++++++
 2 files changed, 140 insertions(+)
 create mode 100644 fission/src/ui/components/TouchControls.tsx

diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index 0e2fe2a29..f9a2b5d20 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -63,6 +63,7 @@ import PreferencesSystem from "./systems/preferences/PreferencesSystem.ts"
 import ResetAllInputsModal from "./ui/modals/configuring/inputs/ResetAllInputsModal.tsx"
 import APSManagementModal from "./ui/modals/APSManagementModal.tsx"
 import ConfigurePanel from "./ui/panels/configuring/assembly-config/ConfigurePanel.tsx"
+import TouchControls from "./ui/components/TouchControls.tsx"
 
 const worker = new Lazy<Worker>(() => new WPILibWSWorker())
 
@@ -167,6 +168,7 @@ function Synthesis() {
                         <ToastProvider key="toast-provider">
                             <Scene useStats={true} key="scene-in-toast-provider" />
                             <SceneOverlay />
+                            <TouchControls />
                             <MainHUD key={"main-hud"} />
                             {panelElements.length > 0 && panelElements}
                             {modalElement && (
diff --git a/fission/src/ui/components/TouchControls.tsx b/fission/src/ui/components/TouchControls.tsx
new file mode 100644
index 000000000..18481406e
--- /dev/null
+++ b/fission/src/ui/components/TouchControls.tsx
@@ -0,0 +1,138 @@
+import Button from "@/ui/components/Button"
+import { useRef, useState } from "react"
+
+function TouchControls() {
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    const showPlace = useState(false)
+    const showTouchControls = useState(false)
+
+    return (
+        <>
+            <input ref={inputRef} />
+            {showPlace ? (
+                <Button
+                    className="fixed bottom-4 right-4"
+                    value="Touch Controls"
+                    onClick={() => {
+                        if (inputRef.current) {
+                            const pressEvent = new KeyboardEvent("keydown", {
+                                key: "Enter",
+                                code: "Enter",
+                                bubbles: true,
+                            })
+                            inputRef.current.dispatchEvent(pressEvent)
+
+                            setTimeout(() => {
+                                const releaseEvent = new KeyboardEvent("keyup", {
+                                    key: "Enter",
+                                    code: "Enter",
+                                    bubbles: true,
+                                })
+                                inputRef.current?.dispatchEvent(releaseEvent)
+                            }, 100)
+                        }
+                    }}
+                />
+            ) : (
+                <></>
+            )}
+            {showTouchControls ? (
+                <div className="fixed bottom-4 left-4">
+                    <Button
+                        value="↑"
+                        onClick={() => {
+                            if (inputRef.current) {
+                                const pressEvent = new KeyboardEvent("keydown", {
+                                    key: "ArrowUp",
+                                    code: "ArrowUp",
+                                    bubbles: true,
+                                })
+                                inputRef.current.dispatchEvent(pressEvent)
+
+                                setTimeout(() => {
+                                    const releaseEvent = new KeyboardEvent("keyup", {
+                                        key: "ArrowUp",
+                                        code: "ArrowUp",
+                                        bubbles: true,
+                                    })
+                                    inputRef.current?.dispatchEvent(releaseEvent)
+                                }, 100)
+                            }
+                        }}
+                    />
+                    <Button
+                        value="←"
+                        onClick={() => {
+                            if (inputRef.current) {
+                                const pressEvent = new KeyboardEvent("keydown", {
+                                    key: "ArrowLeft",
+                                    code: "ArrowLeft",
+                                    bubbles: true,
+                                })
+                                inputRef.current.dispatchEvent(pressEvent)
+
+                                setTimeout(() => {
+                                    const releaseEvent = new KeyboardEvent("keyup", {
+                                        key: "ArrowLeft",
+                                        code: "ArrowLeft",
+                                        bubbles: true,
+                                    })
+                                    inputRef.current?.dispatchEvent(releaseEvent)
+                                }, 100)
+                            }
+                        }}
+                    />
+                    <Button
+                        value="↓"
+                        onClick={() => {
+                            if (inputRef.current) {
+                                const pressEvent = new KeyboardEvent("keydown", {
+                                    key: "ArrowDown",
+                                    code: "ArrowDown",
+                                    bubbles: true,
+                                })
+                                inputRef.current.dispatchEvent(pressEvent)
+
+                                setTimeout(() => {
+                                    const releaseEvent = new KeyboardEvent("keyup", {
+                                        key: "ArrowDown",
+                                        code: "ArrowDown",
+                                        bubbles: true,
+                                    })
+                                    inputRef.current?.dispatchEvent(releaseEvent)
+                                }, 100)
+                            }
+                        }}
+                    />
+                    <Button
+                        value="→"
+                        onClick={() => {
+                            if (inputRef.current) {
+                                const pressEvent = new KeyboardEvent("keydown", {
+                                    key: "ArrowRight",
+                                    code: "ArrowRight",
+                                    bubbles: true,
+                                })
+                                inputRef.current.dispatchEvent(pressEvent)
+
+                                setTimeout(() => {
+                                    const releaseEvent = new KeyboardEvent("keyup", {
+                                        key: "ArrowRight",
+                                        code: "ArrowRight",
+                                        bubbles: true,
+                                    })
+                                    inputRef.current?.dispatchEvent(releaseEvent)
+                                }, 100)
+                            }
+                        }}
+                    />
+                </div>
+            ) : (
+                <></>
+            )}
+        </>
+    )
+}
+
+export default TouchControls

From ccfc16f1b9fc9d3dfec12dbf798f9a2b5e1729b3 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Thu, 15 Aug 2024 14:53:34 -0700
Subject: [PATCH 02/13] Changes to fix everything before fixing build errors to
 run on ipad

---
 fission/src/systems/input/InputSystem.ts    |   1 +
 fission/src/systems/scene/Joystick.ts       |  61 +++++++
 fission/src/systems/scene/SceneRenderer.ts  |  16 ++
 fission/src/ui/components/TouchControls.tsx | 178 ++++++--------------
 4 files changed, 134 insertions(+), 122 deletions(-)
 create mode 100644 fission/src/systems/scene/Joystick.ts

diff --git a/fission/src/systems/input/InputSystem.ts b/fission/src/systems/input/InputSystem.ts
index d56aadd69..f135169ce 100644
--- a/fission/src/systems/input/InputSystem.ts
+++ b/fission/src/systems/input/InputSystem.ts
@@ -189,6 +189,7 @@ class InputSystem extends WorldSystem {
 
     // Called when any key is first pressed
     private handleKeyDown(event: KeyboardEvent) {
+        console.log(event.code)
         InputSystem._keysPressed[event.code] = true
     }
 
diff --git a/fission/src/systems/scene/Joystick.ts b/fission/src/systems/scene/Joystick.ts
new file mode 100644
index 000000000..7e752d6fb
--- /dev/null
+++ b/fission/src/systems/scene/Joystick.ts
@@ -0,0 +1,61 @@
+class Joystick {
+    private baseElement: HTMLElement
+    private stickElement: HTMLElement
+    private maxDistance: number
+    private dragStart: { x: number; y: number } | null = null
+    private stickPosition: { x: number; y: number } = { x: 0, y: 0 }
+    private movementCallback: (x: number, y: number) => void
+
+    constructor(
+        baseElement: HTMLElement,
+        stickElement: HTMLElement,
+        maxDistance: number,
+        movementCallback: (x: number, y: number) => void
+    ) {
+        this.baseElement = baseElement
+        this.stickElement = stickElement
+        this.maxDistance = maxDistance
+        this.movementCallback = movementCallback
+
+        this.initialize()
+    }
+
+    private initialize() {
+        this.stickElement.addEventListener("pointerdown", this.onPointerDown.bind(this))
+        document.addEventListener("pointermove", this.onPointerMove.bind(this))
+        document.addEventListener("pointerup", this.onPointerUp.bind(this))
+    }
+
+    private onPointerDown(event: PointerEvent) {
+        this.dragStart = { x: event.clientX, y: event.clientY }
+    }
+
+    private onPointerMove(event: PointerEvent) {
+        if (!this.dragStart) return
+
+        const dx = event.clientX - this.dragStart.x
+        const dy = event.clientY - this.dragStart.y
+
+        const distance = Math.sqrt(dx * dx + dy * dy)
+        const angle = Math.atan2(dy, dx)
+
+        const limitedDistance = Math.min(this.maxDistance, distance)
+
+        this.stickPosition.x = limitedDistance * Math.cos(angle)
+        this.stickPosition.y = limitedDistance * Math.sin(angle)
+
+        this.stickElement.style.transform = `translate(${this.stickPosition.x}px, ${this.stickPosition.y}px)`
+
+        this.movementCallback(this.stickPosition.x / this.maxDistance, this.stickPosition.y / this.maxDistance)
+    }
+
+    private onPointerUp() {
+        this.dragStart = null
+        this.stickPosition = { x: 0, y: 0 }
+        this.stickElement.style.transform = `translate(-50%, -50%)`
+
+        this.movementCallback(0, 0)
+    }
+}
+
+export default Joystick
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 205aa4434..727c43bfc 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -15,6 +15,7 @@ import Jolt from "@barclah/jolt-physics"
 import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
 import PreferencesSystem from "../preferences/PreferencesSystem"
 import { CSM } from "three/examples/jsm/csm/CSM.js"
+import Joystick from "./Joystick"
 
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x4066c7
@@ -118,6 +119,21 @@ class SceneRenderer extends WorldSystem {
         // Orbit controls
         this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement)
         this._orbitControls.update()
+
+        // Add a cube to the scene
+        const geometry1 = new THREE.BoxGeometry()
+        const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
+        const cube = new THREE.Mesh(geometry1, material1)
+        this._scene.add(cube)
+
+        // Initialize the joystick
+        const joystickBase = document.getElementById("joystick-base-left")!
+        const joystickStick = document.getElementById("joystick-stick-left")!
+        const joystick = new Joystick(joystickBase, joystickStick, 50, (x, y) => {
+            // Use the joystick input to control the cube
+            cube.position.x += x * 0.1
+            cube.position.y -= y * 0.1
+        })
     }
 
     public UpdateCanvasSize() {
diff --git a/fission/src/ui/components/TouchControls.tsx b/fission/src/ui/components/TouchControls.tsx
index 18481406e..68d7f9f6c 100644
--- a/fission/src/ui/components/TouchControls.tsx
+++ b/fission/src/ui/components/TouchControls.tsx
@@ -1,136 +1,70 @@
-import Button from "@/ui/components/Button"
-import { useRef, useState } from "react"
+import { useCallback, useRef, useState } from "react"
+import Label from "./Label"
 
 function TouchControls() {
     const inputRef = useRef<HTMLInputElement>(null)
 
-    const showPlace = useState(false)
-    const showTouchControls = useState(false)
+    const [showPlaceButton, setShowPlaceButton] = useState(true)
+    const [showJoystick, setShowJoystick] = useState<boolean>(true)
 
-    return (
-        <>
-            <input ref={inputRef} />
-            {showPlace ? (
-                <Button
-                    className="fixed bottom-4 right-4"
-                    value="Touch Controls"
-                    onClick={() => {
-                        if (inputRef.current) {
-                            const pressEvent = new KeyboardEvent("keydown", {
-                                key: "Enter",
-                                code: "Enter",
-                                bubbles: true,
-                            })
-                            inputRef.current.dispatchEvent(pressEvent)
+    const touch = matchMedia("(hover: none)").matches
 
-                            setTimeout(() => {
-                                const releaseEvent = new KeyboardEvent("keyup", {
-                                    key: "Enter",
-                                    code: "Enter",
-                                    bubbles: true,
-                                })
-                                inputRef.current?.dispatchEvent(releaseEvent)
-                            }, 100)
-                        }
-                    }}
-                />
-            ) : (
-                <></>
-            )}
-            {showTouchControls ? (
-                <div className="fixed bottom-4 left-4">
-                    <Button
-                        value="↑"
-                        onClick={() => {
-                            if (inputRef.current) {
-                                const pressEvent = new KeyboardEvent("keydown", {
-                                    key: "ArrowUp",
-                                    code: "ArrowUp",
-                                    bubbles: true,
-                                })
-                                inputRef.current.dispatchEvent(pressEvent)
+    console.log(touch) // true if the device has touch capabilities
 
-                                setTimeout(() => {
-                                    const releaseEvent = new KeyboardEvent("keyup", {
-                                        key: "ArrowUp",
-                                        code: "ArrowUp",
-                                        bubbles: true,
-                                    })
-                                    inputRef.current?.dispatchEvent(releaseEvent)
-                                }, 100)
-                            }
-                        }}
-                    />
-                    <Button
-                        value="←"
-                        onClick={() => {
-                            if (inputRef.current) {
-                                const pressEvent = new KeyboardEvent("keydown", {
-                                    key: "ArrowLeft",
-                                    code: "ArrowLeft",
-                                    bubbles: true,
-                                })
-                                inputRef.current.dispatchEvent(pressEvent)
+    /** simulates an enter key press and release within a 100 millisecond succession */
+    const PlaceMirabufAssembly = useCallback(() => {
+        if (inputRef.current) {
+            const pressEvent = new KeyboardEvent("keydown", {
+                key: "Enter",
+                code: "Enter",
+                bubbles: true,
+            })
+            inputRef.current.dispatchEvent(pressEvent)
 
-                                setTimeout(() => {
-                                    const releaseEvent = new KeyboardEvent("keyup", {
-                                        key: "ArrowLeft",
-                                        code: "ArrowLeft",
-                                        bubbles: true,
-                                    })
-                                    inputRef.current?.dispatchEvent(releaseEvent)
-                                }, 100)
-                            }
-                        }}
-                    />
-                    <Button
-                        value="↓"
-                        onClick={() => {
-                            if (inputRef.current) {
-                                const pressEvent = new KeyboardEvent("keydown", {
-                                    key: "ArrowDown",
-                                    code: "ArrowDown",
-                                    bubbles: true,
-                                })
-                                inputRef.current.dispatchEvent(pressEvent)
+            setTimeout(() => {
+                const releaseEvent = new KeyboardEvent("keyup", {
+                    key: "Enter",
+                    code: "Enter",
+                    bubbles: true,
+                })
+                inputRef.current?.dispatchEvent(releaseEvent)
+            }, 100)
+        }
+    }, [])
 
-                                setTimeout(() => {
-                                    const releaseEvent = new KeyboardEvent("keyup", {
-                                        key: "ArrowDown",
-                                        code: "ArrowDown",
-                                        bubbles: true,
-                                    })
-                                    inputRef.current?.dispatchEvent(releaseEvent)
-                                }, 100)
-                            }
-                        }}
-                    />
-                    <Button
-                        value="→"
-                        onClick={() => {
-                            if (inputRef.current) {
-                                const pressEvent = new KeyboardEvent("keydown", {
-                                    key: "ArrowRight",
-                                    code: "ArrowRight",
-                                    bubbles: true,
-                                })
-                                inputRef.current.dispatchEvent(pressEvent)
+    return (
+        <>
+            <input ref={inputRef} />
+            <div
+                id="place-assembly-button"
+                className={`absolute top-5 right-5 w-36 h-36 touch-none bg-black bg-opacity-20 rounded-full ${showPlaceButton ? "" : "hidden"}`}
+                onClick={PlaceMirabufAssembly}
+            >
+                <Label></Label>
+            </div>
 
-                                setTimeout(() => {
-                                    const releaseEvent = new KeyboardEvent("keyup", {
-                                        key: "ArrowRight",
-                                        code: "ArrowRight",
-                                        bubbles: true,
-                                    })
-                                    inputRef.current?.dispatchEvent(releaseEvent)
-                                }, 100)
-                            }
-                        }}
-                    />
+            <div
+                id="joystick-left"
+                className={`absolute bottom-5 left-5 w-36 h-36 touch-none ${showJoystick ? "" : "hidden"}`}
+            >
+                <div id="joystick-base-left" className="relative w-full h-full bg-black bg-opacity-20 rounded-full">
+                    <div
+                        id="joystick-stick-left"
+                        className="absolute w-14 h-14 bg-black bg-opacity-50 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                    ></div>
+                </div>
+            </div>
+            <div
+                id="joystick-right"
+                className={`absolute bottom-5 right-5 w-36 h-36 touch-none ${showJoystick ? "" : "hidden"}`}
+            >
+                <div id="joystick-base-right" className="relative w-full h-full bg-black bg-opacity-20 rounded-full">
+                    <div
+                        id="joystick-stick-right"
+                        className="absolute w-14 h-14 bg-black bg-opacity-50 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                    ></div>
                 </div>
-            ) : (
-                <></>
-            )}
+            </div>
         </>
     )
 }

From 79f9714f552299e8ef709cd4919e17998dd37036 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Tue, 20 Aug 2024 12:04:15 -0700
Subject: [PATCH 03/13] Created working touch control that integrates with
 preference system

---
 fission/package.json                          |  2 +-
 fission/src/Synthesis.tsx                     |  2 +-
 fission/src/index.css                         |  2 +-
 fission/src/mirabuf/MirabufSceneObject.ts     | 10 +++
 .../systems/preferences/PreferenceTypes.ts    |  2 +
 fission/src/systems/scene/Joystick.ts         | 55 +++++++++-----
 fission/src/systems/scene/SceneRenderer.ts    | 14 +++-
 fission/src/ui/components/MainHUD.tsx         | 12 ++-
 fission/src/ui/components/TouchControls.tsx   | 75 +++++++++++++++----
 .../ui/panels/mirabuf/ImportMirabufPanel.tsx  | 16 ++--
 fission/vite.config.ts                        | 36 +++++----
 11 files changed, 170 insertions(+), 56 deletions(-)

diff --git a/fission/package.json b/fission/package.json
index 6e1ae08b2..a78a4055c 100644
--- a/fission/package.json
+++ b/fission/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "dev": "vite --open",
+    "dev": "vite --open --host",
     "build": "tsc && vite build",
     "build:prod": "tsc && vite build --base=/fission/ --outDir dist/prod",
     "build:dev": "tsc && vite build --base=/fission-closed/ --outDir dist/dev",
diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index f9a2b5d20..7f4d84fd4 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -172,7 +172,7 @@ function Synthesis() {
                             <MainHUD key={"main-hud"} />
                             {panelElements.length > 0 && panelElements}
                             {modalElement && (
-                                <div className="absolute w-full h-full left-0 top-0" key={"modal-element"}>
+                                <div className="fixed w-full h-full left-0 top-0" key={"modal-element"}>
                                     {modalElement}
                                 </div>
                             )}
diff --git a/fission/src/index.css b/fission/src/index.css
index f3c04e2d1..5ab64fd0e 100644
--- a/fission/src/index.css
+++ b/fission/src/index.css
@@ -50,7 +50,7 @@ body {
     display: flex;
     place-items: center;
     min-width: 320px;
-    min-height: 100vh;
+    /* min-height: 100vh; */
 }
 
 h1 {
diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index 2804f3ae1..0cbbb5a16 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -21,6 +21,7 @@ import ScoringZoneSceneObject from "./ScoringZoneSceneObject"
 import { SceneOverlayTag } from "@/ui/components/SceneOverlayEvents"
 import { ProgressHandle } from "@/ui/components/ProgressNotificationData"
 import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
+import { MainHUD_AddToast } from "@/ui/components/MainHUD"
 
 const DEBUG_BODIES = false
 
@@ -397,6 +398,7 @@ class MirabufSceneObject extends SceneObject {
         this._transformGizmos?.RemoveGizmos()
         this._transformGizmos = undefined
         this.EnablePhysics()
+        World.SceneRenderer.isPlacingAssembly = false
     }
 
     /**
@@ -440,6 +442,14 @@ export async function CreateMirabuf(
     assembly: mirabuf.Assembly,
     progressHandle?: ProgressHandle
 ): Promise<MirabufSceneObject | null | undefined> {
+    // Cancel is there is another assembly being placed
+    console.log(World.SceneRenderer.isPlacingAssembly)
+    if (World.SceneRenderer.isPlacingAssembly) {
+        MainHUD_AddToast("error", "Error Placing Assembly.", "Place assembly before spawning another.")
+        return
+    } else {
+        World.SceneRenderer.isPlacingAssembly = true
+    }
     const parser = new MirabufParser(assembly, progressHandle)
     if (parser.maxErrorSeverity >= ParseErrorSeverity.Unimportable) {
         console.error(`Assembly Parser produced significant errors for '${assembly.info!.name!}'`)
diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts
index 9331cc425..612b38e9a 100644
--- a/fission/src/systems/preferences/PreferenceTypes.ts
+++ b/fission/src/systems/preferences/PreferenceTypes.ts
@@ -12,6 +12,7 @@ export type GlobalPreference =
     | "InputSchemes"
     | "RenderSceneTags"
     | "RenderScoreboard"
+    | "TouchControls"
 
 export const RobotPreferencesKey: string = "Robots"
 export const FieldPreferencesKey: string = "Fields"
@@ -27,6 +28,7 @@ export const DefaultGlobalPreferences: { [key: string]: unknown } = {
     InputSchemes: [],
     RenderSceneTags: true,
     RenderScoreboard: true,
+    TouchControls: false,
 }
 
 export type QualitySetting = "Low" | "Medium" | "High"
diff --git a/fission/src/systems/scene/Joystick.ts b/fission/src/systems/scene/Joystick.ts
index 7e752d6fb..6b1b6be7f 100644
--- a/fission/src/systems/scene/Joystick.ts
+++ b/fission/src/systems/scene/Joystick.ts
@@ -2,9 +2,10 @@ class Joystick {
     private baseElement: HTMLElement
     private stickElement: HTMLElement
     private maxDistance: number
-    private dragStart: { x: number; y: number } | null = null
     private stickPosition: { x: number; y: number } = { x: 0, y: 0 }
     private movementCallback: (x: number, y: number) => void
+    private baseRect: DOMRect | null = null
+    private activePointerId: number | null = null // Track the active pointer ID
 
     constructor(
         baseElement: HTMLElement,
@@ -21,40 +22,56 @@ class Joystick {
     }
 
     private initialize() {
-        this.stickElement.addEventListener("pointerdown", this.onPointerDown.bind(this))
+        this.baseElement.addEventListener("pointerdown", this.onPointerDown.bind(this))
         document.addEventListener("pointermove", this.onPointerMove.bind(this))
         document.addEventListener("pointerup", this.onPointerUp.bind(this))
     }
 
     private onPointerDown(event: PointerEvent) {
-        this.dragStart = { x: event.clientX, y: event.clientY }
+        this.baseRect = this.baseElement.getBoundingClientRect()
+        this.activePointerId = event.pointerId
+        this.updateStickPosition(event.clientX, event.clientY)
     }
 
     private onPointerMove(event: PointerEvent) {
-        if (!this.dragStart) return
+        if (this.activePointerId !== event.pointerId || !this.baseRect) return // Ensure only the initiating pointer controls the joystick
+        this.updateStickPosition(event.clientX, event.clientY)
+    }
 
-        const dx = event.clientX - this.dragStart.x
-        const dy = event.clientY - this.dragStart.y
+    private onPointerUp() {
+        this.stickPosition = { x: 0, y: 0 }
+        this.stickElement.style.transform = `translate(-50%, -50%)`
+        this.baseRect = null
 
-        const distance = Math.sqrt(dx * dx + dy * dy)
-        const angle = Math.atan2(dy, dx)
+        this.movementCallback(0, 0)
+    }
 
-        const limitedDistance = Math.min(this.maxDistance, distance)
+    private updateStickPosition(clientX: number, clientY: number) {
+        if (!this.baseRect) return
 
-        this.stickPosition.x = limitedDistance * Math.cos(angle)
-        this.stickPosition.y = limitedDistance * Math.sin(angle)
+        const w = this.baseRect.right - this.baseRect.left
+        const h = this.baseRect.bottom - this.baseRect.top
+        const x = clientX - (this.baseRect.left + w / 2)
+        const y = clientY - (this.baseRect.top + h / 2)
 
-        this.stickElement.style.transform = `translate(${this.stickPosition.x}px, ${this.stickPosition.y}px)`
+        // Calculate the distance from the center
+        const distance = Math.sqrt(x * x + y * y)
 
-        this.movementCallback(this.stickPosition.x / this.maxDistance, this.stickPosition.y / this.maxDistance)
-    }
+        // If the distance exceeds maxDistance, constrain it
+        if (distance > this.maxDistance) {
+            const angle = Math.atan2(y, x)
+            this.stickPosition.x = Math.cos(angle) * this.maxDistance
+            this.stickPosition.y = Math.sin(angle) * this.maxDistance
+        } else {
+            this.stickPosition.x = x
+            this.stickPosition.y = y
+        }
 
-    private onPointerUp() {
-        this.dragStart = null
-        this.stickPosition = { x: 0, y: 0 }
-        this.stickElement.style.transform = `translate(-50%, -50%)`
+        // this.stickPosition.x = 0
+        // this.stickPosition.y = 0
 
-        this.movementCallback(0, 0)
+        this.stickElement.style.transform = `translate(${this.stickPosition.x - this.maxDistance / 2}px, ${this.stickPosition.y - this.maxDistance / 2}px)`
+        this.movementCallback(this.stickPosition.x / this.maxDistance, this.stickPosition.y / this.maxDistance)
     }
 }
 
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 727c43bfc..d49bfdf8c 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -16,6 +16,7 @@ import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/c
 import PreferencesSystem from "../preferences/PreferencesSystem"
 import { CSM } from "three/examples/jsm/csm/CSM.js"
 import Joystick from "./Joystick"
+import { TouchControlsEvent, TouchControlsEventKeys } from "@/ui/components/TouchControls"
 
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x4066c7
@@ -36,6 +37,8 @@ class SceneRenderer extends WorldSystem {
     private _orbitControls: OrbitControls
     private _transformControls: Map<TransformControls, number> // maps all rendered transform controls to their size
 
+    private _isPlacingAssembly: boolean = false
+
     private _light: THREE.DirectionalLight | CSM | undefined
 
     public get sceneObjects() {
@@ -54,6 +57,15 @@ class SceneRenderer extends WorldSystem {
         return this._renderer
     }
 
+    public get isPlacingAssembly() {
+        return this._isPlacingAssembly
+    }
+
+    public set isPlacingAssembly(value: boolean) {
+        new TouchControlsEvent(TouchControlsEventKeys.PLACE_BUTTON, value)
+        this._isPlacingAssembly = value
+    }
+
     public constructor() {
         super()
 
@@ -129,7 +141,7 @@ class SceneRenderer extends WorldSystem {
         // Initialize the joystick
         const joystickBase = document.getElementById("joystick-base-left")!
         const joystickStick = document.getElementById("joystick-stick-left")!
-        const joystick = new Joystick(joystickBase, joystickStick, 50, (x, y) => {
+        const joystick = new Joystick(joystickBase, joystickStick, 55, (x, y) => {
             // Use the joystick input to control the cube
             cube.position.x += x * 0.1
             cube.position.y -= y * 0.1
diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index 5c1e13a90..37be3e310 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -10,6 +10,7 @@ import APS, { APS_USER_INFO_UPDATE_EVENT } from "@/aps/APS"
 import { UserIcon } from "./UserIcon"
 import { Button } from "@mui/base/Button"
 import { ButtonIcon, SynthesisIcons } from "./StyledComponents"
+import { TouchControlsEvent, TouchControlsEventKeys } from "./TouchControls"
 
 type ButtonProps = {
     value: string
@@ -45,6 +46,8 @@ const MainHUD: React.FC = () => {
     const { addToast } = useToastContext()
     const [isOpen, setIsOpen] = useState(false)
 
+    const touchCompatibility = matchMedia("(hover: none)").matches
+
     MainHUD_AddToast = addToast
 
     const [userInfo, setUserInfo] = useState(APS.userInfo)
@@ -60,7 +63,7 @@ const MainHUD: React.FC = () => {
             {!isOpen && (
                 <button
                     onClick={() => setIsOpen(!isOpen)}
-                    className="absolute left-6 top-6 focus:outline-0 focus-visible:outline-0"
+                    className="fixed left-6 top-6 focus:outline-0 focus-visible:outline-0"
                 >
                     <BiMenuAltLeft size={40} className="text-main-hud-close-icon" />
                 </button>
@@ -107,6 +110,13 @@ const MainHUD: React.FC = () => {
                             openPanel("debug")
                         }}
                     />
+                    {touchCompatibility ? (
+                        <MainHUDButton
+                            value={"Touch Controls"}
+                            icon={SynthesisIcons.Gamepad}
+                            onClick={() => new TouchControlsEvent(TouchControlsEventKeys.JOYSTICK)}
+                        />
+                    ) : null}
                 </div>
                 {userInfo ? (
                     <MainHUDButton
diff --git a/fission/src/ui/components/TouchControls.tsx b/fission/src/ui/components/TouchControls.tsx
index 68d7f9f6c..60f6ff065 100644
--- a/fission/src/ui/components/TouchControls.tsx
+++ b/fission/src/ui/components/TouchControls.tsx
@@ -1,15 +1,34 @@
-import { useCallback, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import Label from "./Label"
+import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 
 function TouchControls() {
     const inputRef = useRef<HTMLInputElement>(null)
 
-    const [showPlaceButton, setShowPlaceButton] = useState(true)
-    const [showJoystick, setShowJoystick] = useState<boolean>(true)
+    const [isPlaceButtonVisible, setIsPlaceButtonVisible] = useState<boolean>(false)
+    const [isJoystickVisible, setIsJoystickVisible] = useState<boolean>(
+        PreferencesSystem.getGlobalPreference<boolean>("TouchControls")
+    )
+
+    useEffect(() => {
+        const handlePlaceButtonEvent = (e: Event) => {
+            setIsPlaceButtonVisible((e as TouchControlsEvent).value!)
+        }
+
+        const handleJoystickEvent = () => {
+            PreferencesSystem.setGlobalPreference("TouchControls", !isJoystickVisible)
+            PreferencesSystem.savePreferences()
+            setIsJoystickVisible(!isJoystickVisible)
+        }
 
-    const touch = matchMedia("(hover: none)").matches
+        TouchControlsEvent.Listen(TouchControlsEventKeys.PLACE_BUTTON, handlePlaceButtonEvent)
+        TouchControlsEvent.Listen(TouchControlsEventKeys.JOYSTICK, handleJoystickEvent)
 
-    console.log(touch) // true if the device has touch capabilities
+        return () => {
+            TouchControlsEvent.RemoveListener(TouchControlsEventKeys.PLACE_BUTTON, handlePlaceButtonEvent)
+            TouchControlsEvent.RemoveListener(TouchControlsEventKeys.JOYSTICK, handleJoystickEvent)
+        }
+    }, [isJoystickVisible, isPlaceButtonVisible])
 
     /** simulates an enter key press and release within a 100 millisecond succession */
     const PlaceMirabufAssembly = useCallback(() => {
@@ -33,30 +52,33 @@ function TouchControls() {
     }, [])
 
     return (
-        <>
-            <input ref={inputRef} />
+        <div className="select-none">
+            <input ref={inputRef} className="hidden" />
             <div
                 id="place-assembly-button"
-                className={`absolute top-5 right-5 w-36 h-36 touch-none bg-black bg-opacity-20 rounded-full ${showPlaceButton ? "" : "hidden"}`}
+                className={`absolute top-5 right-5 w-36 h-36 touch-none bg-gray-100 bg-opacity-20 rounded-full ${isPlaceButtonVisible ? "" : "hidden"}`}
                 onClick={PlaceMirabufAssembly}
             >
                 <Label></Label>
             </div>
 
             <div
-                id="joystick-left"
-                className={`absolute bottom-5 left-5 w-36 h-36 touch-none ${showJoystick ? "" : "hidden"}`}
+                id="joystick-base-left"
+                className={`fixed bottom-[5vh] left-[5vw] w-60 h-60 touch-none ${isJoystickVisible ? "" : "hidden"}`}
             >
-                <div id="joystick-base-left" className="relative w-full h-full bg-black bg-opacity-20 rounded-full">
+                <div
+                    id="joystick-base-circle"
+                    className="relative w-36 h-36 bg-gray-100 bg-blend-difference bg-opacity-30 rounded-full left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                >
                     <div
                         id="joystick-stick-left"
-                        className="absolute w-14 h-14 bg-black bg-opacity-50 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                        className="absolute w-14 h-14 bg-black bg-opacity-70 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                     ></div>
                 </div>
             </div>
             <div
                 id="joystick-right"
-                className={`absolute bottom-5 right-5 w-36 h-36 touch-none ${showJoystick ? "" : "hidden"}`}
+                className={`fixed bottom-5 right-5 w-36 h-36 touch-none ${isJoystickVisible ? "" : "hidden"}`}
             >
                 <div id="joystick-base-right" className="relative w-full h-full bg-black bg-opacity-20 rounded-full">
                     <div
@@ -65,8 +87,33 @@ function TouchControls() {
                     ></div>
                 </div>
             </div>
-        </>
+        </div>
     )
 }
 
 export default TouchControls
+
+export const enum TouchControlsEventKeys {
+    PLACE_BUTTON = "PlaceButtonEvent",
+    JOYSTICK = "JoystickEvent",
+}
+
+export class TouchControlsEvent extends Event {
+    public value: boolean | undefined
+
+    constructor(eventKey: TouchControlsEventKeys, value?: boolean) {
+        super(eventKey)
+
+        if (value) this.value = value
+
+        window.dispatchEvent(this)
+    }
+
+    public static Listen(eventKey: TouchControlsEventKeys, func: (e: Event) => void) {
+        window.addEventListener(eventKey, func)
+    }
+
+    public static RemoveListener(eventKey: TouchControlsEventKeys, func: (e: Event) => void) {
+        window.removeEventListener(eventKey, func)
+    }
+}
diff --git a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
index aa3f37b2f..be383973b 100644
--- a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
+++ b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
@@ -74,7 +74,12 @@ function GetCacheInfo(miraType: MiraType): MirabufCacheInfo[] {
     return Object.values(MirabufCachingService.GetCacheMap(miraType))
 }
 
-function SpawnCachedMira(info: MirabufCacheInfo, type: MiraType, progressHandle?: ProgressHandle) {
+function SpawnCachedMira(
+    info: MirabufCacheInfo,
+    type: MiraType,
+    openPanel: (panelId: string) => void,
+    progressHandle?: ProgressHandle
+) {
     if (!progressHandle) {
         progressHandle = new ProgressHandle(info.name ?? info.cacheKey)
     }
@@ -85,6 +90,7 @@ function SpawnCachedMira(info: MirabufCacheInfo, type: MiraType, progressHandle?
                 CreateMirabuf(assembly).then(x => {
                     if (x) {
                         World.SceneRenderer.RegisterSceneObject(x)
+                        if (x.miraType == MiraType.ROBOT) openPanel("choose-scheme")
                         progressHandle.Done()
                     } else {
                         progressHandle.Fail()
@@ -183,7 +189,7 @@ const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
     // Select a mirabuf assembly from the cache.
     const selectCache = useCallback(
         (info: MirabufCacheInfo, type: MiraType) => {
-            SpawnCachedMira(info, type)
+            SpawnCachedMira(info, type, openPanel)
 
             showTooltip("controls", [
                 { control: "WASD", description: "Drive" },
@@ -193,7 +199,7 @@ const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
 
             closePanel(panelId)
 
-            if (type == MiraType.ROBOT) openPanel("choose-scheme")
+            // if (type == MiraType.ROBOT) openPanel("choose-scheme")
         },
         [showTooltip, closePanel, panelId, openPanel]
     )
@@ -207,7 +213,7 @@ const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
             MirabufCachingService.CacheRemote(info.src, type)
                 .then(cacheInfo => {
                     if (cacheInfo) {
-                        SpawnCachedMira(cacheInfo, type, status)
+                        SpawnCachedMira(cacheInfo, type, openPanel, status)
                     } else {
                         status.Fail("Failed to cache")
                     }
@@ -229,7 +235,7 @@ const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
             MirabufCachingService.CacheAPS(data, type)
                 .then(cacheInfo => {
                     if (cacheInfo) {
-                        SpawnCachedMira(cacheInfo, type, status)
+                        SpawnCachedMira(cacheInfo, type, openPanel, status)
                     } else {
                         status.Fail("Failed to cache")
                     }
diff --git a/fission/vite.config.ts b/fission/vite.config.ts
index d1120aebe..d528a9dc1 100644
--- a/fission/vite.config.ts
+++ b/fission/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitest/config'
 import * as path from 'path'
 import react from '@vitejs/plugin-react-swc'
+import basicSsl from '@vitejs/plugin-basic-ssl'
 import glsl from 'vite-plugin-glsl';
 
 const basePath = '/fission/'
@@ -8,22 +9,31 @@ const serverPort = 3000
 const dockerServerPort = 80
 
 const useLocal = false
+const useSsl = true
+
+const plugins = [
+    react(), glsl({
+        include: [                   // Glob pattern, or array of glob patterns to import
+          '**/*.glsl', '**/*.wgsl',
+          '**/*.vert', '**/*.frag',
+          '**/*.vs', '**/*.fs'
+        ],
+        exclude: undefined,          // Glob pattern, or array of glob patterns to ignore
+        warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times
+        defaultExtension: 'glsl',    // Shader suffix when no extension is specified
+        compress: false,             // Compress output shader code
+        watch: true,                 // Recompile shader on change
+        root: '/'                    // Directory for root imports
+    })
+]
+
+if (useSsl) {
+    plugins.push(basicSsl())
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react(), /* viteSingleFile() */ glsl({
-    include: [                   // Glob pattern, or array of glob patterns to import
-      '**/*.glsl', '**/*.wgsl',
-      '**/*.vert', '**/*.frag',
-      '**/*.vs', '**/*.fs'
-    ],
-    exclude: undefined,          // Glob pattern, or array of glob patterns to ignore
-    warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times
-    defaultExtension: 'glsl',    // Shader suffix when no extension is specified
-    compress: false,             // Compress output shader code
-    watch: true,                 // Recompile shader on change
-    root: '/'                    // Directory for root imports
-  }) ],
+    plugins: plugins,
     resolve: {
         alias: [
             { find: '@/components', replacement: path.resolve(__dirname, 'src', 'ui', 'components') },

From f0003856a70ce202f8624a1ca03f42ba33cd0c57 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Tue, 20 Aug 2024 13:07:04 -0700
Subject: [PATCH 04/13] Quick preference system merge conflict fix to allow
 joysticks to be functional

---
 fission/src/systems/preferences/PreferenceTypes.ts | 2 ++
 fission/src/systems/scene/Joystick.ts              | 3 ---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts
index 4b79eaacb..e8e98db54 100644
--- a/fission/src/systems/preferences/PreferenceTypes.ts
+++ b/fission/src/systems/preferences/PreferenceTypes.ts
@@ -29,6 +29,8 @@ export const DefaultGlobalPreferences: { [key: string]: unknown } = {
     InputSchemes: [],
     RenderSceneTags: true,
     RenderScoreboard: true,
+    SubsystemGravity: false,
+    TouchControls: false,
 }
 
 export type QualitySetting = "Low" | "Medium" | "High"
diff --git a/fission/src/systems/scene/Joystick.ts b/fission/src/systems/scene/Joystick.ts
index 6b1b6be7f..bf2a5a005 100644
--- a/fission/src/systems/scene/Joystick.ts
+++ b/fission/src/systems/scene/Joystick.ts
@@ -67,9 +67,6 @@ class Joystick {
             this.stickPosition.y = y
         }
 
-        // this.stickPosition.x = 0
-        // this.stickPosition.y = 0
-
         this.stickElement.style.transform = `translate(${this.stickPosition.x - this.maxDistance / 2}px, ${this.stickPosition.y - this.maxDistance / 2}px)`
         this.movementCallback(this.stickPosition.x / this.maxDistance, this.stickPosition.y / this.maxDistance)
     }

From 0b437c9e1dfe92f4a922a4a00cafa7ebd449f00d Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Tue, 20 Aug 2024 19:17:02 -0700
Subject: [PATCH 05/13] Working joysticks with assemblies

---
 fission/src/mirabuf/MirabufSceneObject.ts     |   2 +-
 fission/src/systems/input/DefaultInputs.ts    | 285 ++++++++++++++----
 .../src/systems/input/InputSchemeManager.ts   |   3 +
 fission/src/systems/input/InputSystem.ts      |  37 ++-
 fission/src/systems/scene/Joystick.ts         |  39 +--
 fission/src/systems/scene/SceneRenderer.ts    |  16 -
 fission/src/ui/components/TouchControls.tsx   |  30 +-
 7 files changed, 305 insertions(+), 107 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index 0cbbb5a16..664dd3510 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -187,7 +187,7 @@ class MirabufSceneObject extends SceneObject {
              * This block of code should only be executed if the transform gizmo exists.
              */
             if (this._transformGizmos) {
-                if (InputSystem.isKeyPressed("Enter")) {
+                if (InputSystem.isKeyPressed("ConfirmAssemblyButton") || InputSystem.isKeyPressed("Enter")) {
                     // confirming placement of the mirabuf object
                     this.DisableTransformControls()
                     return
diff --git a/fission/src/systems/input/DefaultInputs.ts b/fission/src/systems/input/DefaultInputs.ts
index e15fe82d4..eda7a8158 100644
--- a/fission/src/systems/input/DefaultInputs.ts
+++ b/fission/src/systems/input/DefaultInputs.ts
@@ -1,3 +1,4 @@
+import { TouchControlsJoystick } from "@/ui/components/TouchControls"
 import { InputScheme } from "./InputSchemeManager"
 import { AxisInput, ButtonInput, EmptyModifierState } from "./InputSystem"
 
@@ -8,6 +9,7 @@ class DefaultInputs {
             descriptiveName: "WASD",
             customized: false,
             usesGamepad: false,
+            usesTouchControls: false,
             inputs: [
                 new AxisInput("arcadeDrive", "KeyW", "KeyS"),
                 new AxisInput("arcadeTurn", "KeyD", "KeyA"),
@@ -15,36 +17,96 @@ class DefaultInputs {
                 new ButtonInput("intake", "KeyE"),
                 new ButtonInput("eject", "KeyQ"),
 
-                new AxisInput("joint 1", "Digit1", "Digit1", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: false,
-                    alt: false,
-                    shift: true,
-                    meta: false,
-                }),
-                new AxisInput("joint 2", "Digit2", "Digit2", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: false,
-                    alt: false,
-                    shift: true,
-                    meta: false,
-                }),
-                new AxisInput("joint 3", "Digit3", "Digit3", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: false,
-                    alt: false,
-                    shift: true,
-                    meta: false,
-                }),
-                new AxisInput("joint 4", "Digit4", "Digit4", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: false,
-                    alt: false,
-                    shift: true,
-                    meta: false,
-                }),
-                new AxisInput("joint 5", "Digit5", "Digit5", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: false,
-                    alt: false,
-                    shift: true,
-                    meta: false,
-                }),
+                new AxisInput(
+                    "joint 1",
+                    "Digit1",
+                    "Digit1",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: false,
+                        alt: false,
+                        shift: true,
+                        meta: false,
+                    }
+                ),
+                new AxisInput(
+                    "joint 2",
+                    "Digit2",
+                    "Digit2",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: false,
+                        alt: false,
+                        shift: true,
+                        meta: false,
+                    }
+                ),
+                new AxisInput(
+                    "joint 3",
+                    "Digit3",
+                    "Digit3",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: false,
+                        alt: false,
+                        shift: true,
+                        meta: false,
+                    }
+                ),
+                new AxisInput(
+                    "joint 4",
+                    "Digit4",
+                    "Digit4",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: false,
+                        alt: false,
+                        shift: true,
+                        meta: false,
+                    }
+                ),
+                new AxisInput(
+                    "joint 5",
+                    "Digit5",
+                    "Digit5",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: false,
+                        alt: false,
+                        shift: true,
+                        meta: false,
+                    }
+                ),
                 new AxisInput("joint 6"),
                 new AxisInput("joint 7"),
                 new AxisInput("joint 8"),
@@ -60,6 +122,7 @@ class DefaultInputs {
             descriptiveName: "Arrow Keys",
             customized: false,
             usesGamepad: false,
+            usesTouchControls: false,
             inputs: [
                 new AxisInput("arcadeDrive", "ArrowUp", "ArrowDown"),
                 new AxisInput("arcadeTurn", "ArrowRight", "ArrowLeft"),
@@ -67,36 +130,96 @@ class DefaultInputs {
                 new ButtonInput("intake", "Semicolon"),
                 new ButtonInput("eject", "KeyL"),
 
-                new AxisInput("joint 1", "Slash", "Slash", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: true,
-                    alt: false,
-                    shift: false,
-                    meta: false,
-                }),
-                new AxisInput("joint 2", "Period", "Period", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: true,
-                    alt: false,
-                    shift: false,
-                    meta: false,
-                }),
-                new AxisInput("joint 3", "Comma", "Comma", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: true,
-                    alt: false,
-                    shift: false,
-                    meta: false,
-                }),
-                new AxisInput("joint 4", "KeyM", "KeyM", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: true,
-                    alt: false,
-                    shift: false,
-                    meta: false,
-                }),
-                new AxisInput("joint 5", "KeyN", "KeyN", -1, false, false, -1, -1, EmptyModifierState, {
-                    ctrl: true,
-                    alt: false,
-                    shift: false,
-                    meta: false,
-                }),
+                new AxisInput(
+                    "joint 1",
+                    "Slash",
+                    "Slash",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: true,
+                        alt: false,
+                        shift: false,
+                        meta: false,
+                    }
+                ),
+                new AxisInput(
+                    "joint 2",
+                    "Period",
+                    "Period",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: true,
+                        alt: false,
+                        shift: false,
+                        meta: false,
+                    }
+                ),
+                new AxisInput(
+                    "joint 3",
+                    "Comma",
+                    "Comma",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: true,
+                        alt: false,
+                        shift: false,
+                        meta: false,
+                    }
+                ),
+                new AxisInput(
+                    "joint 4",
+                    "KeyM",
+                    "KeyM",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: true,
+                        alt: false,
+                        shift: false,
+                        meta: false,
+                    }
+                ),
+                new AxisInput(
+                    "joint 5",
+                    "KeyN",
+                    "KeyN",
+                    -1,
+                    false,
+                    false,
+                    -1,
+                    -1,
+                    TouchControlsJoystick.NONE,
+                    EmptyModifierState,
+                    {
+                        ctrl: true,
+                        alt: false,
+                        shift: false,
+                        meta: false,
+                    }
+                ),
                 new AxisInput("joint 6"),
                 new AxisInput("joint 7"),
                 new AxisInput("joint 8"),
@@ -112,6 +235,7 @@ class DefaultInputs {
             descriptiveName: "Full Controller",
             customized: false,
             usesGamepad: true,
+            usesTouchControls: false,
             inputs: [
                 new AxisInput("arcadeDrive", "", "", 1, true),
                 new AxisInput("arcadeTurn", "", "", 2, false),
@@ -139,6 +263,7 @@ class DefaultInputs {
             descriptiveName: "Left Stick",
             customized: false,
             usesGamepad: true,
+            usesTouchControls: false,
             inputs: [
                 new AxisInput("arcadeDrive", "", "", 1, true),
                 new AxisInput("arcadeTurn", "", "", 0, false),
@@ -166,6 +291,7 @@ class DefaultInputs {
             descriptiveName: "Right Stick",
             customized: false,
             usesGamepad: true,
+            usesTouchControls: false,
             inputs: [
                 new AxisInput("arcadeDrive", "", "", 3, true),
                 new AxisInput("arcadeTurn", "", "", 2, false),
@@ -187,6 +313,43 @@ class DefaultInputs {
         }
     }
 
+    public static brandon = () => {
+        return {
+            schemeName: "Brandon",
+            descriptiveName: "Touch Controls",
+            customized: false,
+            usesGamepad: false,
+            usesTouchControls: true,
+            inputs: [
+                new AxisInput(
+                    "arcadeDrive",
+                    "",
+                    "",
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    TouchControlsJoystick.LEFT
+                ),
+                new AxisInput(
+                    "arcadeTurn",
+                    "",
+                    "",
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    TouchControlsJoystick.RIGHT
+                ),
+
+                new ButtonInput("intake", "Semicolon"),
+                new ButtonInput("eject", "KeyL"),
+            ],
+        }
+    }
+
     public static get defaultInputCopies() {
         return [
             DefaultInputs.ernie(),
@@ -194,6 +357,7 @@ class DefaultInputs {
             DefaultInputs.jax(),
             DefaultInputs.hunter(),
             DefaultInputs.carmela(),
+            DefaultInputs.brandon(),
         ]
     }
 
@@ -203,6 +367,7 @@ class DefaultInputs {
             descriptiveName: "",
             customized: true,
             usesGamepad: false,
+            usesTouchControls: false,
             inputs: [
                 new AxisInput("arcadeDrive"),
                 new AxisInput("arcadeTurn"),
diff --git a/fission/src/systems/input/InputSchemeManager.ts b/fission/src/systems/input/InputSchemeManager.ts
index 23a5ede69..3dcf20fd9 100644
--- a/fission/src/systems/input/InputSchemeManager.ts
+++ b/fission/src/systems/input/InputSchemeManager.ts
@@ -8,6 +8,7 @@ export type InputScheme = {
     descriptiveName: string
     customized: boolean
     usesGamepad: boolean
+    usesTouchControls: boolean
     inputs: Input[]
 }
 
@@ -58,6 +59,7 @@ class InputSchemeManager {
                     rawAxis.useGamepadButtons,
                     rawAxis.posGamepadButton,
                     rawAxis.negGamepadButton,
+                    rawAxis.touchControlAxis,
                     rawAxis.posKeyModifiers,
                     rawAxis.negKeyModifiers
                 )
@@ -140,6 +142,7 @@ class InputSchemeManager {
             descriptiveName: scheme.descriptiveName,
             customized: scheme.customized,
             usesGamepad: scheme.usesGamepad,
+            usesTouchControls: scheme.usesTouchControls,
             inputs: copiedInputs,
         }
     }
diff --git a/fission/src/systems/input/InputSystem.ts b/fission/src/systems/input/InputSystem.ts
index f135169ce..ca6f9da69 100644
--- a/fission/src/systems/input/InputSystem.ts
+++ b/fission/src/systems/input/InputSystem.ts
@@ -1,3 +1,5 @@
+import { TouchControlsJoystick } from "@/ui/components/TouchControls"
+import Joystick from "../scene/Joystick"
 import WorldSystem from "../WorldSystem"
 import { InputScheme } from "./InputSchemeManager"
 
@@ -18,7 +20,7 @@ abstract class Input {
     }
 
     // Returns the current value of the input. Range depends on input type
-    abstract getValue(useGamepad: boolean): number
+    abstract getValue(useGamepad: boolean, useTouchControls: boolean): number
 
     // Creates a copy to avoid modifying the default inputs by reference
     abstract getCopy(): Input
@@ -62,6 +64,7 @@ class AxisInput extends Input {
     public negKeyModifiers: ModifierState
 
     public gamepadAxisNumber: number
+    public touchControlAxis: TouchControlsJoystick
     public joystickInverted: boolean
     public useGamepadButtons: boolean
     public posGamepadButton: number
@@ -76,6 +79,7 @@ class AxisInput extends Input {
         useGamepadButtons?: boolean,
         posGamepadButton?: number,
         negGamepadButton?: number,
+        touchControlAxis?: TouchControlsJoystick,
         posKeyModifiers?: ModifierState,
         negKeyModifiers?: ModifierState
     ) {
@@ -87,6 +91,7 @@ class AxisInput extends Input {
         this.negKeyModifiers = negKeyModifiers ?? EmptyModifierState
 
         this.gamepadAxisNumber = gamepadAxisNumber ?? -1
+        this.touchControlAxis = touchControlAxis ?? TouchControlsJoystick.NONE
         this.joystickInverted = joystickInverted ?? false
 
         this.useGamepadButtons = useGamepadButtons ?? false
@@ -96,7 +101,7 @@ class AxisInput extends Input {
 
     // For keyboard: returns 1 if positive pressed, -1 if negative pressed, or 0 if none or both are pressed
     // For gamepad axis: returns a range between -1 and 1 with a deadband in the middle
-    getValue(useGamepad: boolean): number {
+    getValue(useGamepad: boolean, useTouchControls: boolean): number {
         // Gamepad joystick axis
         if (useGamepad) {
             if (!this.useGamepadButtons)
@@ -109,6 +114,10 @@ class AxisInput extends Input {
             )
         }
 
+        if (useTouchControls) {
+            return InputSystem.getTouchControlsAxis(this.touchControlAxis) * (this.joystickInverted ? -1 : 1)
+        }
+
         // Keyboard button axis
         return (
             (InputSystem.isKeyPressed(this.posKeyCode, this.posKeyModifiers) ? 1 : 0) -
@@ -126,6 +135,7 @@ class AxisInput extends Input {
             this.useGamepadButtons,
             this.posGamepadButton,
             this.negGamepadButton,
+            this.touchControlAxis,
             this.posKeyModifiers,
             this.negKeyModifiers
         )
@@ -141,6 +151,9 @@ class InputSystem extends WorldSystem {
     private static _gpIndex: number | null
     public static gamepad: Gamepad | null
 
+    private static leftJoystick: Joystick
+    private static rightJoystick: Joystick
+
     // Maps a brain index to a certain input scheme
     public static brainIndexSchemeMap: Map<number, InputScheme> = new Map()
 
@@ -159,6 +172,15 @@ class InputSystem extends WorldSystem {
         this.gamepadDisconnected = this.gamepadDisconnected.bind(this)
         window.addEventListener("gamepaddisconnected", this.gamepadDisconnected)
 
+        InputSystem.leftJoystick = new Joystick(
+            document.getElementById("joystick-base-left")!,
+            document.getElementById("joystick-stick-left")!
+        )
+        InputSystem.rightJoystick = new Joystick(
+            document.getElementById("joystick-base-right")!,
+            document.getElementById("joystick-stick-right")!
+        )
+
         document.addEventListener("visibilitychange", () => {
             if (document.hidden) this.clearKeyData()
         })
@@ -238,7 +260,7 @@ class InputSystem extends WorldSystem {
 
         if (targetScheme == null || targetInput == null) return 0
 
-        return targetInput.getValue(targetScheme.usesGamepad)
+        return targetInput.getValue(targetScheme.usesGamepad, targetScheme.usesTouchControls)
     }
 
     // Returns true if two modifier states are identical
@@ -276,6 +298,15 @@ class InputSystem extends WorldSystem {
 
         return button.pressed
     }
+
+    // Returns a number between -1 and 1 from the touch controls
+    public static getTouchControlsAxis(axisNumber: TouchControlsJoystick): number {
+        let value: number
+        if (axisNumber === TouchControlsJoystick.LEFT) value = -InputSystem.leftJoystick.y
+        else value = InputSystem.rightJoystick.x
+
+        return value
+    }
 }
 
 export default InputSystem
diff --git a/fission/src/systems/scene/Joystick.ts b/fission/src/systems/scene/Joystick.ts
index bf2a5a005..3dc6b059d 100644
--- a/fission/src/systems/scene/Joystick.ts
+++ b/fission/src/systems/scene/Joystick.ts
@@ -1,22 +1,23 @@
+import { MAX_JOYSTICK_RADIUS } from "@/ui/components/TouchControls"
+
 class Joystick {
     private baseElement: HTMLElement
     private stickElement: HTMLElement
-    private maxDistance: number
     private stickPosition: { x: number; y: number } = { x: 0, y: 0 }
-    private movementCallback: (x: number, y: number) => void
     private baseRect: DOMRect | null = null
     private activePointerId: number | null = null // Track the active pointer ID
 
-    constructor(
-        baseElement: HTMLElement,
-        stickElement: HTMLElement,
-        maxDistance: number,
-        movementCallback: (x: number, y: number) => void
-    ) {
+    public get x() {
+        return this.stickPosition.x / MAX_JOYSTICK_RADIUS
+    }
+
+    public get y() {
+        return this.stickPosition.y / MAX_JOYSTICK_RADIUS
+    }
+
+    constructor(baseElement: HTMLElement, stickElement: HTMLElement) {
         this.baseElement = baseElement
         this.stickElement = stickElement
-        this.maxDistance = maxDistance
-        this.movementCallback = movementCallback
 
         this.initialize()
     }
@@ -38,12 +39,11 @@ class Joystick {
         this.updateStickPosition(event.clientX, event.clientY)
     }
 
-    private onPointerUp() {
+    private onPointerUp(event: PointerEvent) {
+        if (this.activePointerId !== event.pointerId) return
         this.stickPosition = { x: 0, y: 0 }
         this.stickElement.style.transform = `translate(-50%, -50%)`
         this.baseRect = null
-
-        this.movementCallback(0, 0)
     }
 
     private updateStickPosition(clientX: number, clientY: number) {
@@ -58,17 +58,20 @@ class Joystick {
         const distance = Math.sqrt(x * x + y * y)
 
         // If the distance exceeds maxDistance, constrain it
-        if (distance > this.maxDistance) {
+        if (distance > MAX_JOYSTICK_RADIUS) {
             const angle = Math.atan2(y, x)
-            this.stickPosition.x = Math.cos(angle) * this.maxDistance
-            this.stickPosition.y = Math.sin(angle) * this.maxDistance
+            this.stickPosition.x = Math.cos(angle) * MAX_JOYSTICK_RADIUS
+            this.stickPosition.y = Math.sin(angle) * MAX_JOYSTICK_RADIUS
         } else {
             this.stickPosition.x = x
             this.stickPosition.y = y
         }
 
-        this.stickElement.style.transform = `translate(${this.stickPosition.x - this.maxDistance / 2}px, ${this.stickPosition.y - this.maxDistance / 2}px)`
-        this.movementCallback(this.stickPosition.x / this.maxDistance, this.stickPosition.y / this.maxDistance)
+        this.stickElement.style.transform = `translate(${this.stickPosition.x - MAX_JOYSTICK_RADIUS / 2}px, ${this.stickPosition.y - MAX_JOYSTICK_RADIUS / 2}px)`
+    }
+
+    public GetPosition(axis: "x" | "y") {
+        return this.stickPosition[axis] / MAX_JOYSTICK_RADIUS
     }
 }
 
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index d49bfdf8c..92b491705 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -15,7 +15,6 @@ import Jolt from "@barclah/jolt-physics"
 import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
 import PreferencesSystem from "../preferences/PreferencesSystem"
 import { CSM } from "three/examples/jsm/csm/CSM.js"
-import Joystick from "./Joystick"
 import { TouchControlsEvent, TouchControlsEventKeys } from "@/ui/components/TouchControls"
 
 const CLEAR_COLOR = 0x121212
@@ -131,21 +130,6 @@ class SceneRenderer extends WorldSystem {
         // Orbit controls
         this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement)
         this._orbitControls.update()
-
-        // Add a cube to the scene
-        const geometry1 = new THREE.BoxGeometry()
-        const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
-        const cube = new THREE.Mesh(geometry1, material1)
-        this._scene.add(cube)
-
-        // Initialize the joystick
-        const joystickBase = document.getElementById("joystick-base-left")!
-        const joystickStick = document.getElementById("joystick-stick-left")!
-        const joystick = new Joystick(joystickBase, joystickStick, 55, (x, y) => {
-            // Use the joystick input to control the cube
-            cube.position.x += x * 0.1
-            cube.position.y -= y * 0.1
-        })
     }
 
     public UpdateCanvasSize() {
diff --git a/fission/src/ui/components/TouchControls.tsx b/fission/src/ui/components/TouchControls.tsx
index 60f6ff065..36cc6c6af 100644
--- a/fission/src/ui/components/TouchControls.tsx
+++ b/fission/src/ui/components/TouchControls.tsx
@@ -34,16 +34,16 @@ function TouchControls() {
     const PlaceMirabufAssembly = useCallback(() => {
         if (inputRef.current) {
             const pressEvent = new KeyboardEvent("keydown", {
-                key: "Enter",
-                code: "Enter",
+                key: "ConfirmAssemblyButton",
+                code: "ConfirmAssemblyButton",
                 bubbles: true,
             })
             inputRef.current.dispatchEvent(pressEvent)
 
             setTimeout(() => {
                 const releaseEvent = new KeyboardEvent("keyup", {
-                    key: "Enter",
-                    code: "Enter",
+                    key: "ConfirmAssemblyButton",
+                    code: "ConfirmAssemblyButton",
                     bubbles: true,
                 })
                 inputRef.current?.dispatchEvent(releaseEvent)
@@ -67,7 +67,7 @@ function TouchControls() {
                 className={`fixed bottom-[5vh] left-[5vw] w-60 h-60 touch-none ${isJoystickVisible ? "" : "hidden"}`}
             >
                 <div
-                    id="joystick-base-circle"
+                    id="joystick-left-circle"
                     className="relative w-36 h-36 bg-gray-100 bg-blend-difference bg-opacity-30 rounded-full left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
                 >
                     <div
@@ -77,13 +77,16 @@ function TouchControls() {
                 </div>
             </div>
             <div
-                id="joystick-right"
-                className={`fixed bottom-5 right-5 w-36 h-36 touch-none ${isJoystickVisible ? "" : "hidden"}`}
+                id="joystick-base-right"
+                className={`fixed bottom-[5vh] right-[5vw] w-60 h-60 touch-none ${isJoystickVisible ? "" : "hidden"}`}
             >
-                <div id="joystick-base-right" className="relative w-full h-full bg-black bg-opacity-20 rounded-full">
+                <div
+                    id="joystick-right-circle"
+                    className="relative w-36 h-36 bg-gray-100 bg-blend-difference bg-opacity-30 rounded-full left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                >
                     <div
                         id="joystick-stick-right"
-                        className="absolute w-14 h-14 bg-black bg-opacity-50 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                        className="absolute w-14 h-14 bg-black bg-opacity-70 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                     ></div>
                 </div>
             </div>
@@ -93,6 +96,8 @@ function TouchControls() {
 
 export default TouchControls
 
+export const MAX_JOYSTICK_RADIUS: number = 55
+
 export const enum TouchControlsEventKeys {
     PLACE_BUTTON = "PlaceButtonEvent",
     JOYSTICK = "JoystickEvent",
@@ -117,3 +122,10 @@ export class TouchControlsEvent extends Event {
         window.removeEventListener(eventKey, func)
     }
 }
+
+/** Notates the left and right joysticks with their x and y axis */
+export const enum TouchControlsJoystick {
+    LEFT,
+    RIGHT,
+    NONE,
+}

From 969747698bb902feaeb7ff44691fb52416c4f04d Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Wed, 21 Aug 2024 15:51:27 -0700
Subject: [PATCH 06/13] Fixed post-merge conflicts

---
 .../src/ui/panels/mirabuf/ImportMirabufPanel.tsx  | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
index d5b68001b..3bf83e647 100644
--- a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
+++ b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
@@ -200,10 +200,7 @@ const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
 
             closePanel(panelId)
 
-            if (type == MiraType.ROBOT) {
-                setSelectedBrainIndexGlobal(SynthesisBrain.brainIndexMap.size)
-                openPanel("choose-scheme")
-            }
+            if (type == MiraType.ROBOT) setSelectedBrainIndexGlobal(SynthesisBrain.brainIndexMap.size)
         },
         [showTooltip, closePanel, panelId, openPanel]
     )
@@ -226,10 +223,7 @@ const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
 
             closePanel(panelId)
 
-            if (type == MiraType.ROBOT) {
-                setSelectedBrainIndexGlobal(SynthesisBrain.brainIndexMap.size)
-                openPanel("choose-scheme")
-            }
+            if (type == MiraType.ROBOT) setSelectedBrainIndexGlobal(SynthesisBrain.brainIndexMap.size)
         },
         [closePanel, panelId, openPanel]
     )
@@ -251,10 +245,7 @@ const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
 
             closePanel(panelId)
 
-            if (type == MiraType.ROBOT) {
-                setSelectedBrainIndexGlobal(SynthesisBrain.brainIndexMap.size)
-                openPanel("choose-scheme")
-            }
+            if (type == MiraType.ROBOT) setSelectedBrainIndexGlobal(SynthesisBrain.brainIndexMap.size)
         },
         [closePanel, panelId, openPanel]
     )

From 60b879331ba565ae040e606905ae80bc925bb764 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Wed, 21 Aug 2024 16:08:19 -0700
Subject: [PATCH 07/13] Fixing build errors

---
 fission/package.json                  | 1 +
 fission/src/ui/components/MainHUD.tsx | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/fission/package.json b/fission/package.json
index 3b5df05cd..89c4d8942 100644
--- a/fission/package.json
+++ b/fission/package.json
@@ -56,6 +56,7 @@
     "@types/three": "^0.160.0",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-react": "^4.0.3",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.14",
diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index f78bb3ba9..b37283c70 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -170,7 +170,9 @@ const MainHUD: React.FC = () => {
                             icon={SynthesisIcons.Gamepad}
                             onClick={() => new TouchControlsEvent(TouchControlsEventKeys.JOYSTICK)}
                         />
-                    ) : <></>}
+                    ) : (
+                        <></>
+                    )}
                 </Box>
                 {userInfo ? (
                     <MainHUDButton

From 11afada4ffe23e2620d5a022fb93a2773f2e0c4a Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Wed, 21 Aug 2024 16:44:28 -0700
Subject: [PATCH 08/13] Fixing unit tests

---
 fission/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fission/package.json b/fission/package.json
index 89c4d8942..0f97b9170 100644
--- a/fission/package.json
+++ b/fission/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "init": "(bun run assetpack && bun run playwright:install) || (npm run assetpack && npm run playwright:install)",
-    "dev": "vite --open",
+    "dev": "vite --open --host",
     "build": "tsc && vite build",
     "build:prod": "tsc && vite build --base=/fission/ --outDir dist/prod",
     "build:dev": "tsc && vite build --base=/fission-closed/ --outDir dist/dev",

From d10592c298bc584c23c9c57148630b24a6a45899 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Wed, 21 Aug 2024 17:25:21 -0700
Subject: [PATCH 09/13] Fixing unit tests

---
 fission/src/systems/input/InputSystem.ts | 18 ++++++++++--------
 fission/src/systems/scene/Joystick.ts    |  2 +-
 fission/vite.config.ts                   |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/fission/src/systems/input/InputSystem.ts b/fission/src/systems/input/InputSystem.ts
index 6c39f477f..282f5c02e 100644
--- a/fission/src/systems/input/InputSystem.ts
+++ b/fission/src/systems/input/InputSystem.ts
@@ -183,14 +183,16 @@ class InputSystem extends WorldSystem {
         this.gamepadDisconnected = this.gamepadDisconnected.bind(this)
         window.addEventListener("gamepaddisconnected", this.gamepadDisconnected)
 
-        InputSystem.leftJoystick = new Joystick(
-            document.getElementById("joystick-base-left")!,
-            document.getElementById("joystick-stick-left")!
-        )
-        InputSystem.rightJoystick = new Joystick(
-            document.getElementById("joystick-base-right")!,
-            document.getElementById("joystick-stick-right")!
-        )
+        window.onload = () => {
+            InputSystem.leftJoystick = new Joystick(
+                document.getElementById("joystick-base-left")!,
+                document.getElementById("joystick-stick-left")!
+            )
+            InputSystem.rightJoystick = new Joystick(
+                document.getElementById("joystick-base-right")!,
+                document.getElementById("joystick-stick-right")!
+            )
+        }
 
         // Initialize an event that's triggered when the user exits/enters the page
         document.addEventListener("visibilitychange", () => {
diff --git a/fission/src/systems/scene/Joystick.ts b/fission/src/systems/scene/Joystick.ts
index 3dc6b059d..c604da34c 100644
--- a/fission/src/systems/scene/Joystick.ts
+++ b/fission/src/systems/scene/Joystick.ts
@@ -41,7 +41,7 @@ class Joystick {
 
     private onPointerUp(event: PointerEvent) {
         if (this.activePointerId !== event.pointerId) return
-        this.stickPosition = { x: 0, y: 0 }
+    this.stickPosition = { x: 0, y: 0 }
         this.stickElement.style.transform = `translate(-50%, -50%)`
         this.baseRect = null
     }
diff --git a/fission/vite.config.ts b/fission/vite.config.ts
index ead5ab543..428d7d061 100644
--- a/fission/vite.config.ts
+++ b/fission/vite.config.ts
@@ -9,7 +9,7 @@ const serverPort = 3000
 const dockerServerPort = 80
 
 const useLocal = false
-const useSsl = true
+const useSsl = false
 
 const plugins = [
     react(), glsl({

From 609d178682c99a9c3fa9aea51b61d006abbc2666 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Thu, 22 Aug 2024 11:45:41 -0700
Subject: [PATCH 10/13] Fixed unit test issues and fixed joysticks

---
 fission/src/systems/input/DefaultInputs.ts    |  7 +-
 fission/src/systems/input/InputSystem.ts      | 15 ++--
 fission/src/systems/scene/Joystick.ts         |  2 +-
 fission/src/ui/components/TouchControls.tsx   | 10 ++-
 .../inputs/ConfigureSchemeInterface.tsx       | 11 +++
 .../interfaces/inputs/EditInputInterface.tsx  | 70 +++++++++++++++----
 fission/vite.config.ts                        |  2 +-
 7 files changed, 89 insertions(+), 28 deletions(-)

diff --git a/fission/src/systems/input/DefaultInputs.ts b/fission/src/systems/input/DefaultInputs.ts
index 4aec02a67..43e015fd0 100644
--- a/fission/src/systems/input/DefaultInputs.ts
+++ b/fission/src/systems/input/DefaultInputs.ts
@@ -332,7 +332,7 @@ class DefaultInputs {
                     undefined,
                     undefined,
                     undefined,
-                    TouchControlsJoystick.LEFT
+                    TouchControlsJoystick.LEFT_Y
                 ),
                 new AxisInput(
                     "arcadeTurn",
@@ -343,11 +343,8 @@ class DefaultInputs {
                     undefined,
                     undefined,
                     undefined,
-                    TouchControlsJoystick.RIGHT
+                    TouchControlsJoystick.RIGHT_X
                 ),
-
-                new ButtonInput("intake", "Semicolon"),
-                new ButtonInput("eject", "KeyL"),
             ],
         }
     }
diff --git a/fission/src/systems/input/InputSystem.ts b/fission/src/systems/input/InputSystem.ts
index 282f5c02e..e65665657 100644
--- a/fission/src/systems/input/InputSystem.ts
+++ b/fission/src/systems/input/InputSystem.ts
@@ -183,7 +183,7 @@ class InputSystem extends WorldSystem {
         this.gamepadDisconnected = this.gamepadDisconnected.bind(this)
         window.addEventListener("gamepaddisconnected", this.gamepadDisconnected)
 
-        window.onload = () => {
+        window.addEventListener("touchcontrolsloaded", () => {
             InputSystem.leftJoystick = new Joystick(
                 document.getElementById("joystick-base-left")!,
                 document.getElementById("joystick-stick-left")!
@@ -192,7 +192,7 @@ class InputSystem extends WorldSystem {
                 document.getElementById("joystick-base-right")!,
                 document.getElementById("joystick-stick-right")!
             )
-        }
+        })
 
         // Initialize an event that's triggered when the user exits/enters the page
         document.addEventListener("visibilitychange", () => {
@@ -345,12 +345,15 @@ class InputSystem extends WorldSystem {
     }
 
     // Returns a number between -1 and 1 from the touch controls
-    public static getTouchControlsAxis(axisNumber: TouchControlsJoystick): number {
+    public static getTouchControlsAxis(axisType: TouchControlsJoystick): number {
         let value: number
-        if (axisNumber === TouchControlsJoystick.LEFT) value = -InputSystem.leftJoystick.y
-        else value = InputSystem.rightJoystick.x
 
-        return value
+        if (axisType === TouchControlsJoystick.LEFT_Y) value = -InputSystem.leftJoystick.y
+        else if (axisType === TouchControlsJoystick.RIGHT_X) value = InputSystem.rightJoystick.x
+        else if (axisType === TouchControlsJoystick.RIGHT_Y) value = -InputSystem.rightJoystick.y
+        else value = InputSystem.leftJoystick.x
+
+        return value!
     }
 }
 
diff --git a/fission/src/systems/scene/Joystick.ts b/fission/src/systems/scene/Joystick.ts
index c604da34c..3dc6b059d 100644
--- a/fission/src/systems/scene/Joystick.ts
+++ b/fission/src/systems/scene/Joystick.ts
@@ -41,7 +41,7 @@ class Joystick {
 
     private onPointerUp(event: PointerEvent) {
         if (this.activePointerId !== event.pointerId) return
-    this.stickPosition = { x: 0, y: 0 }
+        this.stickPosition = { x: 0, y: 0 }
         this.stickElement.style.transform = `translate(-50%, -50%)`
         this.baseRect = null
     }
diff --git a/fission/src/ui/components/TouchControls.tsx b/fission/src/ui/components/TouchControls.tsx
index 36cc6c6af..efd3fbe53 100644
--- a/fission/src/ui/components/TouchControls.tsx
+++ b/fission/src/ui/components/TouchControls.tsx
@@ -24,6 +24,10 @@ function TouchControls() {
         TouchControlsEvent.Listen(TouchControlsEventKeys.PLACE_BUTTON, handlePlaceButtonEvent)
         TouchControlsEvent.Listen(TouchControlsEventKeys.JOYSTICK, handleJoystickEvent)
 
+        console.log("TouchControls loaded")
+        const event = new Event("touchcontrolsloaded")
+        window.dispatchEvent(event)
+
         return () => {
             TouchControlsEvent.RemoveListener(TouchControlsEventKeys.PLACE_BUTTON, handlePlaceButtonEvent)
             TouchControlsEvent.RemoveListener(TouchControlsEventKeys.JOYSTICK, handleJoystickEvent)
@@ -125,7 +129,9 @@ export class TouchControlsEvent extends Event {
 
 /** Notates the left and right joysticks with their x and y axis */
 export const enum TouchControlsJoystick {
-    LEFT,
-    RIGHT,
+    LEFT_X,
+    LEFT_Y,
+    RIGHT_X,
+    RIGHT_Y,
     NONE,
 }
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
index 220191cab..75885c9d4 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
@@ -12,6 +12,7 @@ interface ConfigSchemeProps {
 /** Interface to configure a specific input scheme */
 const ConfigureSchemeInterface: React.FC<ConfigSchemeProps> = ({ selectedScheme }) => {
     const [useGamepad, setUseGamepad] = useState<boolean>(selectedScheme.usesGamepad)
+    const [useTouchControls, setUseTouchControls] = useState<boolean>(selectedScheme.usesTouchControls)
     const scrollRef = useRef<HTMLDivElement>(null)
 
     const saveEvent = useCallback(() => {
@@ -58,6 +59,15 @@ const ConfigureSchemeInterface: React.FC<ConfigSchemeProps> = ({ selectedScheme
                 }}
                 tooltipText="Supported controllers: Xbox one, Xbox 360."
             />
+            <Checkbox
+                label="Use Touch Controls"
+                defaultState={selectedScheme.usesTouchControls}
+                onClick={val => {
+                    setUseTouchControls(val)
+                    selectedScheme.usesTouchControls = val
+                }}
+                tooltipText="Enable on-screen touch controls (only for mobile devices)."
+            />
             <SectionDivider />
 
             {/* Scroll view for inputs */}
@@ -68,6 +78,7 @@ const ConfigureSchemeInterface: React.FC<ConfigSchemeProps> = ({ selectedScheme
                             key={i.inputName}
                             input={i}
                             useGamepad={useGamepad}
+                            useTouchControls={useTouchControls}
                             onInputChanged={() => {
                                 selectedScheme.customized = true
                             }}
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx
index 33ef12b7a..19e3dea7f 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx
@@ -87,10 +87,11 @@ const transformKeyName = (keyCode: string, keyModifiers: ModifierState) => {
 interface EditInputProps {
     input: Input
     useGamepad: boolean
+    useTouchControls: boolean
     onInputChanged: () => void
 }
 
-const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, onInputChanged }) => {
+const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, useTouchControls, onInputChanged }) => {
     const [selectedInput, setSelectedInput] = useState<string>("")
     const [chosenGamepadAxis, setChosenGamepadAxis] = useState<number>(-1)
     const [chosenKey, setChosenKey] = useState<string>("")
@@ -305,18 +306,37 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, onInp
         )
     }
 
+    // const TouchControlsAxisSelection = () => {
+    //     if (!(input instanceof AxisInput)) throw new Error("Input not axis type")
+
+    //     return (
+    //         <>
+    //             <Box
+    //                 display="flex"
+    //                 flexDirection={"row"}
+    //                 gap="10px"
+    //                 alignItems={"center"}
+    //                 justifyContent={"space-between"}
+    //                 width={"98%"}
+    //             >
+    //                 <Label>{toTitleCase(input.inputName)}</Label>
+    //                 <Dropdown
+    //                     key={input.inputName}
+    //                     defaultValue={touchControlsAxes[input.touchControlsAxisNumber + 1]}
+    //                     options={touchControlsAxes}
+    //                     onSelect={value => {
+    //                         setSelectedInput(input.inputName)
+    //                         setChosenTouchControlsAxis(touchControlsAxes.indexOf(value))
+    //                     }}
+    //                 />
+    //             </Box>
+    //         </>
+    //     )
+    // }
+
     /** Show the correct selection mode based on input type and how it's configured */
     const inputConfig = () => {
-        if (!useGamepad) {
-            // Keyboard button
-            if (input instanceof ButtonInput) {
-                return KeyboardButtonSelection()
-            }
-            // Keyboard Axis
-            else if (input instanceof AxisInput) {
-                return KeyboardAxisSelection()
-            }
-        } else {
+        if (useGamepad) {
             // Joystick Button
             if (input instanceof ButtonInput) {
                 return JoystickButtonSelection()
@@ -352,6 +372,20 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, onInp
                     </div>
                 )
             }
+        } else if (useTouchControls) {
+            // here
+            if (input instanceof AxisInput) {
+                return <></>
+            }
+        } else {
+            // Keyboard button
+            if (input instanceof ButtonInput) {
+                return KeyboardButtonSelection()
+            }
+            // Keyboard Axis
+            else if (input instanceof AxisInput) {
+                return KeyboardAxisSelection()
+            }
         }
     }
 
@@ -375,7 +409,7 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, onInp
     /** Input detection for setting inputs */
     useEffect(() => {
         // // Assign keyboard inputs when a key is pressed
-        if (!useGamepad && selectedInput && chosenKey) {
+        if (!useGamepad && !useTouchControls && selectedInput && chosenKey) {
             if (selectedInput.startsWith("pos")) {
                 if (!(input instanceof AxisInput)) return
                 input.posKeyCode = chosenKey
@@ -429,7 +463,17 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, onInp
             setChosenGamepadAxis(-1)
             setSelectedInput("")
         }
-    }, [chosenKey, chosenButton, chosenGamepadAxis, input, modifierState, onInputChanged, selectedInput, useGamepad])
+    }, [
+        chosenKey,
+        chosenButton,
+        chosenGamepadAxis,
+        input,
+        modifierState,
+        onInputChanged,
+        selectedInput,
+        useGamepad,
+        useTouchControls,
+    ])
 
     return (
         <Box
diff --git a/fission/vite.config.ts b/fission/vite.config.ts
index 428d7d061..7cb095d68 100644
--- a/fission/vite.config.ts
+++ b/fission/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'vitest/config'
 import * as path from 'path'
 import react from '@vitejs/plugin-react-swc'
 import basicSsl from '@vitejs/plugin-basic-ssl'
-import glsl from 'vite-plugin-glsl';
+import glsl from 'vite-plugin-glsl'
 
 const basePath = "/fission/"
 const serverPort = 3000

From 754dba33c85990b9ae2eb538b11f3bc86a575b24 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Fri, 23 Aug 2024 14:43:41 -0700
Subject: [PATCH 11/13] Added configuration abilities for touch controls and
 axis selection Changes that need to be made: Only one of the usegamepad and
 usetouchcontrols checkboxes can be selected at a time When creating a new
 scheme you may click an add joint button to add another joint configuration.

---
 fission/src/systems/input/DefaultInputs.ts    | 26 +++---
 fission/src/systems/input/InputSystem.ts      | 16 ++--
 fission/src/ui/components/Checkbox.tsx        |  3 +-
 fission/src/ui/components/TouchControls.tsx   |  8 +-
 .../inputs/ConfigureSchemeInterface.tsx       |  1 +
 .../interfaces/inputs/EditInputInterface.tsx  | 82 ++++++++++++-------
 6 files changed, 81 insertions(+), 55 deletions(-)

diff --git a/fission/src/systems/input/DefaultInputs.ts b/fission/src/systems/input/DefaultInputs.ts
index 43e015fd0..1122c7372 100644
--- a/fission/src/systems/input/DefaultInputs.ts
+++ b/fission/src/systems/input/DefaultInputs.ts
@@ -1,4 +1,4 @@
-import { TouchControlsJoystick } from "@/ui/components/TouchControls"
+import { TouchControlsAxes } from "@/ui/components/TouchControls"
 import { InputScheme } from "./InputSchemeManager"
 import { AxisInput, ButtonInput, EmptyModifierState } from "./InputSystem"
 
@@ -27,7 +27,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: false,
@@ -45,7 +45,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: false,
@@ -63,7 +63,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: false,
@@ -81,7 +81,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: false,
@@ -99,7 +99,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: false,
@@ -140,7 +140,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: true,
@@ -158,7 +158,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: true,
@@ -176,7 +176,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: true,
@@ -194,7 +194,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: true,
@@ -212,7 +212,7 @@ class DefaultInputs {
                     false,
                     -1,
                     -1,
-                    TouchControlsJoystick.NONE,
+                    TouchControlsAxes.NONE,
                     EmptyModifierState,
                     {
                         ctrl: true,
@@ -332,7 +332,7 @@ class DefaultInputs {
                     undefined,
                     undefined,
                     undefined,
-                    TouchControlsJoystick.LEFT_Y
+                    TouchControlsAxes.LEFT_Y
                 ),
                 new AxisInput(
                     "arcadeTurn",
@@ -343,7 +343,7 @@ class DefaultInputs {
                     undefined,
                     undefined,
                     undefined,
-                    TouchControlsJoystick.RIGHT_X
+                    TouchControlsAxes.RIGHT_X
                 ),
             ],
         }
diff --git a/fission/src/systems/input/InputSystem.ts b/fission/src/systems/input/InputSystem.ts
index e65665657..b3cd793d8 100644
--- a/fission/src/systems/input/InputSystem.ts
+++ b/fission/src/systems/input/InputSystem.ts
@@ -1,4 +1,4 @@
-import { TouchControlsJoystick } from "@/ui/components/TouchControls"
+import { TouchControlsAxes } from "@/ui/components/TouchControls"
 import Joystick from "../scene/Joystick"
 import WorldSystem from "../WorldSystem"
 import { InputScheme } from "./InputSchemeManager"
@@ -69,7 +69,7 @@ class AxisInput extends Input {
     public negKeyModifiers: ModifierState
 
     public gamepadAxisNumber: number
-    public touchControlAxis: TouchControlsJoystick
+    public touchControlAxis: TouchControlsAxes
     public joystickInverted: boolean
     public useGamepadButtons: boolean
     public posGamepadButton: number
@@ -98,7 +98,7 @@ class AxisInput extends Input {
         useGamepadButtons?: boolean,
         posGamepadButton?: number,
         negGamepadButton?: number,
-        touchControlAxis?: TouchControlsJoystick,
+        touchControlAxis?: TouchControlsAxes,
         posKeyModifiers?: ModifierState,
         negKeyModifiers?: ModifierState
     ) {
@@ -110,7 +110,7 @@ class AxisInput extends Input {
         this.negKeyModifiers = negKeyModifiers ?? EmptyModifierState
 
         this.gamepadAxisNumber = gamepadAxisNumber ?? -1
-        this.touchControlAxis = touchControlAxis ?? TouchControlsJoystick.NONE
+        this.touchControlAxis = touchControlAxis ?? TouchControlsAxes.NONE
         this.joystickInverted = joystickInverted ?? false
 
         this.useGamepadButtons = useGamepadButtons ?? false
@@ -345,12 +345,12 @@ class InputSystem extends WorldSystem {
     }
 
     // Returns a number between -1 and 1 from the touch controls
-    public static getTouchControlsAxis(axisType: TouchControlsJoystick): number {
+    public static getTouchControlsAxis(axisType: TouchControlsAxes): number {
         let value: number
 
-        if (axisType === TouchControlsJoystick.LEFT_Y) value = -InputSystem.leftJoystick.y
-        else if (axisType === TouchControlsJoystick.RIGHT_X) value = InputSystem.rightJoystick.x
-        else if (axisType === TouchControlsJoystick.RIGHT_Y) value = -InputSystem.rightJoystick.y
+        if (axisType === TouchControlsAxes.LEFT_Y) value = -InputSystem.leftJoystick.y
+        else if (axisType === TouchControlsAxes.RIGHT_X) value = InputSystem.rightJoystick.x
+        else if (axisType === TouchControlsAxes.RIGHT_Y) value = -InputSystem.rightJoystick.y
         else value = InputSystem.leftJoystick.x
 
         return value!
diff --git a/fission/src/ui/components/Checkbox.tsx b/fission/src/ui/components/Checkbox.tsx
index 82dd9be3c..09161bdaf 100644
--- a/fission/src/ui/components/Checkbox.tsx
+++ b/fission/src/ui/components/Checkbox.tsx
@@ -36,7 +36,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
     hideLabel,
     onClick,
     tooltipText,
-}) => {
+}: CheckboxProps): JSX.Element => {
     const [state] = useState(defaultState)
     return (
         <Box
@@ -72,6 +72,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
                     },
                 }}
                 defaultChecked={stateOverride != null ? undefined : state}
+                // checked={state}
                 id="checkbox-switch"
             />
         </Box>
diff --git a/fission/src/ui/components/TouchControls.tsx b/fission/src/ui/components/TouchControls.tsx
index efd3fbe53..84bba657b 100644
--- a/fission/src/ui/components/TouchControls.tsx
+++ b/fission/src/ui/components/TouchControls.tsx
@@ -24,9 +24,7 @@ function TouchControls() {
         TouchControlsEvent.Listen(TouchControlsEventKeys.PLACE_BUTTON, handlePlaceButtonEvent)
         TouchControlsEvent.Listen(TouchControlsEventKeys.JOYSTICK, handleJoystickEvent)
 
-        console.log("TouchControls loaded")
-        const event = new Event("touchcontrolsloaded")
-        window.dispatchEvent(event)
+        window.dispatchEvent(new Event("touchcontrolsloaded"))
 
         return () => {
             TouchControlsEvent.RemoveListener(TouchControlsEventKeys.PLACE_BUTTON, handlePlaceButtonEvent)
@@ -128,10 +126,10 @@ export class TouchControlsEvent extends Event {
 }
 
 /** Notates the left and right joysticks with their x and y axis */
-export const enum TouchControlsJoystick {
+export const enum TouchControlsAxes {
+    NONE,
     LEFT_X,
     LEFT_Y,
     RIGHT_X,
     RIGHT_Y,
-    NONE,
 }
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
index 75885c9d4..b113a0f28 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
@@ -4,6 +4,7 @@ import EditInputInterface from "./EditInputInterface"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { ConfigurationSavedEvent } from "../../ConfigurePanel"
 import { SectionDivider } from "@/ui/components/StyledComponents"
+import { MainHUD_AddToast } from "@/ui/components/MainHUD"
 
 interface ConfigSchemeProps {
     selectedScheme: InputScheme
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx
index 19e3dea7f..790048cb5 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx
@@ -55,6 +55,7 @@ const gamepadButtons: string[] = [
 ]
 
 const gamepadAxes: string[] = ["N/A", "Left X", "Left Y", "Right X", "Right Y"]
+const touchControlsAxes: string[] = ["N/A", "Left X", "Left Y", "Right X", "Right Y"]
 
 // Converts a key code to displayable character (ex: KeyA -> "A")
 const keyCodeToCharacter = (code: string) => {
@@ -94,6 +95,7 @@ interface EditInputProps {
 const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, useTouchControls, onInputChanged }) => {
     const [selectedInput, setSelectedInput] = useState<string>("")
     const [chosenGamepadAxis, setChosenGamepadAxis] = useState<number>(-1)
+    const [chosenTouchControlsAxis, setChosenTouchControlsAxis] = useState<number>(-1)
     const [chosenKey, setChosenKey] = useState<string>("")
     const [modifierState, setModifierState] = useState<ModifierState>(EmptyModifierState)
     const [chosenButton, setChosenButton] = useState<number>(-1)
@@ -306,33 +308,33 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, useTo
         )
     }
 
-    // const TouchControlsAxisSelection = () => {
-    //     if (!(input instanceof AxisInput)) throw new Error("Input not axis type")
-
-    //     return (
-    //         <>
-    //             <Box
-    //                 display="flex"
-    //                 flexDirection={"row"}
-    //                 gap="10px"
-    //                 alignItems={"center"}
-    //                 justifyContent={"space-between"}
-    //                 width={"98%"}
-    //             >
-    //                 <Label>{toTitleCase(input.inputName)}</Label>
-    //                 <Dropdown
-    //                     key={input.inputName}
-    //                     defaultValue={touchControlsAxes[input.touchControlsAxisNumber + 1]}
-    //                     options={touchControlsAxes}
-    //                     onSelect={value => {
-    //                         setSelectedInput(input.inputName)
-    //                         setChosenTouchControlsAxis(touchControlsAxes.indexOf(value))
-    //                     }}
-    //                 />
-    //             </Box>
-    //         </>
-    //     )
-    // }
+    const TouchControlsAxisSelection = () => {
+        if (!(input instanceof AxisInput)) throw new Error("Input not axis type")
+
+        return (
+            <>
+                <Box
+                    display="flex"
+                    flexDirection={"row"}
+                    gap="10px"
+                    alignItems={"center"}
+                    justifyContent={"space-between"}
+                    width={"98%"}
+                >
+                    <Label>{toTitleCase(input.inputName)}</Label>
+                    <Dropdown
+                        key={input.inputName}
+                        defaultValue={touchControlsAxes[input.touchControlAxis]}
+                        options={touchControlsAxes}
+                        onSelect={value => {
+                            setSelectedInput(input.inputName)
+                            setChosenTouchControlsAxis(touchControlsAxes.indexOf(value))
+                        }}
+                    />
+                </Box>
+            </>
+        )
+    }
 
     /** Show the correct selection mode based on input type and how it's configured */
     const inputConfig = () => {
@@ -375,7 +377,20 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, useTo
         } else if (useTouchControls) {
             // here
             if (input instanceof AxisInput) {
-                return <></>
+                return (
+                    <div key={input.inputName}>
+                        {TouchControlsAxisSelection()}
+                        {/* // Button to invert the joystick axis */}
+                        <Checkbox
+                            label="Invert Joystick"
+                            defaultState={input.joystickInverted}
+                            onClick={val => {
+                                input.joystickInverted = val
+                            }}
+                        />
+                        <SectionDivider />
+                    </div>
+                )
             }
         } else {
             // Keyboard button
@@ -463,6 +478,16 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, useTo
             setChosenGamepadAxis(-1)
             setSelectedInput("")
         }
+
+        if (useTouchControls && selectedInput && chosenTouchControlsAxis != -1) {
+            if (!(input instanceof AxisInput)) return
+
+            input.touchControlAxis = chosenTouchControlsAxis
+
+            onInputChanged()
+            setChosenTouchControlsAxis(-1)
+            setSelectedInput("")
+        }
     }, [
         chosenKey,
         chosenButton,
@@ -473,6 +498,7 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, useTo
         selectedInput,
         useGamepad,
         useTouchControls,
+        chosenTouchControlsAxis,
     ])
 
     return (

From 5887044a48fff616823f5169e987cfcbea171358 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Fri, 23 Aug 2024 14:54:48 -0700
Subject: [PATCH 12/13] Fixed build error

---
 .../interfaces/inputs/ConfigureSchemeInterface.tsx               | 1 -
 1 file changed, 1 deletion(-)

diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
index b113a0f28..75885c9d4 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
@@ -4,7 +4,6 @@ import EditInputInterface from "./EditInputInterface"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { ConfigurationSavedEvent } from "../../ConfigurePanel"
 import { SectionDivider } from "@/ui/components/StyledComponents"
-import { MainHUD_AddToast } from "@/ui/components/MainHUD"
 
 interface ConfigSchemeProps {
     selectedScheme: InputScheme

From e6bb4f93212c1eac127615c82b42fc6158c9b1df Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Fri, 23 Aug 2024 15:05:53 -0700
Subject: [PATCH 13/13] Added fixes and formatted the place button

---
 fission/src/systems/input/InputSystem.ts    | 1 -
 fission/src/ui/components/TouchControls.tsx | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/fission/src/systems/input/InputSystem.ts b/fission/src/systems/input/InputSystem.ts
index b3cd793d8..9cddbf2fe 100644
--- a/fission/src/systems/input/InputSystem.ts
+++ b/fission/src/systems/input/InputSystem.ts
@@ -236,7 +236,6 @@ class InputSystem extends WorldSystem {
 
     /** Called when any key is first pressed */
     private handleKeyDown(event: KeyboardEvent) {
-        console.log(event.code)
         InputSystem._keysPressed[event.code] = true
     }
 
diff --git a/fission/src/ui/components/TouchControls.tsx b/fission/src/ui/components/TouchControls.tsx
index 84bba657b..a6fb6e1cc 100644
--- a/fission/src/ui/components/TouchControls.tsx
+++ b/fission/src/ui/components/TouchControls.tsx
@@ -58,10 +58,10 @@ function TouchControls() {
             <input ref={inputRef} className="hidden" />
             <div
                 id="place-assembly-button"
-                className={`absolute top-5 right-5 w-36 h-36 touch-none bg-gray-100 bg-opacity-20 rounded-full ${isPlaceButtonVisible ? "" : "hidden"}`}
+                className={`absolute top-5 right-5 w-[8vw] min-w-20 min-h-20 aspect-square touch-none bg-gray-100 bg-opacity-20 rounded-md flex justify-center items-center ${isPlaceButtonVisible ? "" : "hidden"}`}
                 onClick={PlaceMirabufAssembly}
             >
-                <Label></Label>
+                <Label className="px-2 py-2 text-main-text text-center">Place Assembly</Label>
             </div>
 
             <div