refactor(frontend): organize PlayerInfo

1 files changed, 29 insertions, 19 deletions

diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx
index d09a4ae..9eacb2d 100644
--- a/frontend/app/components/GolfWatchApp.client.tsx
+++ b/frontend/app/components/GolfWatchApp.client.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { AudioController } from "../.client/audio/AudioController";
 import type { components } from "../.server/api/schema";
 import useWebSocket, { ReadyState } from "../hooks/useWebSocket";
-import type { PlayerInfo } from "../models/PlayerInfo";
+import type { PlayerState } from "../types/PlayerState";
 import GolfWatchAppConnecting from "./GolfWatchApps/GolfWatchAppConnecting";
 import GolfWatchAppGaming from "./GolfWatchApps/GolfWatchAppGaming";
 import GolfWatchAppStarting from "./GolfWatchApps/GolfWatchAppStarting";
@@ -73,12 +73,14 @@ export default function GolfWatchApp({
 		}
 	}, [gameState, startedAt, game.duration_seconds, audioController]);
 
-	const playerA = game.players[0];
-	const playerB = game.players[1];
+	const playerA = game.players[0]!;
+	const playerB = game.players[1]!;
 
-	const [playerInfoA, setPlayerInfoA] = useState<PlayerInfo>({
-		displayName: playerA?.display_name ?? null,
-		iconPath: playerA?.icon_path ?? null,
+	const playerProfileA = {
+		displayName: playerA.display_name,
+		iconPath: playerA.icon_path ?? null,
+	};
+	const [playerStateA, setPlayerStateA] = useState<PlayerState>({
 		score: null,
 		code: "",
 		submitResult: {
@@ -92,9 +94,11 @@ export default function GolfWatchApp({
 			})),
 		},
 	});
-	const [playerInfoB, setPlayerInfoB] = useState<PlayerInfo>({
-		displayName: playerB?.display_name ?? null,
-		iconPath: playerB?.icon_path ?? null,
+	const playerProfileB = {
+		displayName: playerB.display_name,
+		iconPath: playerB.icon_path ?? null,
+	};
+	const [playerStateB, setPlayerStateB] = useState<PlayerState>({
 		score: null,
 		code: "",
 		submitResult: {
@@ -138,12 +142,12 @@ export default function GolfWatchApp({
 				} else if (lastJsonMessage.type === "watcher:s2c:code") {
 					const { player_id, code } = lastJsonMessage.data;
 					const setter =
-						player_id === playerA?.user_id ? setPlayerInfoA : setPlayerInfoB;
+						player_id === playerA.user_id ? setPlayerStateA : setPlayerStateB;
 					setter((prev) => ({ ...prev, code }));
 				} else if (lastJsonMessage.type === "watcher:s2c:submit") {
 					const { player_id } = lastJsonMessage.data;
 					const setter =
-						player_id === playerA?.user_id ? setPlayerInfoA : setPlayerInfoB;
+						player_id === playerA.user_id ? setPlayerStateA : setPlayerStateB;
 					setter((prev) => ({
 						...prev,
 						submitResult: {
@@ -160,7 +164,7 @@ export default function GolfWatchApp({
 					const { player_id, testcase_id, status, stdout, stderr } =
 						lastJsonMessage.data;
 					const setter =
-						player_id === playerA?.user_id ? setPlayerInfoA : setPlayerInfoB;
+						player_id === playerA.user_id ? setPlayerStateA : setPlayerStateB;
 					setter((prev) => {
 						const ret = { ...prev };
 						ret.submitResult = {
@@ -181,7 +185,7 @@ export default function GolfWatchApp({
 				} else if (lastJsonMessage.type === "watcher:s2c:submitresult") {
 					const { player_id, status, score } = lastJsonMessage.data;
 					const setter =
-						player_id === playerA?.user_id ? setPlayerInfoA : setPlayerInfoB;
+						player_id === playerA.user_id ? setPlayerStateA : setPlayerStateB;
 					setter((prev) => {
 						const ret = { ...prev };
 						ret.submitResult = {
@@ -235,8 +239,8 @@ export default function GolfWatchApp({
 		lastJsonMessage,
 		readyState,
 		gameState,
-		playerA?.user_id,
-		playerB?.user_id,
+		playerA.user_id,
+		playerB.user_id,
 	]);
 
 	if (gameState === "connecting") {
@@ -245,8 +249,8 @@ export default function GolfWatchApp({
 		return (
 			<GolfWatchAppWaiting
 				gameDisplayName={game.display_name}
-				playerInfoA={playerInfoA}
-				playerInfoB={playerInfoB}
+				playerProfileA={playerProfileA}
+				playerProfileB={playerProfileB}
 			/>
 		);
 	} else if (gameState === "starting") {
@@ -262,8 +266,14 @@ export default function GolfWatchApp({
 				gameDisplayName={game.display_name}
 				gameDurationSeconds={game.duration_seconds}
 				leftTimeSeconds={leftTimeSeconds!}
-				playerInfoA={playerInfoA}
-				playerInfoB={playerInfoB}
+				playerInfoA={{
+					profile: playerProfileA,
+					state: playerStateA,
+				}}
+				playerInfoB={{
+					profile: playerProfileB,
+					state: playerStateB,
+				}}
 				problemTitle={game.problem.title}
 				problemDescription={game.problem.description}
 				gameResult={null /* TODO */}