diff options
| author | nsfisis <nsfisis@gmail.com> | 2024-08-21 01:20:20 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2024-08-21 01:20:20 +0900 |
| commit | 0765f61a494de1f284042ba56382983d58d5a6f5 (patch) | |
| tree | 5bb237adbd5b99a600ff7caeb7d484baa3369da8 | |
| parent | 48223c8438002f4dedd0623704a8ea1e8e4126b5 (diff) | |
| download | iosdc-japan-2024-albatross-0765f61a494de1f284042ba56382983d58d5a6f5.tar.gz iosdc-japan-2024-albatross-0765f61a494de1f284042ba56382983d58d5a6f5.tar.zst iosdc-japan-2024-albatross-0765f61a494de1f284042ba56382983d58d5a6f5.zip | |
feat(frontend): partially implement game result
| -rw-r--r-- | frontend/app/components/GolfWatchApp.client.tsx | 1 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx | 26 |
2 files changed, 23 insertions, 4 deletions
diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx index e2bc7d4..22f87fa 100644 --- a/frontend/app/components/GolfWatchApp.client.tsx +++ b/frontend/app/components/GolfWatchApp.client.tsx @@ -260,6 +260,7 @@ export default function GolfWatchApp({ playerInfoB={playerInfoB} problemTitle={game.problem.title} problemDescription={game.problem.description} + gameResult={null /* TODO */} /> ); } else { diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx index e325cf7..28babff 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx @@ -13,6 +13,7 @@ type Props = { playerInfoB: PlayerInfo; problemTitle: string; problemDescription: string; + gameResult: "winA" | "winB" | "draw" | null; }; export default function GolfWatchAppGaming({ @@ -23,6 +24,7 @@ export default function GolfWatchAppGaming({ playerInfoB, problemTitle, problemDescription, + gameResult, }: Props) { const leftTime = (() => { const k = gameDurationSeconds + leftTimeSeconds; @@ -34,11 +36,19 @@ export default function GolfWatchAppGaming({ return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`; })(); + const topBg = gameResult + ? gameResult === "winA" + ? "bg-orange-400" + : gameResult === "winB" + ? "bg-purple-400" + : "bg-pink-500" + : "bg-iosdc-japan"; + return ( <div className="min-h-screen bg-gray-100 flex flex-col"> - <div className="text-white bg-iosdc-japan grid grid-cols-3 px-4 py-2"> + <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-4"> + <div className="flex gap-6"> {playerInfoA.iconPath && ( <UserIcon iconPath={playerInfoA.iconPath} @@ -55,11 +65,19 @@ export default function GolfWatchAppGaming({ </div> <div className="font-bold text-center"> <div className="text-gray-100">{gameDisplayName}</div> - <div className="text-3xl">{leftTime}</div> + <div className="text-3xl"> + {gameResult + ? gameResult === "winA" + ? `勝者 ${playerInfoA.displayName}` + : gameResult === "winB" + ? `勝者 ${playerInfoB.displayName}` + : "引き分け" + : leftTime} + </div> </div> <div className="font-bold flex justify-between my-auto"> <div className="text-6xl">{playerInfoB.score}</div> - <div className="flex gap-4 text-end"> + <div className="flex gap-6 text-end"> <div> <div className="text-gray-100">Player 2</div> <div className="text-2xl">{playerInfoB.displayName}</div> |