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>
---
 frontend/app/components/Gaming/DataTable.tsx | 45 ++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 frontend/app/components/Gaming/DataTable.tsx

(limited to 'frontend/app/components/Gaming/DataTable.tsx')

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 (
+		<div className="overflow-x-auto 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>
+						{headers.map((header, i) => (
+							<th
+								key={i}
+								scope="col"
+								className="px-6 py-3 text-left font-medium text-gray-800"
+							>
+								{header}
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody className="bg-white divide-y divide-gray-300">{children}</tbody>
+			</table>
+		</div>
+	);
+}
+
+export function DataTableCell({ children }: { children: React.ReactNode }) {
+	return (
+		<td className="px-6 py-4 whitespace-nowrap text-gray-900">{children}</td>
+	);
+}
+
+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}`;
+}
-- 
cgit v1.3.1