6 files changed, 119 insertions, 0 deletions
diff --git a/frontend/src/watch/App.jsx b/frontend/src/watch/App.jsx
new file mode 100644
index 0000000..fe415bf
--- /dev/null
+++ b/frontend/src/watch/App.jsx
@@ -0,0 +1,63 @@
+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
new file mode 100644
index 0000000..71f0ba6
--- /dev/null
+++ b/frontend/src/watch/WatchState.js
@@ -0,0 +1,6 @@
+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
new file mode 100644
index 0000000..464af23
--- /dev/null
+++ b/frontend/src/watch/apps/Connecting.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      接続中です......
+    </div>
+  );
+}
diff --git a/frontend/src/watch/apps/Failed.jsx b/frontend/src/watch/apps/Failed.jsx
new file mode 100644
index 0000000..f96e999
--- /dev/null
+++ b/frontend/src/watch/apps/Failed.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      エラー
+    </div>
+  );
+}
diff --git a/frontend/src/watch/apps/Gaming.jsx b/frontend/src/watch/apps/Gaming.jsx
new file mode 100644
index 0000000..c844c46
--- /dev/null
+++ b/frontend/src/watch/apps/Gaming.jsx
@@ -0,0 +1,29 @@
+export default ({ problem, scoreA, codeA, scoreB, codeB }) => {
+  return (
+    <>
+      <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={{ flex: 3 }}>
+              <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={{ flex: 3 }}>
+              <pre><code>{codeB}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/watch/apps/Waiting.jsx b/frontend/src/watch/apps/Waiting.jsx
new file mode 100644
index 0000000..27fdd76
--- /dev/null
+++ b/frontend/src/watch/apps/Waiting.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      対戦相手が現れるのを待っています......
+    </div>
+  );
+}