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/api/schema.d.ts                    |  2 ++
 frontend/app/components/Gaming/CodePopover.tsx  | 43 +++++++++++++++++++++++++
 frontend/app/components/Gaming/RankingTable.tsx |  5 +++
 frontend/app/routes/dashboard.tsx               | 19 -----------
 4 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 frontend/app/components/Gaming/CodePopover.tsx

(limited to 'frontend/app')

diff --git a/frontend/app/api/schema.d.ts b/frontend/app/api/schema.d.ts
index 6f69292..af454e8 100644
--- a/frontend/app/api/schema.d.ts
+++ b/frontend/app/api/schema.d.ts
@@ -211,6 +211,8 @@ export interface components {
             score: number;
             /** @example 946684800 */
             submitted_at: number;
+            /** @example echo 'hello world'; */
+            code: string | null;
         };
     };
     responses: {
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>
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index d0fea47..b7bfb01 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -24,8 +24,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export default function Dashboard() {
 	const { user, games } = useLoaderData<typeof loader>()!;
 
-	const isOnlineQualifyingOpen = new Date() < new Date(2025, 2, 21, 16, 30);
-
 	return (
 		<div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center gap-4">
 			{user.icon_path && (
@@ -36,23 +34,6 @@ export default function Dashboard() {
 				/>
 			)}
 			<h1 className="text-3xl font-bold text-gray-800">{user.display_name}</h1>
-			{isOnlineQualifyingOpen && (
-				<BorderedContainerWithCaption caption="オンライン予選開催中 (3/21 決勝当日まで)">
-					<p className="text-gray-900 max-w-prose">
-						現在オンライン予選を開催中です。
-						予選問題2問を両方解いたプレイヤーのうち合計スコアが最も小さい2名が、3/21
-						(金) の PHPerKaigi day0 に実施される決勝戦への進出枠を獲得します。
-						当日は、会場の Track A まで是非お越しください！
-					</p>
-					<p className="text-gray-600 max-w-prose">
-						※ 当日会場 Track A
-						にいらっしゃらない場合、次点のスコアを獲得されている方が自動的に決勝進出となります。
-					</p>
-					<p className="text-gray-600 max-w-prose">
-						※ 決勝に参加する予定のない方でも、プレイしていただくことは可能です。
-					</p>
-				</BorderedContainerWithCaption>
-			)}
 			<BorderedContainerWithCaption caption="試合一覧">
 				<div className="px-4">
 					{games.length === 0 ? (
-- 
cgit v1.2.3-70-g09d2