From a46f583437e9b66ebec6fa22e27567a71b17b497 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 21 Jul 2024 16:13:58 +0900 Subject: react router --- frontend/src/game.jsx | 12 --- frontend/src/game/App.jsx | 99 ------------------ frontend/src/game/GameState.js | 6 -- frontend/src/game/apps/Connecting.jsx | 7 -- frontend/src/game/apps/Failed.jsx | 7 -- frontend/src/game/apps/Finished.jsx | 24 ----- frontend/src/game/apps/Gaming.jsx | 24 ----- frontend/src/game/apps/Starting.jsx | 9 -- frontend/src/game/apps/Waiting.jsx | 7 -- frontend/src/main.tsx | 35 +++++++ frontend/src/routes/Home.tsx | 7 ++ frontend/src/routes/golf/GolfEntry.tsx | 7 ++ frontend/src/routes/golf/GolfPlay.tsx | 10 ++ frontend/src/routes/golf/GolfWatch.tsx | 10 ++ frontend/src/routes/golf/play/App.tsx | 116 +++++++++++++++++++++ frontend/src/routes/golf/play/GameState.ts | 1 + frontend/src/routes/golf/play/apps/Connecting.tsx | 12 +++ frontend/src/routes/golf/play/apps/Failed.tsx | 12 +++ frontend/src/routes/golf/play/apps/Finished.tsx | 30 ++++++ frontend/src/routes/golf/play/apps/Gaming.tsx | 34 ++++++ frontend/src/routes/golf/play/apps/Starting.tsx | 15 +++ frontend/src/routes/golf/play/apps/Waiting.tsx | 12 +++ frontend/src/routes/golf/watch/App.tsx | 77 ++++++++++++++ frontend/src/routes/golf/watch/WatchState.ts | 1 + frontend/src/routes/golf/watch/apps/Connecting.tsx | 11 ++ frontend/src/routes/golf/watch/apps/Failed.tsx | 11 ++ frontend/src/routes/golf/watch/apps/Gaming.tsx | 38 +++++++ frontend/src/routes/golf/watch/apps/Waiting.tsx | 11 ++ frontend/src/vite-env.d.ts | 1 + frontend/src/watch.jsx | 11 -- frontend/src/watch/App.jsx | 63 ----------- frontend/src/watch/WatchState.js | 6 -- frontend/src/watch/apps/Connecting.jsx | 7 -- frontend/src/watch/apps/Failed.jsx | 7 -- frontend/src/watch/apps/Gaming.jsx | 29 ------ frontend/src/watch/apps/Waiting.jsx | 7 -- 36 files changed, 451 insertions(+), 325 deletions(-) delete mode 100644 frontend/src/game.jsx delete mode 100644 frontend/src/game/App.jsx delete mode 100644 frontend/src/game/GameState.js delete mode 100644 frontend/src/game/apps/Connecting.jsx delete mode 100644 frontend/src/game/apps/Failed.jsx delete mode 100644 frontend/src/game/apps/Finished.jsx delete mode 100644 frontend/src/game/apps/Gaming.jsx delete mode 100644 frontend/src/game/apps/Starting.jsx delete mode 100644 frontend/src/game/apps/Waiting.jsx create mode 100644 frontend/src/main.tsx create mode 100644 frontend/src/routes/Home.tsx create mode 100644 frontend/src/routes/golf/GolfEntry.tsx create mode 100644 frontend/src/routes/golf/GolfPlay.tsx create mode 100644 frontend/src/routes/golf/GolfWatch.tsx create mode 100644 frontend/src/routes/golf/play/App.tsx create mode 100644 frontend/src/routes/golf/play/GameState.ts create mode 100644 frontend/src/routes/golf/play/apps/Connecting.tsx create mode 100644 frontend/src/routes/golf/play/apps/Failed.tsx create mode 100644 frontend/src/routes/golf/play/apps/Finished.tsx create mode 100644 frontend/src/routes/golf/play/apps/Gaming.tsx create mode 100644 frontend/src/routes/golf/play/apps/Starting.tsx create mode 100644 frontend/src/routes/golf/play/apps/Waiting.tsx create mode 100644 frontend/src/routes/golf/watch/App.tsx create mode 100644 frontend/src/routes/golf/watch/WatchState.ts create mode 100644 frontend/src/routes/golf/watch/apps/Connecting.tsx create mode 100644 frontend/src/routes/golf/watch/apps/Failed.tsx create mode 100644 frontend/src/routes/golf/watch/apps/Gaming.tsx create mode 100644 frontend/src/routes/golf/watch/apps/Waiting.tsx create mode 100644 frontend/src/vite-env.d.ts delete mode 100644 frontend/src/watch.jsx delete mode 100644 frontend/src/watch/App.jsx delete mode 100644 frontend/src/watch/WatchState.js delete mode 100644 frontend/src/watch/apps/Connecting.jsx delete mode 100644 frontend/src/watch/apps/Failed.jsx delete mode 100644 frontend/src/watch/apps/Gaming.jsx delete mode 100644 frontend/src/watch/apps/Waiting.jsx (limited to 'frontend/src') 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(); -} 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 ( -
-

Game #{gameId} (team #{team})

-
- { gameState === GAME_STATE_CONNECTING ? () - : gameState === GAME_STATE_WAITING ? () - : gameState === GAME_STATE_STARTING ? () - : gameState === GAME_STATE_GAMING ? () - : gameState === GAME_STATE_FINISHED ? () - : () } -
-
- ); -}; 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 ( -
- 接続中です...... -
- ); -} 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 ( -
- エラー -
- ); -} diff --git a/frontend/src/game/apps/Finished.jsx b/frontend/src/game/apps/Finished.jsx deleted file mode 100644 index efd4e81..0000000 --- a/frontend/src/game/apps/Finished.jsx +++ /dev/null @@ -1,24 +0,0 @@ -export default ({ result }) => { - const { yourScore, opponentScore } = result; - const yourScoreToCompare = yourScore ?? Infinity; - const opponentScoreToCompare = opponentScore ?? Infinity; - const resultText = yourScoreToCompare === opponentScoreToCompare ? '引き分け' : (yourScoreToCompare < opponentScoreToCompare ? 'あなたの勝ち' : 'あなたの負け'); - return ( - <> -
- 対戦終了 -
-
-
- {resultText} -
-
- あなたのスコア: {yourScore ?? 'なし'} -
-
- 相手のスコア: {opponentScore ?? 'なし'} -
-
- - ); -} diff --git a/frontend/src/game/apps/Gaming.jsx b/frontend/src/game/apps/Gaming.jsx deleted file mode 100644 index bf47860..0000000 --- a/frontend/src/game/apps/Gaming.jsx +++ /dev/null @@ -1,24 +0,0 @@ -export default ({ problem, onCodeChange, score }) => { - const handleTextChange = (e) => { - onCodeChange({ code: e.target.value }); - }; - - return ( -
-
-
- {problem} -
-
- {score == null ? 'Score: -' : `Score: ${score} byte`} -
-
-
-