diff options
Diffstat (limited to 'frontend')
27 files changed, 596 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<html> + <head> + <title>Golf | Albatross.swift</title> + </head> + <body> + <h1>Golf</h1> + <div id="app"></div> + <script type="module" src="/js/game.js"></script> + </body> +</html> 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 @@ +<!DOCTYPE html> +<html> + <head> + <title>Golf | Albatross.swift</title> + </head> + <body> + <h1>Golf</h1> + <form method="post"> + <div> + <label for="name">名前</label> + <input type="text" name="name" required> + </div> + <div> + <button type="submit">開始</button> + </div> + </form> + </body> +</html> 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 @@ +<!DOCTYPE html> +<html> + <head> + <title>Golf | Albatross.swift</title> + </head> + <body> + <h1>Golf</h1> + <div id="app"></div> + <script type="module" src="/js/watch.js"></script> + </body> +</html> 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 @@ +<!DOCTYPE html> +<html> + <head> + <title>Albatross.swift</title> + </head> + <body> + <h1>Albatross.swift</h1> + <div> + <div> + <a href="/golf/">ゴルフ</a> + </div> + <div> + <a href="/race/">レース</a> + </div> + </div> + </body> +</html> 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 @@ +<!DOCTYPE html> +<html> + <head> + <title>Race | Albatross.swift</title> + </head> + <body> + <h1>Race</h1> + <div> + </div> + </body> +</html> 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 @@ +<!DOCTYPE html> +<html> + <head> + <title>Race | Albatross.swift</title> + </head> + <body> + <h1>Race</h1> + <form> + <label for="name">名前</label> + <input type="text" name="name"> + <button type="submit">開始</button> + </form> + </body> +</html> 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 @@ +<!DOCTYPE html> +<html> + <head> + <title>Race | Albatross.swift</title> + </head> + <body> + <h1>Race</h1> + <div> + </div> + </body> +</html> 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(<App gameId={gameId} team={team} />); +} 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 ( + <div> + <h1>Game #{gameId} (team #{team})</h1> + <div> + { gameState === GAME_STATE_CONNECTING ? (<Connecting gameId={gameId} team={team} />) + : gameState === GAME_STATE_WAITING ? (<Waiting gameId={gameId} team={team} />) + : gameState === GAME_STATE_STARTING ? (<Starting gameId={gameId} team={team} timeLeft={timeLeft} />) + : gameState === GAME_STATE_GAMING ? (<Gaming gameId={gameId} team={team} problem={problem} score={score} onCodeChange={onCodeChange} />) + : gameState === GAME_STATE_FINISHED ? (<Finished gameId={gameId} team={team} result={result} />) + : (<Failed />) } + </div> + </div> + ); +}; 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 ( + <div> + 接続中です...... + </div> + ); +} 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 ( + <div> + エラー + </div> + ); +} 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 ( + <> + <div> + 対戦終了 + </div> + <div> + <div> + {resultText} + </div> + <div> + あなたのスコア: {yourScore ?? 'なし'} + </div> + <div> + 相手のスコア: {opponentScore ?? 'なし'} + </div> + </div> + </> + ); +} 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 ( + <div style={{ display: 'flex' }}> + <div style={{ flex: 1, padding: '10px', borderRight: '1px solid #ccc' }}> + <div> + {problem} + </div> + <div> + {score == null ? 'Score: -' : `Score: ${score} byte`} + </div> + </div> + <div style={{ flex: 1, padding: '10px' }}> + <textarea + style={{ width: '100%', height: '100%' }} + onChange={handleTextChange} + /> + </div> + </div> + ); +}; diff --git a/frontend/src/game/apps/Starting.jsx b/frontend/src/game/apps/Starting.jsx new file mode 100644 index 0000000..e66aa34 --- /dev/null +++ b/frontend/src/game/apps/Starting.jsx @@ -0,0 +1,9 @@ +export default ({ timeLeft }) => { + return ( + <> + <div> + 対戦相手が見つかりました。{timeLeft} 秒後にゲームを開始します。 + </div> + </> + ); +} diff --git a/frontend/src/game/apps/Waiting.jsx b/frontend/src/game/apps/Waiting.jsx new file mode 100644 index 0000000..27fdd76 --- /dev/null +++ b/frontend/src/game/apps/Waiting.jsx @@ -0,0 +1,7 @@ +export default () => { + return ( + <div> + 対戦相手が現れるのを待っています...... + </div> + ); +} diff --git a/frontend/src/watch.jsx b/frontend/src/watch.jsx new file mode 100644 index 0000000..c8dcda1 --- /dev/null +++ b/frontend/src/watch.jsx @@ -0,0 +1,11 @@ +import { createRoot } from 'react-dom/client'; +import App from './watch/App.jsx'; + +const url = new URL(window.location.href); +const path = url.pathname; +const match = path.match(/\/golf\/(\d+)\/watch\/$/); +if (match) { + const gameId = match[1]; + + createRoot(document.getElementById('app')).render(<App gameId={gameId} />); +} 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> + ); +} |