From 18308a22879dc9143a03bcbe53cf0c5e8e49ee1f Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sat, 27 Jul 2024 01:17:37 +0900 Subject: remix --- frontend/src/routes/golf/watch/App.tsx | 111 --------------------------------- 1 file changed, 111 deletions(-) delete mode 100644 frontend/src/routes/golf/watch/App.tsx (limited to 'frontend/src/routes/golf/watch/App.tsx') 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(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" ? ( - - ) : ( - - )} -
-
- ); -} -- cgit v1.2.3-70-g09d2