6 files changed, 91 insertions, 63 deletions
diff --git a/frontend/src/routes/golf/watch/App.tsx b/frontend/src/routes/golf/watch/App.tsx
index 6649251..b24833f 100644
--- a/frontend/src/routes/golf/watch/App.tsx
+++ b/frontend/src/routes/golf/watch/App.tsx
@@ -1,32 +1,45 @@
-import { useState, useEffect } from 'react';
-import useWebSocket, { ReadyState } from 'react-use-websocket';
-import Connecting from './apps/Connecting.jsx';
-import Waiting from './apps/Waiting.jsx';
-import Gaming from './apps/Gaming.jsx';
-import Failed from './apps/Failed.jsx';
-import type { WatchState } from './WatchState.js';
+import { useState, useEffect } from "react";
+import useWebSocket, { ReadyState } from "react-use-websocket";
+import Connecting from "./apps/Connecting.jsx";
+import Waiting from "./apps/Waiting.jsx";
+import Gaming from "./apps/Gaming.jsx";
+import Failed from "./apps/Failed.jsx";
+import type { WatchState } from "./WatchState.js";
 
 type Props = {
   gameId: number;
 };
 
 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 }: Props) => {
   // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/watch/`;
   const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/watch/`;
 
-  const { lastJsonMessage, readyState } = useWebSocket<WebSocketMessage>(socketUrl);
+  const { lastJsonMessage, readyState } =
+    useWebSocket<WebSocketMessage>(socketUrl);
 
-  const [watchState, setWatchState] = useState<WatchState>('connecting');
+  const [watchState, setWatchState] = useState<WatchState>("connecting");
 
   const [problem, setProblem] = useState<string | null>(null);
 
@@ -37,28 +50,37 @@ export default ({ gameId }: Props) => {
 
   useEffect(() => {
     if (readyState === ReadyState.UNINSTANTIATED) {
-      setWatchState('failed');
-    } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
-      if (watchState !== 'finished') {
-        setWatchState('failed');
+      setWatchState("failed");
+    } else if (
+      readyState === ReadyState.CLOSING ||
+      readyState === ReadyState.CLOSED
+    ) {
+      if (watchState !== "finished") {
+        setWatchState("failed");
       }
     } else if (readyState === ReadyState.CONNECTING) {
-      setWatchState('connecting');
+      setWatchState("connecting");
     } else if (readyState === ReadyState.OPEN) {
       if (lastJsonMessage !== null) {
-        if (lastJsonMessage.type === 'watch') {
-          const { problem, scoreA: scoreA_, codeA: codeA_, scoreB: scoreB_, codeB: codeB_ } = lastJsonMessage.data;
+        if (lastJsonMessage.type === "watch") {
+          const {
+            problem,
+            scoreA: scoreA_,
+            codeA: codeA_,
+            scoreB: scoreB_,
+            codeB: codeB_,
+          } = lastJsonMessage.data;
           setProblem(problem);
           setScoreA(scoreA_);
           setCodeA(codeA_);
           setScoreB(scoreB_);
           setCodeB(codeB_);
-          setWatchState('gaming');
+          setWatchState("gaming");
         } else {
-          setWatchState('failed');
+          setWatchState("failed");
         }
       } else {
-        setWatchState('waiting');
+        setWatchState("waiting");
       }
     }
   }, [readyState, lastJsonMessage]);
@@ -67,10 +89,22 @@ export default ({ gameId }: Props) => {
     <div>
       <h1>Game #{gameId} watching</h1>
       <div>
-        {watchState === 'connecting' ? (<Connecting gameId={gameId} />)
-          : watchState === 'waiting' ? (<Waiting gameId={gameId} />)
-            : watchState === 'gaming' || watchState === 'finished' ? (<Gaming gameId={gameId} problem={problem} scoreA={scoreA} codeA={codeA} scoreB={scoreB} codeB={codeB} />)
-              : (<Failed gameId={gameId} />)}
+        {watchState === "connecting" ? (
+          <Connecting gameId={gameId} />
+        ) : watchState === "waiting" ? (
+          <Waiting gameId={gameId} />
+        ) : watchState === "gaming" || watchState === "finished" ? (
+          <Gaming
+            gameId={gameId}
+            problem={problem}
+            scoreA={scoreA}
+            codeA={codeA}
+            scoreB={scoreB}
+            codeB={codeB}
+          />
+        ) : (
+          <Failed gameId={gameId} />
+        )}
       </div>
     </div>
   );
diff --git a/frontend/src/routes/golf/watch/WatchState.ts b/frontend/src/routes/golf/watch/WatchState.ts
index 2e0b066..8d9997e 100644
--- a/frontend/src/routes/golf/watch/WatchState.ts
+++ b/frontend/src/routes/golf/watch/WatchState.ts
@@ -1 +1,7 @@
-export type WatchState = 'connecting' | 'waiting' | 'starting' | 'gaming' | 'finished' | 'failed';
+export type WatchState =
+  | "connecting"
+  | "waiting"
+  | "starting"
+  | "gaming"
+  | "finished"
+  | "failed";
diff --git a/frontend/src/routes/golf/watch/apps/Connecting.tsx b/frontend/src/routes/golf/watch/apps/Connecting.tsx
index 6f1f356..8dc7a8c 100644
--- a/frontend/src/routes/golf/watch/apps/Connecting.tsx
+++ b/frontend/src/routes/golf/watch/apps/Connecting.tsx
@@ -3,9 +3,5 @@ type Props = {
 };
 
 export default (_props: Props) => {
-  return (
-    <div>
-      接続中です......
-    </div>
-  );
-}
+  return <div>接続中です......</div>;
+};
diff --git a/frontend/src/routes/golf/watch/apps/Failed.tsx b/frontend/src/routes/golf/watch/apps/Failed.tsx
index 70d3693..3c29d74 100644
--- a/frontend/src/routes/golf/watch/apps/Failed.tsx
+++ b/frontend/src/routes/golf/watch/apps/Failed.tsx
@@ -3,9 +3,5 @@ type Props = {
 };
 
 export default (_props: Props) => {
-  return (
-    <div>
-      エラー
-    </div>
-  );
-}
+  return <div>エラー</div>;
+};
diff --git a/frontend/src/routes/golf/watch/apps/Gaming.tsx b/frontend/src/routes/golf/watch/apps/Gaming.tsx
index a17b71e..623cb08 100644
--- a/frontend/src/routes/golf/watch/apps/Gaming.tsx
+++ b/frontend/src/routes/golf/watch/apps/Gaming.tsx
@@ -10,25 +10,25 @@ type Props = {
 export default ({ problem, scoreA, codeA, scoreB, codeB }: Props) => {
   return (
     <>
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        <div style={{ display: 'flex', flex: 1, justifyContent: 'center' }}>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <div style={{ display: "flex", flex: 1, justifyContent: "center" }}>
           {problem}
         </div>
-        <div style={{ display: 'flex', flex: 3 }}>
-          <div style={{ display: 'flex', flex: 3, flexDirection: 'column' }}>
-            <div style={{ flex: 1, justifyContent: 'center' }}>
-              {scoreA}
-            </div>
+        <div style={{ display: "flex", flex: 3 }}>
+          <div style={{ display: "flex", flex: 3, flexDirection: "column" }}>
+            <div style={{ flex: 1, justifyContent: "center" }}>{scoreA}</div>
             <div style={{ flex: 3 }}>
-              <pre><code>{codeA}</code></pre>
+              <pre>
+                <code>{codeA}</code>
+              </pre>
             </div>
           </div>
-          <div style={{ display: 'flex', flex: 3, flexDirection: 'column' }}>
-            <div style={{ flex: 1, justifyContent: 'center' }}>
-              {scoreB}
-            </div>
+          <div style={{ display: "flex", flex: 3, flexDirection: "column" }}>
+            <div style={{ flex: 1, justifyContent: "center" }}>{scoreB}</div>
             <div style={{ flex: 3 }}>
-              <pre><code>{codeB}</code></pre>
+              <pre>
+                <code>{codeB}</code>
+              </pre>
             </div>
           </div>
         </div>
diff --git a/frontend/src/routes/golf/watch/apps/Waiting.tsx b/frontend/src/routes/golf/watch/apps/Waiting.tsx
index bd4f567..e8d5390 100644
--- a/frontend/src/routes/golf/watch/apps/Waiting.tsx
+++ b/frontend/src/routes/golf/watch/apps/Waiting.tsx
@@ -3,9 +3,5 @@ type Props = {
 };
 
 export default (_props: Props) => {
-  return (
-    <div>
-      対戦相手が現れるのを待っています......
-    </div>
-  );
-}
+  return <div>対戦相手が現れるのを待っています......</div>;
+};