8 files changed, 183 insertions, 0 deletions
diff --git a/frontend/src/game/App.jsx b/frontend/src/game/App.jsx
new file mode 100644
index 0000000..9a41ea4
--- /dev/null
+++ b/frontend/src/game/App.jsx
@@ -0,0 +1,99 @@
+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
new file mode 100644
index 0000000..0e733af
--- /dev/null
+++ b/frontend/src/game/GameState.js
@@ -0,0 +1,6 @@
+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
new file mode 100644
index 0000000..464af23
--- /dev/null
+++ b/frontend/src/game/apps/Connecting.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      接続中です......
+    </div>
+  );
+}
diff --git a/frontend/src/game/apps/Failed.jsx b/frontend/src/game/apps/Failed.jsx
new file mode 100644
index 0000000..f96e999
--- /dev/null
+++ b/frontend/src/game/apps/Failed.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      エラー
+    </div>
+  );
+}
diff --git a/frontend/src/game/apps/Finished.jsx b/frontend/src/game/apps/Finished.jsx
new file mode 100644
index 0000000..efd4e81
--- /dev/null
+++ b/frontend/src/game/apps/Finished.jsx
@@ -0,0 +1,24 @@
+export default ({ result }) => {
+  const { yourScore, opponentScore } = result;
+  const yourScoreToCompare = yourScore ?? Infinity;
+  const opponentScoreToCompare = opponentScore ?? Infinity;
+  const resultText = yourScoreToCompare === opponentScoreToCompare ? '引き分け' : (yourScoreToCompare < opponentScoreToCompare ? 'あなたの勝ち' : 'あなたの負け');
+  return (
+    <>
+      <div>
+        対戦終了
+      </div>
+      <div>
+        <div>
+          {resultText}
+        </div>
+        <div>
+          あなたのスコア: {yourScore ?? 'なし'}
+        </div>
+        <div>
+          相手のスコア: {opponentScore ?? 'なし'}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/game/apps/Gaming.jsx b/frontend/src/game/apps/Gaming.jsx
new file mode 100644
index 0000000..bf47860
--- /dev/null
+++ b/frontend/src/game/apps/Gaming.jsx
@@ -0,0 +1,24 @@
+export default ({ problem, onCodeChange, score }) => {
+  const handleTextChange = (e) => {
+    onCodeChange({ code: e.target.value });
+  };
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <div style={{ flex: 1, padding: '10px', borderRight: '1px solid #ccc' }}>
+        <div>
+          {problem}
+        </div>
+        <div>
+          {score == null ? 'Score: -' : `Score: ${score} byte`}
+        </div>
+      </div>
+      <div style={{ flex: 1, padding: '10px' }}>
+        <textarea
+          style={{ width: '100%', height: '100%' }}
+          onChange={handleTextChange}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/game/apps/Starting.jsx b/frontend/src/game/apps/Starting.jsx
new file mode 100644
index 0000000..e66aa34
--- /dev/null
+++ b/frontend/src/game/apps/Starting.jsx
@@ -0,0 +1,9 @@
+export default ({ timeLeft }) => {
+  return (
+    <>
+      <div>
+        対戦相手が見つかりました。{timeLeft} 秒後にゲームを開始します。
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/game/apps/Waiting.jsx b/frontend/src/game/apps/Waiting.jsx
new file mode 100644
index 0000000..27fdd76
--- /dev/null
+++ b/frontend/src/game/apps/Waiting.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      対戦相手が現れるのを待っています......
+    </div>
+  );
+}