proper keybindings

example/src/App.tsx

@@ -3,15 +3,33 @@ import "@vimazing/vim-snake/game.css";
 import { useKeyBindings } from "./useKeyBindings";
 
 function App() {
-  const { containerRef, gameStatus } = useGame(30, 20, useKeyBindings);
+  const { containerRef, gameStatus, scoreManager, keyLog } = useGame(30, 20, useKeyBindings);
+
+  const formatTime = (ms: number) => {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+  };
 
   return (
     <div className="relative mx-auto my-4 w-fit space-y-4">
       <h1 className="text-2xl font-bold text-center">VIMazing Snake</h1>
+      
+      <div className="flex gap-4 justify-center text-sm font-mono">
+        <div className="px-3 py-1 bg-muted rounded">
+          Time: {formatTime(scoreManager.timeValue)}
+        </div>
+        <div className="px-3 py-1 bg-muted rounded">
+          Keys: {keyLog.length}
+        </div>
+      </div>
+
       <div ref={containerRef} className="relative" />
+      
       <div className="text-center text-sm 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 move • Press <kbd className="px-2 py-1 bg-muted rounded">q</kbd> to quit</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,16 +5,16 @@ export const useKeyBindings = (gameManager: UseGameType) => {
   const { gameStatus, startGame, stopGame, clearLog, resetCount } = gameManager;
 
   useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      console.log("key pressed:", e.key, e.code);
+    const handler = (ev: KeyboardEvent) => {
+
       // start game
-      if (e.code === "Space") {
+      if (ev.code === "Space") {
         if (["waiting", "game-over", "game-won"].includes(gameStatus)) {
-          // clearLog();
-          // resetCount();
+          clearLog();
+          resetCount();
           if (gameStatus === "game-over" || gameStatus === "game-won") {
             stopGame();
-            // setTimeout(() => initGame(true), 0);
+            setTimeout(() => startGame(), 0);
           } else {
             startGame();
           }
@@ -22,26 +22,18 @@ export const useKeyBindings = (gameManager: UseGameType) => {
         }
       }
 
-      // ignore other keys while waiting
-      if (gameStatus === "waiting") return;
-
-      // cancel count or stop game
-      if (e.key === "Escape") {
-        stopGame();
-        resetCount();
-        return;
-      }
-
       // quit
-      if (e.key === "q" || e.key === "Q") {
-        stopGame();
-        resetCount();
-        return;
+      if (ev.key === "q" || ev.key === "Q") {
+        if (gameStatus === "started") {
+          stopGame();
+          resetCount();
+          return;
+        }
       }
     };
 
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
+    window.addEventListener("keydown", handler, { capture: true });
+    return () => window.removeEventListener("keydown", handler, { capture: true });
   }, [gameStatus, startGame, stopGame, clearLog, resetCount]);
 };