diff options
Diffstat (limited to 'frontend/app/components')
4 files changed, 40 insertions, 20 deletions
diff --git a/frontend/app/components/GolfPlayApp.client.tsx b/frontend/app/components/GolfPlayApp.client.tsx index dbc8c1b..d527e07 100644 --- a/frontend/app/components/GolfPlayApp.client.tsx +++ b/frontend/app/components/GolfPlayApp.client.tsx @@ -43,16 +43,17 @@ export default function GolfPlayApp({ const [leftTimeSeconds, setLeftTimeSeconds] = useState<number | null>(null); useEffect(() => { - if (gameState === "starting" && startedAt !== null) { + if ( + (gameState === "starting" || gameState === "gaming") && + startedAt !== null + ) { const timer1 = setInterval(() => { setLeftTimeSeconds((prev) => { if (prev === null) { return null; } if (prev <= 1) { - clearInterval(timer1); setGameState("gaming"); - return 0; } return prev - 1; }); @@ -196,7 +197,7 @@ export default function GolfPlayApp({ // The game has already started. if (gameState !== "gaming" && gameState !== "finished") { setStartedAt(game.started_at); - setLeftTimeSeconds(0); + setLeftTimeSeconds(game.started_at - nowSec); setGameState("gaming"); } } else { @@ -234,6 +235,8 @@ export default function GolfPlayApp({ return ( <GolfPlayAppGaming gameDisplayName={game.display_name} + gameDurationSeconds={game.duration_seconds} + leftTimeSeconds={leftTimeSeconds!} playerInfo={playerInfo} problemTitle={game.problem.title} problemDescription={game.problem.description} diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx index 667ada2..4730583 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx @@ -1,15 +1,17 @@ +import { faArrowDown } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Link } from "@remix-run/react"; import React, { useRef } from "react"; import SubmitButton from "../../components/SubmitButton"; import type { PlayerInfo } from "../../models/PlayerInfo"; import BorderedContainer from "../BorderedContainer"; -import SubmitStatusLabel from "../SubmitStatusLabel"; import ExecStatusIndicatorIcon from "../ExecStatusIndicatorIcon"; -import { faArrowDown } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import SubmitStatusLabel from "../SubmitStatusLabel"; type Props = { gameDisplayName: string; + gameDurationSeconds: number; + leftTimeSeconds: number; playerInfo: Omit<PlayerInfo, "code">; problemTitle: string; problemDescription: string; @@ -19,6 +21,8 @@ type Props = { export default function GolfPlayAppGaming({ gameDisplayName, + gameDurationSeconds, + leftTimeSeconds, playerInfo, problemTitle, problemDescription, @@ -37,12 +41,19 @@ export default function GolfPlayAppGaming({ } }; + const leftTime = (() => { + const k = gameDurationSeconds + leftTimeSeconds; + const m = Math.floor(k / 60); + const s = k % 60; + return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`; + })(); + return ( <div className="min-h-screen bg-gray-100 flex flex-col"> <div className="text-white bg-iosdc-japan flex flex-row justify-between px-4 py-2"> <div className="font-bold"> <div className="text-gray-100">{gameDisplayName}</div> - <div className="text-2xl">03:21</div> + <div className="text-2xl">{leftTime}</div> </div> <div className="font-bold text-end"> <Link to={"/dashboard"} className="text-gray-100"> diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx index 9d3f752..b2f3b69 100644 --- a/frontend/app/components/GolfWatchApp.client.tsx +++ b/frontend/app/components/GolfWatchApp.client.tsx @@ -39,16 +39,17 @@ export default function GolfWatchApp({ const [leftTimeSeconds, setLeftTimeSeconds] = useState<number | null>(null); useEffect(() => { - if (gameState === "starting" && startedAt !== null) { + if ( + (gameState === "starting" || gameState === "gaming") && + startedAt !== null + ) { const timer1 = setInterval(() => { setLeftTimeSeconds((prev) => { if (prev === null) { return null; } if (prev <= 1) { - clearInterval(timer1); setGameState("gaming"); - return 0; } return prev - 1; }); @@ -207,7 +208,7 @@ export default function GolfWatchApp({ // The game has already started. if (gameState !== "gaming" && gameState !== "finished") { setStartedAt(game.started_at); - setLeftTimeSeconds(0); + setLeftTimeSeconds(game.started_at - nowSec); setGameState("gaming"); } } else { @@ -245,10 +246,11 @@ export default function GolfWatchApp({ } else if (gameState === "gaming") { return ( <GolfWatchAppGaming - problem={game.problem!.description} + gameDurationSeconds={game.duration_seconds} + leftTimeSeconds={leftTimeSeconds!} playerInfoA={playerInfoA} playerInfoB={playerInfoB} - leftTimeSeconds={leftTimeSeconds!} + problem={game.problem!.description} /> ); } else if (gameState === "finished") { diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx index 2a852e0..f9647b3 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx @@ -3,23 +3,27 @@ import ExecStatusIndicatorIcon from "../ExecStatusIndicatorIcon"; import SubmitStatusLabel from "../SubmitStatusLabel"; type Props = { - problem: string; + gameDurationSeconds: number; + leftTimeSeconds: number; playerInfoA: PlayerInfo; playerInfoB: PlayerInfo; - leftTimeSeconds: number; + problem: string; }; export default function GolfWatchAppGaming({ - problem, + gameDurationSeconds, + leftTimeSeconds, playerInfoA, playerInfoB, - leftTimeSeconds, + problem, }: Props) { const leftTime = (() => { - const m = Math.floor(leftTimeSeconds / 60); - const s = leftTimeSeconds % 60; + const k = gameDurationSeconds + leftTimeSeconds; + const m = Math.floor(k / 60); + const s = k % 60; return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`; })(); + const scoreRatio = (() => { const scoreA = playerInfoA.score ?? 0; const scoreB = playerInfoB.score ?? 0; |