diff options
Diffstat (limited to 'frontend/src/routes')
18 files changed, 415 insertions, 0 deletions
diff --git a/frontend/src/routes/Home.tsx b/frontend/src/routes/Home.tsx new file mode 100644 index 0000000..a448ffa --- /dev/null +++ b/frontend/src/routes/Home.tsx @@ -0,0 +1,7 @@ +export default function Home() { + return ( + <div> + <h1>Home</h1> + </div> + ); +}; diff --git a/frontend/src/routes/golf/GolfEntry.tsx b/frontend/src/routes/golf/GolfEntry.tsx new file mode 100644 index 0000000..e23c576 --- /dev/null +++ b/frontend/src/routes/golf/GolfEntry.tsx @@ -0,0 +1,7 @@ +export default function GolfEntry() { + return ( + <div> + <h1>Golf Entry</h1> + </div> + ); +}; diff --git a/frontend/src/routes/golf/GolfPlay.tsx b/frontend/src/routes/golf/GolfPlay.tsx new file mode 100644 index 0000000..3cc7d65 --- /dev/null +++ b/frontend/src/routes/golf/GolfPlay.tsx @@ -0,0 +1,10 @@ +import App from './play/App.tsx'; + +export default function GolfPlay() { + return ( + <div> + <h1>Golf Play</h1> + <App gameId={0} playerId={0} /> + </div> + ); +}; diff --git a/frontend/src/routes/golf/GolfWatch.tsx b/frontend/src/routes/golf/GolfWatch.tsx new file mode 100644 index 0000000..e5fe93f --- /dev/null +++ b/frontend/src/routes/golf/GolfWatch.tsx @@ -0,0 +1,10 @@ +import App from './watch/App.tsx'; + +export default function GolfWatch() { + return ( + <div> + <h1>Golf Watch</h1> + <App gameId={0} /> + </div> + ); +}; diff --git a/frontend/src/routes/golf/play/App.tsx b/frontend/src/routes/golf/play/App.tsx new file mode 100644 index 0000000..f95f2a0 --- /dev/null +++ b/frontend/src/routes/golf/play/App.tsx @@ -0,0 +1,116 @@ +import { useState, useEffect } from 'react'; +import useWebSocket, { ReadyState } from 'react-use-websocket'; +import { useDebouncedCallback } from 'use-debounce'; +import Connecting from './apps/Connecting.tsx'; +import Waiting from './apps/Waiting.tsx'; +import Starting from './apps/Starting.tsx'; +import Gaming from './apps/Gaming.tsx'; +import Finished from './apps/Finished.tsx'; +import Failed from './apps/Failed.tsx'; +import type { GameState } from './GameState.ts'; + +type Props = { + gameId: number; + playerId: number; +}; + +type WebSocketMessage = + { type: 'connect' } + | { type: 'prepare'; data: { problem: string } } + | { type: 'ready' } + | { type: 'start'; data: { startTime: string } } + | { type: 'finish'; data: { yourScore: number | null; opponentScore: number | null } } + | { type: 'score'; data: { score: number } } + | { type: 'code'; data: { code: string } } + | { type: 'watch'; data: { problem: string; scoreA: number | null; codeA: string; scoreB: number | null; codeB: string } } + +export default ({ gameId, playerId }: Props) => { + // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/${playerId}/`; + const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/${playerId}/`; + + const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket<WebSocketMessage>(socketUrl); + + const [gameState, setGameState] = useState<GameState>('connecting'); + + const [problem, setProblem] = useState<string | null>(null); + + // in seconds + const [timeLeft, setTimeLeft] = useState<number | null>(null); + useEffect(() => { + if (gameState === 'starting' && timeLeft !== null) { + const timer = setInterval(() => { + setTimeLeft(prevTime => { + // `prevTime` is not null because `timeLeft` is not null. + prevTime = prevTime!; + if (prevTime <= 1) { + clearInterval(timer); + setGameState('gaming'); + return 0; + } + return prevTime - 1; + }); + }, 1000); + + return () => clearInterval(timer); + } + }, [gameState]); + + const [score, setScore] = useState<number | null>(null); + + const [result, setResult] = useState<{ yourScore: number | null, opponentScore: number | null } | null>(null); + + const onCodeChange = useDebouncedCallback((data) => { + sendJsonMessage({ type: 'code', data }); + }, 1000); + + useEffect(() => { + if (readyState === ReadyState.UNINSTANTIATED) { + setGameState('failed'); + } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) { + if (gameState !== 'finished') { + setGameState('failed'); + } + } else if (readyState === ReadyState.CONNECTING) { + setGameState('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('starting'); + } else if (lastJsonMessage.type === 'finish') { + const result = lastJsonMessage.data; + setResult(result); + setGameState('finished'); + } else if (lastJsonMessage.type === 'score') { + const { score } = lastJsonMessage.data; + setScore(score); + } else { + setGameState('failed'); + } + } else { + setGameState('waiting'); + sendJsonMessage({ type: 'connect', data: {} }); + } + } + }, [readyState, lastJsonMessage]); + + return ( + <div> + <h1>Game #{gameId} (playerId #{playerId})</h1> + <div> + {gameState === 'connecting' ? (<Connecting gameId={gameId} playerId={playerId} />) + : gameState === 'waiting' ? (<Waiting gameId={gameId} playerId={playerId} />) + : gameState === 'starting' ? (<Starting gameId={gameId} playerId={playerId} timeLeft={timeLeft} />) + : gameState === 'gaming' ? (<Gaming gameId={gameId} playerId={playerId} problem={problem} score={score} onCodeChange={onCodeChange} />) + : gameState === 'finished' ? (<Finished gameId={gameId} playerId={playerId} result={result!} />) + : (<Failed gameId={gameId} playerId={playerId} />)} + </div> + </div> + ); +}; diff --git a/frontend/src/routes/golf/play/GameState.ts b/frontend/src/routes/golf/play/GameState.ts new file mode 100644 index 0000000..28cf91b --- /dev/null +++ b/frontend/src/routes/golf/play/GameState.ts @@ -0,0 +1 @@ +export type GameState = 'connecting' | 'waiting' | 'starting' | 'gaming' | 'finished' | 'failed'; diff --git a/frontend/src/routes/golf/play/apps/Connecting.tsx b/frontend/src/routes/golf/play/apps/Connecting.tsx new file mode 100644 index 0000000..594a291 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Connecting.tsx @@ -0,0 +1,12 @@ +type Props = { + gameId: number; + playerId: number; +}; + +export default (_props: Props) => { + return ( + <div> + 接続中です...... + </div> + ); +} diff --git a/frontend/src/routes/golf/play/apps/Failed.tsx b/frontend/src/routes/golf/play/apps/Failed.tsx new file mode 100644 index 0000000..6ea56e6 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Failed.tsx @@ -0,0 +1,12 @@ +type Props = { + gameId: number; + playerId: number; +}; + +export default (_props: Props) => { + return ( + <div> + エラー + </div> + ); +} diff --git a/frontend/src/routes/golf/play/apps/Finished.tsx b/frontend/src/routes/golf/play/apps/Finished.tsx new file mode 100644 index 0000000..9922e07 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Finished.tsx @@ -0,0 +1,30 @@ +type Props = { + gameId: number; + playerId: number; + result: { yourScore: number | null, opponentScore: number | null }; +}; + +export default ({ result }: Props) => { + 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/routes/golf/play/apps/Gaming.tsx b/frontend/src/routes/golf/play/apps/Gaming.tsx new file mode 100644 index 0000000..27488e3 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Gaming.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +type Props = { + gameId: number; + playerId: number; + problem: string | null; + onCodeChange: (data: { code: string }) => void; + score: number | null; +}; + +export default ({ problem, onCodeChange, score }: Props) => { + const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { + 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/routes/golf/play/apps/Starting.tsx b/frontend/src/routes/golf/play/apps/Starting.tsx new file mode 100644 index 0000000..1c8fadd --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Starting.tsx @@ -0,0 +1,15 @@ +type Props = { + gameId: number; + playerId: number; + timeLeft: number | null; +}; + +export default ({ timeLeft }: Props) => { + return ( + <> + <div> + 対戦相手が見つかりました。{timeLeft} 秒後にゲームを開始します。 + </div> + </> + ); +} diff --git a/frontend/src/routes/golf/play/apps/Waiting.tsx b/frontend/src/routes/golf/play/apps/Waiting.tsx new file mode 100644 index 0000000..8112c22 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Waiting.tsx @@ -0,0 +1,12 @@ +type Props = { + gameId: number; + playerId: number; +}; + +export default (_props: Props) => { + return ( + <div> + 対戦相手が現れるのを待っています...... + </div> + ); +} diff --git a/frontend/src/routes/golf/watch/App.tsx b/frontend/src/routes/golf/watch/App.tsx new file mode 100644 index 0000000..6649251 --- /dev/null +++ b/frontend/src/routes/golf/watch/App.tsx @@ -0,0 +1,77 @@ +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 type { WatchState } from './WatchState.js'; + +type Props = { + gameId: number; +}; + +type WebSocketMessage = + { type: 'connect' } + | { type: 'prepare'; data: { problem: string } } + | { type: 'ready' } + | { type: 'start'; data: { startTime: string } } + | { type: 'finish'; data: { yourScore: number | null; opponentScore: number | null } } + | { type: 'score'; data: { score: number } } + | { type: 'code'; data: { code: string } } + | { type: 'watch'; data: { problem: string; scoreA: number | null; codeA: string; scoreB: number | null; codeB: string } } + +export default ({ gameId }: Props) => { + // 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<WebSocketMessage>(socketUrl); + + const [watchState, setWatchState] = useState<WatchState>('connecting'); + + const [problem, setProblem] = useState<string | null>(null); + + const [scoreA, setScoreA] = useState<number | null>(null); + const [codeA, setCodeA] = useState<string | null>(null); + const [scoreB, setScoreB] = useState<number | null>(null); + const [codeB, setCodeB] = useState<string | null>(null); + + useEffect(() => { + if (readyState === ReadyState.UNINSTANTIATED) { + setWatchState('failed'); + } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) { + if (watchState !== 'finished') { + setWatchState('failed'); + } + } else if (readyState === ReadyState.CONNECTING) { + setWatchState('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('gaming'); + } else { + setWatchState('failed'); + } + } else { + setWatchState('waiting'); + } + } + }, [readyState, lastJsonMessage]); + + return ( + <div> + <h1>Game #{gameId} watching</h1> + <div> + {watchState === 'connecting' ? (<Connecting gameId={gameId} />) + : watchState === 'waiting' ? (<Waiting gameId={gameId} />) + : watchState === 'gaming' || watchState === 'finished' ? (<Gaming gameId={gameId} problem={problem} scoreA={scoreA} codeA={codeA} scoreB={scoreB} codeB={codeB} />) + : (<Failed gameId={gameId} />)} + </div> + </div> + ); +}; diff --git a/frontend/src/routes/golf/watch/WatchState.ts b/frontend/src/routes/golf/watch/WatchState.ts new file mode 100644 index 0000000..2e0b066 --- /dev/null +++ b/frontend/src/routes/golf/watch/WatchState.ts @@ -0,0 +1 @@ +export type WatchState = 'connecting' | 'waiting' | 'starting' | 'gaming' | 'finished' | 'failed'; diff --git a/frontend/src/routes/golf/watch/apps/Connecting.tsx b/frontend/src/routes/golf/watch/apps/Connecting.tsx new file mode 100644 index 0000000..6f1f356 --- /dev/null +++ b/frontend/src/routes/golf/watch/apps/Connecting.tsx @@ -0,0 +1,11 @@ +type Props = { + gameId: number; +}; + +export default (_props: Props) => { + return ( + <div> + 接続中です...... + </div> + ); +} diff --git a/frontend/src/routes/golf/watch/apps/Failed.tsx b/frontend/src/routes/golf/watch/apps/Failed.tsx new file mode 100644 index 0000000..70d3693 --- /dev/null +++ b/frontend/src/routes/golf/watch/apps/Failed.tsx @@ -0,0 +1,11 @@ +type Props = { + gameId: number; +}; + +export default (_props: Props) => { + return ( + <div> + エラー + </div> + ); +} diff --git a/frontend/src/routes/golf/watch/apps/Gaming.tsx b/frontend/src/routes/golf/watch/apps/Gaming.tsx new file mode 100644 index 0000000..a17b71e --- /dev/null +++ b/frontend/src/routes/golf/watch/apps/Gaming.tsx @@ -0,0 +1,38 @@ +type Props = { + gameId: number; + problem: string | null; + scoreA: number | null; + codeA: string | null; + scoreB: number | null; + codeB: string | null; +}; + +export default ({ problem, scoreA, codeA, scoreB, codeB }: Props) => { + 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/routes/golf/watch/apps/Waiting.tsx b/frontend/src/routes/golf/watch/apps/Waiting.tsx new file mode 100644 index 0000000..bd4f567 --- /dev/null +++ b/frontend/src/routes/golf/watch/apps/Waiting.tsx @@ -0,0 +1,11 @@ +type Props = { + gameId: number; +}; + +export default (_props: Props) => { + return ( + <div> + 対戦相手が現れるのを待っています...... + </div> + ); +} |