diff --git a/examples/web/index.ts b/examples/web/index.ts index cd74123f9e54201fd2797c46eeaf6c928305b3cb..6f37cdaace33294439fe8aae2ca413098f85337c 100644 --- a/examples/web/index.ts +++ b/examples/web/index.ts @@ -406,7 +406,7 @@ class GameboyEmulator extends Observable implements Emulator { registerKeys() { document.addEventListener("keydown", (event) => { const keyCode = KEYS[event.key]; - const isArrow = KEYS[event.key] ?? false; + const isArrow = ARROW_KEYS[event.key] ?? false; if (isArrow) event.preventDefault(); if (keyCode !== undefined) { this.gameBoy!.key_press(keyCode); @@ -430,7 +430,7 @@ class GameboyEmulator extends Observable implements Emulator { document.addEventListener("keyup", (event) => { const keyCode = KEYS[event.key]; - const isArrow = KEYS[event.key] ?? false; + const isArrow = ARROW_KEYS[event.key] ?? false; if (isArrow) event.preventDefault(); if (keyCode !== undefined) { this.gameBoy!.key_lift(keyCode); diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index 36c137686b34be4f657ce7d295597a5eec04e451..309445dec3f8c5e26cc050ffccb9b946fcd9718f 100644 --- a/examples/web/react/app.tsx +++ b/examples/web/react/app.tsx @@ -99,6 +99,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => { const [backgroundIndex, setBackgroundIndex] = useState(0); const [romInfo, setRomInfo] = useState<RomInfo>({}); const [framerate, setFramerate] = useState(0); + const [keyaction, setKeyaction] = useState<string | null>(null); const frameRef = useRef<boolean>(false); const errorRef = useRef<boolean>(false); const getPauseText = () => (paused ? "Resume" : "Pause"); @@ -136,21 +137,31 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => { await handler(undefined, require("../res/storm.png"), 0.2); }); }; - const onKeyDown = (event: KeyboardEvent) => { - - } + const onKeyDown = (event: KeyboardEvent) => {}; useEffect(() => { document.body.style.backgroundColor = `#${getBackground()}`; - }); + }, [backgroundIndex]); + useEffect(() => { + switch (keyaction) { + case "Escape": + setFullscreen(false); + setKeyaction(null); + break; + case "Fullscreen": + setFullscreen(!fullscreen); + setKeyaction(null); + break; + } + }, [keyaction]); useEffect(() => { document.addEventListener("keydown", (event) => { if (event.key === "Escape") { - setFullscreen(false); + setKeyaction("Escape"); event.stopPropagation(); event.preventDefault(); } if (event.key === "f" && event.ctrlKey === true) { - setFullscreen(true); + setKeyaction("Fullscreen"); event.stopPropagation(); event.preventDefault(); }