From 7f29d334f26229753e68d20a5aaab33c39de9f06 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
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 <noreply@anthropic.com>
---
 .../GolfPlayApps/GolfPlayAppGaming.test.tsx        | 107 +++++++++++++++++++++
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  |  62 +++++++-----
 2 files changed, 143 insertions(+), 26 deletions(-)
 create mode 100644 frontend/app/components/GolfPlayApps/GolfPlayAppGaming.test.tsx

(limited to 'frontend/app/components/GolfPlayApps')

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: "<?php echo 1;",
+	initialCode: "",
+	onCodeChange: () => {},
+	onCodeSubmit: () => {},
+	isFinished: false,
+};
+
+describe("GolfPlayAppGaming submission history", () => {
+	test("shows placeholder row when no submissions", () => {
+		const store = createTestStore();
+		render(
+			<Provider store={store}>
+				<GolfPlayAppGaming {...defaultProps} submissions={[]} />
+			</Provider>,
+		);
+		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: "<?php echo 1;",
+				code_size: 7,
+				created_at: 1740000000,
+			},
+			{
+				submission_id: 2,
+				game_id: 1,
+				status: "wrong_answer" as const,
+				code: "<?php echo 2;",
+				code_size: 10,
+				created_at: 1740000060,
+			},
+		];
+		render(
+			<Provider store={store}>
+				<GolfPlayAppGaming {...defaultProps} submissions={submissions} />
+			</Provider>,
+		);
+		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(
+			<Provider store={store}>
+				<GolfPlayAppGaming {...defaultProps} submissions={[]} />
+			</Provider>,
+		);
+		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({
 					</BorderedContainer>
 				</TitledColumn>
 				<TitledColumn title="提出結果">
-					<div className="overflow-hidden border-2 border-brand-600 rounded-xl">
-						<table className="min-w-full divide-y divide-gray-400 border-collapse">
-							<thead className="bg-gray-50">
-								<tr>
-									<th
-										scope="col"
-										className="px-6 py-3 text-left font-medium text-gray-800"
-									>
-										ステータス
-									</th>
+					<DataTable headers={["ステータス", "スコア", "提出時刻", "コード"]}>
+						{submissions.length === 0 ? (
+							<tr>
+								<DataTableCell>
+									<SubmitStatusLabel status={status} />
+								</DataTableCell>
+								<DataTableCell>-</DataTableCell>
+								<DataTableCell>-</DataTableCell>
+								<DataTableCell>-</DataTableCell>
+							</tr>
+						) : (
+							submissions.map((s) => (
+								<tr key={s.submission_id}>
+									<DataTableCell>
+										<SubmitStatusLabel status={s.status} />
+									</DataTableCell>
+									<DataTableCell>{s.code_size}</DataTableCell>
+									<DataTableCell>
+										{formatUnixTimestamp(s.created_at)}
+									</DataTableCell>
+									<DataTableCell>
+										<CodePopover code={s.code} language={problemLanguage} />
+									</DataTableCell>
 								</tr>
-							</thead>
-							<tbody className="bg-white divide-y divide-gray-300">
-								{[status].map((status) => (
-									<tr key={99999}>
-										<td className="px-6 py-4 whitespace-nowrap text-gray-900">
-											<SubmitStatusLabel status={status} />
-										</td>
-									</tr>
-								))}
-							</tbody>
-						</table>
-					</div>
-					<p>
-						NOTE:
-						過去の提出結果を閲覧する機能は現在実装中です。それまでは提出コードをお手元に保管しておいてください。
-					</p>
+							))
+						)}
+					</DataTable>
 				</TitledColumn>
 			</ThreeColumnLayout>
 		</div>
-- 
cgit v1.3.1