diff options
Diffstat (limited to 'frontend/app/components/GolfWatchApps')
3 files changed, 33 insertions, 10 deletions
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> ); |