From 19fad1b969ac9b6c50b024a2c710e8f4fe792eb0 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 19 Aug 2024 05:21:58 +0900
Subject: feat(frontend): improve play/watch pages styling

---
 .../GolfWatchApps/GolfWatchAppWaiting.tsx          | 28 ++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

(limited to 'frontend/app/components/GolfWatchApps/GolfWatchAppWaiting.tsx')

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting.tsx
index 17ef2b9..faa9485 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting.tsx
@@ -1,8 +1,28 @@
-export default function GolfWatchAppWaiting() {
+import { PlayerInfo as FullPlayerInfo } from "../../models/PlayerInfo";
+import PlayerProfile from "../PlayerProfile";
+
+type PlayerInfo = Pick<FullPlayerInfo, "displayName" | "iconPath">;
+
+type Props = {
+	gameDisplayName: string;
+	playerInfoA: PlayerInfo;
+	playerInfoB: PlayerInfo;
+};
+
+export default function GolfWatchAppWaiting({
+	gameDisplayName,
+	playerInfoA,
+	playerInfoB,
+}: Props) {
 	return (
-		<div className="min-h-screen bg-gray-100 flex items-center justify-center">
-			<div className="text-center">
-				<h1 className="text-4xl font-bold text-black-600 mb-4">Waiting...</h1>
+		<div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center">
+			<div className="text-white bg-iosdc-japan p-10">
+				<div className="text-4xl">{gameDisplayName}</div>
+			</div>
+			<div className="grow grid grid-cols-3 gap-10 mx-auto text-black">
+				<PlayerProfile playerInfo={playerInfoA} label="Player 1" />
+				<div className="text-8xl my-auto">vs.</div>
+				<PlayerProfile playerInfo={playerInfoB} label="Player 2" />
 			</div>
 		</div>
 	);
-- 
cgit v1.2.3-70-g09d2