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>

1 files changed, 70 insertions, 0 deletions

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(
+			<DataTable headers={["A", "B", "C"]}>
+				<tr>
+					<DataTableCell>1</DataTableCell>
+					<DataTableCell>2</DataTableCell>
+					<DataTableCell>3</DataTableCell>
+				</tr>
+			</DataTable>,
+		);
+		expect(screen.getByText("A")).toBeDefined();
+		expect(screen.getByText("B")).toBeDefined();
+		expect(screen.getByText("C")).toBeDefined();
+	});
+
+	test("renders body cells", () => {
+		render(
+			<DataTable headers={["H"]}>
+				<tr>
+					<DataTableCell>cell content</DataTableCell>
+				</tr>
+			</DataTable>,
+		);
+		expect(screen.getByText("cell content")).toBeDefined();
+	});
+
+	test("renders multiple rows", () => {
+		render(
+			<DataTable headers={["Name"]}>
+				<tr>
+					<DataTableCell>Alice</DataTableCell>
+				</tr>
+				<tr>
+					<DataTableCell>Bob</DataTableCell>
+				</tr>
+			</DataTable>,
+		);
+		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}$/);
+	});
+});