feat(frontend): show submission result at first rendering

7 files changed, 34 insertions, 23 deletions

diff --git a/frontend/app/components/ExecStatusIndicatorIcon.tsx b/frontend/app/components/ExecStatusIndicatorIcon.tsx
index 13343b8..5277bfa 100644
--- a/frontend/app/components/ExecStatusIndicatorIcon.tsx
+++ b/frontend/app/components/ExecStatusIndicatorIcon.tsx
@@ -1,5 +1,6 @@
 import {
 	faBan,
+	faCircle,
 	faCircleCheck,
 	faCircleExclamation,
 	faRotate,
@@ -13,6 +14,10 @@ type Props = {
 
 export default function ExecStatusIndicatorIcon({ status }: Props) {
 	switch (status) {
+		case "waiting_submission":
+			return (
+				<FontAwesomeIcon icon={faCircle} fixedWidth className="text-gray-400" />
+			);
 		case "running":
 			return (
 				<FontAwesomeIcon
diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx
index 481b997..7f582c9 100644
--- a/frontend/app/components/GolfWatchApp.client.tsx
+++ b/frontend/app/components/GolfWatchApp.client.tsx
@@ -78,14 +78,32 @@ export default function GolfWatchApp({
 		iconPath: playerA?.icon_path ?? null,
 		score: null,
 		code: "",
-		submitResult: undefined,
+		submitResult: {
+			status: "waiting_submission",
+			execResults: game.exec_steps.map((r) => ({
+				testcase_id: r.testcase_id,
+				status: "waiting_submission",
+				label: r.label,
+				stdout: "",
+				stderr: "",
+			})),
+		},
 	});
 	const [playerInfoB, setPlayerInfoB] = useState<PlayerInfo>({
 		displayName: playerB?.display_name ?? null,
 		iconPath: playerB?.icon_path ?? null,
 		score: null,
 		code: "",
-		submitResult: undefined,
+		submitResult: {
+			status: "waiting_submission",
+			execResults: game.exec_steps.map((r) => ({
+				testcase_id: r.testcase_id,
+				status: "waiting_submission",
+				label: r.label,
+				stdout: "",
+				stderr: "",
+			})),
+		},
 	});
 
 	if (readyState === ReadyState.UNINSTANTIATED) {
@@ -127,10 +145,9 @@ export default function GolfWatchApp({
 						...prev,
 						submitResult: {
 							status: "running",
-							execResults: game.exec_steps.map((r) => ({
-								testcase_id: r.testcase_id,
+							execResults: prev.submitResult.execResults.map((r) => ({
+								...r,
 								status: "running",
-								label: r.label,
 								stdout: "",
 								stderr: "",
 							})),
@@ -143,9 +160,6 @@ export default function GolfWatchApp({
 						player_id === playerA?.user_id ? setPlayerInfoA : setPlayerInfoB;
 					setter((prev) => {
 						const ret = { ...prev };
-						if (ret.submitResult === undefined) {
-							return ret;
-						}
 						ret.submitResult = {
 							...ret.submitResult,
 							execResults: ret.submitResult.execResults.map((r) =>
@@ -167,9 +181,6 @@ export default function GolfWatchApp({
 						player_id === playerA?.user_id ? setPlayerInfoA : setPlayerInfoB;
 					setter((prev) => {
 						const ret = { ...prev };
-						if (ret.submitResult === undefined) {
-							return ret;
-						}
 						ret.submitResult = {
 							...ret.submitResult,
 							status,
@@ -217,7 +228,6 @@ export default function GolfWatchApp({
 			}
 		}
 	}, [
-		game.exec_steps,
 		game.started_at,
 		lastJsonMessage,
 		readyState,
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index b436842..2a852e0 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -60,11 +60,7 @@ export default function GolfWatchAppGaming({
 				</div>
 				<div>
 					<div>
-						{playerInfoA.submitResult?.status ? (
-							<SubmitStatusLabel status={playerInfoA.submitResult?.status} />
-						) : (
-							<span>-</span>
-						)}
+						<SubmitStatusLabel status={playerInfoA.submitResult.status} />
 					</div>
 					<div>
 						<ol>
@@ -92,11 +88,7 @@ export default function GolfWatchAppGaming({
 				</div>
 				<div>
 					<div>
-						{playerInfoB.submitResult?.status ? (
-							<SubmitStatusLabel status={playerInfoB.submitResult?.status} />
-						) : (
-							<span>-</span>
-						)}
+						<SubmitStatusLabel status={playerInfoB.submitResult.status} />
 					</div>
 					<div>
 						<ol>
diff --git a/frontend/app/components/SubmitStatusLabel.tsx b/frontend/app/components/SubmitStatusLabel.tsx
index f6e19bb..2d4890d 100644
--- a/frontend/app/components/SubmitStatusLabel.tsx
+++ b/frontend/app/components/SubmitStatusLabel.tsx
@@ -6,6 +6,8 @@ type Props = {
 
 export default function SubmitStatusLabel({ status }: Props) {
 	switch (status) {
+		case "waiting_submission":
+			return <span>-</span>;
 		case "running":
 			return <span>Running...</span>;
 		case "success":
diff --git a/frontend/app/models/ExecResult.ts b/frontend/app/models/ExecResult.ts
index 59b8ee8..e0b6bb4 100644
--- a/frontend/app/models/ExecResult.ts
+++ b/frontend/app/models/ExecResult.ts
@@ -1,4 +1,5 @@
 export type ExecResultStatus =
+	| "waiting_submission"
 	| "running"
 	| "success"
 	| "wrong_answer"
diff --git a/frontend/app/models/PlayerInfo.ts b/frontend/app/models/PlayerInfo.ts
index 30cccea..8092ab3 100644
--- a/frontend/app/models/PlayerInfo.ts
+++ b/frontend/app/models/PlayerInfo.ts
@@ -5,5 +5,5 @@ export type PlayerInfo = {
 	iconPath: string | null;
 	score: number | null;
 	code: string | null;
-	submitResult?: SubmitResult;
+	submitResult: SubmitResult;
 };
diff --git a/frontend/app/models/SubmitResult.ts b/frontend/app/models/SubmitResult.ts
index 0cb7f9b..6df00b6 100644
--- a/frontend/app/models/SubmitResult.ts
+++ b/frontend/app/models/SubmitResult.ts
@@ -1,6 +1,7 @@
 import type { ExecResult } from "./ExecResult";
 
 export type SubmitResultStatus =
+	| "waiting_submission"
 	| "running"
 	| "success"
 	| "wrong_answer"