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

---
 frontend/app/components/GolfPlayApp.client.tsx     | 14 +++++++++--
 .../GolfPlayApps/GolfPlayAppConnecting.tsx         |  4 +---
 .../GolfPlayApps/GolfPlayAppStarting.tsx           | 15 +++++++-----
 .../components/GolfPlayApps/GolfPlayAppWaiting.tsx | 22 +++++++++++++----
 frontend/app/components/GolfWatchApp.client.tsx    | 15 ++++++++++--
 .../GolfWatchApps/GolfWatchAppConnecting.tsx       |  4 +---
 .../GolfWatchApps/GolfWatchAppStarting.tsx         | 11 ++++++---
 .../GolfWatchApps/GolfWatchAppWaiting.tsx          | 28 ++++++++++++++++++----
 frontend/app/components/PlayerProfile.tsx          | 27 +++++++++++++++++++++
 9 files changed, 113 insertions(+), 27 deletions(-)
 create mode 100644 frontend/app/components/PlayerProfile.tsx

(limited to 'frontend')

diff --git a/frontend/app/components/GolfPlayApp.client.tsx b/frontend/app/components/GolfPlayApp.client.tsx
index 82c0928..42f0250 100644
--- a/frontend/app/components/GolfPlayApp.client.tsx
+++ b/frontend/app/components/GolfPlayApp.client.tsx
@@ -225,9 +225,19 @@ export default function GolfPlayApp({
 	if (gameState === "connecting") {
 		return <GolfPlayAppConnecting />;
 	} else if (gameState === "waiting") {
-		return <GolfPlayAppWaiting />;
+		return (
+			<GolfPlayAppWaiting
+				gameDisplayName={game.display_name}
+				playerInfo={playerInfo}
+			/>
+		);
 	} else if (gameState === "starting") {
-		return <GolfPlayAppStarting leftTimeSeconds={leftTimeSeconds!} />;
+		return (
+			<GolfPlayAppStarting
+				gameDisplayName={game.display_name}
+				leftTimeSeconds={leftTimeSeconds!}
+			/>
+		);
 	} else if (gameState === "gaming") {
 		return (
 			<GolfPlayAppGaming
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx
index d97131b..4b80f8f 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx
@@ -2,9 +2,7 @@ export default function GolfPlayAppConnecting() {
 	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">
-					Connecting...
-				</h1>
+				<div className="text-6xl font-bold text-black">接続中...</div>
 			</div>
 		</div>
 	);
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
index 18e9ffe..06e3825 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
@@ -1,16 +1,19 @@
 type Props = {
+	gameDisplayName: string;
 	leftTimeSeconds: number;
 };
 
 export default function GolfPlayAppStarting({
-	leftTimeSeconds: timeLeft,
+	gameDisplayName,
+	leftTimeSeconds,
 }: 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">
-					Starting... ({timeLeft} s)
-				</h1>
+		<div className="min-h-screen bg-gray-100 flex flex-col">
+			<div className="text-white bg-iosdc-japan p-10 text-center">
+				<div className="text-4xl text-bold">{gameDisplayName}</div>
+			</div>
+			<div className="text-center text-black font-black text-10xl animate-ping">
+				{leftTimeSeconds}
 			</div>
 		</div>
 	);
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
index a1da33e..bbef43e 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
@@ -1,9 +1,23 @@
-export default function GolfPlayAppWaiting() {
+import { PlayerInfo } from "../../models/PlayerInfo";
+import PlayerProfile from "../PlayerProfile";
+
+type Props = {
+	gameDisplayName: string;
+	playerInfo: Omit<PlayerInfo, "code">;
+};
+
+export default function GolfPlayAppWaiting({
+	gameDisplayName,
+	playerInfo,
+}: 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 mx-auto text-black">
+					<PlayerProfile playerInfo={playerInfo} label="You" />
 				</div>
 			</div>
 			<style>
diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx
index 9a641f0..e2bc7d4 100644
--- a/frontend/app/components/GolfWatchApp.client.tsx
+++ b/frontend/app/components/GolfWatchApp.client.tsx
@@ -236,9 +236,20 @@ export default function GolfWatchApp({
 	if (gameState === "connecting") {
 		return <GolfWatchAppConnecting />;
 	} else if (gameState === "waiting") {
-		return <GolfWatchAppWaiting />;
+		return (
+			<GolfWatchAppWaiting
+				gameDisplayName={game.display_name}
+				playerInfoA={playerInfoA}
+				playerInfoB={playerInfoB}
+			/>
+		);
 	} else if (gameState === "starting") {
-		return <GolfWatchAppStarting leftTimeSeconds={leftTimeSeconds!} />;
+		return (
+			<GolfWatchAppStarting
+				gameDisplayName={game.display_name}
+				leftTimeSeconds={leftTimeSeconds!}
+			/>
+		);
 	} else if (gameState === "gaming" || gameState === "finished") {
 		return (
 			<GolfWatchAppGaming
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx
index 3704656..07a1be8 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx
@@ -2,9 +2,7 @@ export default function GolfWatchAppConnecting() {
 	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">
-					Connecting...
-				</h1>
+				<div className="text-6xl font-bold text-black">接続中...</div>
 			</div>
 		</div>
 	);
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
index 197d8b4..74f2a43 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
@@ -1,14 +1,19 @@
 type Props = {
+	gameDisplayName: string;
 	leftTimeSeconds: number;
 };
 
 export default function GolfWatchAppStarting({
-	leftTimeSeconds: timeLeft,
+	gameDisplayName,
+	leftTimeSeconds,
 }: Props) {
 	return (
-		<div className="min-h-screen bg-gray-100 flex items-center justify-center">
+		<div className="min-h-screen bg-gray-100 flex flex-col">
+			<div className="text-white bg-iosdc-japan p-10 text-center">
+				<div className="text-4xl text-bold">{gameDisplayName}</div>
+			</div>
 			<div className="text-center text-black font-black text-10xl animate-ping">
-				{timeLeft}
+				{leftTimeSeconds}
 			</div>
 		</div>
 	);
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>
 	);
diff --git a/frontend/app/components/PlayerProfile.tsx b/frontend/app/components/PlayerProfile.tsx
new file mode 100644
index 0000000..675d77b
--- /dev/null
+++ b/frontend/app/components/PlayerProfile.tsx
@@ -0,0 +1,27 @@
+import { PlayerInfo as FullPlayerInfo } from "../models/PlayerInfo";
+import UserIcon from "./UserIcon";
+
+type PlayerInfo = Pick<FullPlayerInfo, "displayName" | "iconPath">;
+
+type Props = {
+	playerInfo: PlayerInfo;
+	label: string;
+};
+
+export default function PlayerProfile({ playerInfo, label }: Props) {
+	return (
+		<div className="flex flex-col gap-6 my-auto">
+			<div className="flex flex-col gap-2">
+				<div className="text-4xl">{label}</div>
+				<div className="text-6xl">{playerInfo.displayName}</div>
+			</div>
+			{playerInfo.iconPath && (
+				<UserIcon
+					iconPath={playerInfo.iconPath}
+					displayName={playerInfo.displayName!}
+					className="w-48 h-48"
+				/>
+			)}
+		</div>
+	);
+}
-- 
cgit v1.2.3-70-g09d2