diff options
Diffstat (limited to 'frontend/app/components/GolfWatchApps')
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx | 9 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx (renamed from frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx) | 35 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx | 102 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx | 2 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx (renamed from frontend/app/components/GolfWatchApps/GolfWatchAppWaiting.tsx) | 4 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx | 15 |
6 files changed, 137 insertions, 30 deletions
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx deleted file mode 100644 index 07a1be8..0000000 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx +++ /dev/null @@ -1,9 +0,0 @@ -export default function GolfWatchAppConnecting() { - return ( - <div className="min-h-screen bg-gray-100 flex items-center justify-center"> - <div className="text-center"> - <div className="text-6xl font-bold text-black">接続中...</div> - </div> - </div> - ); -} diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx index 2907f5a..033186c 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx @@ -1,12 +1,7 @@ import { useAtomValue } from "jotai"; import { - codeAAtom, - codeBAtom, gamingLeftTimeSecondsAtom, - scoreAAtom, - scoreBAtom, - submitResultAAtom, - submitResultBAtom, + latestGameStatesAtom, } from "../../states/watch"; import type { PlayerProfile } from "../../types/PlayerProfile"; import BorderedContainer from "../BorderedContainer"; @@ -24,7 +19,7 @@ type Props = { gameResult: "winA" | "winB" | "draw" | null; }; -export default function GolfWatchAppGaming({ +export default function GolfWatchAppGaming1v1({ gameDisplayName, playerProfileA, playerProfileB, @@ -33,12 +28,16 @@ export default function GolfWatchAppGaming({ gameResult, }: Props) { const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!; - const codeA = useAtomValue(codeAAtom); - const codeB = useAtomValue(codeBAtom); - const scoreA = useAtomValue(scoreAAtom); - const scoreB = useAtomValue(scoreBAtom); - const submitResultA = useAtomValue(submitResultAAtom); - const submitResultB = useAtomValue(submitResultBAtom); + const latestGameStates = useAtomValue(latestGameStatesAtom); + + const stateA = latestGameStates[playerProfileA.id]; + const codeA = stateA?.code ?? ""; + const scoreA = stateA?.score ?? null; + const statusA = stateA?.status ?? "none"; + const stateB = latestGameStates[playerProfileB.id]; + const codeB = stateB?.code ?? ""; + const scoreB = stateB?.score ?? null; + const statusB = stateB?.status ?? "none"; const leftTime = (() => { const m = Math.floor(leftTimeSeconds / 60); @@ -52,7 +51,7 @@ export default function GolfWatchAppGaming({ : gameResult === "winB" ? "bg-purple-400" : "bg-pink-500" - : "bg-iosdc-japan"; + : "bg-sky-600"; return ( <div className="min-h-screen bg-gray-100 flex flex-col"> @@ -109,11 +108,11 @@ export default function GolfWatchAppGaming({ bgB="bg-purple-400" /> <div className="grow grid grid-cols-3 p-4 gap-4"> - <CodeBlock code={codeA} language="swift" /> + <CodeBlock code={codeA} language="php" /> <div className="flex flex-col gap-4"> <div className="grid grid-cols-2 gap-4"> - <SubmitResult result={submitResultA} /> - <SubmitResult result={submitResultB} /> + <SubmitResult status={statusA} /> + <SubmitResult status={statusB} /> </div> <div> <div className="mb-2 text-center text-xl font-bold"> @@ -122,7 +121,7 @@ export default function GolfWatchAppGaming({ <BorderedContainer>{problemDescription}</BorderedContainer> </div> </div> - <CodeBlock code={codeB} language="swift" /> + <CodeBlock code={codeB} language="php" /> </div> </div> ); diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx new file mode 100644 index 0000000..b6d2ac3 --- /dev/null +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx @@ -0,0 +1,102 @@ +import { useAtomValue } from "jotai"; +import type { components } from "../../api/schema"; +import { gamingLeftTimeSecondsAtom } from "../../states/watch"; +import BorderedContainer from "../BorderedContainer"; + +type RankingEntry = components["schemas"]["RankingEntry"]; + +type Props = { + gameDisplayName: string; + ranking: RankingEntry[]; + problemTitle: string; + problemDescription: string; + gameResult: "winA" | "winB" | "draw" | null; +}; + +export default function GolfWatchAppGamingMultiplayer({ + gameDisplayName, + ranking, + problemTitle, + problemDescription, + gameResult, +}: Props) { + const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!; + + const leftTime = (() => { + const m = Math.floor(leftTimeSeconds / 60); + const s = leftTimeSeconds % 60; + return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`; + })(); + + const topBg = gameResult + ? gameResult === "winA" + ? "bg-orange-400" + : gameResult === "winB" + ? "bg-purple-400" + : "bg-pink-500" + : "bg-sky-600"; + + return ( + <div className="min-h-screen bg-gray-100 flex flex-col"> + <div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}> + <div className="font-bold flex justify-between my-auto"></div> + <div className="font-bold text-center"> + <div className="text-gray-100">{gameDisplayName}</div> + <div className="text-3xl">{leftTime}</div> + </div> + <div className="font-bold flex justify-between my-auto"></div> + </div> + <div className="grow grid grid-cols-2 p-4 gap-4"> + <div className="flex flex-col gap-4"> + <div> + <div className="mb-2 text-center text-xl font-bold"> + {problemTitle} + </div> + <BorderedContainer>{problemDescription}</BorderedContainer> + </div> + </div> + <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} + </td> + <td className="px-6 py-4 whitespace-nowrap text-gray-900"> + {entry.score} + </td> + </tr> + ))} + </tbody> + </table> + </div> + </div> + </div> + ); +} diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx index 684d2af..82e5334 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx @@ -10,7 +10,7 @@ export default function GolfWatchAppStarting({ gameDisplayName }: Props) { return ( <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-white bg-sky-600 p-10 text-center"> <div className="text-4xl font-bold">{gameDisplayName}</div> </div> <div className="text-center text-black font-black text-10xl"> diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx index 0e964e3..fb315ff 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx @@ -7,14 +7,14 @@ type Props = { playerProfileB: PlayerProfile; }; -export default function GolfWatchAppWaiting({ +export default function GolfWatchAppWaiting1v1({ gameDisplayName, playerProfileA, playerProfileB, }: Props) { return ( <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-white bg-sky-600 p-10"> <div className="text-4xl">{gameDisplayName}</div> </div> <div className="grow grid grid-cols-3 gap-10 mx-auto text-black"> diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx new file mode 100644 index 0000000..13bcc10 --- /dev/null +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx @@ -0,0 +1,15 @@ +type Props = { + gameDisplayName: string; +}; + +export default function GolfWatchAppWaitingMultiplayer({ + gameDisplayName, +}: Props) { + return ( + <div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center"> + <div className="text-white bg-sky-600 p-10"> + <div className="text-4xl">{gameDisplayName}</div> + </div> + </div> + ); +} |