aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
diff options
context:
space:
mode:
authornsfisis <nsfisis@gmail.com>2025-03-08 10:32:05 +0900
committernsfisis <nsfisis@gmail.com>2025-03-08 10:39:25 +0900
commitc889a9ad33374eae03cec5b0358d79016d6fd97e (patch)
tree852a080bc1b0e68e5f46f8bca0ff787aafd314e1 /frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
parent8dbdf96e674c1e26d7c98af8d0608f30bc1bf166 (diff)
downloadphperkaigi-2025-albatross-c889a9ad33374eae03cec5b0358d79016d6fd97e.tar.gz
phperkaigi-2025-albatross-c889a9ad33374eae03cec5b0358d79016d6fd97e.tar.zst
phperkaigi-2025-albatross-c889a9ad33374eae03cec5b0358d79016d6fd97e.zip
show ranking
Diffstat (limited to 'frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx')
-rw-r--r--frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx128
1 files changed, 0 insertions, 128 deletions
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
deleted file mode 100644
index afb8bfe..0000000
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { useAtomValue } from "jotai";
-import {
- gamingLeftTimeSecondsAtom,
- latestGameStatesAtom,
-} from "../../states/watch";
-import type { PlayerProfile } from "../../types/PlayerProfile";
-import BorderedContainer from "../BorderedContainer";
-import CodeBlock from "../Gaming/CodeBlock";
-import ScoreBar from "../Gaming/ScoreBar";
-import SubmitResult from "../Gaming/SubmitResult";
-import UserIcon from "../UserIcon";
-
-type Props = {
- gameDisplayName: string;
- playerProfileA: PlayerProfile;
- playerProfileB: PlayerProfile;
- problemTitle: string;
- problemDescription: string;
- gameResult: "winA" | "winB" | "draw" | null;
-};
-
-export default function GolfWatchAppGaming({
- gameDisplayName,
- playerProfileA,
- playerProfileB,
- problemTitle,
- problemDescription,
- gameResult,
-}: Props) {
- const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
- const latestGameStates = useAtomValue(latestGameStatesAtom);
-
- const stateA = latestGameStates[playerProfileA.id]!;
- const codeA = stateA.code;
- const scoreA = stateA.score;
- const statusA = stateA.status;
- const stateB = latestGameStates[playerProfileB.id]!;
- const codeB = stateB.code;
- const scoreB = stateB.score;
- const statusB = stateB.status;
-
- const leftTime = (() => {
- const m = Math.floor(leftTimeSeconds / 60);
- const s = leftTimeSeconds % 60;
- return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
- })();
-
- const topBg = gameResult
- ? gameResult === "winA"
- ? "bg-orange-400"
- : gameResult === "winB"
- ? "bg-purple-400"
- : "bg-pink-500"
- : "bg-sky-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 justify-between my-auto">
- <div className="flex gap-6">
- {playerProfileA.iconPath && (
- <UserIcon
- iconPath={playerProfileA.iconPath}
- displayName={playerProfileA.displayName}
- className="w-12 h-12 my-auto"
- />
- )}
- <div>
- <div className="text-gray-100">Player 1</div>
- <div className="text-2xl">{playerProfileA.displayName}</div>
- </div>
- </div>
- <div className="text-6xl">{scoreA}</div>
- </div>
- <div className="font-bold text-center">
- <div className="text-gray-100">{gameDisplayName}</div>
- <div className="text-3xl">
- {gameResult
- ? gameResult === "winA"
- ? `勝者 ${playerProfileA.displayName}`
- : gameResult === "winB"
- ? `勝者 ${playerProfileB.displayName}`
- : "引き分け"
- : leftTime}
- </div>
- </div>
- <div className="font-bold flex justify-between my-auto">
- <div className="text-6xl">{scoreB}</div>
- <div className="flex gap-6 text-end">
- <div>
- <div className="text-gray-100">Player 2</div>
- <div className="text-2xl">{playerProfileB.displayName}</div>
- </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"
- />
- <div className="grow grid grid-cols-3 p-4 gap-4">
- <CodeBlock code={codeA} language="php" />
- <div className="flex flex-col gap-4">
- <div className="grid grid-cols-2 gap-4">
- <SubmitResult status={statusA} />
- <SubmitResult status={statusB} />
- </div>
- <div>
- <div className="mb-2 text-center text-xl font-bold">
- {problemTitle}
- </div>
- <BorderedContainer>{problemDescription}</BorderedContainer>
- </div>
- </div>
- <CodeBlock code={codeB} language="php" />
- </div>
- </div>
- );
-}