diff options
Diffstat (limited to 'frontend')
| -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> |