proper keybindings

src/useGame/useGame.ts

@@ -3,6 +3,7 @@ import { useRenderer } from "./useRenderer";
 import { useSnake } from "./useSnake";
 import { useGameStatus } from "./useGameStatus";
 import { useKeyBindings, type UseKeyBindingsType } from "./useKeyBindings";
+import { useScore } from "../useScore";
 
 export function useGame(cols: number, rows: number, platformHook?: unknown) {
   const rendererManager = useRenderer();
@@ -21,12 +22,12 @@ export function useGame(cols: number, rows: number, platformHook?: unknown) {
   const keyBindings: UseKeyBindingsType = useKeyBindings({
     gameManager: {
       gameStatus,
-      startGame,
-      stopGame,
       changeDirection,
     },
   });
 
+  const scoreManager = useScore({ gameStatus });
+
   const fullGameManager = {
     containerRef,
     gameStatus,
@@ -34,6 +35,7 @@ export function useGame(cols: number, rows: number, platformHook?: unknown) {
     stopGame,
     ...snakeManager,
     ...keyBindings,
+    scoreManager,
   };
 
   if (typeof platformHook === "function") {

src/useGame/useKeyBindings.ts

@@ -1,10 +1,10 @@
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { GameStatus, Direction } from "../types";
 
+export type KeyLogEntry = { key: string; timestamp: number };
+
 export type GameBindingContext = {
   gameStatus: GameStatus;
-  startGame: () => void;
-  stopGame: () => void;
   changeDirection: (dir: Direction) => void;
 };
 
@@ -13,37 +13,73 @@ type UseKeyBindingsParams = {
 };
 
 export function useKeyBindings({ gameManager }: UseKeyBindingsParams) {
-  const { gameStatus, startGame, stopGame, changeDirection } = gameManager;
+  const { gameStatus, changeDirection } = gameManager;
+  
+  const [keyLog, setKeyLog] = useState<KeyLogEntry[]>([]);
+  const logRef = useRef<KeyLogEntry[]>([]);
+  const countRef = useRef<string>("");
+
+  const recordKey = (key: string) => {
+    const entry = { key, timestamp: performance.now() };
+    logRef.current.push(entry);
+    setKeyLog([...logRef.current]);
+  };
+
+  const clearLog = () => {
+    logRef.current = [];
+    setKeyLog([]);
+  };
+
+  const resetCount = () => {
+    countRef.current = "";
+  };
 
   useEffect(() => {
     const handler = (ev: KeyboardEvent) => {
       if (!["started"].includes(gameStatus)) return;
 
+      recordKey(ev.key);
+
+      let handled = false;
+
       switch (ev.key) {
         case "h":
         case "H":
           changeDirection("left");
+          handled = true;
           break;
         case "j":
         case "J":
           changeDirection("down");
+          handled = true;
           break;
         case "k":
         case "K":
           changeDirection("up");
+          handled = true;
           break;
         case "l":
         case "L":
           changeDirection("right");
+          handled = true;
           break;
       }
+
+      if (handled) {
+        ev.stopPropagation();
+      }
     };
 
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [gameStatus, startGame, stopGame, changeDirection]);
+  }, [gameStatus, changeDirection]);
 
-  return {};
+  return {
+    keyLog,
+    clearLog,
+    resetCount,
+    getLog: () => logRef.current,
+  };
 }
 
 export type UseKeyBindingsType = ReturnType<typeof useKeyBindings>;