diff options
Diffstat (limited to 'frontend/app/components/GolfWatchApps')
6 files changed, 220 insertions, 220 deletions
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx index 3d2784e..f032607 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx @@ -1,10 +1,10 @@ import { useAtomValue } from "jotai"; import { - calcCodeSize, - checkGameResultKind, - gameStateKindAtom, - gamingLeftTimeSecondsAtom, - latestGameStatesAtom, + calcCodeSize, + checkGameResultKind, + gameStateKindAtom, + gamingLeftTimeSecondsAtom, + latestGameStatesAtom, } from "../../states/watch"; import type { PlayerProfile } from "../../types/PlayerProfile"; import type { SupportedLanguage } from "../../types/SupportedLanguage"; @@ -21,140 +21,140 @@ import TitledColumn from "../TitledColumn"; import UserIcon from "../UserIcon"; type Props = { - gameDisplayName: string; - playerProfileA: PlayerProfile | null; - playerProfileB: PlayerProfile | null; - problemTitle: string; - problemDescription: string; - problemLanguage: SupportedLanguage; - sampleCode: string; + gameDisplayName: string; + playerProfileA: PlayerProfile | null; + playerProfileB: PlayerProfile | null; + problemTitle: string; + problemDescription: string; + problemLanguage: SupportedLanguage; + sampleCode: string; }; export default function GolfWatchAppGaming1v1({ - gameDisplayName, - playerProfileA, - playerProfileB, - problemTitle, - problemDescription, - problemLanguage, - sampleCode, + gameDisplayName, + playerProfileA, + playerProfileB, + problemTitle, + problemDescription, + problemLanguage, + sampleCode, }: Props) { - const gameStateKind = useAtomValue(gameStateKindAtom); - const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!; - const latestGameStates = useAtomValue(latestGameStatesAtom); + const gameStateKind = useAtomValue(gameStateKindAtom); + const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!; + const latestGameStates = useAtomValue(latestGameStatesAtom); - const stateA = - playerProfileA && (latestGameStates[`${playerProfileA.id}`] ?? null); - const codeA = stateA?.code ?? ""; - const scoreA = stateA?.score ?? null; - const statusA = stateA?.status ?? "none"; - const stateB = - playerProfileB && (latestGameStates[`${playerProfileB.id}`] ?? null); - const codeB = stateB?.code ?? ""; - const scoreB = stateB?.score ?? null; - const statusB = stateB?.status ?? "none"; + const stateA = + playerProfileA && (latestGameStates[`${playerProfileA.id}`] ?? null); + const codeA = stateA?.code ?? ""; + const scoreA = stateA?.score ?? null; + const statusA = stateA?.status ?? "none"; + const stateB = + playerProfileB && (latestGameStates[`${playerProfileB.id}`] ?? null); + const codeB = stateB?.code ?? ""; + const scoreB = stateB?.score ?? null; + const statusB = stateB?.status ?? "none"; - const codeSizeA = calcCodeSize(codeA, problemLanguage); - const codeSizeB = calcCodeSize(codeB, problemLanguage); + const codeSizeA = calcCodeSize(codeA, problemLanguage); + const codeSizeB = calcCodeSize(codeB, problemLanguage); - const gameResultKind = checkGameResultKind(gameStateKind, stateA, stateB); + const gameResultKind = checkGameResultKind(gameStateKind, stateA, stateB); - const topBg = gameResultKind - ? gameResultKind === "winA" - ? "bg-orange-400" - : gameResultKind === "winB" - ? "bg-purple-400" - : "bg-brand-600" - : "bg-brand-600"; + const topBg = gameResultKind + ? gameResultKind === "winA" + ? "bg-orange-400" + : gameResultKind === "winB" + ? "bg-purple-400" + : "bg-brand-600" + : "bg-brand-600"; - return ( - <div className="min-h-screen bg-gray-100 flex flex-col"> - <div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}> - <div className="font-bold flex gap-4 justify-start md:justify-between items-center my-auto"> - <div className="flex gap-6 items-center"> - {playerProfileA?.iconPath && ( - <UserIcon - iconPath={playerProfileA.iconPath} - displayName={playerProfileA.displayName} - className="w-12 h-12 my-auto" - /> - )} - <div className="hidden md:block text-4xl"> - {playerProfileA?.displayName} - </div> - </div> - <div className="text-2xl md:text-6xl"> - <Score status={statusA} score={scoreA} /> - </div> - </div> - <div className="font-bold text-center"> - <div className="text-gray-100">{gameDisplayName}</div> - {gameResultKind ? ( - <div className="text-3xl"> - {gameResultKind === "winA" - ? `勝者 ${playerProfileA!.displayName}` - : gameResultKind === "winB" - ? `勝者 ${playerProfileB!.displayName}` - : "引き分け"} - </div> - ) : ( - <LeftTime sec={leftTimeSeconds} /> - )} - </div> - <div className="font-bold flex gap-4 justify-end md:justify-between items-center my-auto"> - <div className="text-2xl md:text-6xl"> - <Score status={statusB} score={scoreB} /> - </div> - <div className="flex gap-6 items-center text-end"> - <div className="hidden md:block text-4xl"> - {playerProfileB?.displayName} - </div> - {playerProfileB?.iconPath && ( - <UserIcon - iconPath={playerProfileB.iconPath} - displayName={playerProfileB.displayName} - className="w-12 h-12 my-auto" - /> - )} - </div> - </div> - </div> - <ScoreBar - scoreA={scoreA} - scoreB={scoreB} - bgA="bg-orange-400" - bgB="bg-purple-400" - /> - <ThreeColumnLayout> - <TitledColumn - title={<SubmitStatusLabel status={statusA} />} - className="order-2 md:order-1" - > - <FoldableBorderedContainerWithCaption - caption={`コードサイズ: ${codeSizeA}`} - > - <CodeBlock code={codeA} language={problemLanguage} /> - </FoldableBorderedContainerWithCaption> - </TitledColumn> - <TitledColumn title={problemTitle} className="order-1 md:order-2"> - <ProblemColumnContent - description={problemDescription} - language={problemLanguage} - sampleCode={sampleCode} - /> - <RankingTable problemLanguage={problemLanguage} /> - </TitledColumn> - <TitledColumn - title={<SubmitStatusLabel status={statusB} />} - className="order-3" - > - <FoldableBorderedContainerWithCaption - caption={`コードサイズ: ${codeSizeB}`} - > - <CodeBlock code={codeB} language={problemLanguage} /> - </FoldableBorderedContainerWithCaption> - </TitledColumn> - </ThreeColumnLayout> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex flex-col"> + <div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}> + <div className="font-bold flex gap-4 justify-start md:justify-between items-center my-auto"> + <div className="flex gap-6 items-center"> + {playerProfileA?.iconPath && ( + <UserIcon + iconPath={playerProfileA.iconPath} + displayName={playerProfileA.displayName} + className="w-12 h-12 my-auto" + /> + )} + <div className="hidden md:block text-4xl"> + {playerProfileA?.displayName} + </div> + </div> + <div className="text-2xl md:text-6xl"> + <Score status={statusA} score={scoreA} /> + </div> + </div> + <div className="font-bold text-center"> + <div className="text-gray-100">{gameDisplayName}</div> + {gameResultKind ? ( + <div className="text-3xl"> + {gameResultKind === "winA" + ? `勝者 ${playerProfileA!.displayName}` + : gameResultKind === "winB" + ? `勝者 ${playerProfileB!.displayName}` + : "引き分け"} + </div> + ) : ( + <LeftTime sec={leftTimeSeconds} /> + )} + </div> + <div className="font-bold flex gap-4 justify-end md:justify-between items-center my-auto"> + <div className="text-2xl md:text-6xl"> + <Score status={statusB} score={scoreB} /> + </div> + <div className="flex gap-6 items-center text-end"> + <div className="hidden md:block text-4xl"> + {playerProfileB?.displayName} + </div> + {playerProfileB?.iconPath && ( + <UserIcon + iconPath={playerProfileB.iconPath} + displayName={playerProfileB.displayName} + className="w-12 h-12 my-auto" + /> + )} + </div> + </div> + </div> + <ScoreBar + scoreA={scoreA} + scoreB={scoreB} + bgA="bg-orange-400" + bgB="bg-purple-400" + /> + <ThreeColumnLayout> + <TitledColumn + title={<SubmitStatusLabel status={statusA} />} + className="order-2 md:order-1" + > + <FoldableBorderedContainerWithCaption + caption={`コードサイズ: ${codeSizeA}`} + > + <CodeBlock code={codeA} language={problemLanguage} /> + </FoldableBorderedContainerWithCaption> + </TitledColumn> + <TitledColumn title={problemTitle} className="order-1 md:order-2"> + <ProblemColumnContent + description={problemDescription} + language={problemLanguage} + sampleCode={sampleCode} + /> + <RankingTable problemLanguage={problemLanguage} /> + </TitledColumn> + <TitledColumn + title={<SubmitStatusLabel status={statusB} />} + className="order-3" + > + <FoldableBorderedContainerWithCaption + caption={`コードサイズ: ${codeSizeB}`} + > + <CodeBlock code={codeB} language={problemLanguage} /> + </FoldableBorderedContainerWithCaption> + </TitledColumn> + </ThreeColumnLayout> + </div> + ); } diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx index 320709b..ca2e16f 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx @@ -8,43 +8,43 @@ import TitledColumn from "../TitledColumn"; import TwoColumnLayout from "../TwoColumnLayout"; type Props = { - gameDisplayName: string; - problemTitle: string; - problemDescription: string; - problemLanguage: SupportedLanguage; - sampleCode: string; + gameDisplayName: string; + problemTitle: string; + problemDescription: string; + problemLanguage: SupportedLanguage; + sampleCode: string; }; export default function GolfWatchAppGamingMultiplayer({ - gameDisplayName, - problemTitle, - problemDescription, - problemLanguage, - sampleCode, + gameDisplayName, + problemTitle, + problemDescription, + problemLanguage, + sampleCode, }: Props) { - const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!; + const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!; - return ( - <div className="min-h-screen bg-gray-100 flex flex-col"> - <div className="text-white bg-brand-600 grid grid-cols-3 px-4 py-2"> - <div className="font-bold flex justify-between my-auto"></div> - <div className="font-bold text-center"> - <div className="text-gray-100">{gameDisplayName}</div> - <LeftTime sec={leftTimeSeconds} /> - </div> - <div className="font-bold flex justify-between my-auto"></div> - </div> - <TwoColumnLayout> - <ProblemColumn - title={problemTitle} - description={problemDescription} - language={problemLanguage} - sampleCode={sampleCode} - /> - <TitledColumn title="順位表"> - <RankingTable problemLanguage={problemLanguage} /> - </TitledColumn> - </TwoColumnLayout> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex flex-col"> + <div className="text-white bg-brand-600 grid grid-cols-3 px-4 py-2"> + <div className="font-bold flex justify-between my-auto"></div> + <div className="font-bold text-center"> + <div className="text-gray-100">{gameDisplayName}</div> + <LeftTime sec={leftTimeSeconds} /> + </div> + <div className="font-bold flex justify-between my-auto"></div> + </div> + <TwoColumnLayout> + <ProblemColumn + title={problemTitle} + description={problemDescription} + language={problemLanguage} + sampleCode={sampleCode} + /> + <TitledColumn title="順位表"> + <RankingTable problemLanguage={problemLanguage} /> + </TitledColumn> + </TwoColumnLayout> + </div> + ); } diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx index 7169d24..a1b3f77 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx @@ -1,9 +1,9 @@ export default function GolfWatchAppLoading() { - return ( - <div className="min-h-screen bg-gray-100 flex items-center justify-center"> - <div className="text-center"> - <div className="text-6xl font-bold text-black">読込中</div> - </div> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex items-center justify-center"> + <div className="text-center"> + <div className="text-6xl font-bold text-black">読込中</div> + </div> + </div> + ); } diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx index d9e004e..3083a07 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx @@ -2,20 +2,20 @@ import { useAtomValue } from "jotai"; import { startingLeftTimeSecondsAtom } from "../../states/watch"; type Props = { - gameDisplayName: string; + gameDisplayName: string; }; export default function GolfWatchAppStarting({ gameDisplayName }: Props) { - const leftTimeSeconds = useAtomValue(startingLeftTimeSecondsAtom)!; + const leftTimeSeconds = useAtomValue(startingLeftTimeSecondsAtom)!; - return ( - <div className="min-h-screen bg-gray-100 flex flex-col"> - <div className="text-white bg-brand-600 p-10 text-center"> - <div className="text-4xl font-bold">{gameDisplayName}</div> - </div> - <div className="text-center text-black font-black text-10xl"> - {leftTimeSeconds} - </div> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex flex-col"> + <div className="text-white bg-brand-600 p-10 text-center"> + <div className="text-4xl font-bold">{gameDisplayName}</div> + </div> + <div className="text-center text-black font-black text-10xl"> + {leftTimeSeconds} + </div> + </div> + ); } diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx index c7db3a7..48c3ab2 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx @@ -2,34 +2,34 @@ import type { PlayerProfile } from "../../types/PlayerProfile"; import PlayerNameAndIcon from "../PlayerNameAndIcon"; type Props = { - gameDisplayName: string; - playerProfileA: PlayerProfile | null; - playerProfileB: PlayerProfile | null; + gameDisplayName: string; + playerProfileA: PlayerProfile | null; + playerProfileB: PlayerProfile | null; }; export default function GolfWatchAppWaiting1v1({ - gameDisplayName, - playerProfileA, - playerProfileB, + gameDisplayName, + playerProfileA, + playerProfileB, }: Props) { - return ( - <div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center"> - <div className="text-white bg-brand-600 p-10"> - <div className="text-4xl">{gameDisplayName}</div> - </div> - <div className="grow grid grid-cols-3 gap-10 mx-auto text-black"> - {playerProfileA ? ( - <PlayerNameAndIcon profile={playerProfileA} /> - ) : ( - <div></div> - )} - <div className="text-8xl my-auto">vs.</div> - {playerProfileB ? ( - <PlayerNameAndIcon profile={playerProfileB} /> - ) : ( - <div></div> - )} - </div> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center"> + <div className="text-white bg-brand-600 p-10"> + <div className="text-4xl">{gameDisplayName}</div> + </div> + <div className="grow grid grid-cols-3 gap-10 mx-auto text-black"> + {playerProfileA ? ( + <PlayerNameAndIcon profile={playerProfileA} /> + ) : ( + <div></div> + )} + <div className="text-8xl my-auto">vs.</div> + {playerProfileB ? ( + <PlayerNameAndIcon profile={playerProfileB} /> + ) : ( + <div></div> + )} + </div> + </div> + ); } diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx index 72757f3..de742b4 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx @@ -1,15 +1,15 @@ type Props = { - gameDisplayName: string; + gameDisplayName: string; }; export default function GolfWatchAppWaitingMultiplayer({ - gameDisplayName, + gameDisplayName, }: Props) { - return ( - <div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center"> - <div className="text-white bg-brand-600 p-10"> - <div className="text-4xl">{gameDisplayName}</div> - </div> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center"> + <div className="text-white bg-brand-600 p-10"> + <div className="text-4xl">{gameDisplayName}</div> + </div> + </div> + ); } |