diff options
| author | nsfisis <nsfisis@gmail.com> | 2024-07-21 16:13:58 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2024-07-21 16:13:58 +0900 |
| commit | a46f583437e9b66ebec6fa22e27567a71b17b497 (patch) | |
| tree | f375449ee38de9701637fbe77c79111da9f76307 /frontend/src/watch | |
| parent | 877c19ecbb2425d756f3cbafb1cf52f69279e92d (diff) | |
| download | iosdc-japan-2024-albatross-a46f583437e9b66ebec6fa22e27567a71b17b497.tar.gz iosdc-japan-2024-albatross-a46f583437e9b66ebec6fa22e27567a71b17b497.tar.zst iosdc-japan-2024-albatross-a46f583437e9b66ebec6fa22e27567a71b17b497.zip | |
react router
Diffstat (limited to 'frontend/src/watch')
| -rw-r--r-- | frontend/src/watch/App.jsx | 63 | ||||
| -rw-r--r-- | frontend/src/watch/WatchState.js | 6 | ||||
| -rw-r--r-- | frontend/src/watch/apps/Connecting.jsx | 7 | ||||
| -rw-r--r-- | frontend/src/watch/apps/Failed.jsx | 7 | ||||
| -rw-r--r-- | frontend/src/watch/apps/Gaming.jsx | 29 | ||||
| -rw-r--r-- | frontend/src/watch/apps/Waiting.jsx | 7 |
6 files changed, 0 insertions, 119 deletions
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> - ); -} diff --git a/frontend/src/watch/apps/Gaming.jsx b/frontend/src/watch/apps/Gaming.jsx deleted file mode 100644 index c844c46..0000000 --- a/frontend/src/watch/apps/Gaming.jsx +++ /dev/null @@ -1,29 +0,0 @@ -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 deleted file mode 100644 index 27fdd76..0000000 --- a/frontend/src/watch/apps/Waiting.jsx +++ /dev/null @@ -1,7 +0,0 @@ -export default () => { - return ( - <div> - 対戦相手が現れるのを待っています...... - </div> - ); -} |
