From b57442bec1b0fe4317805663ee2b09777b016bf1 Mon Sep 17 00:00:00 2001
From: Lang <7system7@gmail.com>
Date: Fri, 10 Apr 2026 17:57:26 +0200
Subject: [PATCH] chg: dev: massive refactor on front-end - and remove
unnecessary deps #4
---
assets/js/app.jsx | 12 +
assets/js/mine-seeker.js | 11 -
assets/js/mine-seeker/MineSeeker.jsx | 26 +
assets/js/mine-seeker/app.js | 428 ----
.../js/mine-seeker/components/GameBoard.jsx | 28 +
.../components/grid/GridControl.jsx | 69 +
.../mine-seeker/components/grid/GridField.jsx | 45 +
.../js/mine-seeker/components/user/User.jsx | 39 +
.../components/user/UserControl.jsx | 43 +
assets/js/mine-seeker/constants.js | 63 +
.../js/mine-seeker/contexts/GameContext.jsx | 233 ++
assets/js/mine-seeker/grid/grid-control.js | 301 ---
assets/js/mine-seeker/grid/grid-field.js | 156 --
assets/js/mine-seeker/hooks/useServerComm.js | 264 +++
assets/js/mine-seeker/user/user-control.js | 82 -
assets/js/mine-seeker/user/user.js | 90 -
eslint.config.mjs | 6 +
package-lock.json | 2050 ++++++++++++++---
package.json | 11 +-
src/Util/TopicManager.php | 3 +-
symfony.lock | 2 +-
webpack.config.js | 82 +-
22 files changed, 2619 insertions(+), 1425 deletions(-)
create mode 100644 assets/js/app.jsx
delete mode 100644 assets/js/mine-seeker.js
create mode 100644 assets/js/mine-seeker/MineSeeker.jsx
delete mode 100644 assets/js/mine-seeker/app.js
create mode 100644 assets/js/mine-seeker/components/GameBoard.jsx
create mode 100644 assets/js/mine-seeker/components/grid/GridControl.jsx
create mode 100644 assets/js/mine-seeker/components/grid/GridField.jsx
create mode 100644 assets/js/mine-seeker/components/user/User.jsx
create mode 100644 assets/js/mine-seeker/components/user/UserControl.jsx
create mode 100644 assets/js/mine-seeker/constants.js
create mode 100644 assets/js/mine-seeker/contexts/GameContext.jsx
delete mode 100644 assets/js/mine-seeker/grid/grid-control.js
delete mode 100644 assets/js/mine-seeker/grid/grid-field.js
create mode 100644 assets/js/mine-seeker/hooks/useServerComm.js
delete mode 100644 assets/js/mine-seeker/user/user-control.js
delete mode 100644 assets/js/mine-seeker/user/user.js
diff --git a/assets/js/app.jsx b/assets/js/app.jsx
new file mode 100644
index 0000000..b6f2d6d
--- /dev/null
+++ b/assets/js/app.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import MineSeeker from './mine-seeker/MineSeeker';
+
+const wrapper = document.getElementById('mine-wrapper');
+
+createRoot(wrapper).render(
+ ,
+);
diff --git a/assets/js/mine-seeker.js b/assets/js/mine-seeker.js
deleted file mode 100644
index cfb2252..0000000
--- a/assets/js/mine-seeker.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import MineSeeker from "./mine-seeker/app";
-
-ReactDOM.render(
- ,
- document.getElementById("mine-wrapper"),
-);
diff --git a/assets/js/mine-seeker/MineSeeker.jsx b/assets/js/mine-seeker/MineSeeker.jsx
new file mode 100644
index 0000000..13be55f
--- /dev/null
+++ b/assets/js/mine-seeker/MineSeeker.jsx
@@ -0,0 +1,26 @@
+import React, { useRef } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { GameProvider } from './contexts/GameContext';
+import { GameBoard } from './components/GameBoard';
+
+const queryClient = new QueryClient();
+
+const MineSeeker = ({ env, gameId }) => {
+ const isEnvDev = 'dev' === env;
+ const gameAssoc = useRef('' !== gameId ? gameId : crypto.randomUUID()).current;
+ const gameInherited = '' !== gameId;
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default MineSeeker;
diff --git a/assets/js/mine-seeker/app.js b/assets/js/mine-seeker/app.js
deleted file mode 100644
index eaafd32..0000000
--- a/assets/js/mine-seeker/app.js
+++ /dev/null
@@ -1,428 +0,0 @@
-import React from 'react';
-import GridControl from './grid/grid-control';
-
-class MineSeeker extends React.Component {
- constructor(props) {
- super(props);
-
- let gameAssoc = '' !== props.gameId ? props.gameId : crypto.randomUUID();
- let channel = 'mineseeker/channel/' + gameAssoc;
-
- this.state = {
- env: props.env,
- gameInherited: '' !== props.gameId,
- gameAssoc: gameAssoc,
- channel: channel,
- stepCache: [],
- connectionLost: false,
- end: false,
- };
-
- /** SSE connection (not React state — no re-render needed) */
- this.eventSource = null;
-
- /**
- * Users from GET /api/game/connect (inherited game).
- * Passed to wSubscribe so it can determine the local player's colour.
- */
- this.rpcUsers = null;
- }
-
- currectGridSize() {
- let $field = $('#mine-wrapper .grid');
- $field.height($field.width());
-
- $field = $('#mine-wrapper .grid .field-wrapper');
- $field.height($field.width());
-
- $('#mine-wrapper .grid .field-wrapper .field')
- .height($field.width())
- .css('line-height', ($field.width() - 2) + 'px');
- }
-
- /**
- * THE END
- */
- makeGameEndIfItEnds(bluePoints, redPoints, resign = false, leftMines = []) {
- let redWins = 25 < redPoints,
- blueWins = 25 < bluePoints;
-
- if (redWins || blueWins || resign) {
- this.refs.gridControl.state.sound.won.play();
-
- if (false === resign) {
- this.refs.gridControl.setState({
- overlay: true,
- overlayTitle: (redWins ? 'Red' : 'Blue') + ' wins the game!',
- overlaySubTitle: 'Play again!',
- });
- }
-
- this.refs.gridControl.showLeftMines(leftMines);
- this.refs.gridControl.refs.userControl.setState({ activePlayer: false });
- this.refs.gridControl.refs.userControl.refs.red.setState({ desc: '' });
- this.refs.gridControl.refs.userControl.refs.blue.setState({ desc: '' });
- }
- }
-
- resignProcess(color) {
- this.refs.gridControl.setState({
- overlay: true,
- overlayTitle: color === this.refs.gridControl.state.webPlayer
- ? 'You have been give up'
- : 'Your opponent has been resigned',
- overlaySubTitle: color === this.refs.gridControl.state.webPlayer
- ? 'You LOSE!'
- : 'You WIN!',
- });
-
- this.setState({ end: true });
- this.makeGameEndIfItEnds(0, 0, true);
- }
-
- clickResign() {
- let resignColor = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
- this.publishStep({ resign: resignColor });
- this.resignProcess(this.refs.gridControl.state.webPlayer);
- }
-
- clickResignCancel() {
- this.refs.gridControl.setState({ overlay: false });
- }
-
- resign() {
- let users = this.refs.gridControl.refs.userControl,
- activePlayer = users.state.activePlayer ? 'blue' : 'red';
-
- if (this.refs.gridControl.state.webPlayer === activePlayer) {
- this.refs.gridControl.setState({
- overlay: true,
- overlayTitle: 'Are u sure u want to resign?!',
- overlaySubTitle: (
-
- ),
- });
- }
- }
-
- // ------------------------------------------------------------------ //
- // Mercure message handlers (same logic as former WAMP callbacks)
- // ------------------------------------------------------------------ //
-
- wSubscribe(payload, rpcUsers = null) {
- 'dev' === this.state.env && console.info(
- ('undefined' !== typeof payload.user ? payload.user : 'user') + ' has been subscribed to the channel!',
- );
-
- let firstUser = !rpcUsers;
-
- null === this.refs.gridControl.state.webPlayer && this.refs.gridControl.setState({
- webPlayer: payload.user === payload.users.blue
- || (
- firstUser && '' !== payload.users.blueAnon
- || !firstUser && ('' === rpcUsers.blueAnon && '' === rpcUsers.blue)
- )
- ? 'blue' : 'red',
- });
-
- (900 > $(document).width()) && this.currectGridSize();
-
- if (
- 2 === payload.userCnt
- && (
- !this.state.connectionLost
- || this.state.connectionLost && false === this.refs.gridControl.refs.userControl.state.activePlayer && !this.state.end
- )
- ) {
- this.makeGameStart(payload);
- }
- }
-
- wUnsubscribe(payload) {
- 'dev' === this.state.env && console.info(payload.msg);
-
- this.refs.gridControl.setState({
- overlay: true,
- overlayTitle: 'The connection has been lost w/ your friend...',
- overlaySubTitle: 'Please, restart the game!',
- });
- }
-
- /**
- * Opponent's step arrived via Mercure — apply the server-resolved revealed cells.
- */
- wTopic(payload) {
- if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
- if (null === payload.data.resign) {
- 'dev' === this.state.env && console.warn(
- payload.user + ' stepped to ' + payload.data.coords[0] + ',' + payload.data.coords[1],
- );
-
- this.refs.gridControl.refs.userControl.setState({ bombSelected: payload.data.bomb });
- this.refs.gridControl.applyStep(payload.data);
- this.makeGameEndIfItEnds(payload.data.bluePoints, payload.data.redPoints, false, payload.data.leftMines);
- } else {
- this.resignProcess(payload.data.resign);
- }
- }
- }
-
- // ------------------------------------------------------------------ //
- // Mercure / SSE connection
- // ------------------------------------------------------------------ //
-
- handleMercureMessage(payload) {
- let isTopicEvent = 'undefined' !== typeof payload.data;
- let isNotUnsubscribe = 'undefined' === typeof payload.msg;
-
- if (isTopicEvent) {
- this.wTopic(payload);
- } else if (isNotUnsubscribe) {
- this.wSubscribe(payload, this.rpcUsers);
- } else {
- this.wUnsubscribe(payload);
- }
-
- /** Reconnection: replay cached steps once both players are back */
- if (2 === payload.userCnt && this.state.connectionLost) {
- 'dev' === this.state.env && console.info('Reconnection process');
-
- let cache = this.state.stepCache;
- cache.forEach(item => this.publishStep(item));
- this.setState({ connectionLost: false, stepCache: [] });
- }
- }
-
- openEventSource() {
- const wrapper = document.getElementById('mine-wrapper');
- const hubUrl = wrapper.dataset.mercureHubUrl;
- const subscriberJwt = wrapper.dataset.mercureSubscriberJwt;
-
- const url = new URL(hubUrl, window.location.origin);
- url.searchParams.append('topic', this.state.channel);
- if (subscriberJwt) {
- url.searchParams.append('authorization', subscriberJwt);
- }
-
- if (this.eventSource) {
- this.eventSource.close();
- }
-
- this.eventSource = new EventSource(url.toString());
-
- this.eventSource.onmessage = event => {
- this.handleMercureMessage(JSON.parse(event.data));
- };
-
- this.eventSource.onopen = () => {
- 'dev' === this.state.env && console.info('SSE connection opened');
-
- if (this.state.connectionLost) {
- 'dev' === this.state.env && console.info('SSE reconnected — rejoining channel');
- this.joinGame();
- }
- };
-
- this.eventSource.onerror = () => {
- 'dev' === this.state.env && console.error('SSE connection error / lost');
- this.setState({ connectionLost: true });
- };
- }
-
- /**
- * Initialise the grid control with an empty 16×16 grid.
- * For inherited games, previously revealed cells are applied after the grid renders.
- */
- wInit(revealedCells = []) {
- // 16×16 grid of null — cells are filled in lazily as they are revealed by the server
- let emptyGrid = Array.from({ length: 16 }, () => Array(16).fill(null));
-
- this.refs.gridControl.setState({
- grid: emptyGrid,
- channel: this.state.channel,
- desc: {
- buddy: (
-
- Your buddy is
- making a
- move.
-
- ),
- you: (
-
- It is your turn!
- Make a move.
-
- ),
- },
- overlay: true,
- overlayTitle: 'We are waiting for your opponent...',
- overlaySubTitle: this.state.gameAssoc
- ? (
-
-
Share this unique link w/ your opponent
-
-
-
-
Play w/ me!
-
+
+
+
{overlayTitle}
+ {overlaySubTitle}
+
+
+
+
+
+ {cells.flatMap((row, r) =>
+ row.map((cell, c) => (
+ onClick([r, c])}
+ onMouseEnter={() => handleHover(r, c)}
+ />
+ ))
+ )}
+
+
+
+
+
{currentImage}
: null;
+
+ const bSrc = bombSrc(bombTargetArea);
+ const showLast = lastClickedRed || lastClickedBlue;
+ const lastClass = 'field-' + (lastClickedRed ? 'red' : 'blue') + '-last last-clicked';
+ const lastSrc = lastClickedRed ? IMG + 'bg-last-red-outbg.png' : IMG + 'bg-last-blue-outbg.png';
+
+ return (
+
+
+ {bSrc &&
}
+ {showLast &&
}
+
+
+
+
{color}
+ {active &&
}
+
+
+
{name}
+
+
{desc}
+
+
+
{mines}
+
+
+
+
+
handleBombClick('blue', 1)}
+ />
+
+
+ handleBombClick('red', 0)}
+ />
+
+ Your buddy is
making a
move.
,
+ you: It is your turn!
Make a move.
,
+};
+
+export const BOMB_SYMBOLS = [
+ [null, null], [0, 0], [1, 0], [2, 0], [0, 1], [2, 1], [0, 2], [1, 2], [2, 2],
+ [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
+ [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
+ [null, null], [null, null],
+];
+
+export const bombRadius = (row, col, rows, cols) => {
+ const centre = 1 < row && row < rows - 2 && 1 < col && col < cols - 2;
+ if (!centre) {
+ col = Math.max(2, Math.min(col, cols - 3));
+ row = Math.max(2, Math.min(row, rows - 3));
+ }
+ return [
+ [row, col], [row - 2, col - 2], [row - 2, col], [row - 2, col + 2],
+ [row, col - 2], [row, col + 2], [row + 2, col - 2], [row + 2, col],
+ [row + 2, col + 2], [row - 2, col + 1], [row - 2, col - 1],
+ [row - 1, col - 2], [row - 1, col - 1], [row - 1, col], [row - 1, col + 1], [row - 1, col + 2],
+ [row, col - 1], [row, col + 1], [row + 1, col - 2], [row + 1, col - 1], [row + 1, col],
+ [row + 1, col + 1], [row + 1, col + 2], [row + 2, col - 1], [row + 2, col + 1],
+ ];
+};
+
+export const patchCells = (prev, patches) => {
+ const next = prev.map(r => [...r]);
+ for (const { row, col, ...rest } of patches) {
+ next[row][col] = { ...next[row][col], ...rest };
+ }
+ return next;
+};
+
+export const initCells = () =>
+ Array.from({ length: ROWS }, () =>
+ Array.from({ length: COLS }, () => ({
+ currentImage: IMG + WAVES[Math.floor(Math.random() * 3) + 1],
+ currentObj: 'w',
+ active: false,
+ lastClickedRed: false,
+ lastClickedBlue: false,
+ bombTargetArea: null,
+ })),
+ );
diff --git a/assets/js/mine-seeker/contexts/GameContext.jsx b/assets/js/mine-seeker/contexts/GameContext.jsx
new file mode 100644
index 0000000..3c8f4a3
--- /dev/null
+++ b/assets/js/mine-seeker/contexts/GameContext.jsx
@@ -0,0 +1,233 @@
+import React, { createContext, useContext, useRef, useState } from 'react';
+import { Howl } from 'howler';
+import { IMG, PLAYER_DEF, DESC, patchCells, initCells } from '../constants';
+
+// ── Context ──────────────────────────────────────────────────────────────────
+
+const GameContext = createContext(null);
+
+export const useGame = () => useContext(GameContext);
+
+// ── Provider ─────────────────────────────────────────────────────────────────
+
+export const GameProvider = ({ children }) => {
+ // Refs that are read inside async callbacks (stay in sync with state via sync* helpers)
+ const webPlayerRef = useRef(null);
+ const activePlayerRef = useRef(false);
+ const bombSelectedRef = useRef(false);
+ const connectionLostRef = useRef(false);
+ const redRef = useRef({ ...PLAYER_DEF });
+ const blueRef = useRef({ ...PLAYER_DEF });
+ const lastClickedRef = useRef({ red: null, blue: null });
+ const endRef = useRef(false);
+
+ const sounds = useRef({
+ click: new Howl({ src: ['/sound/click.mp3'] }),
+ bomb: new Howl({ src: ['/sound/bomb.mp3'] }),
+ mine: new Howl({ src: ['/sound/mine.mp3'] }),
+ warning: new Howl({ src: ['/sound/warning.mp3'] }),
+ won: new Howl({ src: ['/sound/won.mp3'] }),
+ });
+
+ // Display state
+ const [webPlayer, setWebPlayer] = useState(null);
+ const [activePlayer, setActivePlayer] = useState(false);
+ const [overlay, setOverlay] = useState(true);
+ const [overlayTitle, setOverlayTitle] = useState('');
+ const [overlaySubTitle, setOverlaySubTitle] = useState('');
+ const [mines, setMines] = useState(51);
+ const [bombSelected, setBombSelected] = useState(false);
+ const [foundMines, setFoundMines] = useState(false);
+ const [red, setRed] = useState({ ...PLAYER_DEF });
+ const [blue, setBlue] = useState({ ...PLAYER_DEF });
+ const [cells, setCells] = useState(initCells);
+ const [gridReady, setGridReady] = useState(false);
+ const [connectionLost, setConnectionLost] = useState(false);
+
+ // ── Sync helpers (keep ref + state in lockstep) ──────────────────────────
+ const syncWebPlayer = v => {
+ webPlayerRef.current = v;
+ setWebPlayer(v);
+ };
+ const syncActivePlayer = v => {
+ activePlayerRef.current = v;
+ setActivePlayer(v);
+ };
+ const syncBombSelected = v => {
+ bombSelectedRef.current = v;
+ setBombSelected(v);
+ };
+ const syncConnLost = v => {
+ connectionLostRef.current = v;
+ setConnectionLost(v);
+ };
+ const syncRed = fn => {
+ const n = fn(redRef.current);
+ redRef.current = n;
+ setRed(n);
+ };
+ const syncBlue = fn => {
+ const n = fn(blueRef.current);
+ blueRef.current = n;
+ setBlue(n);
+ };
+
+ // ── Overlay ───────────────────────────────────────────────────────────────
+ const showOverlay = (title, sub) => {
+ setOverlay(true);
+ setOverlayTitle(title);
+ setOverlaySubTitle(sub);
+ };
+
+ const hideOverlay = () => setOverlay(false);
+
+ // ── Cell helpers ──────────────────────────────────────────────────────────
+ const applyRevealedCell = (cell, player, isMainCell = false) => {
+ const { row, col, value } = cell;
+ setCells(prev => {
+ if (prev[row][col].active) return prev;
+ const patch = 'm' === value
+ ? { currentImage: `${IMG}bg-flag-${player}-outbg.png`, currentObj: 'm', active: true }
+ : { currentImage: value, currentObj: value, active: true };
+ if (isMainCell) {
+ patch.lastClickedRed = 'red' === player;
+ patch.lastClickedBlue = 'blue' === player;
+ }
+ return patchCells(prev, [{ row, col, ...patch }]);
+ });
+ if (isMainCell) lastClickedRef.current = { ...lastClickedRef.current, [player]: [row, col] };
+ };
+
+ const showLeftMines = (leftMines = []) => {
+ if (!leftMines.length) return;
+ setCells(prev => {
+ const patches = leftMines
+ .filter(({ row, col }) => !prev[row][col].active)
+ .map(({ row, col }) => ({ row, col, currentImage: IMG + 'bg-left-mine-outbg.png' }));
+ return patches.length ? patchCells(prev, patches) : prev;
+ });
+ };
+
+ // ── Game logic ────────────────────────────────────────────────────────────
+ const changePlayer = () => {
+ const wasColor = activePlayerRef.current ? 'blue' : 'red';
+ const nextColor = activePlayerRef.current ? 'red' : 'blue';
+ const nextVal = activePlayerRef.current ? 0 : 1;
+ const desc = wasColor === webPlayerRef.current ? DESC.buddy : DESC.you;
+
+ syncActivePlayer(nextVal);
+ syncRed(p => ({ ...p, active: 'red' === nextColor, desc: 'red' === nextColor ? desc : '' }));
+ syncBlue(p => ({ ...p, active: 'blue' === nextColor, desc: 'blue' === nextColor ? desc : '' }));
+ };
+
+ const applyStep = stepData => {
+ const { player, bomb: isBomb, minesFound = 0, revealedCells = [], redPoints: rp, bluePoints: bp } = stepData;
+
+ if (isBomb) {
+ sounds.current.bomb.play();
+ } else if (0 < minesFound) {
+ const cur = ('red' === player ? redRef : blueRef).current.mines;
+ sounds.current[20 < cur + minesFound ? 'warning' : 'mine'].play();
+ } else {
+ sounds.current.click.play();
+ }
+
+ const lc = lastClickedRef.current[player];
+ setCells(prev => {
+ let next = prev;
+ if (lc) next = patchCells(next, [{ row: lc[0], col: lc[1], lastClickedRed: false, lastClickedBlue: false }]);
+
+ revealedCells.forEach(({ row, col, value }, idx) => {
+ if (next[row][col].active) return;
+ const patch = 'm' === value
+ ? { currentImage: `${IMG}bg-flag-${player}-outbg.png`, currentObj: 'm', active: true }
+ : { currentImage: value, currentObj: value, active: true };
+ if (0 === idx) {
+ patch.lastClickedRed = 'red' === player;
+ patch.lastClickedBlue = 'blue' === player;
+ }
+ next = patchCells(next, [{ row, col, ...patch }]);
+ });
+
+ if (isBomb) next = next.map(r => r.map(c => null !== c.bombTargetArea ? { ...c, bombTargetArea: null } : c));
+ return next;
+ });
+
+ if (0 < revealedCells.length) {
+ lastClickedRef.current = { ...lastClickedRef.current, [player]: [revealedCells[0].row, revealedCells[0].col] };
+ }
+
+ if (0 < minesFound) {
+ setMines(51 - rp - bp);
+ setFoundMines(true);
+ setTimeout(() => setFoundMines(false), 500);
+ syncRed(p => ({ ...p, mines: 'red' === player ? rp : p.mines }));
+ syncBlue(p => ({ ...p, mines: 'blue' === player ? bp : p.mines }));
+ }
+
+ syncRed(p => ({ ...p, enabledBomb: rp <= bp }));
+ syncBlue(p => ({ ...p, enabledBomb: bp <= rp }));
+
+ if (isBomb || 0 === minesFound) changePlayer();
+
+ if (isBomb) {
+ syncBombSelected(false);
+ syncRed(p => 'red' === player ? { ...p, haveBomb: false } : p);
+ syncBlue(p => 'blue' === player ? { ...p, haveBomb: false } : p);
+ }
+ };
+
+ const makeGameEndIfItEnds = (bluePoints, redPoints, resign = false, leftMines = []) => {
+ const redWins = 25 < redPoints;
+ const blueWins = 25 < bluePoints;
+
+ if (redWins || blueWins || resign) {
+ sounds.current.won.play();
+
+ if (!resign) showOverlay((redWins ? 'Red' : 'Blue') + ' wins the game!', 'Play again!');
+
+ showLeftMines(leftMines);
+ syncActivePlayer(false);
+ syncRed(p => ({ ...p, desc: '' }));
+ syncBlue(p => ({ ...p, desc: '' }));
+ }
+ };
+
+ const resignProcess = color => {
+ const wp = webPlayerRef.current;
+ showOverlay(
+ color === wp ? 'You have been give up' : 'Your opponent has been resigned',
+ color === wp ? 'You LOSE!' : 'You WIN!',
+ );
+ endRef.current = true;
+ makeGameEndIfItEnds(0, 0, true);
+ };
+
+ const onBombToggle = () => {
+ const next = !bombSelectedRef.current;
+ syncBombSelected(next);
+ if (!next) {
+ setCells(prev => prev.map(r => r.map(c => null !== c.bombTargetArea ? { ...c, bombTargetArea: null } : c)));
+ }
+ };
+
+ // ── Context value ─────────────────────────────────────────────────────────
+ const value = {
+ // State (for rendering)
+ webPlayer, activePlayer, overlay, overlayTitle, overlaySubTitle,
+ mines, bombSelected, foundMines, red, blue, cells, gridReady, connectionLost,
+ // Refs (needed by useServerComm for async-safe reads)
+ webPlayerRef, activePlayerRef, bombSelectedRef, connectionLostRef, endRef,
+ // Setters needed by useServerComm
+ setCells, setGridReady,
+ syncWebPlayer, syncActivePlayer, syncBombSelected, syncConnLost, syncRed, syncBlue,
+ // Game logic called by useServerComm
+ showOverlay, hideOverlay,
+ applyRevealedCell, applyStep,
+ makeGameEndIfItEnds, resignProcess,
+ // UI action (bomb toggle is pure state, no server call)
+ onBombToggle,
+ };
+
+ return {children};
+};
diff --git a/assets/js/mine-seeker/grid/grid-control.js b/assets/js/mine-seeker/grid/grid-control.js
deleted file mode 100644
index 449c497..0000000
--- a/assets/js/mine-seeker/grid/grid-control.js
+++ /dev/null
@@ -1,301 +0,0 @@
-import React from 'react';
-import GridField from './grid-field';
-import UserControl from '../user/user-control';
-import { Howl } from 'howler';
-
-class GridControl extends React.Component {
- constructor(props) {
- super(props);
-
- let click = new Howl({ src: ['/sound/click.mp3'] }),
- bomb = new Howl({ src: ['/sound/bomb.mp3'] }),
- mine = new Howl({ src: ['/sound/mine.mp3'] }),
- warning = new Howl({ src: ['/sound/warning.mp3'] }),
- won = new Howl({ src: ['/sound/won.mp3'] });
-
- this.state = {
- env: props.env,
- webPlayer: null,
- grid: null,
- desc: null,
- renderGridFields: false,
- gridFields: [],
- bombFieldCache: [],
- overlay: false,
- overlayTitle: '',
- overlaySubTitle: '',
- sound: {
- click: click,
- bomb: bomb,
- mine: mine,
- warning: warning,
- won: won,
- },
- lastClicked: {
- red: null,
- blue: null,
- },
- };
- }
-
- refString(row, col) {
- return 'gridField_' + row + '_' + col;
- }
-
- checkFieldHasBeenNeverClicked(row, col) {
- return !this.refs[this.refString(row, col)].state.active;
- }
-
- getBombRadius(row, col) {
- let isBombTargetCenter = 1 < row && row < this.state.grid.length - 2 && 1 < col && col < this.state.grid[row].length - 2;
-
- if (!isBombTargetCenter) {
- col = 2 > col ? 2 : col;
- row = 2 > row ? 2 : row;
- row = row > this.state.grid.length - 3 ? this.state.grid.length - 3 : row;
- col = col > this.state.grid[0].length - 3 ? this.state.grid[0].length - 3 : col;
- }
-
- return [
- [row, col], [row - 2, col - 2], [row - 2, col], [row - 2, col + 2], [row, col - 2], [row, col + 2],
- [row + 2, col - 2], [row + 2, col], [row + 2, col + 2], [row - 2, col + 1], [row - 2, col - 1],
- [row - 1, col - 2], [row - 1, col - 1], [row - 1, col], [row - 1, col + 1], [row - 1, col + 2],
- [row, col - 1], [row, col + 1], [row + 1, col - 2], [row + 1, col - 1], [row + 1, col],
- [row + 1, col + 1], [row + 1, col + 2], [row + 2, col - 1], [row + 2, col + 1],
- ];
- }
-
- getBombFieldRadius() {
- return [
- [null, null], [0, 0], [1, 0], [2, 0], [0, 1], [2, 1], [0, 2], [1, 2], [2, 2],
- [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
- [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
- [null, null], [null, null],
- ];
- }
-
- bombClear() {
- if (this.state.bombFieldCache.length) {
- for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) {
- var cacheItem = this.state.bombFieldCache[i];
- this.refs[this.refString(cacheItem[0], cacheItem[1])]
- .setState({ bombTargetArea: null });
- }
- this.state.bombFieldCache = [];
- }
- }
-
- bombCreate(row, col) {
- var bombFieldSymbols = this.getBombFieldRadius(),
- bombFields = this.getBombRadius(row, col);
-
- for (var i = 0, j = bombFields.length; i < j; i++) {
- this.state.bombFieldCache.push(bombFields[i]);
-
- this.refs[this.refString(bombFields[i][0], bombFields[i][1])]
- .setState({ bombTargetArea: bombFieldSymbols[i] });
- }
- }
-
- /**
- * Show unrevealed mines at the end of the game.
- * leftMines comes from the server and contains only cells not yet revealed.
- */
- showLeftMines(leftMines = []) {
- for (let mine of leftMines) {
- let currentField = this.refs[this.refString(mine.row, mine.col)];
- if (currentField && !currentField.state.active) {
- currentField.setState({
- currentImage: currentField.state.icons.root + currentField.state.icons.left,
- });
- }
- }
- }
-
- /** set __ACTIVE__ player in the UserControl */
- changePlayer() {
- var userControl = this.refs.userControl,
- activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
- inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
-
- userControl.setState({ activePlayer: userControl.state.activePlayer ? 0 : 1 });
-
- userControl.refs[activePlayer].setState({ active: false, desc: '' });
- userControl.refs[inactivePlayer].setState({
- active: true,
- desc: activePlayer === this.state.webPlayer
- ? this.state.desc.buddy
- : this.state.desc.you,
- });
- }
-
- /**
- * Apply a single revealed cell to the grid UI.
- * Called both for live steps and when reconstructing the board for a joining player.
- *
- * @param {object} cell - { row, col, value } value is 'm' | 0-8
- * @param {string} player - 'red' | 'blue'
- * @param {boolean} isMainCell - true for the primary clicked cell (sets last-clicked highlight)
- */
- applyRevealedCell(cell, player, isMainCell = false) {
- let ref = this.refs[this.refString(cell.row, cell.col)];
- if (!ref || ref.state.active) {
- return;
- }
-
- if ('m' === cell.value) {
- ref.setState({
- currentImage: ref.state.icons.root + ref.state.icons.flag[player],
- currentObj: 'm',
- active: true,
- });
- } else {
- ref.setState({
- currentImage: cell.value,
- currentObj: cell.value,
- active: true,
- });
- }
-
- if (isMainCell) {
- this.state.lastClicked[player] = [cell.row, cell.col];
- ref.setState({
- lastClickedRed: 'red' === player,
- lastClickedBlue: 'blue' === player,
- });
- }
- }
-
- /**
- * Apply a full step response from the server.
- * stepData shape: { coords, player, bomb, revealedCells, minesFound, redPoints, bluePoints, resign, gameOver,
- * leftMines }
- */
- applyStep(stepData) {
- let player = stepData.player;
- let isBomb = stepData.bomb;
- let minesFound = stepData.minesFound || 0;
- let revealedCells = stepData.revealedCells || [];
-
- // Reset previous last-clicked highlight for this player
- let lastClicked = this.state.lastClicked[player];
- if (lastClicked) {
- let lastRef = this.refs[this.refString(lastClicked[0], lastClicked[1])];
- if (lastRef) {
- lastRef.setState({ lastClickedRed: false, lastClickedBlue: false });
- }
- }
-
- // Sound
- if (isBomb) {
- this.state.sound.bomb.play();
- } else if (0 < minesFound) {
- let currentMines = this.refs.userControl.refs[player].state.mines;
- this.state.sound[20 < (currentMines + minesFound) ? 'warning' : 'mine'].play();
- } else {
- this.state.sound.click.play();
- }
-
- // Apply each revealed cell; first cell gets the last-clicked highlight
- revealedCells.forEach((cell, idx) => {
- this.applyRevealedCell(cell, player, 0 === idx);
- });
-
- // Update scores
- let userControl = this.refs.userControl;
- let inactivePlayer = 'red' === player ? 'blue' : 'red';
-
- if (0 < minesFound) {
- userControl.setState({
- mines: 51 - stepData.redPoints - stepData.bluePoints,
- foundMines: true,
- }, () => {
- setTimeout(() => userControl.setState({ foundMines: false }), 500);
- userControl.refs[player].setState({
- mines: 'red' === player ? stepData.redPoints : stepData.bluePoints,
- });
- });
- }
-
- // Bomb-enabled status: a player may use their bomb when their score <= opponent's
- userControl.refs.red.setState({ enabledBomb: stepData.redPoints <= stepData.bluePoints });
- userControl.refs.blue.setState({ enabledBomb: stepData.bluePoints <= stepData.redPoints });
-
- // Change active player: always after a bomb, or when no mine was found on a normal click
- if (isBomb || 0 === minesFound) {
- this.changePlayer();
- }
-
- // Clean up bomb state
- if (isBomb) {
- userControl.setState({ bombSelected: false });
- userControl.refs[player].setState({ haveBomb: false });
- this.bombClear();
- }
- }
-
- /**
- * On Hover when you want to drop BOMB — show target area overlay
- */
- onHoverGridField(coords) {
- if (this.refs.userControl.state.bombSelected) {
- var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
-
- if (activePlayer === this.state.webPlayer) {
- this.bombClear();
- this.bombCreate(coords[0], coords[1]);
- } else {
- this.refs.userControl.setState({ bombSelected: false });
- }
- }
- }
-
- renderGridFields() {
- for (let i = 0, j = this.state.grid.length; i < j; i++) {
- for (let k = 0, l = this.state.grid[i].length; k < l; k++) {
- this.state.gridFields.push(
- ,
- );
- }
- }
- }
-
- render() {
- /** Render the grid fields just one time in one party #12 */
- this.state.renderGridFields && this.renderGridFields();
- this.state.renderGridFields = false;
-
- return (
-
-
-
-
{this.state.overlayTitle}
- {this.state.overlaySubTitle}
-
-
-
-
-
- <>
- {this.state.gridFields}
-
-
-
-
-
-
-
{this.state.currentImage}
: '';
- }
-
- lastClickedClass() {
- return 'field-'
- + (this.state.lastClickedRed ? 'red' : '')
- + (this.state.lastClickedBlue ? 'blue' : '') + '-last last-clicked';
- }
-
- lastClickedSrc() {
- return this.state.lastClickedRed
- ? '/images/bg-last-red-outbg.png'
- : '/images/bg-last-blue-outbg.png';
- }
-
- currentLastClicked() {
- return this.state.lastClickedRed || this.state.lastClickedBlue
- ? (
- })
- ) : '';
- }
-
- createBombTarget() {
- if (null !== this.state.bombTargetArea) {
- let vert, hor = '';
-
- switch (this.state.bombTargetArea[0]) {
- case 0:
- vert = 'left';
- break;
- case 1:
- vert = 'center';
- break;
- case 2:
- vert = 'right';
- break;
- default:
- vert = null;
- break;
- }
-
- switch (this.state.bombTargetArea[1]) {
- case 0:
- hor = 'top';
- break;
- case 1:
- hor = 'middle';
- break;
- case 2:
- hor = 'bottom';
- break;
- default:
- vert = null;
- break;
- }
-
- var src = null === vert
- ? '/images/bg-bomb-empty-outbg.png'
- : '/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';
-
- return (
- 
- );
- }
- }
-
- render() {
- return (
-
-
- {this.createBombTarget()}
- {this.currentLastClicked()}
-
-
- {this.currentImage()}
-
-
-
+
Share this unique link w/ your opponent
+
+
+
+
Play w/ me!
+
- : '';
- }
-
- render() {
- return (
-
-
-
{this.props.color}
- {this.getCursor(this.props.active, this.props.color)}
-
})
-
-
{this.state.name}
-
-
{this.state.desc}
-
-
})
-
- {this.state.mines}
-
-
-
-
})
-
-
-
-
-