From df5abfc272a151c51f0e5e82214cf7aff8cfa880 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Fri, 19 Jul 2024 19:05:55 +0900 Subject: initial commit --- 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/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 +++ 16 files changed, 325 insertions(+) create mode 100644 frontend/src/game.jsx create mode 100644 frontend/src/game/App.jsx create mode 100644 frontend/src/game/GameState.js create mode 100644 frontend/src/game/apps/Connecting.jsx create mode 100644 frontend/src/game/apps/Failed.jsx create mode 100644 frontend/src/game/apps/Finished.jsx create mode 100644 frontend/src/game/apps/Gaming.jsx create mode 100644 frontend/src/game/apps/Starting.jsx create mode 100644 frontend/src/game/apps/Waiting.jsx create mode 100644 frontend/src/watch.jsx create mode 100644 frontend/src/watch/App.jsx create mode 100644 frontend/src/watch/WatchState.js create mode 100644 frontend/src/watch/apps/Connecting.jsx create mode 100644 frontend/src/watch/apps/Failed.jsx create mode 100644 frontend/src/watch/apps/Gaming.jsx create mode 100644 frontend/src/watch/apps/Waiting.jsx (limited to 'frontend/src') diff --git a/frontend/src/game.jsx b/frontend/src/game.jsx new file mode 100644 index 0000000..8b31d54 --- /dev/null +++ b/frontend/src/game.jsx @@ -0,0 +1,12 @@ +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 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 ( +
+

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 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 ( +
+ 接続中です...... +
+ ); +} 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 ( +
+ エラー +
+ ); +} 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 ( + <> +
+ 対戦終了 +
+
+
+ {resultText} +
+
+ あなたのスコア: {yourScore ?? 'なし'} +
+
+ 相手のスコア: {opponentScore ?? 'なし'} +
+
+ + ); +} 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 ( +
+
+
+ {problem} +
+
+ {score == null ? 'Score: -' : `Score: ${score} byte`} +
+
+
+