From ad42f43d1c3c8f0da0ac31b8016e2f20f1765720 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 18 Aug 2024 00:38:07 +0900
Subject: refactor(frontend): extract components for gaming page

---
 .../GolfWatchApps/GolfWatchAppGaming.tsx           | 120 +++------------------
 1 file changed, 15 insertions(+), 105 deletions(-)

(limited to 'frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx')

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index 63c232b..d17c2dc 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -1,9 +1,7 @@
-import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PlayerInfo } from "../../models/PlayerInfo";
-import BorderedContainer from "../BorderedContainer";
-import ExecStatusIndicatorIcon from "../ExecStatusIndicatorIcon";
-import SubmitStatusLabel from "../SubmitStatusLabel";
+import CodeBlock from "../Gaming/CodeBlock";
+import ScoreBar from "../Gaming/ScoreBar";
+import SubmitResult from "../Gaming/SubmitResult";
 
 type Props = {
 	gameDisplayName: string;
@@ -29,20 +27,6 @@ export default function GolfWatchAppGaming({
 		return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
 	})();
 
-	const scoreRatio = (() => {
-		const scoreA = playerInfoA.score;
-		const scoreB = playerInfoB.score;
-		if (scoreA === null && scoreB === null) {
-			return 50;
-		} else if (scoreA === null) {
-			return 0;
-		} else if (scoreB === null) {
-			return 100;
-		} else {
-			return (scoreB / (scoreA + scoreB)) * 100;
-		}
-	})();
-
 	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">
@@ -91,98 +75,24 @@ export default function GolfWatchAppGaming({
 					</div>
 				</div>
 			</div>
-			<div className="w-full bg-purple-400">
-				<div
-					className="h-6 bg-orange-400"
-					style={{ width: `${scoreRatio}%` }}
-				></div>
-			</div>
+			<ScoreBar
+				scoreA={playerInfoA.score}
+				scoreB={playerInfoB.score}
+				bgA="bg-orange-400"
+				bgB="bg-purple-400"
+			/>
 			<div className="grow grid grid-cols-10 p-4 gap-4">
 				<div className="col-span-3">
-					<pre className="bg-white resize-none h-full w-full rounded-lg border border-gray-300 p-2">
-						<code>{playerInfoA.code}</code>
-					</pre>
+					<CodeBlock code={playerInfoA.code ?? ""} />
 				</div>
-				<div className="col-span-2 flex flex-col gap-4">
-					<div className="flex">
-						<div className="grow font-bold text-xl text-center">
-							<SubmitStatusLabel status={playerInfoA.submitResult.status} />
-						</div>
-					</div>
-					<ul className="flex flex-col gap-2">
-						{playerInfoA.submitResult.execResults.map((r, idx) => (
-							<li key={r.testcase_id ?? -1} className="flex gap-2">
-								<div className="flex flex-col gap-2 p-2">
-									<div className="w-6">
-										<ExecStatusIndicatorIcon status={r.status} />
-									</div>
-									{idx !== playerInfoA.submitResult.execResults.length - 1 && (
-										<div>
-											<FontAwesomeIcon
-												icon={faArrowDown}
-												fixedWidth
-												className="text-gray-500"
-											/>
-										</div>
-									)}
-								</div>
-								<div className="grow p-2 overflow-x-scroll">
-									<BorderedContainer>
-										<div className="font-semibold">{r.label}</div>
-										<div>
-											<code>
-												{r.stdout}
-												{r.stderr}
-											</code>
-										</div>
-									</BorderedContainer>
-								</div>
-							</li>
-						))}
-					</ul>
+				<div className="col-span-2">
+					<SubmitResult result={playerInfoA.submitResult} />
 				</div>
-				<div className="col-span-2 flex flex-col gap-4">
-					<div className="flex">
-						<div className="grow font-bold text-xl text-center">
-							<SubmitStatusLabel status={playerInfoB.submitResult.status} />
-						</div>
-					</div>
-					<ul className="flex flex-col gap-2">
-						{playerInfoB.submitResult.execResults.map((r, idx) => (
-							<li key={r.testcase_id ?? -1} className="flex gap-2">
-								<div className="flex flex-col gap-2 p-2">
-									<div className="w-6">
-										<ExecStatusIndicatorIcon status={r.status} />
-									</div>
-									{idx !== playerInfoB.submitResult.execResults.length - 1 && (
-										<div>
-											<FontAwesomeIcon
-												icon={faArrowDown}
-												fixedWidth
-												className="text-gray-500"
-											/>
-										</div>
-									)}
-								</div>
-								<div className="grow p-2 overflow-x-scroll">
-									<BorderedContainer>
-										<div className="font-semibold">{r.label}</div>
-										<div>
-											<code>
-												{r.stdout}
-												{r.stderr}
-											</code>
-										</div>
-									</BorderedContainer>
-								</div>
-							</li>
-						))}
-					</ul>
+				<div className="col-span-2">
+					<SubmitResult result={playerInfoB.submitResult} />
 				</div>
 				<div className="col-span-3">
-					<pre className="bg-white resize-none h-full w-full rounded-lg border border-gray-300 p-2">
-						<code>{playerInfoB.code}</code>
-					</pre>
+					<CodeBlock code={playerInfoB.code ?? ""} />
 				</div>
 			</div>
 		</div>
-- 
cgit v1.2.3-70-g09d2