From df5abfc272a151c51f0e5e82214cf7aff8cfa880 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Fri, 19 Jul 2024 19:05:55 +0900 Subject: initial commit --- frontend/.gitignore | 2 + frontend/build.mjs | 13 +++ frontend/package-lock.json | 143 +++++++++++++++++++++++++++++++++ frontend/package.json | 20 +++++ frontend/public/golf/game.html | 11 +++ frontend/public/golf/index.html | 18 +++++ frontend/public/golf/watch.html | 11 +++ frontend/public/index.html | 17 ++++ frontend/public/race/game.html | 11 +++ frontend/public/race/index.html | 14 ++++ frontend/public/race/watch.html | 11 +++ 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 ++ 27 files changed, 596 insertions(+) create mode 100644 frontend/.gitignore create mode 100644 frontend/build.mjs create mode 100644 frontend/package-lock.json create mode 100644 frontend/package.json create mode 100644 frontend/public/golf/game.html create mode 100644 frontend/public/golf/index.html create mode 100644 frontend/public/golf/watch.html create mode 100644 frontend/public/index.html create mode 100644 frontend/public/race/game.html create mode 100644 frontend/public/race/index.html create mode 100644 frontend/public/race/watch.html 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') diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..8225baa --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,2 @@ +/node_modules +/dist diff --git a/frontend/build.mjs b/frontend/build.mjs new file mode 100644 index 0000000..d48c546 --- /dev/null +++ b/frontend/build.mjs @@ -0,0 +1,13 @@ +import esbuild from 'esbuild'; + +await esbuild.build({ + entryPoints: ['src/game.jsx', 'src/watch.jsx'], + outdir: 'dist/js', + bundle: true, + // minify: true, + minify: false, + sourcemap: true, + platform: 'browser', + format: 'esm', + jsx: 'automatic', +}); diff --git a/frontend/package-lock.json b/frontend/package-lock.json new file mode 100644 index 0000000..7ed1aea --- /dev/null +++ b/frontend/package-lock.json @@ -0,0 +1,143 @@ +{ + "name": "frontend", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "frontend", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-use-websocket": "^4.8.1", + "use-debounce": "^10.0.1" + }, + "devDependencies": { + "esbuild": "^0.21.4" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.4.tgz", + "integrity": "sha512-Td9jv782UMAFsuLZINfUpoF5mZIbAj+jv1YVtE58rFtfvoKRiKSkRGQfHTgKamLVT/fO7203bHa3wU122V/Bdg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.4.tgz", + "integrity": "sha512-sFMcNNrj+Q0ZDolrp5pDhH0nRPN9hLIM3fRPwgbLYJeSHHgnXSnbV3xYgSVuOeLWH9c73VwmEverVzupIv5xuA==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.21.4", + "@esbuild/android-arm": "0.21.4", + "@esbuild/android-arm64": "0.21.4", + "@esbuild/android-x64": "0.21.4", + "@esbuild/darwin-arm64": "0.21.4", + "@esbuild/darwin-x64": "0.21.4", + "@esbuild/freebsd-arm64": "0.21.4", + "@esbuild/freebsd-x64": "0.21.4", + "@esbuild/linux-arm": "0.21.4", + "@esbuild/linux-arm64": "0.21.4", + "@esbuild/linux-ia32": "0.21.4", + "@esbuild/linux-loong64": "0.21.4", + "@esbuild/linux-mips64el": "0.21.4", + "@esbuild/linux-ppc64": "0.21.4", + "@esbuild/linux-riscv64": "0.21.4", + "@esbuild/linux-s390x": "0.21.4", + "@esbuild/linux-x64": "0.21.4", + "@esbuild/netbsd-x64": "0.21.4", + "@esbuild/openbsd-x64": "0.21.4", + "@esbuild/sunos-x64": "0.21.4", + "@esbuild/win32-arm64": "0.21.4", + "@esbuild/win32-ia32": "0.21.4", + "@esbuild/win32-x64": "0.21.4" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/react-use-websocket": { + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-4.8.1.tgz", + "integrity": "sha512-FTXuG5O+LFozmu1BRfrzl7UIQngECvGJmL7BHsK4TYXuVt+mCizVA8lT0hGSIF0Z0TedF7bOo1nRzOUdginhDw==", + "peerDependencies": { + "react": ">= 18.0.0", + "react-dom": ">= 18.0.0" + } + }, + "node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/use-debounce": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.1.tgz", + "integrity": "sha512-0uUXjOfm44e6z4LZ/woZvkM8FwV1wiuoB6xnrrOmeAEjRDDzTLQNRFtYHvqUsJdrz1X37j0rVGIVp144GLHGKg==", + "engines": { + "node": ">= 16.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + } + } +} diff --git a/frontend/package.json b/frontend/package.json new file mode 100644 index 0000000..dd13aac --- /dev/null +++ b/frontend/package.json @@ -0,0 +1,20 @@ +{ + "name": "frontend", + "version": "1.0.0", + "description": "", + "scripts": { + "build": "node build.mjs", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-use-websocket": "^4.8.1", + "use-debounce": "^10.0.1" + }, + "devDependencies": { + "esbuild": "^0.21.4" + } +} diff --git a/frontend/public/golf/game.html b/frontend/public/golf/game.html new file mode 100644 index 0000000..bbe949f --- /dev/null +++ b/frontend/public/golf/game.html @@ -0,0 +1,11 @@ + + + + Golf | Albatross.swift + + +

Golf

+
+ + + diff --git a/frontend/public/golf/index.html b/frontend/public/golf/index.html new file mode 100644 index 0000000..1d5bc9d --- /dev/null +++ b/frontend/public/golf/index.html @@ -0,0 +1,18 @@ + + + + Golf | Albatross.swift + + +

Golf

+
+
+ + +
+
+ +
+
+ + diff --git a/frontend/public/golf/watch.html b/frontend/public/golf/watch.html new file mode 100644 index 0000000..6ab7699 --- /dev/null +++ b/frontend/public/golf/watch.html @@ -0,0 +1,11 @@ + + + + Golf | Albatross.swift + + +

Golf

+
+ + + diff --git a/frontend/public/index.html b/frontend/public/index.html new file mode 100644 index 0000000..8101332 --- /dev/null +++ b/frontend/public/index.html @@ -0,0 +1,17 @@ + + + + Albatross.swift + + +

Albatross.swift

+
+
+ ゴルフ +
+
+ レース +
+
+ + diff --git a/frontend/public/race/game.html b/frontend/public/race/game.html new file mode 100644 index 0000000..08810cc --- /dev/null +++ b/frontend/public/race/game.html @@ -0,0 +1,11 @@ + + + + Race | Albatross.swift + + +

Race

+
+
+ + diff --git a/frontend/public/race/index.html b/frontend/public/race/index.html new file mode 100644 index 0000000..930f2e7 --- /dev/null +++ b/frontend/public/race/index.html @@ -0,0 +1,14 @@ + + + + Race | Albatross.swift + + +

Race

+
+ + + +
+ + diff --git a/frontend/public/race/watch.html b/frontend/public/race/watch.html new file mode 100644 index 0000000..08810cc --- /dev/null +++ b/frontend/public/race/watch.html @@ -0,0 +1,11 @@ + + + + Race | Albatross.swift + + +

Race

+
+
+ + 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`} +
+
+
+