feat: implement Phase 20 - puzzle generation and rendering

Port sudoku generation algorithm and integrate with game flow:

Core Changes:
- src/useBoard/SudokuGenerator.ts: Ported from src_old/lib/Sudoku.ts
  - Full puzzle generation algorithm (robatron/sudoku.js)
  - Supports all difficulty levels (easy through inhuman)
  - Returns 81-character string representation

- src/useBoard/useBoard.ts: Enhanced with puzzle state
  - Added boardRef and initialBoardRef for state management
  - Added generateBoard(difficulty) method
  - Updated renderBoard() to display givens from board string
  - Cells show digits for givens, empty for '.' characters

- src/useGame.ts: Integrated game flow
  - Reads difficulty from GameOptions (defaults to 'easy')
  - Generates puzzle on startGame (gameStatus → 'started')
  - Re-renders board on status changes
  - quitGame returns to empty grid

Game Flow:
- Waiting: Empty 9x9 grid
- Press Space → startGame() → puzzle generated (~62 givens on easy)
- Press Q → quitGame() → empty grid

Testing platformHook integration:
- startGame trigger working via useKeyBindings
- quitGame trigger working via useKeyBindings
- Board state properly cleared/populated on status changes

Phase 20 complete. Next: Phase 30 (useGameStatus hook).

src/useBoard/useBoard.ts

@@ -1,12 +1,23 @@
 import { useRef } from 'react';
+import { sudoku } from './SudokuGenerator';
 
 export function useBoard() {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const boardRef = useRef<string>('');
+  const initialBoardRef = useRef<string>('');
+
+  function generateBoard(difficulty: string = 'easy') {
+    const newBoard = sudoku.generate(difficulty);
+    boardRef.current = newBoard;
+    initialBoardRef.current = newBoard;
+  }
 
   function renderBoard() {
     const container = containerRef.current;
     if (!container) return;
 
+    const board = boardRef.current;
+
     container.innerHTML = '';
     
     const sudokuDiv = document.createElement('div');
@@ -22,7 +33,14 @@ export function useBoard() {
       cell.className = 'sudoku-cell';
       cell.dataset.r = String(r);
       cell.dataset.c = String(c);
-      cell.textContent = '';
+      
+      const value = board[i];
+      if (value && value !== '.') {
+        cell.textContent = value;
+      } else {
+        cell.textContent = '';
+      }
+      
       grid.appendChild(cell);
     }
 
@@ -32,6 +50,9 @@ export function useBoard() {
 
   return {
     containerRef,
+    boardRef,
+    initialBoardRef,
+    generateBoard,
     renderBoard,
   };
 }