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