react router

30 files changed, 358 insertions, 232 deletions

diff --git a/frontend/src/game.jsx b/frontend/src/game.jsx
deleted file mode 100644
index 8b31d54..0000000
--- a/frontend/src/game.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import App from './game/App.jsx';
-
-const url = new URL(window.location.href);
-const path = url.pathname;
-const match = path.match(/\/golf\/(\d+)\/(a|b)\/$/);
-if (match) {
-  const gameId = match[1];
-  const team = match[2];
-
-  createRoot(document.getElementById('app')).render(<App gameId={gameId} team={team} />);
-}
diff --git a/frontend/src/game/App.jsx b/frontend/src/game/App.jsx
deleted file mode 100644
index 9a41ea4..0000000
--- a/frontend/src/game/App.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useState, useEffect } from 'react';
-import useWebSocket, { ReadyState } from 'react-use-websocket';
-import { useDebouncedCallback } from 'use-debounce';
-import Connecting from './apps/Connecting.jsx';
-import Waiting from './apps/Waiting.jsx';
-import Starting from './apps/Starting.jsx';
-import Gaming from './apps/Gaming.jsx';
-import Finished from './apps/Finished.jsx';
-import Failed from './apps/Failed.jsx';
-import { GAME_STATE_CONNECTING, GAME_STATE_WAITING, GAME_STATE_STARTING, GAME_STATE_GAMING, GAME_STATE_FINISHED, GAME_STATE_FAILED } from './GameState.js';
-
-export default ({ gameId, team }) => {
-  // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/${team}/`;
-  const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/${team}/`;
-
-  const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(socketUrl);
-
-  const [gameState, setGameState] = useState(GAME_STATE_CONNECTING);
-
-  const [problem, setProblem] = useState(null);
-
-  // in seconds
-  const [timeLeft, setTimeLeft] = useState(null);
-  useEffect(() => {
-    if (gameState === GAME_STATE_STARTING && timeLeft !== null) {
-      const timer = setInterval(() => {
-        setTimeLeft(prevTime => {
-          if (prevTime <= 1) {
-            clearInterval(timer);
-            setGameState(GAME_STATE_GAMING);
-            return 0;
-          }
-          return prevTime - 1;
-        });
-      }, 1000);
-
-      return () => clearInterval(timer);
-    }
-  }, [gameState]);
-
-  const [score, setScore] = useState(null);
-
-  const [result, setResult] = useState(null);
-
-  const onCodeChange = useDebouncedCallback((data) => {
-    sendJsonMessage({ type: 'code', data });
-  }, 1000);
-
-  useEffect(() => {
-    if (readyState === ReadyState.UNINSTANTIATED) {
-      setGameState(GAME_STATE_FAILED);
-    } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
-      if (gameState !== GAME_STATE_FINISHED) {
-        setGameState(GAME_STATE_FAILED);
-      }
-    } else if (readyState === ReadyState.CONNECTING) {
-      setGameState(GAME_STATE_CONNECTING);
-    } else if (readyState === ReadyState.OPEN) {
-      if (lastJsonMessage !== null) {
-        if (lastJsonMessage.type === 'prepare') {
-          const { problem } = lastJsonMessage.data;
-          setProblem(problem);
-          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(GAME_STATE_STARTING);
-        } else if (lastJsonMessage.type === 'finish') {
-          const result = lastJsonMessage.data;
-          setResult(result);
-          setGameState(GAME_STATE_FINISHED);
-        } else if (lastJsonMessage.type === 'score') {
-          const { score } = lastJsonMessage.data;
-          setScore(score);
-        } else {
-          setGameState(GAME_STATE_FAILED);
-        }
-      } else {
-        setGameState(GAME_STATE_WAITING);
-        sendJsonMessage({ type: 'connect', data: {} });
-      }
-    }
-  }, [readyState, lastJsonMessage]);
-
-  return (
-    <div>
-      <h1>Game #{gameId} (team #{team})</h1>
-      <div>
-        { gameState === GAME_STATE_CONNECTING ? (<Connecting gameId={gameId} team={team} />)
-          : gameState === GAME_STATE_WAITING ? (<Waiting gameId={gameId} team={team} />)
-          : gameState === GAME_STATE_STARTING ? (<Starting gameId={gameId} team={team} timeLeft={timeLeft} />)
-          : gameState === GAME_STATE_GAMING ? (<Gaming gameId={gameId} team={team} problem={problem} score={score} onCodeChange={onCodeChange} />)
-          : gameState === GAME_STATE_FINISHED ? (<Finished gameId={gameId} team={team} result={result} />)
-          : (<Failed />) }
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/game/GameState.js b/frontend/src/game/GameState.js
deleted file mode 100644
index 0e733af..0000000
--- a/frontend/src/game/GameState.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const GAME_STATE_CONNECTING = 'connecting';
-export const GAME_STATE_WAITING = 'waiting';
-export const GAME_STATE_STARTING = 'starting';
-export const GAME_STATE_GAMING = 'gaming';
-export const GAME_STATE_FINISHED = 'finished';
-export const GAME_STATE_FAILED = 'failed';
diff --git a/frontend/src/game/apps/Connecting.jsx b/frontend/src/game/apps/Connecting.jsx
deleted file mode 100644
index 464af23..0000000
--- a/frontend/src/game/apps/Connecting.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default () => {
-  return (
-    <div>
-      接続中です......
-    </div>
-  );
-}
diff --git a/frontend/src/game/apps/Failed.jsx b/frontend/src/game/apps/Failed.jsx
deleted file mode 100644
index f96e999..0000000
--- a/frontend/src/game/apps/Failed.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default () => {
-  return (
-    <div>
-      エラー
-    </div>
-  );
-}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..0df5185
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from 'react-router-dom';
+import Home from './routes/Home.tsx';
+import GolfEntry from './routes/golf/GolfEntry.tsx';
+import GolfPlay from './routes/golf/GolfPlay.tsx';
+import GolfWatch from './routes/golf/GolfWatch.tsx';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: (<Home />),
+  },
+  {
+    path: "/golf/entry/",
+    element: (<GolfEntry />),
+  },
+  {
+    path: "/golf/:gameId/play/:playerId/",
+    element: (<GolfPlay />),
+  },
+  {
+    path: "/golf/:gameId/watch/",
+    element: (<GolfWatch />),
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
diff --git a/frontend/src/routes/Home.tsx b/frontend/src/routes/Home.tsx
new file mode 100644
index 0000000..a448ffa
--- /dev/null
+++ b/frontend/src/routes/Home.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <div>
+      <h1>Home</h1>
+    </div>
+  );
+};
diff --git a/frontend/src/routes/golf/GolfEntry.tsx b/frontend/src/routes/golf/GolfEntry.tsx
new file mode 100644
index 0000000..e23c576
--- /dev/null
+++ b/frontend/src/routes/golf/GolfEntry.tsx
@@ -0,0 +1,7 @@
+export default function GolfEntry() {
+  return (
+    <div>
+      <h1>Golf Entry</h1>
+    </div>
+  );
+};
diff --git a/frontend/src/routes/golf/GolfPlay.tsx b/frontend/src/routes/golf/GolfPlay.tsx
new file mode 100644
index 0000000..3cc7d65
--- /dev/null
+++ b/frontend/src/routes/golf/GolfPlay.tsx
@@ -0,0 +1,10 @@
+import App from './play/App.tsx';
+
+export default function GolfPlay() {
+  return (
+    <div>
+      <h1>Golf Play</h1>
+      <App gameId={0} playerId={0} />
+    </div>
+  );
+};
diff --git a/frontend/src/routes/golf/GolfWatch.tsx b/frontend/src/routes/golf/GolfWatch.tsx
new file mode 100644
index 0000000..e5fe93f
--- /dev/null
+++ b/frontend/src/routes/golf/GolfWatch.tsx
@@ -0,0 +1,10 @@
+import App from './watch/App.tsx';
+
+export default function GolfWatch() {
+  return (
+    <div>
+      <h1>Golf Watch</h1>
+      <App gameId={0} />
+    </div>
+  );
+};
diff --git a/frontend/src/routes/golf/play/App.tsx b/frontend/src/routes/golf/play/App.tsx
new file mode 100644
index 0000000..f95f2a0
--- /dev/null
+++ b/frontend/src/routes/golf/play/App.tsx
@@ -0,0 +1,116 @@
+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;
+  playerId: 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 } }
+
+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 [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) {
+      const timer = setInterval(() => {
+        setTimeLeft(prevTime => {
+          // `prevTime` is not null because `timeLeft` is not null.
+          prevTime = prevTime!;
+          if (prevTime <= 1) {
+            clearInterval(timer);
+            setGameState('gaming');
+            return 0;
+          }
+          return prevTime - 1;
+        });
+      }, 1000);
+
+      return () => clearInterval(timer);
+    }
+  }, [gameState]);
+
+  const [score, setScore] = useState<number | null>(null);
+
+  const [result, setResult] = useState<{ yourScore: number | null, opponentScore: number | null } | null>(null);
+
+  const onCodeChange = useDebouncedCallback((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');
+      }
+    } else if (readyState === ReadyState.CONNECTING) {
+      setGameState('connecting');
+    } else if (readyState === ReadyState.OPEN) {
+      if (lastJsonMessage !== null) {
+        if (lastJsonMessage.type === 'prepare') {
+          const { problem } = lastJsonMessage.data;
+          setProblem(problem);
+          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') {
+          const result = lastJsonMessage.data;
+          setResult(result);
+          setGameState('finished');
+        } else if (lastJsonMessage.type === 'score') {
+          const { score } = lastJsonMessage.data;
+          setScore(score);
+        } else {
+          setGameState('failed');
+        }
+      } else {
+        setGameState('waiting');
+        sendJsonMessage({ type: 'connect', data: {} });
+      }
+    }
+  }, [readyState, lastJsonMessage]);
+
+  return (
+    <div>
+      <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} />)}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/routes/golf/play/GameState.ts b/frontend/src/routes/golf/play/GameState.ts
new file mode 100644
index 0000000..28cf91b
--- /dev/null
+++ b/frontend/src/routes/golf/play/GameState.ts
@@ -0,0 +1 @@
+export type GameState = 'connecting' | 'waiting' | 'starting' | 'gaming' | 'finished' | 'failed';
diff --git a/frontend/src/routes/golf/play/apps/Connecting.tsx b/frontend/src/routes/golf/play/apps/Connecting.tsx
new file mode 100644
index 0000000..594a291
--- /dev/null
+++ b/frontend/src/routes/golf/play/apps/Connecting.tsx
@@ -0,0 +1,12 @@
+type Props = {
+  gameId: number;
+  playerId: number;
+};
+
+export default (_props: Props) => {
+  return (
+    <div>
+      接続中です......
+    </div>
+  );
+}
diff --git a/frontend/src/routes/golf/play/apps/Failed.tsx b/frontend/src/routes/golf/play/apps/Failed.tsx
new file mode 100644
index 0000000..6ea56e6
--- /dev/null
+++ b/frontend/src/routes/golf/play/apps/Failed.tsx
@@ -0,0 +1,12 @@
+type Props = {
+  gameId: number;
+  playerId: number;
+};
+
+export default (_props: Props) => {
+  return (
+    <div>
+      エラー
+    </div>
+  );
+}
diff --git a/frontend/src/game/apps/Finished.jsx b/frontend/src/routes/golf/play/apps/Finished.tsx
index efd4e81..9922e07 100644
--- a/frontend/src/game/apps/Finished.jsx
+++ b/frontend/src/routes/golf/play/apps/Finished.tsx
@@ -1,4 +1,10 @@
-export default ({ result }) => {
+type Props = {
+  gameId: number;
+  playerId: number;
+  result: { yourScore: number | null, opponentScore: number | null };
+};
+
+export default ({ result }: Props) => {
   const { yourScore, opponentScore } = result;
   const yourScoreToCompare = yourScore ?? Infinity;
   const opponentScoreToCompare = opponentScore ?? Infinity;
diff --git a/frontend/src/game/apps/Gaming.jsx b/frontend/src/routes/golf/play/apps/Gaming.tsx
index bf47860..27488e3 100644
--- a/frontend/src/game/apps/Gaming.jsx
+++ b/frontend/src/routes/golf/play/apps/Gaming.tsx
@@ -1,5 +1,15 @@
-export default ({ problem, onCodeChange, score }) => {
-  const handleTextChange = (e) => {
+import React from 'react';
+
+type Props = {
+  gameId: number;
+  playerId: number;
+  problem: string | null;
+  onCodeChange: (data: { code: string }) => void;
+  score: number | null;
+};
+
+export default ({ problem, onCodeChange, score }: Props) => {
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onCodeChange({ code: e.target.value });
   };
 
diff --git a/frontend/src/game/apps/Starting.jsx b/frontend/src/routes/golf/play/apps/Starting.tsx
index e66aa34..1c8fadd 100644
--- a/frontend/src/game/apps/Starting.jsx
+++ b/frontend/src/routes/golf/play/apps/Starting.tsx
@@ -1,4 +1,10 @@
-export default ({ timeLeft }) => {
+type Props = {
+  gameId: number;
+  playerId: number;
+  timeLeft: number | null;
+};
+
+export default ({ timeLeft }: Props) => {
   return (
     <>
       <div>
diff --git a/frontend/src/game/apps/Waiting.jsx b/frontend/src/routes/golf/play/apps/Waiting.tsx
index 27fdd76..8112c22 100644
--- a/frontend/src/game/apps/Waiting.jsx
+++ b/frontend/src/routes/golf/play/apps/Waiting.tsx
@@ -1,4 +1,9 @@
-export default () => {
+type Props = {
+  gameId: number;
+  playerId: number;
+};
+
+export default (_props: Props) => {
   return (
     <div>
       対戦相手が現れるのを待っています......
diff --git a/frontend/src/routes/golf/watch/App.tsx b/frontend/src/routes/golf/watch/App.tsx
new file mode 100644
index 0000000..6649251
--- /dev/null
+++ b/frontend/src/routes/golf/watch/App.tsx
@@ -0,0 +1,77 @@
+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 } }
+
+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 [watchState, setWatchState] = useState<WatchState>('connecting');
+
+  const [problem, setProblem] = useState<string | null>(null);
+
+  const [scoreA, setScoreA] = useState<number | null>(null);
+  const [codeA, setCodeA] = useState<string | null>(null);
+  const [scoreB, setScoreB] = useState<number | null>(null);
+  const [codeB, setCodeB] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (readyState === ReadyState.UNINSTANTIATED) {
+      setWatchState('failed');
+    } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
+      if (watchState !== 'finished') {
+        setWatchState('failed');
+      }
+    } else if (readyState === ReadyState.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;
+          setProblem(problem);
+          setScoreA(scoreA_);
+          setCodeA(codeA_);
+          setScoreB(scoreB_);
+          setCodeB(codeB_);
+          setWatchState('gaming');
+        } else {
+          setWatchState('failed');
+        }
+      } else {
+        setWatchState('waiting');
+      }
+    }
+  }, [readyState, lastJsonMessage]);
+
+  return (
+    <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} />)}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/routes/golf/watch/WatchState.ts b/frontend/src/routes/golf/watch/WatchState.ts
new file mode 100644
index 0000000..2e0b066
--- /dev/null
+++ b/frontend/src/routes/golf/watch/WatchState.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000..6f1f356
--- /dev/null
+++ b/frontend/src/routes/golf/watch/apps/Connecting.tsx
@@ -0,0 +1,11 @@
+type Props = {
+  gameId: number;
+};
+
+export default (_props: Props) => {
+  return (
+    <div>
+      接続中です......
+    </div>
+  );
+}
diff --git a/frontend/src/routes/golf/watch/apps/Failed.tsx b/frontend/src/routes/golf/watch/apps/Failed.tsx
new file mode 100644
index 0000000..70d3693
--- /dev/null
+++ b/frontend/src/routes/golf/watch/apps/Failed.tsx
@@ -0,0 +1,11 @@
+type Props = {
+  gameId: number;
+};
+
+export default (_props: Props) => {
+  return (
+    <div>
+      エラー
+    </div>
+  );
+}
diff --git a/frontend/src/watch/apps/Gaming.jsx b/frontend/src/routes/golf/watch/apps/Gaming.tsx
index c844c46..a17b71e 100644
--- a/frontend/src/watch/apps/Gaming.jsx
+++ b/frontend/src/routes/golf/watch/apps/Gaming.tsx
@@ -1,4 +1,13 @@
-export default ({ problem, scoreA, codeA, scoreB, codeB }) => {
+type Props = {
+  gameId: number;
+  problem: string | null;
+  scoreA: number | null;
+  codeA: string | null;
+  scoreB: number | null;
+  codeB: string | null;
+};
+
+export default ({ problem, scoreA, codeA, scoreB, codeB }: Props) => {
   return (
     <>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
diff --git a/frontend/src/watch/apps/Waiting.jsx b/frontend/src/routes/golf/watch/apps/Waiting.tsx
index 27fdd76..bd4f567 100644
--- a/frontend/src/watch/apps/Waiting.jsx
+++ b/frontend/src/routes/golf/watch/apps/Waiting.tsx
@@ -1,4 +1,8 @@
-export default () => {
+type Props = {
+  gameId: number;
+};
+
+export default (_props: Props) => {
   return (
     <div>
       対戦相手が現れるのを待っています......
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/frontend/src/watch.jsx b/frontend/src/watch.jsx
deleted file mode 100644
index c8dcda1..0000000
--- a/frontend/src/watch.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import App from './watch/App.jsx';
-
-const url = new URL(window.location.href);
-const path = url.pathname;
-const match = path.match(/\/golf\/(\d+)\/watch\/$/);
-if (match) {
-  const gameId = match[1];
-
-  createRoot(document.getElementById('app')).render(<App gameId={gameId} />);
-}
diff --git a/frontend/src/watch/App.jsx b/frontend/src/watch/App.jsx
deleted file mode 100644
index fe415bf..0000000
--- a/frontend/src/watch/App.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-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 { WATCH_STATE_CONNECTING, WATCH_STATE_WAITING, WATCH_STATE_GAMING, WATCH_STATE_FINISHED, WATCH_STATE_FAILED } from './WatchState.js';
-
-export default ({ gameId }) => {
-  // 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(socketUrl);
-
-  const [watchState, setWatchState] = useState(WATCH_STATE_CONNECTING);
-
-  const [problem, setProblem] = useState(null);
-
-  const [scoreA, setScoreA] = useState(null);
-  const [codeA, setCodeA] = useState(null);
-  const [scoreB, setScoreB] = useState(null);
-  const [codeB, setCodeB] = useState(null);
-
-  useEffect(() => {
-    if (readyState === ReadyState.UNINSTANTIATED) {
-      setWatchState(WATCH_STATE_FAILED);
-    } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
-      if (watchState !== WATCH_STATE_FINISHED) {
-        setWatchState(WATCH_STATE_FAILED);
-      }
-    } else if (readyState === ReadyState.CONNECTING) {
-      setWatchState(WATCH_STATE_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;
-          setProblem(problem);
-          setScoreA(scoreA_);
-          setCodeA(codeA_);
-          setScoreB(scoreB_);
-          setCodeB(codeB_);
-          setWatchState(WATCH_STATE_GAMING);
-        } else {
-          setWatchState(WATCH_STATE_FAILED);
-        }
-      } else {
-        setWatchState(WATCH_STATE_WAITING);
-      }
-    }
-  }, [readyState, lastJsonMessage]);
-
-  return (
-    <div>
-      <h1>Game #{gameId} watching</h1>
-      <div>
-        { watchState === WATCH_STATE_CONNECTING ? (<Connecting gameId={gameId} />)
-          : watchState === WATCH_STATE_WAITING ? (<Waiting gameId={gameId} />)
-          : watchState === WATCH_STATE_GAMING || watchState === WATCH_STATE_FINISHED ? (<Gaming gameId={gameId} problem={problem} scoreA={scoreA} codeA={codeA} scoreB={scoreB} codeB={codeB} />)
-          : (<Failed />) }
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/watch/WatchState.js b/frontend/src/watch/WatchState.js
deleted file mode 100644
index 71f0ba6..0000000
--- a/frontend/src/watch/WatchState.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const WATCH_STATE_CONNECTING = 'connecting';
-export const WATCH_STATE_WAITING = 'waiting';
-export const WATCH_STATE_STARTING = 'starting';
-export const WATCH_STATE_GAMING = 'gaming';
-export const WATCH_STATE_FINISHED = 'finished';
-export const WATCH_STATE_FAILED = 'failed';
diff --git a/frontend/src/watch/apps/Connecting.jsx b/frontend/src/watch/apps/Connecting.jsx
deleted file mode 100644
index 464af23..0000000
--- a/frontend/src/watch/apps/Connecting.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default () => {
-  return (
-    <div>
-      接続中です......
-    </div>
-  );
-}
diff --git a/frontend/src/watch/apps/Failed.jsx b/frontend/src/watch/apps/Failed.jsx
deleted file mode 100644
index f96e999..0000000
--- a/frontend/src/watch/apps/Failed.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default () => {
-  return (
-    <div>
-      エラー
-    </div>
-  );
-}