From cca0f63e50684d6806697589b620ee4b4c1b21b5 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 20 Mar 2025 22:18:14 +0900
Subject: feat(frontend): improve watch page layout

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

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

diff --git a/frontend/app/components/Gaming/ProblemColumn.tsx b/frontend/app/components/Gaming/ProblemColumn.tsx
new file mode 100644
index 0000000..2a57afd
--- /dev/null
+++ b/frontend/app/components/Gaming/ProblemColumn.tsx
@@ -0,0 +1,60 @@
+import BorderedContainerWithCaption from "../BorderedContainerWithCaption";
+import TitledColumn from "../TitledColumn";
+import CodeBlock from "./CodeBlock";
+import InlineCode from "./InlineCode";
+
+type Props = {
+	title: string;
+	description: string;
+	sampleCode: string;
+};
+
+export default function ProblemColumn({
+	title,
+	description,
+	sampleCode,
+}: Props) {
+	return (
+		<TitledColumn title={title}>
+			<BorderedContainerWithCaption caption="問題">
+				<pre className="text-gray-700 whitespace-pre-wrap break-words">
+					{description}
+				</pre>
+			</BorderedContainerWithCaption>
+			<BorderedContainerWithCaption caption="サンプルコード">
+				<CodeBlock code={sampleCode} language="php" />
+			</BorderedContainerWithCaption>
+			<BorderedContainerWithCaption 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>
+			</BorderedContainerWithCaption>
+		</TitledColumn>
+	);
+}
-- 
cgit v1.2.3-70-g09d2