diff --git a/example/src/App.tsx b/example/src/App.tsx index 8f861af..9167d4b 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -14,8 +14,15 @@ function App() { const { containerRef, gameStatus } = gameManager; return ( -
-
+
+
+
+
+
+ {gameStatus === "waiting" &&

Press space to start

} + {gameStatus === "started" &&

Use hjkl to change direction • Press q to quit

} + {gameStatus === "game-over" &&

Game Over! Press space to restart

} +
); }; diff --git a/example/src/useKeyBindings.ts b/example/src/useKeyBindings.ts index 9212f24..0c3e398 100644 --- a/example/src/useKeyBindings.ts +++ b/example/src/useKeyBindings.ts @@ -5,12 +5,10 @@ export const useKeyBindings = (gameManager: GameManager) => { const { gameStatus, startGame, quitGame, keyManager } = gameManager; const { clearLog } = keyManager; - console.log('gameStatus', gameStatus); - useEffect(() => { - const handler = (e: KeyboardEvent) => { + const handler = (ev: KeyboardEvent) => { // start game - if (e.key === "i" || e.key === "I") { + if (ev.code === "Space") { if (["waiting", "game-over", "game-won"].includes(gameStatus)) { clearLog(); if (gameStatus === "game-over" || gameStatus === "game-won") { @@ -27,13 +25,13 @@ export const useKeyBindings = (gameManager: GameManager) => { if (gameStatus === "waiting") return; // cancel count or stop game - if (e.key === "Escape") { + if (ev.key === "Escape") { quitGame(); return; } // quit - if (e.key === "q" || e.key === "Q") { + if (ev.key === "q" || ev.key === "Q") { quitGame(); return; } diff --git a/src/useKeyBindings/useKeyBindings.ts b/src/useKeyBindings/useKeyBindings.ts index cd92ba5..7389330 100644 --- a/src/useKeyBindings/useKeyBindings.ts +++ b/src/useKeyBindings/useKeyBindings.ts @@ -45,35 +45,35 @@ export const useKeyBindings = ({ cursor, gameStatus }: UseKeyBindingsParams) => }; useEffect(() => { - const handler = (e: KeyboardEvent) => { + const handler = (ev: KeyboardEvent) => { if (["waiting", "game-over", "game-won"].includes(gameStatus)) return; // "0" behaves like Vim: beginning of line - if (e.key === "0" && cursor.getCount() === "") { + if (ev.key === "0" && cursor.getCount() === "") { recordKey("0"); cursor.resetCount(); cursor.moveToStart(); return; } - const isDigit = e.key >= "0" && e.key <= "9"; + const isDigit = ev.key >= "0" && e.key <= "9"; if (isDigit) { - if (e.key === "0" && cursor.getCount() === "") return; - recordKey(e.key); - cursor.setCount(e.key); + if (ev.key === "0" && cursor.getCount() === "") return; + recordKey(ev.key); + cursor.setCount(ev.key); return; } - if (e.key === ".") { + if (ev.key === ".") { recordKey("."); cursor.repeatLastMotion(); return; } - if (e.key === "^" || e.key === "$") { + if (ev.key === "^" || ev.key === "$") { recordKey(e.key); cursor.resetCount(); - if (e.key === "^") { + if (ev.key === "^") { cursor.moveToStart(); } else { cursor.moveToEnd(); @@ -81,21 +81,21 @@ export const useKeyBindings = ({ cursor, gameStatus }: UseKeyBindingsParams) => return; } - if (e.key === "g" || e.key === "G") { - if (e.key === "g") { + if (ev.key === "g" || ev.key === "G") { + if (ev.key === "g") { if (cursor.getLastKey() === "g") { - recordKey(e.key); + recordKey(ev.key); cursor.resetCount(); cursor.setLastKey(""); cursor.moveToTop(); return; } else { - recordKey(e.key); + recordKey(ev.key); cursor.setLastKey("g"); return; } } else { - recordKey(e.key); + recordKey(ev.key); cursor.resetCount(); cursor.setLastKey(""); cursor.moveToBottom(); @@ -103,14 +103,14 @@ export const useKeyBindings = ({ cursor, gameStatus }: UseKeyBindingsParams) => } } - if (!RELEVANT_KEYS.has(e.key)) return; + if (!RELEVANT_KEYS.has(ev.key)) return; - recordKey(e.key); + recordKey(ev.key); const count = Math.max(1, parseInt(cursor.getCount() || "1", 10)); cursor.resetCount(); - switch (e.key) { + switch (ev.key) { case "h": case "H": cursor.moveLeft(count); break; case "j":