chg: dev: massive refactor on front-end - and remove unnecessary deps #4

assets/js/mine-seeker/components/grid/GridControl.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useGame } from '../../contexts/GameContext';
+import GridField from './GridField';
+import UserControl from '../user/UserControl';
+import { BOMB_SYMBOLS, bombRadius } from '../../constants';
+
+const GridControl = ({ onClick, resign }) => {
+  const {
+    overlay, overlayTitle, overlaySubTitle,
+    webPlayer, activePlayer, mines, foundMines, bombSelected,
+    red, blue, cells, setCells, onBombToggle,
+  } = useGame();
+
+  const handleHover = (row, col) => {
+    if (!bombSelected) return;
+    const activeColor = activePlayer ? 'blue' : 'red';
+    if (activeColor !== webPlayer) return;
+
+    setCells(prev => {
+      const next = prev.map(r => r.map(c =>
+        null !== c.bombTargetArea ? { ...c, bombTargetArea: null } : c,
+      ));
+      bombRadius(row, col, prev.length, prev[0]?.length ?? 0).forEach(([r, c], i) => {
+        if (!next[r]?.[c]) return;
+
+        next[r] = [...next[r]];
+        next[r][c] = { ...next[r][c], bombTargetArea: BOMB_SYMBOLS[i] };
+      });
+      return next;
+    });
+  };
+
+  return (
+    <div className="game-wrapper">
+      <div className={`game-overlay${overlay ? '' : ' hide'}`}>
+        <div className="game-overlay-window">
+          <h1>{overlayTitle}</h1>
+          <h2>{overlaySubTitle}</h2>
+        </div>
+      </div>
+      <UserControl
+        webPlayer={webPlayer}
+        activePlayer={activePlayer}
+        mines={mines}
+        foundMines={foundMines}
+        red={red}
+        blue={blue}
+        onBombToggle={onBombToggle}
+        resign={resign}
+      />
+      <div className="grid-container">
+        <div className="grid">
+          {cells.flatMap((row, r) =>
+            row.map((cell, c) => (
+              <GridField
+                key={`${r}_${c}`}
+                cell={cell}
+                onClick={() => onClick([r, c])}
+                onMouseEnter={() => handleHover(r, c)}
+              />
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GridControl;