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