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

---
 .../GolfPlayApps/GolfPlayAppFinished.tsx           |  2 +-
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  | 42 +++++++++++++---------
 .../GolfPlayApps/GolfPlayAppStarting.tsx           | 13 +++----
 3 files changed, 33 insertions(+), 24 deletions(-)

(limited to 'frontend/app/components/GolfPlayApps')

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx
index c3ef2d4..c218414 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx
@@ -2,7 +2,7 @@ export default function GolfPlayAppFinished() {
 	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">Finished</h1>
+				<div className="text-6xl font-bold text-black">終了</div>
 			</div>
 		</div>
 	);
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}>
 								提出
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
index a42c883..b41dfed 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
@@ -1,18 +1,19 @@
+import { useAtomValue } from "jotai";
+import { startingLeftTimeSecondsAtom } from "../../states/play";
+
 type Props = {
 	gameDisplayName: string;
-	leftTimeSeconds: number;
 };
 
-export default function GolfPlayAppStarting({
-	gameDisplayName,
-	leftTimeSeconds,
-}: Props) {
+export default function GolfPlayAppStarting({ gameDisplayName }: Props) {
+	const leftTimeSeconds = useAtomValue(startingLeftTimeSecondsAtom)!;
+
 	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-4xl font-bold">{gameDisplayName}</div>
 			</div>
-			<div className="text-center text-black font-black text-10xl animate-ping">
+			<div className="text-center text-black font-black text-10xl">
 				{leftTimeSeconds}
 			</div>
 		</div>
-- 
cgit v1.2.3-70-g09d2