player stopped moving

AGENTS.md

@@ -89,6 +89,7 @@ import { MazeRenderer } from './MazeRenderer';
 - **Destructuring**: Use object destructuring for parameters and returns
 - **Arrow functions**: Prefer arrow functions for consistency
 - **No useCallback/useMemo**: React 19 optimization makes these hooks unnecessary
+- **useEffect dependencies**: Only use values, never functions as dependencies
 
 ### Error Handling
 - **Early returns**: Guard clauses at function start
@@ -178,6 +179,7 @@ export function useGame(options: GameOptions, platformHook?: unknown): GameManag
 - Write overly complex implementations
 - Add unnecessary features
 - Use `useCallback` or `useMemo` anywhere in the codebase
+- Use functions as useEffect dependencies
 
 ### Always DO
 - Follow existing code patterns exactly

src/useCursor/useHero.ts

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import type { BoardManager, GameStatus, Coord } from "../types";
 import { useHeroRender } from "./useHeroRender";
 
@@ -8,35 +8,35 @@ export function useHero(board: BoardManager, gameStatus: GameStatus) {
 
   const animatingRef = useRef(false);
 
-  const getCellEl = useCallback((r: number, c: number): HTMLElement | null => {
+  function getCellEl(r: number, c: number): HTMLElement | null {
     const container = containerRef.current;
     if (!container) return null;
     const mazeDiv = container.querySelector("#maze");
     if (!mazeDiv) return null;
     const selector = `.maze-row > div[data-r="${r}"][data-c="${c}"]`;
     return mazeDiv.querySelector(selector) as HTMLElement | null;
-  }, [containerRef]);
+  }
 
-  const leaveTrail = useCallback((r: number, c: number) => {
+  function leaveTrail(r: number, c: number) {
     const el = getCellEl(r, c);
     if (!el) return;
     el.classList.add("trail");
     setTimeout(() => el.classList.remove("trail"), 220);
-  }, [getCellEl]);
+  }
 
-  const flashInvalid = useCallback(() => {
+  function flashInvalid() {
     if (!heroPos) return;
     const el = getCellEl(heroPos.row, heroPos.col);
     if (!el) return;
     el.classList.add("invalid-move");
     setTimeout(() => el.classList.remove("invalid-move"), 180);
-  }, [heroPos, getCellEl]);
+  }
 
   useEffect(() => {
     const onInvalid = () => flashInvalid();
     window.addEventListener("maze-invalid", onInvalid);
     return () => window.removeEventListener("maze-invalid", onInvalid);
-  }, [flashInvalid]);
+  }, []);
 
   useEffect(() => {
     if (gameStatus === 'started' && !heroPos) {
@@ -61,14 +61,13 @@ export function useHero(board: BoardManager, gameStatus: GameStatus) {
     }
   }, [gameStatus, containerRef]);
 
-  const moveHero = useCallback(
+  function moveHero(
-    (
     dr: number,
     dc: number,
     steps: number | undefined,
     gameStatus: GameStatus,
     setGameStatus: (s: GameStatus) => void
-    ) => {
+  ) {
     const m = mazeRef.current;
     if (!heroPos || !m.length) return;
     if (gameStatus !== "started" && gameStatus !== "hasKey") return;
@@ -194,9 +193,7 @@ export function useHero(board: BoardManager, gameStatus: GameStatus) {
     }
 
     setHeroPos({ row: newR, col: newC });
-    },
+  }
-    [heroPos, mazeRef, containerRef, flashInvalid, leaveTrail]
-  );
 
   const hero = {
     heroPos,

src/useKeyBindings/useKeyBindings.ts

@@ -112,7 +112,7 @@ export const useKeyBindings = ({ cursor, gameStatus, setGameStatus }: UseKeyBind
 
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [cursor, gameStatus]);
+  }, [gameStatus]);
 
   return {
     keyLog,