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 ++++------------ frontend/app/components/GolfPlayApp.tsx | 25 ++++- .../GolfPlayApps/GolfPlayAppGaming.test.tsx | 107 +++++++++++++++++++++ .../components/GolfPlayApps/GolfPlayAppGaming.tsx | 62 +++++++----- 6 files changed, 303 insertions(+), 87 deletions(-) create mode 100644 frontend/app/components/Gaming/DataTable.test.tsx create mode 100644 frontend/app/components/Gaming/DataTable.tsx create mode 100644 frontend/app/components/GolfPlayApps/GolfPlayAppGaming.test.tsx (limited to 'frontend') 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 && ( + + )} + + + ))} + ); } diff --git a/frontend/app/components/GolfPlayApp.tsx b/frontend/app/components/GolfPlayApp.tsx index 1c1e7ae..5d00239 100644 --- a/frontend/app/components/GolfPlayApp.tsx +++ b/frontend/app/components/GolfPlayApp.tsx @@ -1,6 +1,6 @@ import { useAtomValue, useSetAtom } from "jotai"; import { useHydrateAtoms } from "jotai/utils"; -import { useContext, useEffect, useState } from "react"; +import { useCallback, useContext, useEffect, useState } from "react"; import { useTimer } from "react-use-precision-timer"; import { useDebouncedCallback } from "use-debounce"; import { ApiClientContext } from "../api/client"; @@ -21,6 +21,7 @@ import GolfPlayAppWaiting from "./GolfPlayApps/GolfPlayAppWaiting"; type Game = components["schemas"]["Game"]; type User = components["schemas"]["User"]; +type Submission = components["schemas"]["Submission"]; type LatestGameState = components["schemas"]["LatestGameState"]; type Props = { @@ -75,8 +76,26 @@ export default function GolfPlayApp({ game, player, initialGameState }: Props) { { leading: true }, ); + const [submissions, setSubmissions] = useState([]); const [isDataPolling, setIsDataPolling] = useState(false); + const fetchSubmissions = useCallback(async () => { + try { + const { submissions } = await apiClient.getGamePlaySubmissions( + game.game_id, + ); + setSubmissions(submissions); + } catch (error) { + console.error(error); + } + }, [apiClient, game.game_id]); + + useEffect(() => { + if (gameStateKind === "finished") { + fetchSubmissions(); + } + }, [gameStateKind, fetchSubmissions]); + useEffect(() => { if (isDataPolling) { return; @@ -98,6 +117,7 @@ export default function GolfPlayApp({ game, player, initialGameState }: Props) { game.game_id, ); setLatestGameState(state); + await fetchSubmissions(); } } catch (error) { console.error(error); @@ -116,6 +136,7 @@ export default function GolfPlayApp({ game, player, initialGameState }: Props) { gameStateKind, setGameStartedAt, setLatestGameState, + fetchSubmissions, ]); if (gameStateKind === "loading") { @@ -134,6 +155,7 @@ export default function GolfPlayApp({ game, player, initialGameState }: Props) { onCodeChange={onCodeChange} onCodeSubmit={onCodeSubmit} isFinished={false} + submissions={submissions} /> ); } @@ -158,6 +180,7 @@ export default function GolfPlayApp({ game, player, initialGameState }: Props) { onCodeChange={onCodeChange} onCodeSubmit={onCodeSubmit} isFinished={gameStateKind === "finished"} + submissions={submissions} /> ); } diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.test.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.test.tsx new file mode 100644 index 0000000..2d51d66 --- /dev/null +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.test.tsx @@ -0,0 +1,107 @@ +/** + * @vitest-environment jsdom + */ +import { cleanup, render, screen } from "@testing-library/react"; +import { createStore, Provider } from "jotai"; +import { afterEach, describe, expect, test } from "vitest"; +import { + setCurrentTimestampAtom, + setDurationSecondsAtom, + setGameStartedAtAtom, + setLatestGameStateAtom, +} from "../../states/play"; +import GolfPlayAppGaming from "./GolfPlayAppGaming"; + +afterEach(() => { + cleanup(); +}); + +function createTestStore() { + const store = createStore(); + const now = Math.floor(Date.now() / 1000); + store.set(setCurrentTimestampAtom); + store.set(setDurationSecondsAtom, 600); + store.set(setGameStartedAtAtom, now - 60); + store.set(setLatestGameStateAtom, { + status: "none", + code: "", + score: null, + best_score_submitted_at: null, + }); + return store; +} + +const defaultProps = { + gameDisplayName: "Test Game", + playerProfile: { + id: 1, + displayName: "Test Player", + iconPath: null, + }, + problemTitle: "Test Problem", + problemDescription: "Description", + problemLanguage: "php" as const, + sampleCode: " {}, + onCodeSubmit: () => {}, + isFinished: false, +}; + +describe("GolfPlayAppGaming submission history", () => { + test("shows placeholder row when no submissions", () => { + const store = createTestStore(); + render( + + + , + ); + expect(screen.getByText("提出待ち")).toBeDefined(); + const dashes = screen.getAllByText("-"); + expect(dashes.length).toBe(3); + }); + + test("renders submission rows with status and code size", () => { + const store = createTestStore(); + const submissions = [ + { + submission_id: 1, + game_id: 1, + status: "success" as const, + code: " + + , + ); + expect(screen.getByText("成功")).toBeDefined(); + expect(screen.getByText("テスト失敗")).toBeDefined(); + expect(screen.getByText("7")).toBeDefined(); + expect(screen.getByText("10")).toBeDefined(); + }); + + test("renders table headers", () => { + const store = createTestStore(); + render( + + + , + ); + expect(screen.getByText("ステータス")).toBeDefined(); + expect(screen.getByText("スコア")).toBeDefined(); + expect(screen.getByText("提出時刻")).toBeDefined(); + expect(screen.getByText("コード")).toBeDefined(); + }); +}); diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx index fa9a2b4..e590df0 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx @@ -1,6 +1,7 @@ import { useAtomValue } from "jotai"; import React, { useRef, useState } from "react"; import { Link } from "wouter"; +import type { components } from "../../api/schema"; import { calcCodeSize, gamingLeftTimeSecondsAtom, @@ -10,6 +11,11 @@ import { import type { PlayerProfile } from "../../types/PlayerProfile"; import type { SupportedLanguage } from "../../types/SupportedLanguage"; import BorderedContainer from "../BorderedContainer"; +import CodePopover from "../Gaming/CodePopover"; +import DataTable, { + DataTableCell, + formatUnixTimestamp, +} from "../Gaming/DataTable"; import LeftTime from "../Gaming/LeftTime"; import ProblemColumn from "../Gaming/ProblemColumn"; import SubmitButton from "../SubmitButton"; @@ -18,6 +24,8 @@ import ThreeColumnLayout from "../ThreeColumnLayout"; import TitledColumn from "../TitledColumn"; import UserIcon from "../UserIcon"; +type Submission = components["schemas"]["Submission"]; + type Props = { gameDisplayName: string; playerProfile: PlayerProfile; @@ -29,6 +37,7 @@ type Props = { onCodeChange: (code: string) => void; onCodeSubmit: (code: string) => void; isFinished: boolean; + submissions: Submission[]; }; export default function GolfPlayAppGaming({ @@ -42,6 +51,7 @@ export default function GolfPlayAppGaming({ onCodeChange, onCodeSubmit, isFinished, + submissions, }: Props) { const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom); const score = useAtomValue(scoreAtom); @@ -124,33 +134,33 @@ export default function GolfPlayAppGaming({ -
- - - - + + {submissions.length === 0 ? ( + + + + + - + - + - + + ) : ( + submissions.map((s) => ( + + + + + {s.code_size} + + {formatUnixTimestamp(s.created_at)} + + + + - - - {[status].map((status) => ( - - - - ))} - -
- ステータス -
- -
-
-

- NOTE: - 過去の提出結果を閲覧する機能は現在実装中です。それまでは提出コードをお手元に保管しておいてください。 -

+ )) + )} + -- cgit v1.3.1