From 609d178682c99a9c3fa9aea51b61d006abbc2666 Mon Sep 17 00:00:00 2001 From: Dhruv Arora Date: Thu, 22 Aug 2024 11:45:41 -0700 Subject: [PATCH] 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 = ({ selectedScheme }) => { const [useGamepad, setUseGamepad] = useState(selectedScheme.usesGamepad) + const [useTouchControls, setUseTouchControls] = useState(selectedScheme.usesTouchControls) const scrollRef = useRef(null) const saveEvent = useCallback(() => { @@ -58,6 +59,15 @@ const ConfigureSchemeInterface: React.FC = ({ selectedScheme }} tooltipText="Supported controllers: Xbox one, Xbox 360." /> + { + setUseTouchControls(val) + selectedScheme.usesTouchControls = val + }} + tooltipText="Enable on-screen touch controls (only for mobile devices)." + /> {/* Scroll view for inputs */} @@ -68,6 +78,7 @@ const ConfigureSchemeInterface: React.FC = ({ 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 = ({ input, useGamepad, onInputChanged }) => { +const EditInputInterface: React.FC = ({ input, useGamepad, useTouchControls, onInputChanged }) => { const [selectedInput, setSelectedInput] = useState("") const [chosenGamepadAxis, setChosenGamepadAxis] = useState(-1) const [chosenKey, setChosenKey] = useState("") @@ -305,18 +306,37 @@ const EditInputInterface: React.FC = ({ input, useGamepad, onInp ) } + // 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 = () => { - 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 = ({ input, useGamepad, onInp ) } + } 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 = ({ 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 = ({ input, useGamepad, onInp setChosenGamepadAxis(-1) setSelectedInput("") } - }, [chosenKey, chosenButton, chosenGamepadAxis, input, modifierState, onInputChanged, selectedInput, useGamepad]) + }, [ + chosenKey, + chosenButton, + chosenGamepadAxis, + input, + modifierState, + onInputChanged, + selectedInput, + useGamepad, + useTouchControls, + ]) return (