e to ev

example/src/App.tsx

@@ -14,8 +14,15 @@ function App() {
   const { containerRef, gameStatus } = gameManager;
 
   return (
-    <div className="relative mx-auto my-4 w-fit" id="maze_container">
-      <div ref={containerRef} className="relative" />
+    <div>
+      <div className="relative mx-auto my-4 w-fit" id="maze_container">
+        <div ref={containerRef} className="relative" />
+      </div>
+      <div className="text-center text-2xl text-muted-foreground">
+        {gameStatus === "waiting" && <p>Press <kbd className="px-2 py-1 bg-muted rounded">space</kbd> to start</p>}
+        {gameStatus === "started" && <p>Use <kbd className="px-2 py-1 bg-muted rounded">hjkl</kbd> to change direction • Press <kbd className="px-2 py-1 bg-muted rounded">q</kbd> to quit</p>}
+        {gameStatus === "game-over" && <p>Game Over! Press <kbd className="px-2 py-1 bg-muted rounded">space</kbd> to restart</p>}
+      </div>
     </div>
   );
 };

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;
       }

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":