From 3ea0b8e93ea2735feacc8b7253bc0b32a5aa2bb6 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 29 Mar 2025 01:51:53 +0900
Subject: feat: show code in ranking page

---
 frontend/app/components/Gaming/CodePopover.tsx  | 43 +++++++++++++++++++++++++
 frontend/app/components/Gaming/RankingTable.tsx |  5 +++
 2 files changed, 48 insertions(+)
 create mode 100644 frontend/app/components/Gaming/CodePopover.tsx

(limited to 'frontend/app/components')

diff --git a/frontend/app/components/Gaming/CodePopover.tsx b/frontend/app/components/Gaming/CodePopover.tsx
new file mode 100644
index 0000000..a574a77
--- /dev/null
+++ b/frontend/app/components/Gaming/CodePopover.tsx
@@ -0,0 +1,43 @@
+import { Popover } from "@base-ui-components/react/popover";
+import { faCode, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { calcCodeSize } from "../../states/play";
+import BorderedContainer from "../BorderedContainer";
+import CodeBlock from "../Gaming/CodeBlock";
+
+type Props = {
+	code: string;
+};
+
+export default function CodePopover({ code }: Props) {
+	const codeSize = calcCodeSize(code);
+
+	return (
+		<Popover.Root>
+			<Popover.Trigger>
+				<FontAwesomeIcon icon={faCode} fixedWidth />
+			</Popover.Trigger>
+			<Popover.Portal>
+				<Popover.Positioner>
+					<Popover.Popup>
+						<BorderedContainer className="grow flex flex-col gap-4">
+							<div className="flex flex-row gap-2 items-center">
+								<div className="grow font-semibold text-lg">
+									コードサイズ: {codeSize}
+								</div>
+								<Popover.Close className="p-1 bg-gray-50 border-1 border-gray-300 rounded-sm">
+									<FontAwesomeIcon
+										icon={faXmark}
+										fixedWidth
+										className="text-gray-500"
+									/>
+								</Popover.Close>
+							</div>
+							<CodeBlock code={code} language="php" />
+						</BorderedContainer>
+					</Popover.Popup>
+				</Popover.Positioner>
+			</Popover.Portal>
+		</Popover.Root>
+	);
+}
diff --git a/frontend/app/components/Gaming/RankingTable.tsx b/frontend/app/components/Gaming/RankingTable.tsx
index a1e41f5..38d5200 100644
--- a/frontend/app/components/Gaming/RankingTable.tsx
+++ b/frontend/app/components/Gaming/RankingTable.tsx
@@ -1,6 +1,7 @@
 import { useAtomValue } from "jotai";
 import React from "react";
 import { rankingAtom } from "../../states/watch";
+import CodePopover from "./CodePopover";
 
 function TableHeaderCell({ children }: { children: React.ReactNode }) {
 	return (
@@ -40,6 +41,7 @@ export default function RankingTable() {
 						<TableHeaderCell>プレイヤー</TableHeaderCell>
 						<TableHeaderCell>スコア</TableHeaderCell>
 						<TableHeaderCell>提出時刻</TableHeaderCell>
+						<TableHeaderCell>コード</TableHeaderCell>
 					</tr>
 				</thead>
 				<tbody className="bg-white divide-y divide-gray-300">
@@ -54,6 +56,9 @@ export default function RankingTable() {
 							<TableBodyCell>
 								{formatUnixTimestamp(entry.submitted_at)}
 							</TableBodyCell>
+							<TableBodyCell>
+								{entry.code && <CodePopover code={entry.code} />}
+							</TableBodyCell>
 						</tr>
 					))}
 				</tbody>
-- 
cgit v1.2.3-70-g09d2