From 7f29d334f26229753e68d20a5aaab33c39de9f06 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 1 Mar 2026 12:21:21 +0900 Subject: feat(frontend): show submission history on play screen Replace the placeholder submission status section with a full submission history table using the existing getGamePlaySubmissions API. Extract shared DataTable, DataTableCell, and formatUnixTimestamp from RankingTable into a reusable Gaming/DataTable component. Co-Authored-By: Claude Opus 4.6 --- frontend/app/components/Gaming/DataTable.test.tsx | 70 ++++++++++++++++++++ frontend/app/components/Gaming/DataTable.tsx | 45 +++++++++++++ frontend/app/components/Gaming/RankingTable.tsx | 81 ++++++----------------- 3 files changed, 136 insertions(+), 60 deletions(-) create mode 100644 frontend/app/components/Gaming/DataTable.test.tsx create mode 100644 frontend/app/components/Gaming/DataTable.tsx (limited to 'frontend/app/components/Gaming') diff --git a/frontend/app/components/Gaming/DataTable.test.tsx b/frontend/app/components/Gaming/DataTable.test.tsx new file mode 100644 index 0000000..2a4446c --- /dev/null +++ b/frontend/app/components/Gaming/DataTable.test.tsx @@ -0,0 +1,70 @@ +/** + * @vitest-environment jsdom + */ +import { cleanup, render, screen } from "@testing-library/react"; +import { afterEach, describe, expect, test } from "vitest"; +import DataTable, { DataTableCell, formatUnixTimestamp } from "./DataTable"; + +afterEach(() => { + cleanup(); +}); + +describe("DataTable", () => { + test("renders headers", () => { + render( + + + 1 + 2 + 3 + + , + ); + expect(screen.getByText("A")).toBeDefined(); + expect(screen.getByText("B")).toBeDefined(); + expect(screen.getByText("C")).toBeDefined(); + }); + + test("renders body cells", () => { + render( + + + cell content + + , + ); + expect(screen.getByText("cell content")).toBeDefined(); + }); + + test("renders multiple rows", () => { + render( + + + Alice + + + Bob + + , + ); + expect(screen.getByText("Alice")).toBeDefined(); + expect(screen.getByText("Bob")).toBeDefined(); + }); +}); + +describe("formatUnixTimestamp", () => { + test("formats timestamp correctly", () => { + // 2026-03-01 12:30 JST (UTC+9) = 2026-03-01 03:30 UTC + const timestamp = Date.UTC(2026, 2, 1, 3, 30, 0) / 1000; + const result = formatUnixTimestamp(timestamp); + // Result depends on local timezone; just check the format pattern + expect(result).toMatch(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/); + }); + + test("pads single-digit months and days", () => { + // Use a date where month and day are single digits + const timestamp = Date.UTC(2026, 0, 5, 0, 0, 0) / 1000; + const result = formatUnixTimestamp(timestamp); + expect(result).toMatch(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/); + }); +}); diff --git a/frontend/app/components/Gaming/DataTable.tsx b/frontend/app/components/Gaming/DataTable.tsx new file mode 100644 index 0000000..098f4a2 --- /dev/null +++ b/frontend/app/components/Gaming/DataTable.tsx @@ -0,0 +1,45 @@ +import type React from "react"; + +type Props = { + headers: React.ReactNode[]; + children: React.ReactNode; +}; + +export default function DataTable({ headers, children }: Props) { + return ( +
+ + + + {headers.map((header, i) => ( + + ))} + + + {children} +
+ {header} +
+
+ ); +} + +export function DataTableCell({ children }: { children: React.ReactNode }) { + return ( + {children} + ); +} + +export function formatUnixTimestamp(timestamp: number): string { + const date = new Date(timestamp * 1000); + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString().padStart(2, "0"); + const day = date.getDate().toString().padStart(2, "0"); + const hours = date.getHours().toString().padStart(2, "0"); + const minutes = date.getMinutes().toString().padStart(2, "0"); + return `${year}-${month}-${day} ${hours}:${minutes}`; +} diff --git a/frontend/app/components/Gaming/RankingTable.tsx b/frontend/app/components/Gaming/RankingTable.tsx index 4bfdad3..4ba3987 100644 --- a/frontend/app/components/Gaming/RankingTable.tsx +++ b/frontend/app/components/Gaming/RankingTable.tsx @@ -1,34 +1,8 @@ import { useAtomValue } from "jotai"; -import React from "react"; import { rankingAtom } from "../../states/watch"; import type { SupportedLanguage } from "../../types/SupportedLanguage"; import CodePopover from "./CodePopover"; - -function TableHeaderCell({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ); -} - -function TableBodyCell({ children }: { children: React.ReactNode }) { - return ( - {children} - ); -} - -function formatUnixTimestamp(timestamp: number) { - const date = new Date(timestamp * 1000); - - const year = date.getFullYear(); - const month = (date.getMonth() + 1).toString().padStart(2, "0"); - const day = date.getDate().toString().padStart(2, "0"); - const hours = date.getHours().toString().padStart(2, "0"); - const minutes = date.getMinutes().toString().padStart(2, "0"); - - return `${year}-${month}-${day} ${hours}:${minutes}`; -} +import DataTable, { DataTableCell, formatUnixTimestamp } from "./DataTable"; type Props = { problemLanguage: SupportedLanguage; @@ -38,38 +12,25 @@ export default function RankingTable({ problemLanguage }: Props) { const ranking = useAtomValue(rankingAtom); return ( -
- - - - 順位 - プレイヤー - スコア - 提出時刻 - コード - - - - {ranking.map((entry, index) => ( - - {index + 1} - - {entry.player.display_name} - {entry.player.label && ` (${entry.player.label})`} - - {entry.score} - - {formatUnixTimestamp(entry.submitted_at)} - - - {entry.code && ( - - )} - - - ))} - -
-
+ + {ranking.map((entry, index) => ( + + {index + 1} + + {entry.player.display_name} + {entry.player.label && ` (${entry.player.label})`} + + {entry.score} + + {formatUnixTimestamp(entry.submitted_at)} + + + {entry.code && ( + + )} + + + ))} + ); } -- cgit v1.3.1