diff options
Diffstat (limited to 'frontend/src/routes/golf/watch/App.tsx')
| -rw-r--r-- | frontend/src/routes/golf/watch/App.tsx | 111 |
1 files changed, 0 insertions, 111 deletions
diff --git a/frontend/src/routes/golf/watch/App.tsx b/frontend/src/routes/golf/watch/App.tsx deleted file mode 100644 index ac2db23..0000000 --- a/frontend/src/routes/golf/watch/App.tsx +++ /dev/null @@ -1,111 +0,0 @@ -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 function App({ 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> - ); -} |
