feat(frontend): partially implement game result

1 files changed, 22 insertions, 4 deletions

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>