board consumed in example

src/useGame/useRenderer.ts

@@ -0,0 +1,46 @@
+import { useRef } from "react";
+
+export type BoardData = {
+  cols: number;
+  rows: number;
+};
+
+export function useRenderer() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const renderBoard = (cols: number, rows: number) => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.innerHTML = "";
+
+    const board = document.createElement("div");
+    board.id = "snake-board";
+    board.className = "snake-board";
+
+    for (let r = 0; r < rows; r++) {
+      const rowDiv = document.createElement("div");
+      rowDiv.className = "snake-row";
+      rowDiv.setAttribute("data-r", String(r));
+
+      for (let c = 0; c < cols; c++) {
+        const cellDiv = document.createElement("div");
+        cellDiv.className = "snake-cell";
+        cellDiv.setAttribute("data-r", String(r));
+        cellDiv.setAttribute("data-c", String(c));
+        rowDiv.appendChild(cellDiv);
+      }
+
+      board.appendChild(rowDiv);
+    }
+
+    container.appendChild(board);
+  };
+
+  return {
+    containerRef,
+    renderBoard,
+  };
+}
+
+export type UseRendererType = ReturnType<typeof useRenderer>;