new: usr: a new feature came up - the abandoned plays can be restored, if both users are registered users #7
This commit is contained in:
@@ -435,7 +435,7 @@
|
||||
|
||||
.profile-game {
|
||||
display: grid;
|
||||
grid-template-columns: 26px 76px 22px 1fr 18px auto;
|
||||
grid-template-columns: 60px 76px 22px 1fr 18px auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 11px 16px;
|
||||
@@ -464,17 +464,27 @@
|
||||
&--draw {
|
||||
border-left-color: rgba(149, 207, 245, 0.25);
|
||||
}
|
||||
|
||||
&--ongoing {
|
||||
border-left-color: rgba(255, 193, 7, 0.4);
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-game__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
font: 800 10px 'Rajdhani', sans-serif;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
gap: 4px;
|
||||
|
||||
.profile-game--win & {
|
||||
background: rgba(42, 158, 96, 0.18);
|
||||
@@ -490,12 +500,49 @@
|
||||
background: rgba(149, 207, 245, 0.1);
|
||||
color: rgba(149, 207, 245, 0.65);
|
||||
}
|
||||
|
||||
.profile-game--ongoing & {
|
||||
background: rgba(255, 193, 7, 0.12);
|
||||
color: #ffc107;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: #ffc107;
|
||||
border-right-color: #ffc107;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-game--abandoned & {
|
||||
background: rgba(107, 114, 126, 0.18);
|
||||
color: #6b727e;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.profile-game__score {
|
||||
font: 700 14px 'Rajdhani', sans-serif;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-game__vs {
|
||||
@@ -525,6 +572,9 @@
|
||||
letter-spacing: 0.5px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.profile-charts {
|
||||
@@ -640,6 +690,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bd-continue {
|
||||
background: linear-gradient(135deg, rgba(42, 158, 96, 0.35) 0%, rgba(94, 232, 154, 0.35) 100%);
|
||||
border: 1px solid rgba(94, 232, 154, 0.6);
|
||||
border-radius: 6px;
|
||||
color: #5ee89a;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font: 700 11px 'Rajdhani', sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
text-decoration: none;
|
||||
transition: all 180ms ease;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 0 14px rgba(94, 232, 154, 0.25);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, rgba(42, 158, 96, 0.55) 0%, rgba(94, 232, 154, 0.55) 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 20px rgba(94, 232, 154, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-close {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
@@ -206,16 +206,24 @@
|
||||
}
|
||||
|
||||
.bsd-stat-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bsd-stat-desc {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.48);
|
||||
line-height: 1.25;
|
||||
}
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.48);
|
||||
line-height: 1.25;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.bsd-stat-value {
|
||||
font-family: 'Courier New', monospace;
|
||||
|
||||
@@ -21,21 +21,23 @@
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window {
|
||||
background: linear-gradient(135deg, rgba(7, 9, 13, 0.98) 0%, rgba(10, 20, 35, 0.98) 100%);
|
||||
border: 2px solid rgba(35, 111, 135, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
padding: 40px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(35, 111, 135, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
background: linear-gradient(135deg, rgba(7, 9, 13, 0.98) 0%, rgba(10, 20, 35, 0.98) 100%);
|
||||
border: 2px solid rgba(35, 111, 135, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
padding: 40px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(35, 111, 135, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: hidden;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
@@ -49,12 +51,17 @@
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window h1 {
|
||||
font-weight: 800;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 0 0 50px 0;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
font-weight: 800;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 0 0 50px 0;
|
||||
letter-spacing: 1px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window h2 {
|
||||
font-size: 14px;
|
||||
@@ -183,6 +190,10 @@
|
||||
width: 100%;
|
||||
animation: fadeInUp 0.6s ease-out 0.2s both;
|
||||
|
||||
&.waiting-options--invite-only {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
@@ -259,12 +270,17 @@
|
||||
}
|
||||
|
||||
.waiting-option-desc {
|
||||
font: 600 12px 'Rajdhani', sans-serif;
|
||||
color: rgba(149, 207, 245, 0.75);
|
||||
margin: 0;
|
||||
letter-spacing: 0.4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
font: 600 12px 'Rajdhani', sans-serif;
|
||||
color: rgba(149, 207, 245, 0.75);
|
||||
margin: 0;
|
||||
letter-spacing: 0.4px;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.waiting-divider {
|
||||
display: flex;
|
||||
|
||||
@@ -100,16 +100,18 @@
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-name {
|
||||
min-height: 30px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding: 3px 0;
|
||||
margin: 0 5px;
|
||||
min-height: 30px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding: 3px 5px;
|
||||
margin: 0;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-name {
|
||||
border-top: 1px dashed #0b3776;
|
||||
@@ -139,10 +141,17 @@
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-desc {
|
||||
height: 65px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
height: 65px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-word;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-desc {
|
||||
color: #0b3776;
|
||||
@@ -150,4 +159,4 @@
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-red .user-desc {
|
||||
color: #fdf612;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,5 +17,6 @@ createRoot(wrapper).render(
|
||||
<MineSeeker
|
||||
env={wrapper.dataset.env}
|
||||
gameId={wrapper.dataset.gameId}
|
||||
opponentName={wrapper.dataset.opponentName || ''}
|
||||
/>,
|
||||
);
|
||||
|
||||
@@ -78,10 +78,13 @@ export default function BattleDialog({ games }) {
|
||||
|
||||
const meta = RESULT_META[game.result] ?? RESULT_META.draw;
|
||||
const resign = game.resign;
|
||||
const maxPoints = Math.max(game.redPoints ?? 0, game.bluePoints ?? 0);
|
||||
const endReason = resign
|
||||
? `${resign.charAt(0).toUpperCase() + resign.slice(1)} resigned`
|
||||
: 'Points';
|
||||
: 26 <= maxPoints ? 'Points' : 'Abandoned';
|
||||
const shareUrl = `${window.location.origin}/battle/${game.uuid}`;
|
||||
const canContinue = !resign && 26 > maxPoints;
|
||||
const playUrl = `${window.location.origin}/play/${game.uuid}`;
|
||||
|
||||
const formatDuration = (from, to) => {
|
||||
if (!from || !to) return null;
|
||||
@@ -120,15 +123,27 @@ export default function BattleDialog({ games }) {
|
||||
</h2>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button
|
||||
className={`bd-share${copied ? ' bd-share--copied' : ''}`}
|
||||
onClick={handleShare}
|
||||
aria-label="Copy share link"
|
||||
title="Copy share link"
|
||||
>
|
||||
<i className={`fa ${copied ? 'fa-check' : 'fa-share-alt'}`} />
|
||||
{copied ? 'Copied!' : 'Share'}
|
||||
</button>
|
||||
{canContinue ? (
|
||||
<a
|
||||
className="bd-continue"
|
||||
href={playUrl}
|
||||
aria-label="Continue the game"
|
||||
title="Continue the game"
|
||||
>
|
||||
<i className="fa fa-play" />
|
||||
Continue
|
||||
</a>
|
||||
) : (
|
||||
<button
|
||||
className={`bd-share${copied ? ' bd-share--copied' : ''}`}
|
||||
onClick={handleShare}
|
||||
aria-label="Copy share link"
|
||||
title="Copy share link"
|
||||
>
|
||||
<i className={`fa ${copied ? 'fa-check' : 'fa-share-alt'}`} />
|
||||
{copied ? 'Copied!' : 'Share'}
|
||||
</button>
|
||||
)}
|
||||
<button className="bd-close" onClick={() => setOpen(false)} aria-label="Close">
|
||||
<i className="fa fa-times" />
|
||||
</button>
|
||||
|
||||
@@ -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 }) => {
|
||||
<GameBoard
|
||||
gameAssoc={gameAssoc}
|
||||
gameInherited={gameInherited}
|
||||
opponentName={opponentName}
|
||||
isEnvDev={isEnvDev}
|
||||
/>
|
||||
</GameProvider>
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -256,7 +256,7 @@ const OnlinePlayersDialog = ({ open, onClose, currentGameAssoc }) => {
|
||||
<div className="opd-info">
|
||||
<span className="opd-name">{player.name}</span>
|
||||
<span className="opd-since">
|
||||
<i className="fa fa-clock-o" />
|
||||
<i className="fa fa-clock" />
|
||||
{' '}Waiting {formatSince(player.since)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -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 (
|
||||
<Fragment>
|
||||
<div className="waiting-options">
|
||||
<div className={`waiting-options${inviteOnly ? ' waiting-options--invite-only' : ''}`}>
|
||||
<div className="waiting-option">
|
||||
<div className="waiting-option-header">
|
||||
<i className="fa fa-link" />
|
||||
<span>Invite a Friend</span>
|
||||
<span>{inviteHeader}</span>
|
||||
</div>
|
||||
<p className="waiting-option-desc">Share this link with your opponent</p>
|
||||
<ShareLinkBox
|
||||
url={shareUrl}
|
||||
/>
|
||||
</div>
|
||||
<div className="waiting-divider">
|
||||
<span>OR</span>
|
||||
</div>
|
||||
<div className="waiting-option">
|
||||
<div className="waiting-option-header">
|
||||
<i className="fa fa-users" />
|
||||
<span>Challenge a Player</span>
|
||||
</div>
|
||||
<p className="waiting-option-desc">Browse online players and challenge them</p>
|
||||
<button
|
||||
className="browse-players-btn"
|
||||
onClick={() => setDialogOpen(true)}
|
||||
>
|
||||
<i className="fa fa-search" />
|
||||
Browse Players
|
||||
</button>
|
||||
</div>
|
||||
{!inviteOnly && (
|
||||
<Fragment>
|
||||
<div className="waiting-divider">
|
||||
<span>OR</span>
|
||||
</div>
|
||||
<div className="waiting-option">
|
||||
<div className="waiting-option-header">
|
||||
<i className="fa fa-users" />
|
||||
<span>Challenge a Player</span>
|
||||
</div>
|
||||
<p className="waiting-option-desc">Browse online players and challenge them</p>
|
||||
<button
|
||||
className="browse-players-btn"
|
||||
onClick={() => setDialogOpen(true)}
|
||||
>
|
||||
<i className="fa fa-search" />
|
||||
Browse Players
|
||||
</button>
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<OnlinePlayersDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
currentGameAssoc={currentGameAssoc}
|
||||
/>
|
||||
{!inviteOnly && (
|
||||
<OnlinePlayersDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
currentGameAssoc={currentGameAssoc}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
@@ -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 (
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 ? (
|
||||
<WaitingOverlayContent
|
||||
shareUrl={`${window.location.href}/${gameAssoc}`}
|
||||
currentGameAssoc={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 ? (
|
||||
<WaitingOverlayContent
|
||||
shareUrl={`${window.location.origin}/play/${gameAssoc}`}
|
||||
currentGameAssoc={gameAssoc}
|
||||
opponentName={opponentName}
|
||||
inviteOnly
|
||||
/>
|
||||
) : (
|
||||
<div style={{ textAlign: 'center', padding: '20px' }}>
|
||||
<p>Waiting for opponent to join...</p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
overlayTitle = 'Choose an opponent!';
|
||||
overlaySubtitle = gameAssoc ? (
|
||||
<WaitingOverlayContent
|
||||
shareUrl={`${window.location.origin}/battle/${gameAssoc}`}
|
||||
currentGameAssoc={gameAssoc}
|
||||
/>
|
||||
) : '';
|
||||
}
|
||||
|
||||
showOverlay(overlayTitle, overlaySubtitle);
|
||||
|
||||
/** Use Promise.resolve to defer setGridReady slightly to ensure overlay is rendered first */
|
||||
Promise.resolve().then(() => setGridReady(true));
|
||||
};
|
||||
|
||||
const makeGameStart = payload => {
|
||||
syncActivePlayer(1);
|
||||
const makeGameStart = (payload, lastStep = {}) => {
|
||||
/** Don't start a finished game */
|
||||
if (isGameFinishedRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
/** If game is being restored and has a most recent step, determine starter based on that */
|
||||
let starterIsBlue;
|
||||
|
||||
/** lastStepRef contains the single most recent step from the server */
|
||||
if (lastStepRef.current && lastStepRef.current.player) {
|
||||
/** The NEXT player is opposite of who made the last step */
|
||||
starterIsBlue = 'red' === lastStepRef.current.player; // If red played last, blue plays next
|
||||
} else {
|
||||
/** New game: blue always starts */
|
||||
starterIsBlue = true;
|
||||
}
|
||||
|
||||
const starterColor = starterIsBlue ? 'blue' : 'red';
|
||||
const starterVal = starterIsBlue ? 1 : 0;
|
||||
const starterDesc = starterColor === webPlayerRef.current ? DESC.you : DESC.buddy;
|
||||
syncActivePlayer(starterVal);
|
||||
syncRed(p => ({
|
||||
...p,
|
||||
name: payload.users.red || payload.users.redAnon || p.name,
|
||||
registered: !!payload.users.red,
|
||||
avatar: payload.users.redAvatar ?? null,
|
||||
desc: 'red' === starterColor ? starterDesc : '',
|
||||
active: 'red' === starterColor,
|
||||
}));
|
||||
syncBlue(p => ({
|
||||
...p,
|
||||
name: payload.users.blue || payload.users.blueAnon || p.name,
|
||||
registered: !!payload.users.blue,
|
||||
avatar: payload.users.blueAvatar ?? null,
|
||||
desc: 'blue' === webPlayerRef.current ? DESC.you : DESC.buddy,
|
||||
active: true,
|
||||
desc: 'blue' === starterColor ? starterDesc : '',
|
||||
active: 'blue' === starterColor,
|
||||
}));
|
||||
isGameRunningRef.current = true;
|
||||
lastActivePlayerRef.current = 1; // Blue starts
|
||||
lastActivePlayerRef.current = starterVal;
|
||||
startNewTurn();
|
||||
resetStepTimer();
|
||||
hideOverlay();
|
||||
/**
|
||||
* For a truly restored game, keep the "Waiting for opponent..." overlay
|
||||
* up until we actually see a heartbeat from the other player.
|
||||
*/
|
||||
if (!isTrueRestoredRef.current || 0 !== opponentLastSeenRef.current) {
|
||||
hideOverlay();
|
||||
}
|
||||
};
|
||||
|
||||
const publishHeartbeat = () => {
|
||||
const me = webPlayerRef.current;
|
||||
if (!me || endRef.current) return;
|
||||
fetch('/api/game/heartbeat/' + gameAssoc, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ color: me }),
|
||||
}).catch(e => isEnvDev && console.warn('Heartbeat publish failed', e));
|
||||
};
|
||||
|
||||
const startHeartbeat = () => {
|
||||
if (heartbeatPubIntervalRef.current) return;
|
||||
publishHeartbeat();
|
||||
heartbeatPubIntervalRef.current = setInterval(publishHeartbeat, HEARTBEAT_INTERVAL_MS);
|
||||
};
|
||||
|
||||
const stopHeartbeat = () => {
|
||||
if (heartbeatPubIntervalRef.current) {
|
||||
clearInterval(heartbeatPubIntervalRef.current);
|
||||
heartbeatPubIntervalRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
/** Mercure / SSE message handlers */
|
||||
|
||||
const wSubscribe = (payload, rpcUsers = null) => {
|
||||
const wSubscribe = (payload, rpcUsers = null, lastStep = null) => {
|
||||
isEnvDev && console.info((payload.user ?? 'user') + ' subscribed');
|
||||
const firstUser = !rpcUsers;
|
||||
|
||||
@@ -126,7 +279,7 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
&& (!connectionLostRef.current
|
||||
|| (connectionLostRef.current && false === activePlayerRef.current && !endRef.current))
|
||||
) {
|
||||
makeGameStart(payload);
|
||||
makeGameStart(payload, lastStep);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -147,7 +300,8 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
body: JSON.stringify({ accepted: true, targetGameAssoc: gameAssoc }),
|
||||
}).then(() => {
|
||||
showOverlay('Challenge accepted!', 'Waiting for the challenger to join...');
|
||||
}).catch(() => {});
|
||||
}).catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleDecline = () => {
|
||||
@@ -163,7 +317,8 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
currentGameAssoc={gameAssoc}
|
||||
/>
|
||||
) : '');
|
||||
}).catch(() => {});
|
||||
}).catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
declineTimeout = setTimeout(handleDecline, 30000);
|
||||
@@ -188,8 +343,10 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
isEnvDev && console.warn(payload.user + ' stepped to ' + payload.data.coords.join(','));
|
||||
syncBombSelected(payload.data.bomb);
|
||||
|
||||
// Detect if turn switched (other player made a move)
|
||||
// After their move, it's now our turn (or the opposite player's turn)
|
||||
/**
|
||||
* Detect if turn switched (other player made a move)
|
||||
* After their move, it's now our turn (or the opposite player's turn)
|
||||
*/
|
||||
if (lastActivePlayerRef.current !== activePlayerRef.current) {
|
||||
startNewTurn();
|
||||
lastActivePlayerRef.current = activePlayerRef.current;
|
||||
@@ -210,13 +367,23 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
if (undefined !== payload.type) {
|
||||
if ('challenge' === payload.type) wChallenge(payload);
|
||||
else if ('challenge-response' === payload.type) wChallengeResponse(payload);
|
||||
else if ('heartbeat' === payload.type) {
|
||||
const me = webPlayerRef.current;
|
||||
if (me && payload.color && payload.color !== me) {
|
||||
const wasFirst = 0 === opponentLastSeenRef.current;
|
||||
opponentLastSeenRef.current = Date.now();
|
||||
if (wasFirst && isTrueRestoredRef.current) {
|
||||
hideOverlay();
|
||||
}
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (undefined !== payload.data) {
|
||||
wTopic(payload);
|
||||
} else if (undefined === payload.msg) {
|
||||
wSubscribe(payload, rpcUsersRef.current);
|
||||
wSubscribe(payload, rpcUsersRef.current, lastStepRef.current);
|
||||
} else {
|
||||
wUnsubscribe(payload);
|
||||
}
|
||||
@@ -236,8 +403,8 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
const url = new URL(hubUrl, window.location.origin);
|
||||
|
||||
url.searchParams.append('topic', 'mineseeker/channel/' + gameAssoc);
|
||||
if (subscriberJwt) url.searchParams.append('authorization', subscriberJwt);
|
||||
|
||||
if (subscriberJwt) url.searchParams.append('authorization', subscriberJwt);
|
||||
if (eventSourceRef.current) eventSourceRef.current.close();
|
||||
|
||||
const es = new EventSource(url.toString());
|
||||
@@ -278,8 +445,22 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
}
|
||||
|
||||
rpcUsersRef.current = serverData.users;
|
||||
lastStepRef.current = serverData.mostRecentStep || null;
|
||||
|
||||
/** Pass game state (points, bonus) to wInit */
|
||||
const gameState = {
|
||||
redPoints: serverData.redPoints ?? 0,
|
||||
bluePoints: serverData.bluePoints ?? 0,
|
||||
redBonusPoints: serverData.redBonusPoints ?? 0,
|
||||
blueBonusPoints: serverData.blueBonusPoints ?? 0,
|
||||
redBonusStats: serverData.redBonusStats ?? {},
|
||||
blueBonusStats: serverData.blueBonusStats ?? {},
|
||||
};
|
||||
const isGameFinished = serverData.gameFinished ?? false;
|
||||
wInit(serverData.revealedCells || [], serverData.lastStep || {}, gameState, isGameFinished);
|
||||
|
||||
/** Open event source after showing overlay */
|
||||
openEventSource();
|
||||
wInit(serverData.revealedCells || []);
|
||||
} else {
|
||||
await startMutation.mutateAsync();
|
||||
openEventSource();
|
||||
@@ -288,6 +469,7 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
|
||||
isEnvDev && console.info('Connection initialised — joining channel');
|
||||
await joinMutation.mutateAsync();
|
||||
startHeartbeat();
|
||||
} catch (e) {
|
||||
isEnvDev && console.error('Connection error', e);
|
||||
setTimeout(() => window.location.reload(), 500);
|
||||
@@ -295,6 +477,10 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
})();
|
||||
|
||||
window.addEventListener('pagehide', () => navigator.sendBeacon('/api/game/leave/' + gameAssoc));
|
||||
|
||||
return () => {
|
||||
stopHeartbeat();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
@@ -338,7 +524,7 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||
resignProcess(webPlayerRef.current, result.uuid);
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user