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

---
 frontend/app/components/Gaming/SubmitResult.tsx | 56 +++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/app/components/Gaming/SubmitResult.tsx

(limited to 'frontend/app/components/Gaming/SubmitResult.tsx')

diff --git a/frontend/app/components/Gaming/SubmitResult.tsx b/frontend/app/components/Gaming/SubmitResult.tsx
new file mode 100644
index 0000000..ae83e92
--- /dev/null
+++ b/frontend/app/components/Gaming/SubmitResult.tsx
@@ -0,0 +1,56 @@
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import type { SubmitResult } from "../../models/SubmitResult";
+import BorderedContainer from "../BorderedContainer";
+import SubmitStatusLabel from "../SubmitStatusLabel";
+import ExecStatusIndicatorIcon from "./ExecStatusIndicatorIcon";
+
+type Props = {
+	result: SubmitResult;
+	submitButton?: React.ReactNode;
+};
+
+export default function SubmitResult({ result, submitButton }: Props) {
+	return (
+		<div className="flex flex-col gap-2">
+			<div className="flex">
+				{submitButton}
+				<div className="grow font-bold text-xl text-center">
+					<SubmitStatusLabel status={result.status} />
+				</div>
+			</div>
+			<ul className="flex flex-col gap-2">
+				{result.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 !== result.execResults.length - 1 && (
+								<div>
+									<FontAwesomeIcon
+										icon={faArrowDown}
+										fixedWidth
+										className="text-gray-500"
+									/>
+								</div>
+							)}
+						</div>
+						<div className="grow p-2">
+							<BorderedContainer>
+								<div className="font-semibold">{r.label}</div>
+								<div>
+									<code>
+										{r.stdout}
+										{r.stderr}
+									</code>
+								</div>
+							</BorderedContainer>
+						</div>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}
-- 
cgit v1.2.3-70-g09d2


From 9bd1f89febe6311781aca3e8ee2b6a706a606e3c Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 18 Aug 2024 01:44:10 +0900
Subject: fix(frontend): fix an issue where loading icon does not rotate

---
 frontend/app/components/Gaming/SubmitResult.tsx | 4 +---
 frontend/app/root.tsx                           | 1 +
 frontend/app/routes/_index.tsx                  | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

(limited to 'frontend/app/components/Gaming/SubmitResult.tsx')

diff --git a/frontend/app/components/Gaming/SubmitResult.tsx b/frontend/app/components/Gaming/SubmitResult.tsx
index ae83e92..5b08ef1 100644
--- a/frontend/app/components/Gaming/SubmitResult.tsx
+++ b/frontend/app/components/Gaming/SubmitResult.tsx
@@ -24,9 +24,7 @@ export default function SubmitResult({ result, submitButton }: Props) {
 				{result.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>
+							<ExecStatusIndicatorIcon status={r.status} />
 							{idx !== result.execResults.length - 1 && (
 								<div>
 									<FontAwesomeIcon
diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
index 7924ce7..c05020c 100644
--- a/frontend/app/root.tsx
+++ b/frontend/app/root.tsx
@@ -1,4 +1,5 @@
 import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
 import type { LinksFunction } from "@remix-run/node";
 import {
 	Links,
diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx
index 24fff9f..baa3909 100644
--- a/frontend/app/routes/_index.tsx
+++ b/frontend/app/routes/_index.tsx
@@ -1,5 +1,4 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import "@fortawesome/fontawesome-svg-core/styles.css";
 import { ensureUserNotLoggedIn } from "../.server/auth";
 import BorderedContainer from "../components/BorderedContainer";
 import NavigateLink from "../components/NavigateLink";
-- 
cgit v1.2.3-70-g09d2