From 42c6c97f0230c0969a87e601be1ee740bd017aa5 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 16 Mar 2025 00:09:32 +0900
Subject: feat(frontend): enhance ranking table design

---
 .../GolfWatchAppGamingMultiplayer.tsx              | 88 +++++++++++-----------
 frontend/app/components/UserLabel.tsx              | 11 ---
 2 files changed, 43 insertions(+), 56 deletions(-)
 delete mode 100644 frontend/app/components/UserLabel.tsx

(limited to 'frontend/app/components')

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
index 708c4a8..a2b2d21 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
@@ -3,7 +3,6 @@ import type { components } from "../../api/schema";
 import { gamingLeftTimeSecondsAtom } from "../../states/watch";
 import LeftTime from "../Gaming/LeftTime";
 import Problem from "../Gaming/Problem";
-import UserLabel from "../UserLabel";
 
 type RankingEntry = components["schemas"]["RankingEntry"];
 
@@ -40,51 +39,50 @@ export default function GolfWatchAppGamingMultiplayer({
 					description={problemDescription}
 					sampleCode={sampleCode}
 				/>
-				<div>
-					<table className="min-w-full divide-y divide-gray-200">
-						<thead className="bg-gray-50">
-							<tr>
-								<th
-									scope="col"
-									className="px-6 py-3 text-left font-medium text-gray-800 uppercase tracking-wider"
-								>
-									順位
-								</th>
-								<th
-									scope="col"
-									className="px-6 py-3 text-left font-medium text-gray-800 uppercase tracking-wider"
-								>
-									名前
-								</th>
-								<th
-									scope="col"
-									className="px-6 py-3 text-left font-medium text-gray-800 uppercase tracking-wider"
-								>
-									スコア
-								</th>
-							</tr>
-						</thead>
-						<tbody className="bg-white divide-y divide-gray-200">
-							{ranking.map((entry, index) => (
-								<tr key={entry.player.user_id}>
-									<td className="px-6 py-4 whitespace-nowrap text-gray-900">
-										{index + 1}
-									</td>
-									<td className="px-6 py-4 whitespace-nowrap text-gray-900">
-										{entry.player.display_name}
-										{entry.player.label && (
-											<span className="mx-2">
-												<UserLabel label={entry.player.label} />
-											</span>
-										)}
-									</td>
-									<td className="px-6 py-4 whitespace-nowrap text-gray-900">
-										{entry.score}
-									</td>
+				<div className="p-4 flex flex-col gap-4">
+					<div className="text-center text-xl font-bold">順位表</div>
+					<div className="overflow-hidden border-2 border-blue-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>
+									<th
+										scope="col"
+										className="px-6 py-3 text-left font-medium text-gray-800"
+									>
+										プレイヤー
+									</th>
+									<th
+										scope="col"
+										className="px-6 py-3 text-left font-medium text-gray-800"
+									>
+										スコア
+									</th>
 								</tr>
-							))}
-						</tbody>
-					</table>
+							</thead>
+							<tbody className="bg-white divide-y divide-gray-300">
+								{ranking.map((entry, index) => (
+									<tr key={entry.player.user_id}>
+										<td className="px-6 py-4 whitespace-nowrap text-gray-900">
+											{index + 1}
+										</td>
+										<td className="px-6 py-4 whitespace-nowrap text-gray-900">
+											{entry.player.display_name}
+											{entry.player.label && ` (${entry.player.label})`}
+										</td>
+										<td className="px-6 py-4 whitespace-nowrap text-gray-900">
+											{entry.score}
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/frontend/app/components/UserLabel.tsx b/frontend/app/components/UserLabel.tsx
deleted file mode 100644
index 16ef4d4..0000000
--- a/frontend/app/components/UserLabel.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-type Props = {
-	label: string;
-};
-
-export default function UserLabel({ label }: Props) {
-	return (
-		<span className="bg-sky-600 text-sky-50 rounded-lg p-3 text-sm">
-			{label}
-		</span>
-	);
-}
-- 
cgit v1.2.3-70-g09d2