feat: add typing mechanics with visual feedback and safe margins

Implement core typing game mechanics with keyboard input handling. Correct
letters trigger explosion animation with radiating particles and spawn new
letter. Wrong letters flash red for immediate feedback. Add 50px margins on
both edges to prevent spaceship and letters from appearing at screen borders.

example/src/useKeyBindings.ts

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import type { GameManager } from "../../src";
 
 export const useKeyBindings = (gameManager: GameManager) => {
-  const { gameStatus, renderBoard, startGame, quitGame, clearKeyLog } = gameManager;
+  const { gameStatus, renderBoard, startGame, quitGame, clearKeyLog, handleTypedLetter } = gameManager;
 
   useEffect(() => {
     const handler = (ev: KeyboardEvent) => {
@@ -29,10 +29,17 @@ export const useKeyBindings = (gameManager: GameManager) => {
         quitGame();
         return;
       }
+
+      // handle letter typing during game
+      if (gameStatus === "started") {
+        if (ev.key.length === 1 && /[a-zA-Z]/.test(ev.key)) {
+          handleTypedLetter(ev.key);
+        }
+      }
     };
 
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [gameStatus]);
+  }, [gameStatus, handleTypedLetter]);
 };