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/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 ++++ 6 files changed, 149 insertions(+) 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 (limited to 'frontend/src/routes/golf/watch') 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(socketUrl); + + const [watchState, setWatchState] = useState('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('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 ( +
+

Game #{gameId} watching

+
+ {watchState === 'connecting' ? () + : watchState === 'waiting' ? () + : watchState === 'gaming' || watchState === 'finished' ? () + : ()} +
+
+ ); +}; 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 ( +
+ 接続中です...... +
+ ); +} 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 ( +
+ エラー +
+ ); +} 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 ( + <> +
+
+ {problem} +
+
+
+
+ {scoreA} +
+
+ 
{codeA}
+
+
+
+
+ {scoreB} +
+
+ 
{codeB}
+
+
+
+
+ + ); +}; 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 ( +
+ 対戦相手が現れるのを待っています...... +
+ ); +} -- cgit v1.2.3-70-g09d2