diff options
Diffstat (limited to 'frontend/app/components')
6 files changed, 44 insertions, 27 deletions
diff --git a/frontend/app/components/Gaming/RankingTable.tsx b/frontend/app/components/Gaming/RankingTable.tsx index e712ed9..a1e41f5 100644 --- a/frontend/app/components/Gaming/RankingTable.tsx +++ b/frontend/app/components/Gaming/RankingTable.tsx @@ -1,11 +1,6 @@ +import { useAtomValue } from "jotai"; import React from "react"; -import type { components } from "../../api/schema"; - -type RankingEntry = components["schemas"]["RankingEntry"]; - -type Props = { - ranking: RankingEntry[]; -}; +import { rankingAtom } from "../../states/watch"; function TableHeaderCell({ children }: { children: React.ReactNode }) { return ( @@ -33,7 +28,9 @@ function formatUnixTimestamp(timestamp: number) { return `${year}-${month}-${day} ${hours}:${minutes}`; } -export default function RankingTable({ ranking }: Props) { +export default function RankingTable() { + const ranking = useAtomValue(rankingAtom); + return ( <div className="overflow-hidden border-2 border-blue-600 rounded-xl"> <table className="min-w-full divide-y divide-gray-400 border-collapse"> diff --git a/frontend/app/components/GolfPlayApp.tsx b/frontend/app/components/GolfPlayApp.tsx index 0bb66eb..97f7cc4 100644 --- a/frontend/app/components/GolfPlayApp.tsx +++ b/frontend/app/components/GolfPlayApp.tsx @@ -1,4 +1,5 @@ import { useAtomValue, useSetAtom } from "jotai"; +import { useHydrateAtoms } from "jotai/utils"; import { useContext, useEffect, useState } from "react"; import { useTimer } from "react-use-precision-timer"; import { useDebouncedCallback } from "use-debounce"; @@ -15,6 +16,7 @@ import { handleSubmitCodePostAtom, handleSubmitCodePreAtom, setCurrentTimestampAtom, + setDurationSecondsAtom, setGameStartedAtAtom, setLatestGameStateAtom, } from "../states/play"; @@ -26,14 +28,21 @@ import GolfPlayAppWaiting from "./GolfPlayApps/GolfPlayAppWaiting"; type Game = components["schemas"]["Game"]; type User = components["schemas"]["User"]; +type LatestGameState = components["schemas"]["LatestGameState"]; type Props = { game: Game; player: User; - initialCode: string; + initialGameState: LatestGameState; }; -export default function GolfPlayApp({ game, player, initialCode }: Props) { +export default function GolfPlayApp({ game, player, initialGameState }: Props) { + useHydrateAtoms([ + [setDurationSecondsAtom, game.duration_seconds], + [setGameStartedAtAtom, game.started_at ?? null], + [setLatestGameStateAtom, initialGameState], + ]); + const apiAuthToken = useContext(ApiAuthTokenContext); const gameStateKind = useAtomValue(gameStateKindAtom); @@ -131,7 +140,7 @@ export default function GolfPlayApp({ game, player, initialCode }: Props) { problemTitle={game.problem.title} problemDescription={game.problem.description} sampleCode={game.problem.sample_code} - initialCode={initialCode} + initialCode={initialGameState.code} onCodeChange={onCodeChange} onCodeSubmit={onCodeSubmit} /> diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx index c4bd772..b9b3159 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx @@ -2,10 +2,10 @@ import { useAtomValue } from "jotai"; import React, { useRef, useState } from "react"; import { Link } from "react-router"; import { + calcCodeSize, gamingLeftTimeSecondsAtom, scoreAtom, statusAtom, - calcCodeSize, } from "../../states/play"; import type { PlayerProfile } from "../../types/PlayerProfile"; import BorderedContainer from "../BorderedContainer"; diff --git a/frontend/app/components/GolfWatchApp.tsx b/frontend/app/components/GolfWatchApp.tsx index 5f23cdd..185f41d 100644 --- a/frontend/app/components/GolfWatchApp.tsx +++ b/frontend/app/components/GolfWatchApp.tsx @@ -1,4 +1,5 @@ -import { useAtom, useAtomValue, useSetAtom } from "jotai"; +import { useAtomValue, useSetAtom } from "jotai"; +import { useHydrateAtoms } from "jotai/utils"; import { useContext, useEffect, useState } from "react"; import { useTimer } from "react-use-precision-timer"; import { @@ -12,6 +13,7 @@ import { gameStateKindAtom, rankingAtom, setCurrentTimestampAtom, + setDurationSecondsAtom, setGameStartedAtAtom, setLatestGameStatesAtom, } from "../states/watch"; @@ -23,19 +25,34 @@ import GolfWatchAppWaiting1v1 from "./GolfWatchApps/GolfWatchAppWaiting1v1"; import GolfWatchAppWaitingMultiplayer from "./GolfWatchApps/GolfWatchAppWaitingMultiplayer"; type Game = components["schemas"]["Game"]; +type LatestGameState = components["schemas"]["LatestGameState"]; +type RankingEntry = components["schemas"]["RankingEntry"]; export type Props = { game: Game; + initialGameStates: { [key: string]: LatestGameState }; + initialRanking: RankingEntry[]; }; -export default function GolfWatchApp({ game }: Props) { +export default function GolfWatchApp({ + game, + initialGameStates, + initialRanking, +}: Props) { + useHydrateAtoms([ + [rankingAtom, initialRanking], + [setDurationSecondsAtom, game.duration_seconds], + [setGameStartedAtAtom, game.started_at ?? null], + [setLatestGameStatesAtom, initialGameStates], + ]); + const apiAuthToken = useContext(ApiAuthTokenContext); const gameStateKind = useAtomValue(gameStateKindAtom); const setGameStartedAt = useSetAtom(setGameStartedAtAtom); const setCurrentTimestamp = useSetAtom(setCurrentTimestampAtom); const setLatestGameStates = useSetAtom(setLatestGameStatesAtom); - const [ranking, setRanking] = useAtom(rankingAtom); + const setRanking = useSetAtom(rankingAtom); useTimer({ delay: 1000, startImmediately: true }, setCurrentTimestamp); @@ -135,7 +152,6 @@ export default function GolfWatchApp({ game }: Props) { ) : ( <GolfWatchAppGamingMultiplayer gameDisplayName={game.display_name} - ranking={ranking} problemTitle={game.problem.title} problemDescription={game.problem.description} sampleCode={game.problem.sample_code} diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx index 981f533..5b975e7 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx @@ -1,19 +1,19 @@ import { useAtomValue } from "jotai"; import { + calcCodeSize, gamingLeftTimeSecondsAtom, latestGameStatesAtom, - calcCodeSize, } from "../../states/watch"; import type { PlayerProfile } from "../../types/PlayerProfile"; import BorderedContainer from "../BorderedContainer"; -import SubmitStatusLabel from "../SubmitStatusLabel"; -import ThreeColumnLayout from "../ThreeColumnLayout"; -import TitledColumn from "../TitledColumn"; -import UserIcon from "../UserIcon"; import CodeBlock from "../Gaming/CodeBlock"; import LeftTime from "../Gaming/LeftTime"; import ProblemColumn from "../Gaming/ProblemColumn"; import ScoreBar from "../Gaming/ScoreBar"; +import SubmitStatusLabel from "../SubmitStatusLabel"; +import ThreeColumnLayout from "../ThreeColumnLayout"; +import TitledColumn from "../TitledColumn"; +import UserIcon from "../UserIcon"; type Props = { gameDisplayName: string; diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx index a6b9464..b1d6520 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx @@ -1,5 +1,4 @@ import { useAtomValue } from "jotai"; -import type { components } from "../../api/schema"; import { gamingLeftTimeSecondsAtom } from "../../states/watch"; import LeftTime from "../Gaming/LeftTime"; import ProblemColumn from "../Gaming/ProblemColumn"; @@ -7,11 +6,8 @@ import RankingTable from "../Gaming/RankingTable"; import TitledColumn from "../TitledColumn"; import TwoColumnLayout from "../TwoColumnLayout"; -type RankingEntry = components["schemas"]["RankingEntry"]; - type Props = { gameDisplayName: string; - ranking: RankingEntry[]; problemTitle: string; problemDescription: string; sampleCode: string; @@ -19,7 +15,6 @@ type Props = { export default function GolfWatchAppGamingMultiplayer({ gameDisplayName, - ranking, problemTitle, problemDescription, sampleCode, @@ -43,7 +38,7 @@ export default function GolfWatchAppGamingMultiplayer({ sampleCode={sampleCode} /> <TitledColumn title="順位表"> - <RankingTable ranking={ranking} /> + <RankingTable /> </TitledColumn> </TwoColumnLayout> </div> |