aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/components/GolfWatchApp.client.tsx
diff options
context:
space:
mode:
authornsfisis <nsfisis@gmail.com>2024-08-01 22:22:12 +0900
committernsfisis <nsfisis@gmail.com>2024-08-01 22:22:12 +0900
commit8f2cceacc8fde328033de7f05bb12e7b1246dd86 (patch)
treeacb93a52454315c286b9e0f3c624ae1bbcfa32f5 /frontend/app/components/GolfWatchApp.client.tsx
parent00e50b2dcfed209669c46da54dc07905d65887b8 (diff)
downloadphperkaigi-2025-albatross-8f2cceacc8fde328033de7f05bb12e7b1246dd86.tar.gz
phperkaigi-2025-albatross-8f2cceacc8fde328033de7f05bb12e7b1246dd86.tar.zst
phperkaigi-2025-albatross-8f2cceacc8fde328033de7f05bb12e7b1246dd86.zip
chore(frontend): [biome] format
Diffstat (limited to 'frontend/app/components/GolfWatchApp.client.tsx')
-rw-r--r--frontend/app/components/GolfWatchApp.client.tsx218
1 files changed, 109 insertions, 109 deletions
diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx
index 0373944..aefe945 100644
--- a/frontend/app/components/GolfWatchApp.client.tsx
+++ b/frontend/app/components/GolfWatchApp.client.tsx
@@ -14,126 +14,126 @@ type Game = components["schemas"]["Game"];
type GameState = "connecting" | "waiting" | "starting" | "gaming" | "finished";
export default function GolfWatchApp({
- game,
- sockToken,
+ game,
+ sockToken,
}: {
- game: Game;
- sockToken: string;
+ game: Game;
+ sockToken: string;
}) {
- // const socketUrl = `wss://t.nil.ninja/iosdc-japan/2024/sock/golf/${game.game_id}/watch?token=${sockToken}`;
- const socketUrl =
- process.env.NODE_ENV === "development"
- ? `ws://localhost:8002/sock/golf/${game.game_id}/watch?token=${sockToken}`
- : `ws://api-server/sock/golf/${game.game_id}/watch?token=${sockToken}`;
+ // const socketUrl = `wss://t.nil.ninja/iosdc-japan/2024/sock/golf/${game.game_id}/watch?token=${sockToken}`;
+ const socketUrl =
+ process.env.NODE_ENV === "development"
+ ? `ws://localhost:8002/sock/golf/${game.game_id}/watch?token=${sockToken}`
+ : `ws://api-server/sock/golf/${game.game_id}/watch?token=${sockToken}`;
- const { lastJsonMessage, readyState } = useWebSocket<WebSocketMessage>(
- socketUrl,
- {},
- );
+ const { lastJsonMessage, readyState } = useWebSocket<WebSocketMessage>(
+ socketUrl,
+ {},
+ );
- const [gameState, setGameState] = useState<GameState>("connecting");
+ const [gameState, setGameState] = useState<GameState>("connecting");
- const [startedAt, setStartedAt] = useState<number | null>(null);
+ const [startedAt, setStartedAt] = useState<number | null>(null);
- const [timeLeftSeconds, setTimeLeftSeconds] = useState<number | null>(null);
+ const [timeLeftSeconds, setTimeLeftSeconds] = useState<number | null>(null);
- useEffect(() => {
- if (gameState === "starting" && startedAt !== null) {
- const timer1 = setInterval(() => {
- setTimeLeftSeconds((prev) => {
- if (prev === null) {
- return null;
- }
- if (prev <= 1) {
- clearInterval(timer1);
- setGameState("gaming");
- return 0;
- }
- return prev - 1;
- });
- }, 1000);
+ useEffect(() => {
+ if (gameState === "starting" && startedAt !== null) {
+ const timer1 = setInterval(() => {
+ setTimeLeftSeconds((prev) => {
+ if (prev === null) {
+ return null;
+ }
+ if (prev <= 1) {
+ clearInterval(timer1);
+ setGameState("gaming");
+ return 0;
+ }
+ return prev - 1;
+ });
+ }, 1000);
- const timer2 = setInterval(() => {
- const nowSec = Math.floor(Date.now() / 1000);
- const finishedAt = startedAt + game.duration_seconds;
- if (nowSec >= finishedAt) {
- clearInterval(timer2);
- setGameState("finished");
- }
- }, 1000);
+ const timer2 = setInterval(() => {
+ const nowSec = Math.floor(Date.now() / 1000);
+ const finishedAt = startedAt + game.duration_seconds;
+ if (nowSec >= finishedAt) {
+ clearInterval(timer2);
+ setGameState("finished");
+ }
+ }, 1000);
- return () => {
- clearInterval(timer1);
- clearInterval(timer2);
- };
- }
- }, [gameState, startedAt, game.duration_seconds]);
+ return () => {
+ clearInterval(timer1);
+ clearInterval(timer2);
+ };
+ }
+ }, [gameState, startedAt, game.duration_seconds]);
- const [scoreA, setScoreA] = useState<number | null>(null);
- const [scoreB, setScoreB] = useState<number | null>(null);
- const [codeA, setCodeA] = useState<string>("");
- const [codeB, setCodeB] = useState<string>("");
+ const [scoreA, setScoreA] = useState<number | null>(null);
+ const [scoreB, setScoreB] = useState<number | null>(null);
+ const [codeA, setCodeA] = useState<string>("");
+ const [codeB, setCodeB] = useState<string>("");
- if (readyState === ReadyState.UNINSTANTIATED) {
- throw new Error("WebSocket is not connected");
- }
+ if (readyState === ReadyState.UNINSTANTIATED) {
+ throw new Error("WebSocket is not connected");
+ }
- useEffect(() => {
- if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
- if (gameState !== "finished") {
- setGameState("connecting");
- }
- } else if (readyState === ReadyState.CONNECTING) {
- setGameState("connecting");
- } else if (readyState === ReadyState.OPEN) {
- if (lastJsonMessage !== null) {
- console.log(lastJsonMessage.type);
- if (lastJsonMessage.type === "watcher:s2c:start") {
- if (
- gameState !== "starting" &&
- gameState !== "gaming" &&
- gameState !== "finished"
- ) {
- const { start_at } = lastJsonMessage.data;
- setStartedAt(start_at);
- const nowSec = Math.floor(Date.now() / 1000);
- setTimeLeftSeconds(start_at - nowSec);
- setGameState("starting");
- }
- } else if (lastJsonMessage.type === "watcher:s2c:code") {
- const { player_id, code } = lastJsonMessage.data;
- setCodeA(code);
- } else if (lastJsonMessage.type === "watcher:s2c:execresult") {
- const { score } = lastJsonMessage.data;
- if (score !== null && (scoreA === null || score < scoreA)) {
- setScoreA(score);
- }
- }
- } else {
- setGameState("waiting");
- }
- }
- }, [lastJsonMessage, readyState, gameState, scoreA]);
+ useEffect(() => {
+ if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
+ if (gameState !== "finished") {
+ setGameState("connecting");
+ }
+ } else if (readyState === ReadyState.CONNECTING) {
+ setGameState("connecting");
+ } else if (readyState === ReadyState.OPEN) {
+ if (lastJsonMessage !== null) {
+ console.log(lastJsonMessage.type);
+ if (lastJsonMessage.type === "watcher:s2c:start") {
+ if (
+ gameState !== "starting" &&
+ gameState !== "gaming" &&
+ gameState !== "finished"
+ ) {
+ const { start_at } = lastJsonMessage.data;
+ setStartedAt(start_at);
+ const nowSec = Math.floor(Date.now() / 1000);
+ setTimeLeftSeconds(start_at - nowSec);
+ setGameState("starting");
+ }
+ } else if (lastJsonMessage.type === "watcher:s2c:code") {
+ const { player_id, code } = lastJsonMessage.data;
+ setCodeA(code);
+ } else if (lastJsonMessage.type === "watcher:s2c:execresult") {
+ const { score } = lastJsonMessage.data;
+ if (score !== null && (scoreA === null || score < scoreA)) {
+ setScoreA(score);
+ }
+ }
+ } else {
+ setGameState("waiting");
+ }
+ }
+ }, [lastJsonMessage, readyState, gameState, scoreA]);
- if (gameState === "connecting") {
- return <GolfWatchAppConnecting />;
- } else if (gameState === "waiting") {
- return <GolfWatchAppWaiting />;
- } else if (gameState === "starting") {
- return <GolfWatchAppStarting timeLeft={timeLeftSeconds!} />;
- } else if (gameState === "gaming") {
- return (
- <GolfWatchAppGaming
- problem={game.problem!.description}
- codeA={codeA}
- scoreA={scoreA}
- codeB={codeB}
- scoreB={scoreB}
- />
- );
- } else if (gameState === "finished") {
- return <GolfWatchAppFinished />;
- } else {
- return null;
- }
+ if (gameState === "connecting") {
+ return <GolfWatchAppConnecting />;
+ } else if (gameState === "waiting") {
+ return <GolfWatchAppWaiting />;
+ } else if (gameState === "starting") {
+ return <GolfWatchAppStarting timeLeft={timeLeftSeconds!} />;
+ } else if (gameState === "gaming") {
+ return (
+ <GolfWatchAppGaming
+ problem={game.problem!.description}
+ codeA={codeA}
+ scoreA={scoreA}
+ codeB={codeB}
+ scoreB={scoreB}
+ />
+ );
+ } else if (gameState === "finished") {
+ return <GolfWatchAppFinished />;
+ } else {
+ return null;
+ }
}