From 0765f61a494de1f284042ba56382983d58d5a6f5 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Wed, 21 Aug 2024 01:20:20 +0900
Subject: feat(frontend): partially implement game result

---
 frontend/app/components/GolfWatchApp.client.tsx    |  1 +
 .../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>
-- 
cgit v1.2.3-70-g09d2