starting new structure

src_old/useGame/useSudokuRenderer.ts

@@ -0,0 +1,87 @@
+import { useRef, useCallback } from "react";
+
+export function useRenderer() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const renderEmptyBoard = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.innerHTML = "";
+    const sudokuDiv = document.createElement("div");
+    sudokuDiv.id = "sudoku";
+
+    const grid = document.createElement("div");
+    grid.className = "sudoku-grid";
+
+    for (let i = 0; i < 81; i++) {
+      const r = Math.floor(i / 9);
+      const c = i % 9;
+      const cell = document.createElement("div");
+      cell.className = "sudoku-cell";
+      cell.dataset.r = String(r);
+      cell.dataset.c = String(c);
+      cell.textContent = "";
+      grid.appendChild(cell);
+    }
+
+    sudokuDiv.appendChild(grid);
+    container.appendChild(sudokuDiv);
+  }, []);
+
+  const renderBoard = useCallback((board: string, initialBoard?: string) => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.innerHTML = "";
+    const sudokuDiv = document.createElement("div");
+    sudokuDiv.id = "sudoku";
+
+    const grid = document.createElement("div");
+    grid.className = "sudoku-grid";
+
+    for (let i = 0; i < 81; i++) {
+      const r = Math.floor(i / 9);
+      const c = i % 9;
+      const cell = document.createElement("div");
+      cell.className = "sudoku-cell";
+      cell.dataset.r = String(r);
+      cell.dataset.c = String(c);
+      cell.textContent = board[i] === "." ? "" : board[i];
+      
+      if (initialBoard && board[i] !== "." && board[i] !== initialBoard[i]) {
+        cell.classList.add("user-entered");
+      }
+      
+      grid.appendChild(cell);
+    }
+
+    sudokuDiv.appendChild(grid);
+    container.appendChild(sudokuDiv);
+  }, []);
+
+  const highlightCursor = useCallback((r: number, c: number, isEditing = false) => {
+    const container = containerRef.current;
+    if (!container) return;
+    
+    const sudokuDiv = container.querySelector("#sudoku");
+    if (!sudokuDiv) return;
+
+    sudokuDiv.querySelectorAll(".active").forEach((el) => el.classList.remove("active"));
+    sudokuDiv.querySelectorAll(".editing").forEach((el) => el.classList.remove("editing"));
+    
+    const selector = `.sudoku-cell[data-r="${r}"][data-c="${c}"]`;
+    const cell = sudokuDiv.querySelector(selector);
+    if (cell) {
+      cell.classList.add("active");
+      if (isEditing) {
+        cell.classList.add("editing");
+      }
+    }
+  }, []);
+
+  return { containerRef, renderEmptyBoard, renderBoard, highlightCursor };
+}
+
+export type UseRenderer = ReturnType<typeof useRenderer>;
+