From a2b6ed9cd67f1406a6656bce9b3d51b55378ac1e Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 22 Aug 2024 03:57:05 +0900
Subject: feat(frontend): jotai for play app

---
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  | 42 +++++++++++++---------
 1 file changed, 25 insertions(+), 17 deletions(-)

(limited to 'frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx')

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 38516bc..0aa6b3d 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -1,32 +1,40 @@
 import { Link } from "@remix-run/react";
+import { useAtomValue } from "jotai";
 import React, { useRef } from "react";
 import SubmitButton from "../../components/SubmitButton";
-import type { PlayerInfo } from "../../types/PlayerInfo";
+import {
+	gamingLeftTimeSecondsAtom,
+	scoreAtom,
+	submitResultAtom,
+} from "../../states/play";
+import type { PlayerProfile } from "../../types/PlayerProfile";
 import BorderedContainer from "../BorderedContainer";
 import SubmitResult from "../Gaming/SubmitResult";
 import UserIcon from "../UserIcon";
 
 type Props = {
 	gameDisplayName: string;
-	gameDurationSeconds: number;
-	leftTimeSeconds: number;
-	playerInfo: PlayerInfo;
+	playerProfile: PlayerProfile;
 	problemTitle: string;
 	problemDescription: string;
+	initialCode: string;
 	onCodeChange: (code: string) => void;
 	onCodeSubmit: (code: string) => void;
 };
 
 export default function GolfPlayAppGaming({
 	gameDisplayName,
-	gameDurationSeconds,
-	leftTimeSeconds,
-	playerInfo,
+	playerProfile,
 	problemTitle,
 	problemDescription,
+	initialCode,
 	onCodeChange,
 	onCodeSubmit,
 }: Props) {
+	const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
+	const score = useAtomValue(scoreAtom);
+	const submitResult = useAtomValue(submitResultAtom);
+
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 
 	const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -40,9 +48,8 @@ export default function GolfPlayAppGaming({
 	};
 
 	const leftTime = (() => {
-		const k = gameDurationSeconds + leftTimeSeconds;
-		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")}`;
 	})();
 
@@ -55,15 +62,15 @@ export default function GolfPlayAppGaming({
 				</div>
 				<Link to={"/dashboard"}>
 					<div className="flex gap-4 my-auto font-bold">
-						<div className="text-6xl">{playerInfo.state.score}</div>
+						<div className="text-6xl">{score}</div>
 						<div className="text-end">
 							<div className="text-gray-100">Player 1</div>
-							<div className="text-2xl">{playerInfo.profile.displayName}</div>
+							<div className="text-2xl">{playerProfile.displayName}</div>
 						</div>
-						{playerInfo.profile.iconPath && (
+						{playerProfile.iconPath && (
 							<UserIcon
-								iconPath={playerInfo.profile.iconPath}
-								displayName={playerInfo.profile.displayName}
+								iconPath={playerProfile.iconPath}
+								displayName={playerProfile.displayName}
 								className="w-12 h-12 my-auto"
 							/>
 						)}
@@ -82,13 +89,14 @@ export default function GolfPlayAppGaming({
 				<div className="p-4">
 					<textarea
 						ref={textareaRef}
+						defaultValue={initialCode}
 						onChange={handleTextChange}
 						className="resize-none h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-gray-400 transition duration-300"
-					></textarea>
+					/>
 				</div>
 				<div className="p-4">
 					<SubmitResult
-						result={playerInfo.state.submitResult}
+						result={submitResult}
 						submitButton={
 							<SubmitButton onClick={handleSubmitButtonClick}>
 								提出
-- 
cgit v1.2.3-70-g09d2