From 164a01f569e64a8ed53ad4090d236d6034f5f380 Mon Sep 17 00:00:00 2001 From: neolao Date: Mon, 29 Jan 2024 00:21:16 +0100 Subject: [PATCH] change input --- dev-env/quick-versus.json | 49 +++++++-------- index.js | 1 + preload.js | 3 +- src/category/useCategoryIndex.hook.js | 9 +-- src/character/useCharacterAILevel.hook.js | 9 +-- src/character/useCharacterColorIndex.hook.js | 9 +-- src/character/useCharacterIndex.hook.js | 17 ++--- src/character/useCharacterStyleIndex.hook.js | 9 +-- src/input/event.js | 24 +++++++ src/input/useInput.hook.js | 62 +++++++++---------- ...racterCancellableByPlayerOne.presenter.jsx | 7 +-- ...electingCharacterByPlayerOne.presenter.jsx | 9 +-- ...ingCharacterColorByPlayerOne.presenter.jsx | 15 +++-- ...ingCharacterStyleByPlayerOne.presenter.jsx | 15 +++-- src/side/leftSide.presenter.jsx | 17 ++++- ...racterCancellableByPlayerOne.presenter.jsx | 7 +-- ...racterCancellableByPlayerTwo.presenter.jsx | 7 +-- ...gCharacterAILevelByPlayerOne.presenter.jsx | 11 ++-- ...electingCharacterByPlayerOne.presenter.jsx | 11 ++-- ...electingCharacterByPlayerTwo.presenter.jsx | 5 +- ...ingCharacterColorByPlayerOne.presenter.jsx | 11 ++-- ...ingCharacterColorByPlayerTwo.presenter.jsx | 11 ++-- ...ingCharacterStyleByPlayerOne.presenter.jsx | 11 ++-- ...ingCharacterStyleByPlayerTwo.presenter.jsx | 11 ++-- .../selectingStageByPlayers.presenter.jsx | 25 ++++---- 25 files changed, 197 insertions(+), 168 deletions(-) create mode 100644 src/input/event.js diff --git a/dev-env/quick-versus.json b/dev-env/quick-versus.json index 6451b46..3a7593f 100644 --- a/dev-env/quick-versus.json +++ b/dev-env/quick-versus.json @@ -1,6 +1,7 @@ { "frame": true, "characterColumns": 3, + "ikemenExecutablePath": "mugen.exe", "sound": { "volume": 30, "background": "sound/title.mp3", @@ -235,14 +236,13 @@ "right": "ArrowRight", "up": "ArrowUp", "down": "ArrowDown", - "a": "w", - "b": "x", - "c": "c", - "x": "q", - "y": "s", - "z": "d", - "escape": "Escape", - "enter": "Enter" + "a": "x", + "b": "w", + "x": "s", + "y": "q", + "l1": "d", + "r1": "c", + "quit": "i" }, "gamepad": { "left": "A17", @@ -251,12 +251,11 @@ "down": "A20", "a": "A0", "b": "A1", - "c": "A7", - "x": "A2", - "y": "A3", - "z": "A6", - "escape": "A8", - "enter": "A9" + "x": "A7", + "y": "A2", + "l1": "A3", + "r1": "A6", + "quit": "A9" } }, "playerTwo": { @@ -266,13 +265,12 @@ "up": "o", "down": "l", "a": "g", - "b": "h", - "c": "j", + "b": "f", "x": "t", - "y": "y", - "z": "u", - "escape": "i", - "enter": "p" + "y": "r", + "l1": "y", + "r1": "h", + "quit": "o" }, "gamepad": { "left": "B17", @@ -281,12 +279,11 @@ "down": "B20", "a": "B0", "b": "B1", - "c": "B7", - "x": "B2", - "y": "B3", - "z": "B6", - "escape": "B8", - "enter": "B9" + "x": "B7", + "y": "B2", + "l1": "B3", + "r1": "B6", + "quit": "B9" } } } diff --git a/index.js b/index.js index b1e86e2..caab3b7 100644 --- a/index.js +++ b/index.js @@ -142,5 +142,6 @@ async function start() { const window = createWindow(); ipcMain.handle("minimize", () => window.minimize()); ipcMain.handle("restore", () => window.restore()); + ipcMain.handle("quit", () => window.close()); } start(); diff --git a/preload.js b/preload.js index d8e3118..520fc13 100644 --- a/preload.js +++ b/preload.js @@ -9,5 +9,6 @@ contextBridge.exposeInMainWorld("mainAPI", { configYaml: (filePath) => ipcRenderer.sendSync("configYaml", filePath), getCurrentDirectory: () => { return ipcRenderer.sendSync("getCurrentDirectory"); }, minimize: () => ipcRenderer.invoke("minimize"), - restore: () => ipcRenderer.invoke("restore") + restore: () => ipcRenderer.invoke("restore"), + quit: () => ipcRenderer.invoke("quit") }); diff --git a/src/category/useCategoryIndex.hook.js b/src/category/useCategoryIndex.hook.js index dc36508..d9e201b 100644 --- a/src/category/useCategoryIndex.hook.js +++ b/src/category/useCategoryIndex.hook.js @@ -1,4 +1,5 @@ import { useState, useEffect } from "react"; +import { L1, R1 } from "../input/event"; export default function useCategoryIndex(categories, input, initialIndex = 0) { const [selectedIndex, selectIndex] = useState(initialIndex); @@ -15,12 +16,12 @@ export default function useCategoryIndex(categories, input, initialIndex = 0) { selectIndex((selectedIndex + 1) % categories.length); }; - input.addEventListener("x", decreaseIndex); - input.addEventListener("y", increaseIndex); + input.addEventListener(L1, decreaseIndex); + input.addEventListener(R1, increaseIndex); return () => { - input.removeEventListener("x", decreaseIndex); - input.removeEventListener("y", increaseIndex); + input.removeEventListener(L1, decreaseIndex); + input.removeEventListener(R1, increaseIndex); }; }, [input, categories, selectedIndex]); diff --git a/src/character/useCharacterAILevel.hook.js b/src/character/useCharacterAILevel.hook.js index 13eb30d..dc5b543 100644 --- a/src/character/useCharacterAILevel.hook.js +++ b/src/character/useCharacterAILevel.hook.js @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import useMoveCursorSound from "../configuration/useMoveCursorSound.hook"; +import { DOWN, UP } from "../input/event"; export default function useCharacterAILevel(input, initialLevel = 0) { const moveCursorSound = useMoveCursorSound(); @@ -19,12 +20,12 @@ export default function useCharacterAILevel(input, initialLevel = 0) { moveCursorSound.play(); }; - input.addEventListener("up", decreaseLevel); - input.addEventListener("down", increaseLevel); + input.addEventListener(UP, decreaseLevel); + input.addEventListener(DOWN, increaseLevel); return () => { - input.removeEventListener("up", decreaseLevel); - input.removeEventListener("down", increaseLevel); + input.removeEventListener(UP, decreaseLevel); + input.removeEventListener(DOWN, increaseLevel); }; }, [input, level, moveCursorSound]); diff --git a/src/character/useCharacterColorIndex.hook.js b/src/character/useCharacterColorIndex.hook.js index b0b52c8..b0446c6 100644 --- a/src/character/useCharacterColorIndex.hook.js +++ b/src/character/useCharacterColorIndex.hook.js @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import useMoveCursorSound from "../configuration/useMoveCursorSound.hook"; +import { DOWN, UP } from "../input/event"; export default function useCharacterColorIndex(input, total, initialIndex = 1) { const moveCursorSound = useMoveCursorSound(); @@ -24,12 +25,12 @@ export default function useCharacterColorIndex(input, total, initialIndex = 1) { moveCursorSound.play(); }; - input.addEventListener("up", decreaseIndex); - input.addEventListener("down", increaseIndex); + input.addEventListener(UP, decreaseIndex); + input.addEventListener(DOWN, increaseIndex); return () => { - input.removeEventListener("up", decreaseIndex); - input.removeEventListener("down", increaseIndex); + input.removeEventListener(UP, decreaseIndex); + input.removeEventListener(DOWN, increaseIndex); }; }, [input, total, currentIndex, moveCursorSound]); diff --git a/src/character/useCharacterIndex.hook.js b/src/character/useCharacterIndex.hook.js index c3679c0..41da7e7 100644 --- a/src/character/useCharacterIndex.hook.js +++ b/src/character/useCharacterIndex.hook.js @@ -2,6 +2,7 @@ import { useState, useEffect } from "react"; import getCharactersMatrix from "./getCharactersMatrix"; import useCharacterColumns from "../configuration/useCharacterColumns.hook"; import useMoveCursorSound from "../configuration/useMoveCursorSound.hook"; +import { DOWN, UP, LEFT, RIGHT } from "../input/event"; export default function useCharacterIndex(characters, input, initialIndex = 0) { const moveCursorSound = useMoveCursorSound(); @@ -79,16 +80,16 @@ export default function useCharacterIndex(characters, input, initialIndex = 0) { moveCursorSound.play(); }; - input.addEventListener("left", decreaseColumnIndex); - input.addEventListener("right", increaseColumnIndex); - input.addEventListener("up", decreaseRowIndex); - input.addEventListener("down", increaseRowIndex); + input.addEventListener(LEFT, decreaseColumnIndex); + input.addEventListener(RIGHT, increaseColumnIndex); + input.addEventListener(UP, decreaseRowIndex); + input.addEventListener(DOWN, increaseRowIndex); return () => { - input.removeEventListener("left", decreaseColumnIndex); - input.removeEventListener("right", increaseColumnIndex); - input.removeEventListener("up", decreaseRowIndex); - input.removeEventListener("down", increaseRowIndex); + input.removeEventListener(LEFT, decreaseColumnIndex); + input.removeEventListener(RIGHT, increaseColumnIndex); + input.removeEventListener(UP, decreaseRowIndex); + input.removeEventListener(DOWN, increaseRowIndex); }; }, [input, characters, columnCount, initialIndex, moveCursorSound]); diff --git a/src/character/useCharacterStyleIndex.hook.js b/src/character/useCharacterStyleIndex.hook.js index 3164b87..ad82917 100644 --- a/src/character/useCharacterStyleIndex.hook.js +++ b/src/character/useCharacterStyleIndex.hook.js @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import useMoveCursorSound from "../configuration/useMoveCursorSound.hook"; +import { DOWN, UP } from "../input/event"; export default function useCharacterStyleIndex(input, total, initialIndex = 0) { const moveCursorSound = useMoveCursorSound(); @@ -24,12 +25,12 @@ export default function useCharacterStyleIndex(input, total, initialIndex = 0) { moveCursorSound.play(); }; - input.addEventListener("up", decreaseIndex); - input.addEventListener("down", increaseIndex); + input.addEventListener(UP, decreaseIndex); + input.addEventListener(DOWN, increaseIndex); return () => { - input.removeEventListener("up", decreaseIndex); - input.removeEventListener("down", increaseIndex); + input.removeEventListener(UP, decreaseIndex); + input.removeEventListener(DOWN, increaseIndex); }; }, [input, total, currentIndex, moveCursorSound]); diff --git a/src/input/event.js b/src/input/event.js new file mode 100644 index 0000000..13d7bcc --- /dev/null +++ b/src/input/event.js @@ -0,0 +1,24 @@ +export const UP = "up"; +export const LEFT = "left"; +export const RIGHT = "right"; +export const DOWN = "down"; +export const A = "a"; +export const B = "b"; +export const X = "x"; +export const Y = "y"; +export const L1 = "l1"; +export const R1 = "r1"; +export const QUIT = "quit"; +export default { + UP, + DOWN, + LEFT, + RIGHT, + A, + B, + X, + Y, + L1, + R1, + QUIT +}; diff --git a/src/input/useInput.hook.js b/src/input/useInput.hook.js index 6177510..ebddf8c 100644 --- a/src/input/useInput.hook.js +++ b/src/input/useInput.hook.js @@ -1,6 +1,7 @@ import { useEffect, useRef } from "react"; import useKeyboard from "./useKeyboard.hook"; import useGamepad from "./useGamepad.hook"; +import { UP, DOWN, LEFT, RIGHT, A, B, X, Y, L1, R1, QUIT } from "./event"; export default function useInput(keyboardMapping, gamepadMapping) { const emitterRef = useRef(new EventTarget()); @@ -10,51 +11,48 @@ export default function useInput(keyboardMapping, gamepadMapping) { useEffect(() => { const onPressLeft = () => { - emitter.dispatchEvent(new Event("left")); + emitter.dispatchEvent(new Event(LEFT)); emitter.dispatchEvent(new Event("*")); }; const onPressRight = () => { - emitter.dispatchEvent(new Event("right")); + emitter.dispatchEvent(new Event(RIGHT)); emitter.dispatchEvent(new Event("*")); }; const onPressUp = () => { - emitter.dispatchEvent(new Event("up")); + emitter.dispatchEvent(new Event(UP)); emitter.dispatchEvent(new Event("*")); }; const onPressDown = () => { - emitter.dispatchEvent(new Event("down")); + emitter.dispatchEvent(new Event(DOWN)); emitter.dispatchEvent(new Event("*")); }; const onPressA = () => { - emitter.dispatchEvent(new Event("a")); + emitter.dispatchEvent(new Event(A)); emitter.dispatchEvent(new Event("*")); }; const onPressB = () => { - emitter.dispatchEvent(new Event("b")); - emitter.dispatchEvent(new Event("*")); - }; - const onPressC = () => { - emitter.dispatchEvent(new Event("c")); + emitter.dispatchEvent(new Event(B)); emitter.dispatchEvent(new Event("*")); }; const onPressX = () => { - emitter.dispatchEvent(new Event("x")); + emitter.dispatchEvent(new Event(X)); emitter.dispatchEvent(new Event("*")); }; const onPressY = () => { - emitter.dispatchEvent(new Event("y")); + emitter.dispatchEvent(new Event(Y)); emitter.dispatchEvent(new Event("*")); }; - const onPressZ = () => { - emitter.dispatchEvent(new Event("z")); + const onPressL1 = () => { + emitter.dispatchEvent(new Event(L1)); emitter.dispatchEvent(new Event("*")); }; - const onPressEscape = () => { - emitter.dispatchEvent(new Event("escape")); + const onPressR1 = () => { + emitter.dispatchEvent(new Event(R1)); emitter.dispatchEvent(new Event("*")); }; - const onPressEnter = () => { - emitter.dispatchEvent(new Event("enter")); + const onPressQuit = () => { + console.log("onPressQuit " + QUIT); + emitter.dispatchEvent(new Event(QUIT)); emitter.dispatchEvent(new Event("*")); }; @@ -64,24 +62,22 @@ export default function useInput(keyboardMapping, gamepadMapping) { keyboard.addEventListener(keyboardMapping.down, onPressDown); keyboard.addEventListener(keyboardMapping.a, onPressA); keyboard.addEventListener(keyboardMapping.b, onPressB); - keyboard.addEventListener(keyboardMapping.c, onPressC); keyboard.addEventListener(keyboardMapping.x, onPressX); keyboard.addEventListener(keyboardMapping.y, onPressY); - keyboard.addEventListener(keyboardMapping.z, onPressZ); - keyboard.addEventListener(keyboardMapping.escape, onPressEscape); - keyboard.addEventListener(keyboardMapping.enter, onPressEnter); + keyboard.addEventListener(keyboardMapping.l1, onPressL1); + keyboard.addEventListener(keyboardMapping.r1, onPressR1); + keyboard.addEventListener(keyboardMapping.quit, onPressQuit); gamepad.addEventListener(gamepadMapping.left, onPressLeft); gamepad.addEventListener(gamepadMapping.right, onPressRight); gamepad.addEventListener(gamepadMapping.up, onPressUp); gamepad.addEventListener(gamepadMapping.down, onPressDown); gamepad.addEventListener(gamepadMapping.a, onPressA); gamepad.addEventListener(gamepadMapping.b, onPressB); - gamepad.addEventListener(gamepadMapping.c, onPressC); gamepad.addEventListener(gamepadMapping.x, onPressX); gamepad.addEventListener(gamepadMapping.y, onPressY); - gamepad.addEventListener(gamepadMapping.z, onPressZ); - gamepad.addEventListener(gamepadMapping.escape, onPressEscape); - gamepad.addEventListener(gamepadMapping.enter, onPressEnter); + gamepad.addEventListener(gamepadMapping.l1, onPressL1); + gamepad.addEventListener(gamepadMapping.r1, onPressR1); + gamepad.addEventListener(gamepadMapping.quit, onPressQuit); return () => { keyboard.removeEventListener(keyboardMapping.left, onPressLeft); @@ -90,24 +86,22 @@ export default function useInput(keyboardMapping, gamepadMapping) { keyboard.removeEventListener(keyboardMapping.down, onPressDown); keyboard.removeEventListener(keyboardMapping.a, onPressA); keyboard.removeEventListener(keyboardMapping.b, onPressB); - keyboard.removeEventListener(keyboardMapping.c, onPressC); keyboard.removeEventListener(keyboardMapping.x, onPressX); keyboard.removeEventListener(keyboardMapping.y, onPressY); - keyboard.removeEventListener(keyboardMapping.z, onPressZ); - keyboard.removeEventListener(keyboardMapping.escape, onPressEscape); - keyboard.removeEventListener(keyboardMapping.enter, onPressEnter); + keyboard.removeEventListener(keyboardMapping.l1, onPressL1); + keyboard.removeEventListener(keyboardMapping.r1, onPressR1); + keyboard.removeEventListener(keyboardMapping.quit, onPressQuit); gamepad.removeEventListener(gamepadMapping.left, onPressLeft); gamepad.removeEventListener(gamepadMapping.right, onPressRight); gamepad.removeEventListener(gamepadMapping.up, onPressUp); gamepad.removeEventListener(gamepadMapping.down, onPressDown); gamepad.removeEventListener(gamepadMapping.a, onPressA); gamepad.removeEventListener(gamepadMapping.b, onPressB); - gamepad.removeEventListener(gamepadMapping.c, onPressC); gamepad.removeEventListener(gamepadMapping.x, onPressX); gamepad.removeEventListener(gamepadMapping.y, onPressY); - gamepad.removeEventListener(gamepadMapping.z, onPressZ); - gamepad.removeEventListener(gamepadMapping.escape, onPressEscape); - gamepad.removeEventListener(gamepadMapping.enter, onPressEnter); + gamepad.removeEventListener(gamepadMapping.l1, onPressL1); + gamepad.removeEventListener(gamepadMapping.r1, onPressR1); + gamepad.removeEventListener(gamepadMapping.quit, onPressQuit); }; }, [emitter, keyboardMapping, gamepadMapping, keyboard, gamepad]); diff --git a/src/side/left/selectedCharacterCancellableByPlayerOne.presenter.jsx b/src/side/left/selectedCharacterCancellableByPlayerOne.presenter.jsx index de39bd4..4c7638b 100644 --- a/src/side/left/selectedCharacterCancellableByPlayerOne.presenter.jsx +++ b/src/side/left/selectedCharacterCancellableByPlayerOne.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerOne.hook"; +import { B } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useNavigationDispatch from "../../navigation/useDispatch.hook"; import useCancelSound from "../../configuration/useCancelSound.hook"; @@ -23,12 +24,10 @@ export default function SelectedCharacterCancellableByPlayerOne({ character }) { cancelSound.play(); }; - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(B, onCancel); }; }, [input, cancelSound, dispatch]); diff --git a/src/side/left/selectingCharacterByPlayerOne.presenter.jsx b/src/side/left/selectingCharacterByPlayerOne.presenter.jsx index a8adef0..2b6055c 100644 --- a/src/side/left/selectingCharacterByPlayerOne.presenter.jsx +++ b/src/side/left/selectingCharacterByPlayerOne.presenter.jsx @@ -24,6 +24,7 @@ import getSelectableCharactersFromCategory from "../../character/util/getSelecta import getRandomCharacter from "../../character/util/getRandomCharacter"; import RandomCharacterName from "../common/randomCharacterName.presenter"; import RandomCharacterNameFromCategory from "../common/randomCharacterNameFromCategory.presenter"; +import { A, X } from "../../input/event"; export default function SelectingCharacterByPlayerOne() { const navigation = useNavigation(); @@ -59,12 +60,12 @@ export default function SelectingCharacterByPlayerOne() { dispatch(switchMode()); }; - input.addEventListener("a", onConfirm); - input.addEventListener("z", onSwitchMode); + input.addEventListener(A, onConfirm); + input.addEventListener(X, onSwitchMode); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("z", onSwitchMode); + input.removeEventListener(A, onConfirm); + input.removeEventListener(X, onSwitchMode); }; }, [ input, diff --git a/src/side/left/selectingCharacterColorByPlayerOne.presenter.jsx b/src/side/left/selectingCharacterColorByPlayerOne.presenter.jsx index 60612e8..b490df3 100644 --- a/src/side/left/selectingCharacterColorByPlayerOne.presenter.jsx +++ b/src/side/left/selectingCharacterColorByPlayerOne.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerOne.hook"; +import { A, B, X } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useCharacterColorCount from "../../character/useCharacterColorCount.hook"; import useCharacterColorIndex from "../../character/useCharacterColorIndex.hook"; @@ -40,16 +41,14 @@ export default function SelectingCharacterColorByPlayerOne({ character }) { dispatch(switchMode()); }; - input.addEventListener("a", onConfirm); - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); - input.addEventListener("z", onSwitchMode); + input.addEventListener(A, onConfirm); + input.addEventListener(B, onCancel); + input.addEventListener(X, onSwitchMode); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); - input.removeEventListener("z", onSwitchMode); + input.removeEventListener(A, onConfirm); + input.removeEventListener(B, onCancel); + input.removeEventListener(X, onSwitchMode); }; }, [input, characterColorIndex, cancelSound, colorSound, dispatch]); diff --git a/src/side/left/selectingCharacterStyleByPlayerOne.presenter.jsx b/src/side/left/selectingCharacterStyleByPlayerOne.presenter.jsx index a490bbf..30caae5 100644 --- a/src/side/left/selectingCharacterStyleByPlayerOne.presenter.jsx +++ b/src/side/left/selectingCharacterStyleByPlayerOne.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerOne.hook"; +import { A, B, X } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useCharacterStyleNames from "../../character/useCharacterStyleNames.hook"; import useCharacterStyleIndex from "../../character/useCharacterStyleIndex.hook"; @@ -42,16 +43,14 @@ export default function SelectingCharacterStyleByPlayerOne({ character }) { dispatch(switchMode()); }; - input.addEventListener("a", onConfirm); - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); - input.addEventListener("z", onSwitchMode); + input.addEventListener(A, onConfirm); + input.addEventListener(B, onCancel); + input.addEventListener(X, onSwitchMode); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); - input.removeEventListener("z", onSwitchMode); + input.removeEventListener(A, onConfirm); + input.removeEventListener(B, onCancel); + input.removeEventListener(X, onSwitchMode); }; }, [input, characterStyleIndex, cancelSound, characterStyle, dispatch, styleSound]); diff --git a/src/side/leftSide.presenter.jsx b/src/side/leftSide.presenter.jsx index 4677c87..e87674b 100644 --- a/src/side/leftSide.presenter.jsx +++ b/src/side/leftSide.presenter.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import useNavigation from "../navigation/useData.hook"; import SelectingCharacterByPlayerOne from "./left/selectingCharacterByPlayerOne.presenter"; import SelectingCharacterStyleByPlayerOne from "./left/selectingCharacterStyleByPlayerOne.presenter"; @@ -13,9 +13,24 @@ import SELECTING_CHARACTER from "../navigation/sideState/selectingCharacter.stat import SELECTING_STYLE from "../navigation/sideState/selectingStyle.state"; import SELECTING_COLOR from "../navigation/sideState/selectingColor.state"; import SELECTED from "../navigation/sideState/selected.state"; +import useInput from "../input/useInputPlayerOne.hook"; +import { QUIT } from "../input/event"; export default function LeftSide() { const { state, leftSideState, characterOne } = useNavigation(); + const input = useInput(); + + useEffect(() => { + const onQuit = () => { + mainAPI.quit(); + }; + + input.addEventListener(QUIT, onQuit); + + return () => { + input.removeEventListener(QUIT, onQuit); + }; + }, [input]); if (leftSideState === SELECTING_CHARACTER) { return ; diff --git a/src/side/right/selectedCharacterCancellableByPlayerOne.presenter.jsx b/src/side/right/selectedCharacterCancellableByPlayerOne.presenter.jsx index ce145b1..f51fa98 100644 --- a/src/side/right/selectedCharacterCancellableByPlayerOne.presenter.jsx +++ b/src/side/right/selectedCharacterCancellableByPlayerOne.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerOne.hook"; +import { B } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useNavigationDispatch from "../../navigation/useDispatch.hook"; import useCancelSound from "../../configuration/useCancelSound.hook"; @@ -23,12 +24,10 @@ export default function SelectedCharacterCancellableByPlayerOne({ character }) { cancelSound.play(); }; - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(B, onCancel); }; }, [input, cancelSound, dispatch]); diff --git a/src/side/right/selectedCharacterCancellableByPlayerTwo.presenter.jsx b/src/side/right/selectedCharacterCancellableByPlayerTwo.presenter.jsx index 072dcc7..c6c8f0a 100644 --- a/src/side/right/selectedCharacterCancellableByPlayerTwo.presenter.jsx +++ b/src/side/right/selectedCharacterCancellableByPlayerTwo.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerTwo.hook"; +import { B } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useNavigationDispatch from "../../navigation/useDispatch.hook"; import useCancelSound from "../../configuration/useCancelSound.hook"; @@ -23,12 +24,10 @@ export default function SelectedCharacterCancellableByPlayerTwo({ character }) { cancelSound.play(); }; - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(B, onCancel); }; }, [input, cancelSound, dispatch]); diff --git a/src/side/right/selectingCharacterAILevelByPlayerOne.presenter.jsx b/src/side/right/selectingCharacterAILevelByPlayerOne.presenter.jsx index e632a67..55a9358 100644 --- a/src/side/right/selectingCharacterAILevelByPlayerOne.presenter.jsx +++ b/src/side/right/selectingCharacterAILevelByPlayerOne.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerOne.hook"; +import { A, B } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useNavigation from "../../navigation/useData.hook"; import useNavigationDispatch from "../../navigation/useDispatch.hook"; @@ -36,14 +37,12 @@ export default function SelectingCharacterAILevelByPlayerOne({ character }) { selectAILevelSound.play(); }; - input.addEventListener("a", onConfirm); - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(A, onConfirm); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(A, onConfirm); + input.removeEventListener(B, onCancel); }; }, [input, characterAILevel, cancelSound, dispatch, selectAILevelSound]); diff --git a/src/side/right/selectingCharacterByPlayerOne.presenter.jsx b/src/side/right/selectingCharacterByPlayerOne.presenter.jsx index 8122ff0..a10b7fb 100644 --- a/src/side/right/selectingCharacterByPlayerOne.presenter.jsx +++ b/src/side/right/selectingCharacterByPlayerOne.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerOne.hook"; +import { A, B } from "../../input/event"; import useCategories from "../../configuration/useCategories.hook"; import useCategoryIndex from "../../category/useCategoryIndex.hook"; import useCharacterIndex from "../../character/useCharacterIndex.hook"; @@ -62,14 +63,12 @@ export default function SelectingCharacterByPlayerOne() { cancelSound.play(); }; - input.addEventListener("a", onConfirm); - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(A, onConfirm); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(A, onConfirm); + input.removeEventListener(B, onCancel); }; }, [ input, diff --git a/src/side/right/selectingCharacterByPlayerTwo.presenter.jsx b/src/side/right/selectingCharacterByPlayerTwo.presenter.jsx index 2ad39ed..79dd139 100644 --- a/src/side/right/selectingCharacterByPlayerTwo.presenter.jsx +++ b/src/side/right/selectingCharacterByPlayerTwo.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerTwo.hook"; +import { A } from "../../input/event"; import useCategories from "../../configuration/useCategories.hook"; import useCategoryIndex from "../../category/useCategoryIndex.hook"; import useCharacterIndex from "../../character/useCharacterIndex.hook"; @@ -55,10 +56,10 @@ export default function SelectingCharacterByPlayerTwo() { selectCharacterSound.play(); }; - input.addEventListener("a", onConfirm); + input.addEventListener(A, onConfirm); return () => { - input.removeEventListener("a", onConfirm); + input.removeEventListener(A, onConfirm); }; }, [ input, diff --git a/src/side/right/selectingCharacterColorByPlayerOne.presenter.jsx b/src/side/right/selectingCharacterColorByPlayerOne.presenter.jsx index 1843cd0..2591e27 100644 --- a/src/side/right/selectingCharacterColorByPlayerOne.presenter.jsx +++ b/src/side/right/selectingCharacterColorByPlayerOne.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerOne.hook"; +import { A, B } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useCharacterColorCount from "../../character/useCharacterColorCount.hook"; import useCharacterColorIndex from "../../character/useCharacterColorIndex.hook"; @@ -36,14 +37,12 @@ export default function SelectingCharacterColorByPlayerOne({ character }) { colorSound.play(); }; - input.addEventListener("a", onConfirm); - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(A, onConfirm); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(A, onConfirm); + input.removeEventListener(B, onCancel); }; }, [input, characterColorIndex, cancelSound, colorSound, dispatch]); diff --git a/src/side/right/selectingCharacterColorByPlayerTwo.presenter.jsx b/src/side/right/selectingCharacterColorByPlayerTwo.presenter.jsx index 04d4985..25f7d12 100644 --- a/src/side/right/selectingCharacterColorByPlayerTwo.presenter.jsx +++ b/src/side/right/selectingCharacterColorByPlayerTwo.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerTwo.hook"; +import { A, B } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useCharacterColorCount from "../../character/useCharacterColorCount.hook"; import useCharacterColorIndex from "../../character/useCharacterColorIndex.hook"; @@ -36,14 +37,12 @@ export default function SelectingCharacterColorByPlayerTwo({ character }) { colorSound.play(); }; - input.addEventListener("a", onConfirm); - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(A, onConfirm); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(A, onConfirm); + input.removeEventListener(B, onCancel); }; }, [input, characterColorIndex, cancelSound, colorSound, dispatch]); diff --git a/src/side/right/selectingCharacterStyleByPlayerOne.presenter.jsx b/src/side/right/selectingCharacterStyleByPlayerOne.presenter.jsx index 706ce95..a762a56 100644 --- a/src/side/right/selectingCharacterStyleByPlayerOne.presenter.jsx +++ b/src/side/right/selectingCharacterStyleByPlayerOne.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerOne.hook"; +import { A, B } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useCharacterStyleNames from "../../character/useCharacterStyleNames.hook"; import useCharacterStyleIndex from "../../character/useCharacterStyleIndex.hook"; @@ -38,14 +39,12 @@ export default function SelectingCharacterStyleByPlayerOne({ character }) { styleSound.play(); }; - input.addEventListener("a", onConfirm); - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(A, onConfirm); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(A, onConfirm); + input.removeEventListener(B, onCancel); }; }, [input, characterStyleIndex, cancelSound, characterStyle, dispatch, styleSound]); diff --git a/src/side/right/selectingCharacterStyleByPlayerTwo.presenter.jsx b/src/side/right/selectingCharacterStyleByPlayerTwo.presenter.jsx index bd7b031..55b0f04 100644 --- a/src/side/right/selectingCharacterStyleByPlayerTwo.presenter.jsx +++ b/src/side/right/selectingCharacterStyleByPlayerTwo.presenter.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import useInput from "../../input/useInputPlayerTwo.hook"; +import { A, B } from "../../input/event"; import useCharacterName from "../../character/useCharacterName.hook"; import useCharacterStyleNames from "../../character/useCharacterStyleNames.hook"; import useCharacterStyleIndex from "../../character/useCharacterStyleIndex.hook"; @@ -38,14 +39,12 @@ export default function SelectingCharacterStyleByPlayerTwo({ character }) { styleSound.play(); }; - input.addEventListener("a", onConfirm); - input.addEventListener("b", onCancel); - input.addEventListener("escape", onCancel); + input.addEventListener(A, onConfirm); + input.addEventListener(B, onCancel); return () => { - input.removeEventListener("a", onConfirm); - input.removeEventListener("b", onCancel); - input.removeEventListener("escape", onCancel); + input.removeEventListener(A, onConfirm); + input.removeEventListener(B, onCancel); }; }, [input, characterStyleIndex, cancelSound, characterStyle, dispatch, styleSound]); diff --git a/src/stage/selectingStageByPlayers.presenter.jsx b/src/stage/selectingStageByPlayers.presenter.jsx index efc8013..a997e4c 100644 --- a/src/stage/selectingStageByPlayers.presenter.jsx +++ b/src/stage/selectingStageByPlayers.presenter.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"; import useStages from "../configuration/useStages.hook"; import useInputPlayerOne from "../input/useInputPlayerOne.hook"; import useInputPlayerTwo from "../input/useInputPlayerTwo.hook"; +import { A, LEFT, RIGHT } from "../input/event"; import useStageName from "./useStageName.hook"; import useNavigationDispatch from "../navigation/useDispatch.hook"; import selectStage from "../navigation/action/selectStage.action"; @@ -40,20 +41,20 @@ export default function SelectingStageByPlayers() { } }; - inputPlayerOne.addEventListener("left", next); - inputPlayerOne.addEventListener("right", previous); - inputPlayerOne.addEventListener("a", confirm); - inputPlayerTwo.addEventListener("left", next); - inputPlayerTwo.addEventListener("right", previous); - inputPlayerTwo.addEventListener("a", confirm); + inputPlayerOne.addEventListener(LEFT, next); + inputPlayerOne.addEventListener(RIGHT, previous); + inputPlayerOne.addEventListener(A, confirm); + inputPlayerTwo.addEventListener(LEFT, next); + inputPlayerTwo.addEventListener(RIGHT, previous); + inputPlayerTwo.addEventListener(A, confirm); return () => { - inputPlayerOne.removeEventListener("left", next); - inputPlayerOne.removeEventListener("right", previous); - inputPlayerOne.removeEventListener("a", confirm); - inputPlayerTwo.removeEventListener("left", next); - inputPlayerTwo.removeEventListener("right", previous); - inputPlayerTwo.removeEventListener("a", confirm); + inputPlayerOne.removeEventListener(LEFT, next); + inputPlayerOne.removeEventListener(RIGHT, previous); + inputPlayerOne.removeEventListener(A, confirm); + inputPlayerTwo.removeEventListener(LEFT, next); + inputPlayerTwo.removeEventListener(RIGHT, previous); + inputPlayerTwo.removeEventListener(A, confirm); }; }, [inputPlayerOne, inputPlayerTwo, stage, stages, stageIndex, dispatch]);