From b923a9d6534820d33f42bc65c47ae22889bde922 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 17 Aug 2024 21:10:03 +0900
Subject: feat(frontend): show player icon

---
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  | 26 +++++++++++----
 .../GolfWatchApps/GolfWatchAppGaming.tsx           | 38 ++++++++++++++++++----
 frontend/app/routes/dashboard.tsx                  | 11 +++++++
 3 files changed, 63 insertions(+), 12 deletions(-)

(limited to 'frontend')

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 4730583..a6c4550 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -55,12 +55,26 @@ export default function GolfPlayAppGaming({
 					<div className="text-gray-100">{gameDisplayName}</div>
 					<div className="text-2xl">{leftTime}</div>
 				</div>
-				<div className="font-bold text-end">
-					<Link to={"/dashboard"} className="text-gray-100">
-						{playerInfo.displayName}
-					</Link>
-					<div className="text-2xl">{playerInfo.score}</div>
-				</div>
+				<Link to={"/dashboard"}>
+					<div className="flex gap-4 my-auto font-bold">
+						<div className="text-6xl">{playerInfo.score}</div>
+						<div className="text-end">
+							<div className="text-gray-100">Player 1</div>
+							<div className="text-2xl">{playerInfo.displayName}</div>
+						</div>
+						{playerInfo.iconPath && (
+							<img
+								src={
+									process.env.NODE_ENV === "development"
+										? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfo.iconPath}`
+										: `/iosdc-japan/2024/code-battle${playerInfo.iconPath}`
+								}
+								alt={`${playerInfo.displayName} のアイコン`}
+								className="w-12 h-12 rounded-full my-auto border-4 border-white"
+							/>
+						)}
+					</div>
+				</Link>
 			</div>
 			<div className="grow grid grid-cols-3 divide-x divide-gray-300">
 				<div className="p-4">
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index c4c3a53..63c232b 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -47,9 +47,22 @@ export default function GolfWatchAppGaming({
 		<div className="min-h-screen bg-gray-100 flex flex-col">
 			<div className="text-white bg-iosdc-japan grid grid-cols-3 px-4 py-2">
 				<div className="font-bold flex justify-between my-auto">
-					<div>
-						<div className="text-gray-100">Player 1</div>
-						<div className="text-2xl">{playerInfoA.displayName}</div>
+					<div className="flex gap-4">
+						{playerInfoA.iconPath && (
+							<img
+								src={
+									process.env.NODE_ENV === "development"
+										? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfoA.iconPath}`
+										: `/iosdc-japan/2024/code-battle${playerInfoA.iconPath}`
+								}
+								alt={`${playerInfoA.displayName} のアイコン`}
+								className="w-12 h-12 rounded-full my-auto border-4 border-white"
+							/>
+						)}
+						<div>
+							<div className="text-gray-100">Player 1</div>
+							<div className="text-2xl">{playerInfoA.displayName}</div>
+						</div>
 					</div>
 					<div className="text-6xl">{playerInfoA.score}</div>
 				</div>
@@ -59,9 +72,22 @@ export default function GolfWatchAppGaming({
 				</div>
 				<div className="font-bold flex justify-between my-auto">
 					<div className="text-6xl">{playerInfoB.score}</div>
-					<div>
-						<div className="text-gray-100">Player 2</div>
-						<div className="text-2xl">{playerInfoB.displayName}</div>
+					<div className="flex gap-4 text-end">
+						<div>
+							<div className="text-gray-100">Player 2</div>
+							<div className="text-2xl">{playerInfoB.displayName}</div>
+						</div>
+						{playerInfoB.iconPath && (
+							<img
+								src={
+									process.env.NODE_ENV === "development"
+										? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfoB.iconPath}`
+										: `/iosdc-japan/2024/code-battle${playerInfoB.iconPath}`
+								}
+								alt={`${playerInfoB.displayName} のアイコン`}
+								className="w-12 h-12 rounded-full my-auto border-4 border-white"
+							/>
+						)}
 					</div>
 				</div>
 			</div>
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index 99c64f2..614b3ae 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -31,6 +31,17 @@ export default function Dashboard() {
 
 	return (
 		<div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center">
+			{user.icon_path && (
+				<img
+					src={
+						process.env.NODE_ENV === "development"
+							? `http://localhost:8002/iosdc-japan/2024/code-battle${user.icon_path}`
+							: `/iosdc-japan/2024/code-battle${user.icon_path}`
+					}
+					alt={`${user.display_name} のアイコン`}
+					className="w-24 h-24 rounded-full mb-4"
+				/>
+			)}
 			<h1 className="text-2xl font-bold mb-4">
 				<span className="text-gray-800">{user.display_name}</span>
 				<span className="text-gray-500 ml-2">@{user.username}</span>
-- 
cgit v1.2.3-70-g09d2