working on useScore

example/src/App.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useGame } from "../../src/useGame/useGame";
 import { useKeyBindings } from './useKeyBindings';
 import { useMounted } from './useMounted';
@@ -13,25 +14,32 @@ function formatTime(ms: number): string {
 
 export default function App() {
   const mounted = useMounted();
-  const { 
-    containerRef, 
-    initGame, 
-    solveBoard, 
+  const {
+    containerRef,
+    initGame,
+    solveBoard,
     scoreManager,
+    boardManager,
     keyLog,
     gameStatus,
   } = useGame(useKeyBindings);
 
   const { timeValue, finalScore } = scoreManager;
 
+  const stringed = boardManager.boardToString(true);
+
+  useEffect(() => {
+    console.log(stringed);
+  }, [stringed]);
+
   return (
     <div style={{ padding: 16 }}>
       <h1>VIMazing Sudoku</h1>
-      
+
       {/* Scoreboard */}
-      <div style={{ 
-        display: 'flex', 
-        gap: 32, 
+      <div style={{
+        display: 'flex',
+        gap: 32,
         marginBottom: 16,
         fontFamily: 'monospace',
         fontSize: 18,
@@ -53,7 +61,7 @@ export default function App() {
         <div ref={containerRef} />
         {mounted && <GameOverlay gameStatus={gameStatus} scoreManager={scoreManager} />}
       </div>
-      
+
       <div style={{ marginTop: 20, display: 'flex', gap: 8 }}>
         <button onClick={initGame}>New Puzzle</button>
         <button onClick={solveBoard}>Solve</button>

src/useGame/useBoardState.ts

@@ -41,6 +41,27 @@ export function useBoardState(cursorManager: UseCursorType) {
     }
   }, [board]);
 
+  const boardToString = useCallback((human: boolean = false) => {
+    // Computer-optimized: compact 81-character string
+    if (!human) {
+      return board;
+    }
+
+    // Human-readable: formatted grid with 3x3 box separators
+    let result = "";
+    for (let r = 0; r < 9; r++) {
+      for (let c = 0; c < 9; c++) {
+        const idx = r * 9 + c;
+        result += board[idx] === "." ? "." : board[idx];
+        if (c === 2 || c === 5) result += " | ";
+        else if (c < 8) result += " ";
+      }
+      result += "\n";
+      if (r === 2 || r === 5) result += "------+-------+------\n";
+    }
+    return result;
+  }, [board]);
+
   return {
     board,
     initialBoard,
@@ -49,6 +70,7 @@ export function useBoardState(cursorManager: UseCursorType) {
     erase,
     reset,
     solveBoard,
+    boardToString,
   };
 }