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

src/useScore/useScore.ts

@@ -1,8 +1,21 @@
-export function useScore() {
+import { useTimer } from "./hooks/useTimer";
+import { useScoreTime } from "./useScoreTime";
+import type { GameStatus } from "../types";
+
+export type UseScoreParams = {
+  gameStatus: GameStatus;
+};
+
+export function useScore({ gameStatus }: UseScoreParams) {
+  const timer = useTimer();
+  const { timeValue, startTimer, stopTimer, resetTimer } = timer;
+
+  useScoreTime({ gameStatus, timer });
+
   return {
-    timeValue: 0,
-    startTimer: () => {},
-    stopTimer: () => {},
-    resetTimer: () => {},
+    timeValue,
+    startTimer,
+    stopTimer,
+    resetTimer,
   };
 }

src/useScore/useScoreTime.ts

@@ -1,3 +1,30 @@
-export function useScoreTime() {
-  return {};
+import { useEffect, useRef } from "react";
+import type { UseTimerReturn } from "./hooks/useTimer";
+import type { GameStatus } from "../types";
+
+type UseScoreTimeParams = {
+  gameStatus: GameStatus;
+  timer: UseTimerReturn;
+};
+
+export function useScoreTime({ gameStatus, timer }: UseScoreTimeParams) {
+  const prevStatusRef = useRef<GameStatus | null>(null);
+  const { startTimer, stopTimer, resetTimer } = timer;
+
+  useEffect(() => {
+    prevStatusRef.current = gameStatus;
+
+    switch (gameStatus) {
+      case "started":
+        resetTimer();
+        startTimer();
+        break;
+
+      case "game-over":
+      case "game-won":
+      case "waiting":
+        stopTimer();
+        break;
+    }
+  }, [gameStatus, startTimer, stopTimer, resetTimer]);
 }