From e31c22dda15a665ffefc13b14a8b377062ef0351 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 21 Mar 2025 10:16:42 +0900
Subject: feat(frontend): make main players optional

---
 frontend/app/components/GolfWatchApp.tsx           |  8 ++++----
 .../GolfWatchApps/GolfWatchAppGaming1v1.tsx        | 22 ++++++++++++----------
 .../GolfWatchApps/GolfWatchAppWaiting1v1.tsx       | 16 ++++++++++++----
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/frontend/app/components/GolfWatchApp.tsx b/frontend/app/components/GolfWatchApp.tsx
index 492d555..a8b4630 100644
--- a/frontend/app/components/GolfWatchApp.tsx
+++ b/frontend/app/components/GolfWatchApp.tsx
@@ -121,8 +121,8 @@ export default function GolfWatchApp({
 		return game.game_type === "1v1" ? (
 			<GolfWatchAppWaiting1v1
 				gameDisplayName={game.display_name}
-				playerProfileA={playerProfileA!}
-				playerProfileB={playerProfileB!}
+				playerProfileA={playerProfileA}
+				playerProfileB={playerProfileB}
 			/>
 		) : (
 			<GolfWatchAppWaitingMultiplayer gameDisplayName={game.display_name} />
@@ -133,8 +133,8 @@ export default function GolfWatchApp({
 		return game.game_type === "1v1" ? (
 			<GolfWatchAppGaming1v1
 				gameDisplayName={game.display_name}
-				playerProfileA={playerProfileA!}
-				playerProfileB={playerProfileB!}
+				playerProfileA={playerProfileA}
+				playerProfileB={playerProfileB}
 				problemTitle={game.problem.title}
 				problemDescription={game.problem.description}
 				sampleCode={game.problem.sample_code}
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index 168f5d9..ce12dca 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -20,8 +20,8 @@ import UserIcon from "../UserIcon";
 
 type Props = {
 	gameDisplayName: string;
-	playerProfileA: PlayerProfile;
-	playerProfileB: PlayerProfile;
+	playerProfileA: PlayerProfile | null;
+	playerProfileB: PlayerProfile | null;
 	problemTitle: string;
 	problemDescription: string;
 	sampleCode: string;
@@ -39,11 +39,13 @@ export default function GolfWatchAppGaming1v1({
 	const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
 	const latestGameStates = useAtomValue(latestGameStatesAtom);
 
-	const stateA = latestGameStates[`${playerProfileA.id}`] ?? null;
+	const stateA =
+		playerProfileA && (latestGameStates[`${playerProfileA.id}`] ?? null);
 	const codeA = stateA?.code ?? "";
 	const scoreA = stateA?.score ?? null;
 	const statusA = stateA?.status ?? "none";
-	const stateB = latestGameStates[`${playerProfileB.id}`] ?? null;
+	const stateB =
+		playerProfileB && (latestGameStates[`${playerProfileB.id}`] ?? null);
 	const codeB = stateB?.code ?? "";
 	const scoreB = stateB?.score ?? null;
 	const statusB = stateB?.status ?? "none";
@@ -66,14 +68,14 @@ export default function GolfWatchAppGaming1v1({
 			<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 items-center">
-						{playerProfileA.iconPath && (
+						{playerProfileA?.iconPath && (
 							<UserIcon
 								iconPath={playerProfileA.iconPath}
 								displayName={playerProfileA.displayName}
 								className="w-12 h-12 my-auto"
 							/>
 						)}
-						<div className="text-4xl">{playerProfileA.displayName}</div>
+						<div className="text-4xl">{playerProfileA?.displayName}</div>
 					</div>
 					<div className="text-6xl">{scoreA}</div>
 				</div>
@@ -82,9 +84,9 @@ export default function GolfWatchAppGaming1v1({
 					{gameResultKind ? (
 						<div className="text-3xl">
 							{gameResultKind === "winA"
-								? `勝者 ${playerProfileA.displayName}`
+								? `勝者 ${playerProfileA!.displayName}`
 								: gameResultKind === "winB"
-									? `勝者 ${playerProfileB.displayName}`
+									? `勝者 ${playerProfileB!.displayName}`
 									: "引き分け"}
 						</div>
 					) : (
@@ -94,8 +96,8 @@ export default function GolfWatchAppGaming1v1({
 				<div className="font-bold flex justify-between my-auto">
 					<div className="text-6xl">{scoreB}</div>
 					<div className="flex gap-6 items-center text-end">
-						<div className="text-4xl">{playerProfileB.displayName}</div>
-						{playerProfileB.iconPath && (
+						<div className="text-4xl">{playerProfileB?.displayName}</div>
+						{playerProfileB?.iconPath && (
 							<UserIcon
 								iconPath={playerProfileB.iconPath}
 								displayName={playerProfileB.displayName}
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx
index 33f37be..ae88295 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx
@@ -3,8 +3,8 @@ import PlayerNameAndIcon from "../PlayerNameAndIcon";
 
 type Props = {
 	gameDisplayName: string;
-	playerProfileA: PlayerProfile;
-	playerProfileB: PlayerProfile;
+	playerProfileA: PlayerProfile | null;
+	playerProfileB: PlayerProfile | null;
 };
 
 export default function GolfWatchAppWaiting1v1({
@@ -18,9 +18,17 @@ export default function GolfWatchAppWaiting1v1({
 				<div className="text-4xl">{gameDisplayName}</div>
 			</div>
 			<div className="grow grid grid-cols-3 gap-10 mx-auto text-black">
-				<PlayerNameAndIcon profile={playerProfileA} />
+				{playerProfileA ? (
+					<PlayerNameAndIcon profile={playerProfileA} />
+				) : (
+					<div></div>
+				)}
 				<div className="text-8xl my-auto">vs.</div>
-				<PlayerNameAndIcon profile={playerProfileB} />
+				{playerProfileB ? (
+					<PlayerNameAndIcon profile={playerProfileB} />
+				) : (
+					<div></div>
+				)}
 			</div>
 		</div>
 	);
-- 
cgit v1.2.3-70-g09d2