diff options
Diffstat (limited to 'frontend/app')
| -rw-r--r-- | frontend/app/.server/api/schema.d.ts | 18 | ||||
| -rw-r--r-- | frontend/app/components/GolfPlayApp.client.tsx | 18 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApp.client.tsx | 13 | ||||
| -rw-r--r-- | frontend/app/hooks/useWebSocket.ts | 14 |
4 files changed, 32 insertions, 31 deletions
diff --git a/frontend/app/.server/api/schema.d.ts b/frontend/app/.server/api/schema.d.ts index 93385f2..2d116b9 100644 --- a/frontend/app/.server/api/schema.d.ts +++ b/frontend/app/.server/api/schema.d.ts @@ -104,7 +104,7 @@ export interface components { * @example closed * @enum {string} */ - state: "closed" | "waiting_entries" | "waiting_start" | "prepare" | "starting" | "gaming" | "finished"; + state: "closed" | "waiting" | "starting" | "gaming" | "finished"; /** @example Game 1 */ display_name: string; /** @example 360 */ @@ -130,11 +130,7 @@ export interface components { description: string; }; GamePlayerMessage: components["schemas"]["GamePlayerMessageS2C"] | components["schemas"]["GamePlayerMessageC2S"]; - GamePlayerMessageS2C: components["schemas"]["GamePlayerMessageS2CPrepare"] | components["schemas"]["GamePlayerMessageS2CStart"] | components["schemas"]["GamePlayerMessageS2CExecResult"]; - GamePlayerMessageS2CPrepare: { - /** @constant */ - type: "player:s2c:prepare"; - }; + GamePlayerMessageS2C: components["schemas"]["GamePlayerMessageS2CStart"] | components["schemas"]["GamePlayerMessageS2CExecResult"]; GamePlayerMessageS2CStart: { /** @constant */ type: "player:s2c:start"; @@ -158,15 +154,7 @@ export interface components { /** @example 100 */ score: number | null; }; - GamePlayerMessageC2S: components["schemas"]["GamePlayerMessageC2SEntry"] | components["schemas"]["GamePlayerMessageC2SReady"] | components["schemas"]["GamePlayerMessageC2SCode"] | components["schemas"]["GamePlayerMessageC2SSubmit"]; - GamePlayerMessageC2SEntry: { - /** @constant */ - type: "player:c2s:entry"; - }; - GamePlayerMessageC2SReady: { - /** @constant */ - type: "player:c2s:ready"; - }; + GamePlayerMessageC2S: components["schemas"]["GamePlayerMessageC2SCode"] | components["schemas"]["GamePlayerMessageC2SSubmit"]; GamePlayerMessageC2SCode: { /** @constant */ type: "player:c2s:code"; diff --git a/frontend/app/components/GolfPlayApp.client.tsx b/frontend/app/components/GolfPlayApp.client.tsx index 70c463f..eafbd1d 100644 --- a/frontend/app/components/GolfPlayApp.client.tsx +++ b/frontend/app/components/GolfPlayApp.client.tsx @@ -1,14 +1,15 @@ import { useEffect, useState } from "react"; -import useWebSocket, { ReadyState } from "react-use-websocket"; import { useDebouncedCallback } from "use-debounce"; import type { components } from "../.server/api/schema"; +import useWebSocket, { ReadyState } from "../hooks/useWebSocket"; import GolfPlayAppConnecting from "./GolfPlayApps/GolfPlayAppConnecting"; import GolfPlayAppFinished from "./GolfPlayApps/GolfPlayAppFinished"; import GolfPlayAppGaming from "./GolfPlayApps/GolfPlayAppGaming"; import GolfPlayAppStarting from "./GolfPlayApps/GolfPlayAppStarting"; import GolfPlayAppWaiting from "./GolfPlayApps/GolfPlayAppWaiting"; -type WebSocketMessage = components["schemas"]["GamePlayerMessageS2C"]; +type GamePlayerMessageS2C = components["schemas"]["GamePlayerMessageS2C"]; +type GamePlayerMessageC2S = components["schemas"]["GamePlayerMessageC2S"]; type Game = components["schemas"]["Game"]; @@ -26,8 +27,10 @@ export default function GolfPlayApp({ ? `ws://localhost:8002/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/play?token=${sockToken}` : `wss://t.nil.ninja/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/play?token=${sockToken}`; - const { sendJsonMessage, lastJsonMessage, readyState } = - useWebSocket<WebSocketMessage>(socketUrl, {}); + const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket< + GamePlayerMessageS2C, + GamePlayerMessageC2S + >(socketUrl); const [gameState, setGameState] = useState<GameState>("connecting"); @@ -101,10 +104,7 @@ export default function GolfPlayApp({ } else if (readyState === ReadyState.OPEN) { if (lastJsonMessage !== null) { console.log(lastJsonMessage.type); - if (lastJsonMessage.type === "player:s2c:prepare") { - console.log("player:c2s:ready"); - sendJsonMessage({ type: "player:c2s:ready" }); - } else if (lastJsonMessage.type === "player:s2c:start") { + if (lastJsonMessage.type === "player:s2c:start") { if ( gameState !== "starting" && gameState !== "gaming" && @@ -128,8 +128,6 @@ export default function GolfPlayApp({ } } else { setGameState("waiting"); - console.log("player:c2s:entry"); - sendJsonMessage({ type: "player:c2s:entry" }); } } }, [sendJsonMessage, lastJsonMessage, readyState, gameState, currentScore]); diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx index a9c9989..cef6f9a 100644 --- a/frontend/app/components/GolfWatchApp.client.tsx +++ b/frontend/app/components/GolfWatchApp.client.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; -import useWebSocket, { ReadyState } from "react-use-websocket"; import type { components } from "../.server/api/schema"; +import useWebSocket, { ReadyState } from "../hooks/useWebSocket"; import GolfWatchAppConnecting from "./GolfWatchApps/GolfWatchAppConnecting"; import GolfWatchAppFinished from "./GolfWatchApps/GolfWatchAppFinished"; import GolfWatchAppGaming, { @@ -9,7 +9,8 @@ import GolfWatchAppGaming, { import GolfWatchAppStarting from "./GolfWatchApps/GolfWatchAppStarting"; import GolfWatchAppWaiting from "./GolfWatchApps/GolfWatchAppWaiting"; -type WebSocketMessage = components["schemas"]["GameWatcherMessageS2C"]; +type GameWatcherMessageS2C = components["schemas"]["GameWatcherMessageS2C"]; +type GameWatcherMessageC2S = never; type Game = components["schemas"]["Game"]; @@ -27,10 +28,10 @@ export default function GolfWatchApp({ ? `ws://localhost:8002/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/watch?token=${sockToken}` : `wss://t.nil.ninja/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/watch?token=${sockToken}`; - const { lastJsonMessage, readyState } = useWebSocket<WebSocketMessage>( - socketUrl, - {}, - ); + const { lastJsonMessage, readyState } = useWebSocket< + GameWatcherMessageS2C, + GameWatcherMessageC2S + >(socketUrl); const [gameState, setGameState] = useState<GameState>("connecting"); diff --git a/frontend/app/hooks/useWebSocket.ts b/frontend/app/hooks/useWebSocket.ts new file mode 100644 index 0000000..8fe688f --- /dev/null +++ b/frontend/app/hooks/useWebSocket.ts @@ -0,0 +1,14 @@ +import useWebSocketOriginal, { ReadyState } from "react-use-websocket"; + +export { ReadyState }; + +// Typed version of useWebSocket() hook. +export default function useWebSocket<ReceiveMessage, SendMessage>( + url: string, +): { + sendJsonMessage: (message: SendMessage) => void; + lastJsonMessage: ReceiveMessage; + readyState: ReadyState; +} { + return useWebSocketOriginal(url); +} |