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 = ({ hideLabel, onClick, tooltipText, -}) => { +}: CheckboxProps): JSX.Element => { const [state] = useState(defaultState) return ( = ({ }, }} defaultChecked={stateOverride != null ? undefined : state} + // checked={state} id="checkbox-switch" /> 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 = ({ input, useGamepad, useTouchControls, onInputChanged }) => { const [selectedInput, setSelectedInput] = useState("") const [chosenGamepadAxis, setChosenGamepadAxis] = useState(-1) + const [chosenTouchControlsAxis, setChosenTouchControlsAxis] = useState(-1) const [chosenKey, setChosenKey] = useState("") const [modifierState, setModifierState] = useState(EmptyModifierState) const [chosenButton, setChosenButton] = useState(-1) @@ -306,33 +308,33 @@ const EditInputInterface: React.FC = ({ input, useGamepad, useTo ) } - // const TouchControlsAxisSelection = () => { - // if (!(input instanceof AxisInput)) throw new Error("Input not axis type") - - // return ( - // <> - // - // - // { - // setSelectedInput(input.inputName) - // setChosenTouchControlsAxis(touchControlsAxes.indexOf(value)) - // }} - // /> - // - // - // ) - // } + const TouchControlsAxisSelection = () => { + if (!(input instanceof AxisInput)) throw new Error("Input not axis type") + + return ( + <> + + + { + setSelectedInput(input.inputName) + setChosenTouchControlsAxis(touchControlsAxes.indexOf(value)) + }} + /> + + + ) + } /** Show the correct selection mode based on input type and how it's configured */ const inputConfig = () => { @@ -375,7 +377,20 @@ const EditInputInterface: React.FC = ({ input, useGamepad, useTo } else if (useTouchControls) { // here if (input instanceof AxisInput) { - return <> + return ( +
+ {TouchControlsAxisSelection()} + {/* // Button to invert the joystick axis */} + { + input.joystickInverted = val + }} + /> + +
+ ) } } else { // Keyboard button @@ -463,6 +478,16 @@ const EditInputInterface: React.FC = ({ 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 = ({ input, useGamepad, useTo selectedInput, useGamepad, useTouchControls, + chosenTouchControlsAxis, ]) return (