From c6ab1db6688f26880503e59b165cba4849f924be Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 22 Aug 2024 12:09:04 +0900
Subject: feat(frontend): jotai for watch app

---
 .../GolfWatchApps/GolfWatchAppGaming.tsx           | 76 ++++++++++++----------
 1 file changed, 43 insertions(+), 33 deletions(-)

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

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index a23a972..2907f5a 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -1,4 +1,14 @@
-import type { PlayerInfo } from "../../types/PlayerInfo";
+import { useAtomValue } from "jotai";
+import {
+	codeAAtom,
+	codeBAtom,
+	gamingLeftTimeSecondsAtom,
+	scoreAAtom,
+	scoreBAtom,
+	submitResultAAtom,
+	submitResultBAtom,
+} from "../../states/watch";
+import type { PlayerProfile } from "../../types/PlayerProfile";
 import BorderedContainer from "../BorderedContainer";
 import CodeBlock from "../Gaming/CodeBlock";
 import ScoreBar from "../Gaming/ScoreBar";
@@ -7,10 +17,8 @@ import UserIcon from "../UserIcon";
 
 type Props = {
 	gameDisplayName: string;
-	gameDurationSeconds: number;
-	leftTimeSeconds: number;
-	playerInfoA: PlayerInfo;
-	playerInfoB: PlayerInfo;
+	playerProfileA: PlayerProfile;
+	playerProfileB: PlayerProfile;
 	problemTitle: string;
 	problemDescription: string;
 	gameResult: "winA" | "winB" | "draw" | null;
@@ -18,21 +26,23 @@ type Props = {
 
 export default function GolfWatchAppGaming({
 	gameDisplayName,
-	gameDurationSeconds,
-	leftTimeSeconds,
-	playerInfoA,
-	playerInfoB,
+	playerProfileA,
+	playerProfileB,
 	problemTitle,
 	problemDescription,
 	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 leftTime = (() => {
-		const k = gameDurationSeconds + leftTimeSeconds;
-		if (k <= 0) {
-			return "00:00";
-		}
-		const m = Math.floor(k / 60);
-		const s = k % 60;
+		const m = Math.floor(leftTimeSeconds / 60);
+		const s = leftTimeSeconds % 60;
 		return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
 	})();
 
@@ -49,43 +59,43 @@ export default function GolfWatchAppGaming({
 			<div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}>
 				<div className="font-bold flex justify-between my-auto">
 					<div className="flex gap-6">
-						{playerInfoA.profile.iconPath && (
+						{playerProfileA.iconPath && (
 							<UserIcon
-								iconPath={playerInfoA.profile.iconPath}
-								displayName={playerInfoA.profile.displayName}
+								iconPath={playerProfileA.iconPath}
+								displayName={playerProfileA.displayName}
 								className="w-12 h-12 my-auto"
 							/>
 						)}
 						<div>
 							<div className="text-gray-100">Player 1</div>
-							<div className="text-2xl">{playerInfoA.profile.displayName}</div>
+							<div className="text-2xl">{playerProfileA.displayName}</div>
 						</div>
 					</div>
-					<div className="text-6xl">{playerInfoA.state.score}</div>
+					<div className="text-6xl">{scoreA}</div>
 				</div>
 				<div className="font-bold text-center">
 					<div className="text-gray-100">{gameDisplayName}</div>
 					<div className="text-3xl">
 						{gameResult
 							? gameResult === "winA"
-								? `勝者 ${playerInfoA.profile.displayName}`
+								? `勝者 ${playerProfileA.displayName}`
 								: gameResult === "winB"
-									? `勝者 ${playerInfoB.profile.displayName}`
+									? `勝者 ${playerProfileB.displayName}`
 									: "引き分け"
 							: leftTime}
 					</div>
 				</div>
 				<div className="font-bold flex justify-between my-auto">
-					<div className="text-6xl">{playerInfoB.state.score}</div>
+					<div className="text-6xl">{scoreB}</div>
 					<div className="flex gap-6 text-end">
 						<div>
 							<div className="text-gray-100">Player 2</div>
-							<div className="text-2xl">{playerInfoB.profile.displayName}</div>
+							<div className="text-2xl">{playerProfileB.displayName}</div>
 						</div>
-						{playerInfoB.profile.iconPath && (
+						{playerProfileB.iconPath && (
 							<UserIcon
-								iconPath={playerInfoB.profile.iconPath}
-								displayName={playerInfoB.profile.displayName}
+								iconPath={playerProfileB.iconPath}
+								displayName={playerProfileB.displayName}
 								className="w-12 h-12 my-auto"
 							/>
 						)}
@@ -93,17 +103,17 @@ export default function GolfWatchAppGaming({
 				</div>
 			</div>
 			<ScoreBar
-				scoreA={playerInfoA.state.score}
-				scoreB={playerInfoB.state.score}
+				scoreA={scoreA}
+				scoreB={scoreB}
 				bgA="bg-orange-400"
 				bgB="bg-purple-400"
 			/>
 			<div className="grow grid grid-cols-3 p-4 gap-4">
-				<CodeBlock code={playerInfoA.state.code ?? ""} language="swift" />
+				<CodeBlock code={codeA} language="swift" />
 				<div className="flex flex-col gap-4">
 					<div className="grid grid-cols-2 gap-4">
-						<SubmitResult result={playerInfoA.state.submitResult} />
-						<SubmitResult result={playerInfoB.state.submitResult} />
+						<SubmitResult result={submitResultA} />
+						<SubmitResult result={submitResultB} />
 					</div>
 					<div>
 						<div className="mb-2 text-center text-xl font-bold">
@@ -112,7 +122,7 @@ export default function GolfWatchAppGaming({
 						<BorderedContainer>{problemDescription}</BorderedContainer>
 					</div>
 				</div>
-				<CodeBlock code={playerInfoB.state.code ?? ""} language="swift" />
+				<CodeBlock code={codeB} language="swift" />
 			</div>
 		</div>
 	);
-- 
cgit v1.2.3-70-g09d2