diff options
Diffstat (limited to 'frontend/app/components/GolfWatchApps')
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx | 76 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx | 13 |
2 files changed, 50 insertions, 39 deletions
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx index a23a972..2907f5a 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx @@ -1,4 +1,14 @@ -import type { PlayerInfo } from "../../types/PlayerInfo"; +import { useAtomValue } from "jotai"; +import { + codeAAtom, + codeBAtom, + gamingLeftTimeSecondsAtom, + scoreAAtom, + scoreBAtom, + submitResultAAtom, + submitResultBAtom, +} from "../../states/watch"; +import type { PlayerProfile } from "../../types/PlayerProfile"; import BorderedContainer from "../BorderedContainer"; import CodeBlock from "../Gaming/CodeBlock"; import ScoreBar from "../Gaming/ScoreBar"; @@ -7,10 +17,8 @@ import UserIcon from "../UserIcon"; type Props = { gameDisplayName: string; - gameDurationSeconds: number; - leftTimeSeconds: number; - playerInfoA: PlayerInfo; - playerInfoB: PlayerInfo; + playerProfileA: PlayerProfile; + playerProfileB: PlayerProfile; problemTitle: string; problemDescription: string; gameResult: "winA" | "winB" | "draw" | null; @@ -18,21 +26,23 @@ type Props = { export default function GolfWatchAppGaming({ gameDisplayName, - gameDurationSeconds, - leftTimeSeconds, - playerInfoA, - playerInfoB, + playerProfileA, + playerProfileB, problemTitle, problemDescription, gameResult, }: Props) { + const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!; + const codeA = useAtomValue(codeAAtom); + const codeB = useAtomValue(codeBAtom); + const scoreA = useAtomValue(scoreAAtom); + const scoreB = useAtomValue(scoreBAtom); + const submitResultA = useAtomValue(submitResultAAtom); + const submitResultB = useAtomValue(submitResultBAtom); + const leftTime = (() => { - const k = gameDurationSeconds + leftTimeSeconds; - if (k <= 0) { - return "00:00"; - } - const m = Math.floor(k / 60); - const s = k % 60; + const m = Math.floor(leftTimeSeconds / 60); + const s = leftTimeSeconds % 60; return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`; })(); @@ -49,43 +59,43 @@ export default function GolfWatchAppGaming({ <div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}> <div className="font-bold flex justify-between my-auto"> <div className="flex gap-6"> - {playerInfoA.profile.iconPath && ( + {playerProfileA.iconPath && ( <UserIcon - iconPath={playerInfoA.profile.iconPath} - displayName={playerInfoA.profile.displayName} + iconPath={playerProfileA.iconPath} + displayName={playerProfileA.displayName} className="w-12 h-12 my-auto" /> )} <div> <div className="text-gray-100">Player 1</div> - <div className="text-2xl">{playerInfoA.profile.displayName}</div> + <div className="text-2xl">{playerProfileA.displayName}</div> </div> </div> - <div className="text-6xl">{playerInfoA.state.score}</div> + <div className="text-6xl">{scoreA}</div> </div> <div className="font-bold text-center"> <div className="text-gray-100">{gameDisplayName}</div> <div className="text-3xl"> {gameResult ? gameResult === "winA" - ? `勝者 ${playerInfoA.profile.displayName}` + ? `勝者 ${playerProfileA.displayName}` : gameResult === "winB" - ? `勝者 ${playerInfoB.profile.displayName}` + ? `勝者 ${playerProfileB.displayName}` : "引き分け" : leftTime} </div> </div> <div className="font-bold flex justify-between my-auto"> - <div className="text-6xl">{playerInfoB.state.score}</div> + <div className="text-6xl">{scoreB}</div> <div className="flex gap-6 text-end"> <div> <div className="text-gray-100">Player 2</div> - <div className="text-2xl">{playerInfoB.profile.displayName}</div> + <div className="text-2xl">{playerProfileB.displayName}</div> </div> - {playerInfoB.profile.iconPath && ( + {playerProfileB.iconPath && ( <UserIcon - iconPath={playerInfoB.profile.iconPath} - displayName={playerInfoB.profile.displayName} + iconPath={playerProfileB.iconPath} + displayName={playerProfileB.displayName} className="w-12 h-12 my-auto" /> )} @@ -93,17 +103,17 @@ export default function GolfWatchAppGaming({ </div> </div> <ScoreBar - scoreA={playerInfoA.state.score} - scoreB={playerInfoB.state.score} + scoreA={scoreA} + scoreB={scoreB} bgA="bg-orange-400" bgB="bg-purple-400" /> <div className="grow grid grid-cols-3 p-4 gap-4"> - <CodeBlock code={playerInfoA.state.code ?? ""} language="swift" /> + <CodeBlock code={codeA} language="swift" /> <div className="flex flex-col gap-4"> <div className="grid grid-cols-2 gap-4"> - <SubmitResult result={playerInfoA.state.submitResult} /> - <SubmitResult result={playerInfoB.state.submitResult} /> + <SubmitResult result={submitResultA} /> + <SubmitResult result={submitResultB} /> </div> <div> <div className="mb-2 text-center text-xl font-bold"> @@ -112,7 +122,7 @@ export default function GolfWatchAppGaming({ <BorderedContainer>{problemDescription}</BorderedContainer> </div> </div> - <CodeBlock code={playerInfoB.state.code ?? ""} language="swift" /> + <CodeBlock code={codeB} language="swift" /> </div> </div> ); diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx index cd4195d..684d2af 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx @@ -1,18 +1,19 @@ +import { useAtomValue } from "jotai"; +import { startingLeftTimeSecondsAtom } from "../../states/watch"; + type Props = { gameDisplayName: string; - leftTimeSeconds: number; }; -export default function GolfWatchAppStarting({ - gameDisplayName, - leftTimeSeconds, -}: Props) { +export default function GolfWatchAppStarting({ gameDisplayName }: Props) { + const leftTimeSeconds = useAtomValue(startingLeftTimeSecondsAtom)!; + return ( <div className="min-h-screen bg-gray-100 flex flex-col"> <div className="text-white bg-iosdc-japan p-10 text-center"> <div className="text-4xl font-bold">{gameDisplayName}</div> </div> - <div className="text-center text-black font-black text-10xl animate-ping"> + <div className="text-center text-black font-black text-10xl"> {leftTimeSeconds} </div> </div> |