-
+ {canContinue ? (
+
+
+ Continue
+
+ ) : (
+
+ )}
diff --git a/assets/js/mine-seeker/MineSeeker.jsx b/assets/js/mine-seeker/MineSeeker.jsx
index 66e982d..7401ce7 100644
--- a/assets/js/mine-seeker/MineSeeker.jsx
+++ b/assets/js/mine-seeker/MineSeeker.jsx
@@ -14,7 +14,7 @@ import { GameBoard } from '@mine-components';
const queryClient = new QueryClient();
-const MineSeeker = ({ env, gameId }) => {
+const MineSeeker = ({ env, gameId, opponentName = '' }) => {
const isEnvDev = 'dev' === env;
const gameAssoc = useRef('' !== gameId ? gameId : crypto.randomUUID()).current;
const gameInherited = '' !== gameId;
@@ -25,6 +25,7 @@ const MineSeeker = ({ env, gameId }) => {
diff --git a/assets/js/mine-seeker/components/GameBoard.jsx b/assets/js/mine-seeker/components/GameBoard.jsx
index 216f2f7..106a64f 100644
--- a/assets/js/mine-seeker/components/GameBoard.jsx
+++ b/assets/js/mine-seeker/components/GameBoard.jsx
@@ -12,9 +12,9 @@ import { useGame } from '@mine-contexts';
import { useServerCommunication } from '@mine-hooks';
import GridControl from './grid/GridControl';
-export const GameBoard = ({ gameAssoc, gameInherited, isEnvDev }) => {
+export const GameBoard = ({ gameAssoc, gameInherited, opponentName = '', isEnvDev }) => {
const { gridReady } = useGame();
- const { onClick, resign } = useServerCommunication(gameAssoc, gameInherited, isEnvDev);
+ const { onClick, resign } = useServerCommunication(gameAssoc, gameInherited, opponentName, isEnvDev);
if (!gridReady) {
return (
diff --git a/assets/js/mine-seeker/components/OnlinePlayersDialog.jsx b/assets/js/mine-seeker/components/OnlinePlayersDialog.jsx
index b93d2f9..5b79a0d 100644
--- a/assets/js/mine-seeker/components/OnlinePlayersDialog.jsx
+++ b/assets/js/mine-seeker/components/OnlinePlayersDialog.jsx
@@ -256,7 +256,7 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
{player.name}
-
+
{' '}Waiting {formatSince(player.since)}
diff --git a/assets/js/mine-seeker/components/WaitingOverlayContent.jsx b/assets/js/mine-seeker/components/WaitingOverlayContent.jsx
index b64bf72..879da1f 100644
--- a/assets/js/mine-seeker/components/WaitingOverlayContent.jsx
+++ b/assets/js/mine-seeker/components/WaitingOverlayContent.jsx
@@ -9,46 +9,55 @@
import { Fragment, useState } from 'react';
import { OnlinePlayersDialog } from '@mine-components';
-const WaitingOverlayContent = ({ shareUrl, currentGameAssoc }) => {
+const WaitingOverlayContent = ({ shareUrl, currentGameAssoc, opponentName = '', inviteOnly = false }) => {
const [dialogOpen, setDialogOpen] = useState(false);
+ const inviteHeader = inviteOnly && opponentName
+ ? `Invite ${opponentName}`
+ : 'Invite a Friend';
return (
-
+
- Invite a Friend
+ {inviteHeader}
Share this link with your opponent
-
- OR
-
-
-
-
- Challenge a Player
-
-
Browse online players and challenge them
-
-
+ {!inviteOnly && (
+
+
+ OR
+
+
+
+
+ Challenge a Player
+
+
Browse online players and challenge them
+
+
+ )}
-
setDialogOpen(false)}
- currentGameAssoc={currentGameAssoc}
- />
+ {!inviteOnly && (
+ setDialogOpen(false)}
+ currentGameAssoc={currentGameAssoc}
+ />
+ )}
);
};
@@ -57,10 +66,12 @@ const ShareLinkBox = ({ url }) => {
const [copied, setCopied] = useState(false);
const handleCopy = () => {
- navigator.clipboard.writeText(url).then(() => {
- setCopied(true);
- setTimeout(() => setCopied(false), 2500);
- }).catch(() => {});
+ navigator.clipboard.writeText(url)
+ .then(() => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2500);
+ })
+ .catch(() => null);
};
return (
diff --git a/assets/js/mine-seeker/contexts/GameProvider.jsx b/assets/js/mine-seeker/contexts/GameProvider.jsx
index 77a2630..37dde5a 100644
--- a/assets/js/mine-seeker/contexts/GameProvider.jsx
+++ b/assets/js/mine-seeker/contexts/GameProvider.jsx
@@ -257,7 +257,7 @@ export const GameProvider = ({ children }) => {
// Setters needed by useServerComm
setCells, setGridReady, setGameUuid,
// Refs (needed by useServerComm for async-safe reads)
- webPlayerRef, activePlayerRef, bombSelectedRef, connectionLostRef, endRef,
+ webPlayerRef, activePlayerRef, bombSelectedRef, connectionLostRef, lastClickedRef, endRef,
// Sync helpers
syncWebPlayer, syncActivePlayer, syncBombSelected, syncConnLost, syncRed, syncBlue,
// Game logic called by useServerComm
diff --git a/assets/js/mine-seeker/hooks/useServerCommunication.jsx b/assets/js/mine-seeker/hooks/useServerCommunication.jsx
index f94d9f7..e7dc0ce 100644
--- a/assets/js/mine-seeker/hooks/useServerCommunication.jsx
+++ b/assets/js/mine-seeker/hooks/useServerCommunication.jsx
@@ -10,24 +10,20 @@
import React, { useEffect, useRef } from 'react';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useGame } from '@mine-contexts';
-import { DESC } from '@mine-utils';
+import { DESC, IMAGES } from '@mine-utils';
import useStepTimer from './useStepTimer';
-import { WaitingOverlayContent } from '@mine-components';
+import { ChallengeCountdown, WaitingOverlayContent } from '@mine-components';
-import { ChallengeCountdown } from '@mine-components';
-
-const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
+const useServerCommunication = (gameAssoc, gameInherited, opponentName, isEnvDev) => {
const {
/** Async-safe refs */
- webPlayerRef, activePlayerRef, bombSelectedRef, connectionLostRef, endRef,
+ webPlayerRef, activePlayerRef, bombSelectedRef, connectionLostRef, lastClickedRef, endRef,
/** State setters */
- setGridReady, setGameUuid,
+ setCells, setGridReady, setGameUuid,
/** Sync helpers */
syncWebPlayer, syncActivePlayer, syncBombSelected, syncConnLost, syncRed, syncBlue,
/** Game logic */
- showOverlay, hideOverlay,
- applyRevealedCell, applyStep,
- makeGameEndIfItEnds, resignProcess,
+ showOverlay, hideOverlay, applyStep, makeGameEndIfItEnds, resignProcess,
/** Current cells snapshot (for active-check in onClick) */
cells,
} = useGame();
@@ -35,9 +31,16 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
const eventSourceRef = useRef(null);
const rpcUsersRef = useRef(null);
const stepCacheRef = useRef([]);
+ const lastStepRef = useRef(null);
+ const isGameFinishedRef = useRef(false);
const { getStepElapsed, resetStepTimer, startNewTurn } = useStepTimer();
const isGameRunningRef = useRef(false);
const lastActivePlayerRef = useRef(null);
+ const heartbeatPubIntervalRef = useRef(null);
+ const opponentLastSeenRef = useRef(0);
+ const isTrueRestoredRef = useRef(false);
+
+ const HEARTBEAT_INTERVAL_MS = 1500;
/** REST mutations / queries */
@@ -75,43 +78,193 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
/** Game-start helpers (triggered by server events) */
- const wInit = (revealedCells = []) => {
- setGridReady(true);
- showOverlay('Choose an opponent!', gameAssoc ? (
-
- ) : '');
- setTimeout(() => revealedCells.forEach(cell => applyRevealedCell(cell, cell.player)), 0);
+ const wInit = (revealedCells = [], lastStep = {}, gameState = {}, isGameFinished = false) => {
+ /** Detect if this is a restored game */
+ const isRestoredGame = 0 < revealedCells.length;
+ isTrueRestoredRef.current = isRestoredGame;
+
+ /** Store game finished status */
+ isGameFinishedRef.current = isGameFinished;
+
+ /** Apply game state (points, bonus) immediately for restored games */
+ if (0 < Object.keys(gameState).length) {
+ const {
+ redPoints = 0,
+ bluePoints = 0,
+ redBonusPoints = 0,
+ blueBonusPoints = 0,
+ redBonusStats = {},
+ blueBonusStats = {},
+ } = gameState;
+ syncRed(p => ({
+ ...p,
+ mines: redPoints,
+ bonusPoints: redBonusPoints,
+ bonusStats: redBonusStats,
+ }));
+ syncBlue(p => ({
+ ...p,
+ mines: bluePoints,
+ bonusPoints: blueBonusPoints,
+ bonusStats: blueBonusStats,
+ }));
+ }
+
+ /** Apply revealed cells immediately (not in setTimeout) */
+ if (0 < revealedCells.length) {
+ setCells(prev => {
+ let next = prev.map(r => [...r]);
+ revealedCells.forEach(({ row, col, value, player }) => {
+ if (next[row][col].active) return;
+ /** Check if this cell is the last step for either player */
+ const isRedLastStep = lastStep.red && lastStep.red.player === player && lastStep.red.row === row && lastStep.red.col === col;
+ const isBlueLastStep = lastStep.blue && lastStep.blue.player === player && lastStep.blue.row === row && lastStep.blue.col === col;
+ const patch = 'm' === value
+ ? { currentImage: IMAGES.flag(player), currentObj: 'm', active: true }
+ : { currentImage: value, currentObj: value, active: true };
+ if (isRedLastStep || isBlueLastStep) {
+ patch.lastClickedRed = 'red' === player;
+ patch.lastClickedBlue = 'blue' === player;
+ }
+ next[row][col] = { ...next[row][col], ...patch };
+ });
+ return next;
+ });
+ }
+
+ /** Update the lastClickedRef so applyStep knows about it */
+ if (lastStep.red) {
+ lastClickedRef.current = {
+ ...lastClickedRef.current,
+ red: [lastStep.red.row, lastStep.red.col],
+ };
+ }
+ if (lastStep.blue) {
+ lastClickedRef.current = {
+ ...lastClickedRef.current,
+ blue: [lastStep.blue.row, lastStep.blue.col],
+ };
+ }
+
+ /** Determine overlay message */
+ let overlayTitle, overlaySubtitle;
+
+ if (isGameFinished) {
+ /** Game is finished - show game over message */
+ const redPoints = gameState.redPoints ?? 0;
+ const bluePoints = gameState.bluePoints ?? 0;
+ const winner = redPoints > bluePoints ? 'Red' : 'Blue';
+ overlayTitle = `${winner} wins the game!`;
+ overlaySubtitle = 'Play again!';
+ /** Mark the game as ended */
+ endRef.current = true;
+ } else if (isRestoredGame) {
+ overlayTitle = 'Waiting for opponent to reconnect...';
+ overlaySubtitle = gameAssoc ? (
+
+ ) : (
+
+
Waiting for opponent to join...
+
diff --git a/templates/Security/profile.html.twig b/templates/Security/profile.html.twig
index 1f73d45..5542d20 100644
--- a/templates/Security/profile.html.twig
+++ b/templates/Security/profile.html.twig
@@ -128,23 +128,37 @@
{% set opp = is_red ? game.blue : game.red %}
{% set opp_anon = is_red ? game.blueAnon : game.redAnon %}
- {% set result = 'draw' %}
- {% if game.resign == (is_red ? 'red' : 'blue') %}
- {% set result = 'loss' %}
- {% elseif game.resign == (is_red ? 'blue' : 'red') %}
- {% set result = 'win' %}
- {% elseif my_points is not null and opp_points is not null %}
- {% if my_points > opp_points %}
- {% set result = 'win' %}
- {% elseif my_points < opp_points %}
- {% set result = 'loss' %}
- {% endif %}
- {% endif %}
+ {% set result = 'draw' %}
+ {% set is_finished = false %}
+ {% set is_anonymous = not opp and opp_anon %}
+ {% if game.resign == (is_red ? 'red' : 'blue') %}
+ {% set result = 'loss' %}
+ {% set is_finished = true %}
+ {% elseif game.resign == (is_red ? 'blue' : 'red') %}
+ {% set result = 'win' %}
+ {% set is_finished = true %}
+ {% elseif my_points is not null and opp_points is not null %}
+ {% if my_points > opp_points %}
+ {% set result = 'win' %}
+ {% set is_finished = (my_points > 25 or opp_points > 25) %}
+ {% elseif my_points < opp_points %}
+ {% set result = 'loss' %}
+ {% set is_finished = (my_points > 25 or opp_points > 25) %}
+ {% else %}
+ {% set is_finished = (my_points > 25 or opp_points > 25) %}
+ {% endif %}
+ {% endif %}
-
-
- {{ result == 'win' ? 'W' : (result == 'loss' ? 'L' : 'D') }}
-
+
+
+ {% if is_finished %}
+ {{ result == 'win' ? 'Win' : (result == 'loss' ? 'Loss' : 'Draw') }}
+ {% elseif is_anonymous %}
+ Abandoned
+ {% else %}
+ Ongoing
+ {% endif %}
+
{{ my_points ?? '—' }} : {{ opp_points ?? '—' }}