From c6629900f3a4965ceca0f42e90648937bf51dfb5 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 12 Aug 2024 03:56:13 +0900
Subject: feat(frontend): improve play page styling

---
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  | 50 +++++++++++++++++++---
 frontend/app/components/SubmitStatusLabel.tsx      | 16 +++----
 2 files changed, 51 insertions(+), 15 deletions(-)

(limited to 'frontend')

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 08490a6..667ada2 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -3,6 +3,10 @@ import React, { useRef } from "react";
 import SubmitButton from "../../components/SubmitButton";
 import type { PlayerInfo } from "../../models/PlayerInfo";
 import BorderedContainer from "../BorderedContainer";
+import SubmitStatusLabel from "../SubmitStatusLabel";
+import ExecStatusIndicatorIcon from "../ExecStatusIndicatorIcon";
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props = {
 	gameDisplayName: string;
@@ -40,10 +44,11 @@ export default function GolfPlayAppGaming({
 					<div className="text-gray-100">{gameDisplayName}</div>
 					<div className="text-2xl">03:21</div>
 				</div>
-				<div>
-					<Link to={"/dashboard"} className="font-bold text-xl">
+				<div className="font-bold text-end">
+					<Link to={"/dashboard"} className="text-gray-100">
 						{playerInfo.displayName}
 					</Link>
+					<div className="text-2xl">{playerInfo.score}</div>
 				</div>
 			</div>
 			<div className="grow grid grid-cols-3 divide-x divide-gray-300">
@@ -62,13 +67,44 @@ export default function GolfPlayAppGaming({
 						className="resize-none h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-gray-400 transition duration-300"
 					></textarea>
 				</div>
-				<div className="p-4">
-					<SubmitButton onClick={handleSubmitButtonClick}>提出</SubmitButton>
-					<div className="mb-2 mt-auto">
-						<div className="font-semibold text-green-500">
-							Score: {playerInfo.score ?? "-"}
+				<div className="p-4 flex flex-col gap-4">
+					<div className="flex">
+						<SubmitButton onClick={handleSubmitButtonClick}>提出</SubmitButton>
+						<div className="grow font-bold text-xl text-center m-1">
+							<SubmitStatusLabel status={playerInfo.submitResult.status} />
 						</div>
 					</div>
+					<ul className="flex flex-col gap-2">
+						{playerInfo.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 !== playerInfo.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>
 			</div>
 		</div>
diff --git a/frontend/app/components/SubmitStatusLabel.tsx b/frontend/app/components/SubmitStatusLabel.tsx
index 2d4890d..e0ecc27 100644
--- a/frontend/app/components/SubmitStatusLabel.tsx
+++ b/frontend/app/components/SubmitStatusLabel.tsx
@@ -7,20 +7,20 @@ type Props = {
 export default function SubmitStatusLabel({ status }: Props) {
 	switch (status) {
 		case "waiting_submission":
-			return <span>-</span>;
+			return null;
 		case "running":
-			return <span>Running...</span>;
+			return "実行中...";
 		case "success":
-			return <span>Accepted</span>;
+			return "成功";
 		case "wrong_answer":
-			return <span>Wrong Answer</span>;
+			return "テスト失敗";
 		case "timeout":
-			return <span>Time Limit Exceeded</span>;
+			return "時間切れ";
 		case "compile_error":
-			return <span>Compile Error</span>;
+			return "コンパイルエラー";
 		case "runtime_error":
-			return <span>Runtime Error</span>;
+			return "実行時エラー";
 		case "internal_error":
-			return <span>Internal Error</span>;
+			return "！内部エラー！";
 	}
 }
-- 
cgit v1.2.3-70-g09d2