feat(frontend): improve watch page layout

1 files changed, 60 insertions, 0 deletions

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>
+	);
+}