From 14bbc483fdb338c8e55e77f267ecf0d51415549b Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 22 Jul 2024 04:44:31 +0900
Subject: prettier

---
 frontend/src/routes/golf/play/App.tsx | 132 +++++++++++++++++++++-------------
 1 file changed, 84 insertions(+), 48 deletions(-)

(limited to 'frontend/src/routes/golf/play/App.tsx')

diff --git a/frontend/src/routes/golf/play/App.tsx b/frontend/src/routes/golf/play/App.tsx
index f95f2a0..0e650c9 100644
--- a/frontend/src/routes/golf/play/App.tsx
+++ b/frontend/src/routes/golf/play/App.tsx
@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react';
-import useWebSocket, { ReadyState } from 'react-use-websocket';
-import { useDebouncedCallback } from 'use-debounce';
-import Connecting from './apps/Connecting.tsx';
-import Waiting from './apps/Waiting.tsx';
-import Starting from './apps/Starting.tsx';
-import Gaming from './apps/Gaming.tsx';
-import Finished from './apps/Finished.tsx';
-import Failed from './apps/Failed.tsx';
-import type { GameState } from './GameState.ts';
+import { useState, useEffect } from "react";
+import useWebSocket, { ReadyState } from "react-use-websocket";
+import { useDebouncedCallback } from "use-debounce";
+import Connecting from "./apps/Connecting.tsx";
+import Waiting from "./apps/Waiting.tsx";
+import Starting from "./apps/Starting.tsx";
+import Gaming from "./apps/Gaming.tsx";
+import Finished from "./apps/Finished.tsx";
+import Failed from "./apps/Failed.tsx";
+import type { GameState } from "./GameState.ts";
 
 type Props = {
   gameId: number;
@@ -15,36 +15,49 @@ type Props = {
 };
 
 type WebSocketMessage =
-  { type: 'connect' }
-  | { type: 'prepare'; data: { problem: string } }
-  | { type: 'ready' }
-  | { type: 'start'; data: { startTime: string } }
-  | { type: 'finish'; data: { yourScore: number | null; opponentScore: number | null } }
-  | { type: 'score'; data: { score: number } }
-  | { type: 'code'; data: { code: string } }
-  | { type: 'watch'; data: { problem: string; scoreA: number | null; codeA: string; scoreB: number | null; codeB: string } }
+  | { type: "connect" }
+  | { type: "prepare"; data: { problem: string } }
+  | { type: "ready" }
+  | { type: "start"; data: { startTime: string } }
+  | {
+      type: "finish";
+      data: { yourScore: number | null; opponentScore: number | null };
+    }
+  | { type: "score"; data: { score: number } }
+  | { type: "code"; data: { code: string } }
+  | {
+      type: "watch";
+      data: {
+        problem: string;
+        scoreA: number | null;
+        codeA: string;
+        scoreB: number | null;
+        codeB: string;
+      };
+    };
 
 export default ({ gameId, playerId }: Props) => {
   // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/${playerId}/`;
   const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/${playerId}/`;
 
-  const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket<WebSocketMessage>(socketUrl);
+  const { sendJsonMessage, lastJsonMessage, readyState } =
+    useWebSocket<WebSocketMessage>(socketUrl);
 
-  const [gameState, setGameState] = useState<GameState>('connecting');
+  const [gameState, setGameState] = useState<GameState>("connecting");
 
   const [problem, setProblem] = useState<string | null>(null);
 
   // in seconds
   const [timeLeft, setTimeLeft] = useState<number | null>(null);
   useEffect(() => {
-    if (gameState === 'starting' && timeLeft !== null) {
+    if (gameState === "starting" && timeLeft !== null) {
       const timer = setInterval(() => {
-        setTimeLeft(prevTime => {
+        setTimeLeft((prevTime) => {
           // `prevTime` is not null because `timeLeft` is not null.
           prevTime = prevTime!;
           if (prevTime <= 1) {
             clearInterval(timer);
-            setGameState('gaming');
+            setGameState("gaming");
             return 0;
           }
           return prevTime - 1;
@@ -57,59 +70,82 @@ export default ({ gameId, playerId }: Props) => {
 
   const [score, setScore] = useState<number | null>(null);
 
-  const [result, setResult] = useState<{ yourScore: number | null, opponentScore: number | null } | null>(null);
+  const [result, setResult] = useState<{
+    yourScore: number | null;
+    opponentScore: number | null;
+  } | null>(null);
 
   const onCodeChange = useDebouncedCallback((data) => {
-    sendJsonMessage({ type: 'code', data });
+    sendJsonMessage({ type: "code", data });
   }, 1000);
 
   useEffect(() => {
     if (readyState === ReadyState.UNINSTANTIATED) {
-      setGameState('failed');
-    } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
-      if (gameState !== 'finished') {
-        setGameState('failed');
+      setGameState("failed");
+    } else if (
+      readyState === ReadyState.CLOSING ||
+      readyState === ReadyState.CLOSED
+    ) {
+      if (gameState !== "finished") {
+        setGameState("failed");
       }
     } else if (readyState === ReadyState.CONNECTING) {
-      setGameState('connecting');
+      setGameState("connecting");
     } else if (readyState === ReadyState.OPEN) {
       if (lastJsonMessage !== null) {
-        if (lastJsonMessage.type === 'prepare') {
+        if (lastJsonMessage.type === "prepare") {
           const { problem } = lastJsonMessage.data;
           setProblem(problem);
-          sendJsonMessage({ type: 'ready', data: {} });
-        } else if (lastJsonMessage.type === 'start') {
+          sendJsonMessage({ type: "ready", data: {} });
+        } else if (lastJsonMessage.type === "start") {
           const { startTime } = lastJsonMessage.data;
           const startTimeMs = Date.parse(startTime);
-          setTimeLeft(Math.max(0, Math.floor((startTimeMs - Date.now()) / 1000)));
-          setGameState('starting');
-        } else if (lastJsonMessage.type === 'finish') {
+          setTimeLeft(
+            Math.max(0, Math.floor((startTimeMs - Date.now()) / 1000)),
+          );
+          setGameState("starting");
+        } else if (lastJsonMessage.type === "finish") {
           const result = lastJsonMessage.data;
           setResult(result);
-          setGameState('finished');
-        } else if (lastJsonMessage.type === 'score') {
+          setGameState("finished");
+        } else if (lastJsonMessage.type === "score") {
           const { score } = lastJsonMessage.data;
           setScore(score);
         } else {
-          setGameState('failed');
+          setGameState("failed");
         }
       } else {
-        setGameState('waiting');
-        sendJsonMessage({ type: 'connect', data: {} });
+        setGameState("waiting");
+        sendJsonMessage({ type: "connect", data: {} });
       }
     }
   }, [readyState, lastJsonMessage]);
 
   return (
     <div>
-      <h1>Game #{gameId} (playerId #{playerId})</h1>
+      <h1>
+        Game #{gameId} (playerId #{playerId})
+      </h1>
       <div>
-        {gameState === 'connecting' ? (<Connecting gameId={gameId} playerId={playerId} />)
-          : gameState === 'waiting' ? (<Waiting gameId={gameId} playerId={playerId} />)
-            : gameState === 'starting' ? (<Starting gameId={gameId} playerId={playerId} timeLeft={timeLeft} />)
-              : gameState === 'gaming' ? (<Gaming gameId={gameId} playerId={playerId} problem={problem} score={score} onCodeChange={onCodeChange} />)
-                : gameState === 'finished' ? (<Finished gameId={gameId} playerId={playerId} result={result!} />)
-                  : (<Failed gameId={gameId} playerId={playerId} />)}
+        {gameState === "connecting" ? (
+          <Connecting gameId={gameId} playerId={playerId} />
+        ) : gameState === "waiting" ? (
+          <Waiting gameId={gameId} playerId={playerId} />
+        ) : gameState === "starting" ? (
+          <Starting gameId={gameId} playerId={playerId} timeLeft={timeLeft} />
+        ) : gameState === "gaming" ? (
+          <Gaming
+            gameId={gameId}
+            playerId={playerId}
+            problem={problem}
+            score={score}
+            onCodeChange={onCodeChange}
+          />
+        ) : gameState === "finished" ? (
+          <Finished gameId={gameId} playerId={playerId} result={result!} />
+        ) : (
+          <Failed gameId={gameId} playerId={playerId} />
+        )}
       </div>
     </div>
   );
-- 
cgit v1.2.3-70-g09d2