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.
Autodesk · Aug 23, 2024 · 754dba3 · 754dba3
1 parent 98379a7
commit 754dba3
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/.../src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx b/.../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
@@ -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 (