From 338313f3fb97aa96b7cf75596ddcbf55f6a9002d Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 21 Mar 2025 01:22:46 +0900
Subject: feat(frontend): show ranking in 1v1 watch page

---
 frontend/app/components/Gaming/ProblemColumn.tsx   | 44 +----------------
 .../app/components/Gaming/ProblemColumnContent.tsx | 57 ++++++++++++++++++++++
 .../GolfWatchApps/GolfWatchAppGaming1v1.tsx        | 15 +++---
 3 files changed, 68 insertions(+), 48 deletions(-)
 create mode 100644 frontend/app/components/Gaming/ProblemColumnContent.tsx

(limited to 'frontend')

diff --git a/frontend/app/components/Gaming/ProblemColumn.tsx b/frontend/app/components/Gaming/ProblemColumn.tsx
index 922cbe7..3b7e58c 100644
--- a/frontend/app/components/Gaming/ProblemColumn.tsx
+++ b/frontend/app/components/Gaming/ProblemColumn.tsx
@@ -1,7 +1,5 @@
-import FoldableBorderedContainerWithCaption from "../FoldableBorderedContainerWithCaption";
 import TitledColumn from "../TitledColumn";
-import CodeBlock from "./CodeBlock";
-import InlineCode from "./InlineCode";
+import ProblemColumnContent from "./ProblemColumnContent";
 
 type Props = {
 	title: string;
@@ -16,45 +14,7 @@ export default function ProblemColumn({
 }: Props) {
 	return (
 		<TitledColumn title={title}>
-			<FoldableBorderedContainerWithCaption caption="問題">
-				<pre className="text-gray-700 whitespace-pre-wrap break-words">
-					{description}
-				</pre>
-			</FoldableBorderedContainerWithCaption>
-			<FoldableBorderedContainerWithCaption caption="サンプルコード">
-				<CodeBlock code={sampleCode} language="php" />
-			</FoldableBorderedContainerWithCaption>
-			<FoldableBorderedContainerWithCaption caption="スコア計算・PHP 環境">
-				<div className="text-gray-700 flex flex-col gap-2">
-					<p>
-						スコアはコード中の全 ASCII
-						空白文字を除去した後のバイト数です。また、先頭や末尾に置かれた PHP
-						タグ (<InlineCode code="<?php" />、<InlineCode code="<?" />、
-						<InlineCode code="?>" />) はカウントされません。
-					</p>
-					<p>
-						同じスコアを出した場合、より提出が早かったプレイヤーの勝ちとなります。
-					</p>
-					<p>
-						この環境の PHP バージョンは{" "}
-						<strong className="font-bold">8.4.4</strong> です。 mbstring
-						を除くほとんどの拡張は無効化されています。
-						また、ファイルやネットワークアクセスはできません。
-					</p>
-					<p>
-						テストの成否は、標準出力へ出力された文字列を比較して判定されます。
-						末尾の改行はあってもなくても構いません。
-						標準エラー出力の内容は無視されますが、fatal error
-						等で実行が中断された場合は失敗扱いとなります。
-					</p>
-					<p>
-						なお、
-						<InlineCode code="error_reporting" /> は{" "}
-						<InlineCode code="E_ALL &amp; ~E_WARNING &amp; ~E_NOTICE &amp; ~E_DEPRECATED" />{" "}
-						に設定されています。
-					</p>
-				</div>
-			</FoldableBorderedContainerWithCaption>
+			<ProblemColumnContent description={description} sampleCode={sampleCode} />
 		</TitledColumn>
 	);
 }
diff --git a/frontend/app/components/Gaming/ProblemColumnContent.tsx b/frontend/app/components/Gaming/ProblemColumnContent.tsx
new file mode 100644
index 0000000..b85cc6d
--- /dev/null
+++ b/frontend/app/components/Gaming/ProblemColumnContent.tsx
@@ -0,0 +1,57 @@
+import FoldableBorderedContainerWithCaption from "../FoldableBorderedContainerWithCaption";
+import CodeBlock from "./CodeBlock";
+import InlineCode from "./InlineCode";
+
+type Props = {
+	description: string;
+	sampleCode: string;
+};
+
+export default function ProblemColumnContent({
+	description,
+	sampleCode,
+}: Props) {
+	return (
+		<>
+			<FoldableBorderedContainerWithCaption caption="問題">
+				<pre className="text-gray-700 whitespace-pre-wrap break-words">
+					{description}
+				</pre>
+			</FoldableBorderedContainerWithCaption>
+			<FoldableBorderedContainerWithCaption caption="サンプルコード">
+				<CodeBlock code={sampleCode} language="php" />
+			</FoldableBorderedContainerWithCaption>
+			<FoldableBorderedContainerWithCaption caption="スコア計算・PHP 環境">
+				<div className="text-gray-700 flex flex-col gap-2">
+					<p>
+						スコアはコード中の全 ASCII
+						空白文字を除去した後のバイト数です。また、先頭や末尾に置かれた PHP
+						タグ (<InlineCode code="<?php" />、<InlineCode code="<?" />、
+						<InlineCode code="?>" />) はカウントされません。
+					</p>
+					<p>
+						同じスコアを出した場合、より提出が早かったプレイヤーの勝ちとなります。
+					</p>
+					<p>
+						この環境の PHP バージョンは{" "}
+						<strong className="font-bold">8.4.4</strong> です。 mbstring
+						を除くほとんどの拡張は無効化されています。
+						また、ファイルやネットワークアクセスはできません。
+					</p>
+					<p>
+						テストの成否は、標準出力へ出力された文字列を比較して判定されます。
+						末尾の改行はあってもなくても構いません。
+						標準エラー出力の内容は無視されますが、fatal error
+						等で実行が中断された場合は失敗扱いとなります。
+					</p>
+					<p>
+						なお、
+						<InlineCode code="error_reporting" /> は{" "}
+						<InlineCode code="E_ALL &amp; ~E_WARNING &amp; ~E_NOTICE &amp; ~E_DEPRECATED" />{" "}
+						に設定されています。
+					</p>
+				</div>
+			</FoldableBorderedContainerWithCaption>
+		</>
+	);
+}
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index a647214..63ad5f3 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -8,7 +8,8 @@ import type { PlayerProfile } from "../../types/PlayerProfile";
 import FoldableBorderedContainerWithCaption from "../FoldableBorderedContainerWithCaption";
 import CodeBlock from "../Gaming/CodeBlock";
 import LeftTime from "../Gaming/LeftTime";
-import ProblemColumn from "../Gaming/ProblemColumn";
+import ProblemColumnContent from "../Gaming/ProblemColumnContent";
+import RankingTable from "../Gaming/RankingTable";
 import ScoreBar from "../Gaming/ScoreBar";
 import SubmitStatusLabel from "../SubmitStatusLabel";
 import ThreeColumnLayout from "../ThreeColumnLayout";
@@ -115,11 +116,13 @@ export default function GolfWatchAppGaming1v1({
 						<CodeBlock code={codeA} language="php" />
 					</FoldableBorderedContainerWithCaption>
 				</TitledColumn>
-				<ProblemColumn
-					title={problemTitle}
-					description={problemDescription}
-					sampleCode={sampleCode}
-				/>
+				<TitledColumn title={problemTitle}>
+					<ProblemColumnContent
+						description={problemDescription}
+						sampleCode={sampleCode}
+					/>
+					<RankingTable />
+				</TitledColumn>
 				<TitledColumn title={<SubmitStatusLabel status={statusB} />}>
 					<FoldableBorderedContainerWithCaption
 						caption={`コードサイズ: ${codeSizeB}`}
-- 
cgit v1.2.3-70-g09d2