From 7453eaaaf18827209ea296319b8b4bc38bde0950 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 11 Aug 2024 23:11:42 +0900 Subject: feat(frontend): allow users to re-connect --- frontend/app/components/GolfPlayApp.client.tsx | 42 ++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 6 deletions(-) (limited to 'frontend/app/components/GolfPlayApp.client.tsx') diff --git a/frontend/app/components/GolfPlayApp.client.tsx b/frontend/app/components/GolfPlayApp.client.tsx index eafbd1d..4aebd52 100644 --- a/frontend/app/components/GolfPlayApp.client.tsx +++ b/frontend/app/components/GolfPlayApp.client.tsx @@ -36,12 +36,12 @@ export default function GolfPlayApp({ const [startedAt, setStartedAt] = useState(null); - const [timeLeftSeconds, setTimeLeftSeconds] = useState(null); + const [leftTimeSeconds, setLeftTimeSeconds] = useState(null); useEffect(() => { if (gameState === "starting" && startedAt !== null) { const timer1 = setInterval(() => { - setTimeLeftSeconds((prev) => { + setLeftTimeSeconds((prev) => { if (prev === null) { return null; } @@ -113,7 +113,7 @@ export default function GolfPlayApp({ const { start_at } = lastJsonMessage.data; setStartedAt(start_at); const nowSec = Math.floor(Date.now() / 1000); - setTimeLeftSeconds(start_at - nowSec); + setLeftTimeSeconds(start_at - nowSec); setGameState("starting"); } } else if (lastJsonMessage.type === "player:s2c:execresult") { @@ -127,17 +127,47 @@ export default function GolfPlayApp({ setLastExecStatus(status); } } else { - setGameState("waiting"); + if (game.started_at) { + const nowSec = Math.floor(Date.now() / 1000); + if (game.started_at <= nowSec) { + // The game has already started. + if (gameState !== "gaming" && gameState !== "finished") { + setStartedAt(game.started_at); + setLeftTimeSeconds(0); + setGameState("gaming"); + } + } else { + // The game is starting. + if ( + gameState !== "starting" && + gameState !== "gaming" && + gameState !== "finished" + ) { + setStartedAt(game.started_at); + setLeftTimeSeconds(game.started_at - nowSec); + setGameState("starting"); + } + } + } else { + setGameState("waiting"); + } } } - }, [sendJsonMessage, lastJsonMessage, readyState, gameState, currentScore]); + }, [ + game.started_at, + sendJsonMessage, + lastJsonMessage, + readyState, + gameState, + currentScore, + ]); if (gameState === "connecting") { return ; } else if (gameState === "waiting") { return ; } else if (gameState === "starting") { - return ; + return ; } else if (gameState === "gaming") { return (