feat(frontend): improve play page styling

4 files changed, 59 insertions, 19 deletions

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 "！内部エラー！";
 	}
 }
diff --git a/worker/exec.go b/worker/exec.go
index 9e937f7..37f542b 100644
--- a/worker/exec.go
+++ b/worker/exec.go
@@ -67,11 +67,14 @@ func execCommandWithTimeout(
 	}
 }
 
-func convertCommandErrorToResultType(err error) string {
+func convertCommandErrorToResultType(err error, isCompile bool) string {
 	if err != nil {
 		if err == context.DeadlineExceeded {
 			return resultTimeout
 		}
+		if isCompile {
+			return resultCompileError
+		}
 		return resultRuntimeError
 	}
 	return resultSuccess
@@ -109,7 +112,7 @@ func execSwiftCompile(
 	)
 
 	return swiftCompileResponseData{
-		Status: convertCommandErrorToResultType(err),
+		Status: convertCommandErrorToResultType(err, true),
 		Stdout: stdout,
 		Stderr: stderr,
 	}
@@ -140,7 +143,7 @@ func execWasmCompile(
 	)
 
 	return wasmCompileResponseData{
-		Status: convertCommandErrorToResultType(err),
+		Status: convertCommandErrorToResultType(err, true),
 		Stdout: stdout,
 		Stderr: stderr,
 	}
@@ -170,7 +173,7 @@ func execTestRun(
 	)
 
 	return testRunResponseData{
-		Status: convertCommandErrorToResultType(err),
+		Status: convertCommandErrorToResultType(err, false),
 		Stdout: stdout,
 		Stderr: stderr,
 	}
diff --git a/worker/models.go b/worker/models.go
index 9f60eb0..4a318d0 100644
--- a/worker/models.go
+++ b/worker/models.go
@@ -7,6 +7,7 @@ import (
 
 const (
 	resultSuccess       = "success"
+	resultCompileError  = "compile_error"
 	resultRuntimeError  = "runtime_error"
 	resultTimeout       = "timeout"
 	resultInternalError = "internal_error"