diff --git a/apps/client/src/app.tsx b/apps/client/src/app.tsx index bf71d0f..a7954dd 100644 --- a/apps/client/src/app.tsx +++ b/apps/client/src/app.tsx @@ -1,23 +1,23 @@ import { socketClient } from "./network/SocketClient"; -import { useGameFlow } from "./hooks/useGameFlow"; +import { useAppFlow } from "./hooks/useAppFlow"; // 画面遷移先シーンコンポーネント群 import { TitleScene } from "./scenes/title/TitleScene"; import { LobbyScene } from "./scenes/lobby/LobbyScene"; import { GameScene } from "./scenes/game/GameScene"; -import { GameState } from "@repo/shared"; +import { AppState } from "@repo/shared"; export default function App() { - const { gameState, room, myId } = useGameFlow(); + const { appState, room, myId } = useAppFlow(); // タイトル画面分岐 - if (gameState === GameState.TITLE) { - return socketClient.joinRoom(payload.roomId, payload.playerName)} />; + if (appState === AppState.TITLE) { + return socketClient.joinRoom(payload)} />; } // ロビー画面分岐 - if (gameState === GameState.LOBBY) { + if (appState === AppState.LOBBY) { return socketClient.startGame()} />; } diff --git a/apps/client/src/hooks/useAppFlow.ts b/apps/client/src/hooks/useAppFlow.ts new file mode 100644 index 0000000..f96189e --- /dev/null +++ b/apps/client/src/hooks/useAppFlow.ts @@ -0,0 +1,27 @@ +import { useEffect, useState } from "react"; +import { socketClient } from "../network/SocketClient"; +import { AppState } from "@repo/shared"; +import type { AppState as AppStateType, Room } from "@repo/shared"; + +type AppFlowState = { + appState: AppStateType; + room: Room | null; + myId: string | null; +}; + +export const useAppFlow = (): AppFlowState => { + const [appState, setAppState] = useState(AppState.TITLE); + const [room, setRoom] = useState(null); + const [myId, setMyId] = useState(null); + + useEffect(() => { + socketClient.onConnect((id) => setMyId(id)); + socketClient.onRoomUpdate((updatedRoom) => { + setRoom(updatedRoom); + setAppState(AppState.LOBBY); + }); + socketClient.onGameStart(() => setAppState(AppState.PLAYING)); + }, []); + + return { appState, room, myId }; +}; diff --git a/apps/client/src/hooks/useGameFlow.ts b/apps/client/src/hooks/useGameFlow.ts deleted file mode 100644 index 6b1fa3d..0000000 --- a/apps/client/src/hooks/useGameFlow.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { useEffect, useState } from "react"; -import { socketClient } from "../network/SocketClient"; -import { GameState } from "@repo/shared"; -import type { GameStateType, Room } from "@repo/shared"; - -type GameFlowState = { - gameState: GameStateType; - room: Room | null; - myId: string | null; -}; - -export const useGameFlow = (): GameFlowState => { - const [gameState, setGameState] = useState(GameState.TITLE); - const [room, setRoom] = useState(null); - const [myId, setMyId] = useState(null); - - useEffect(() => { - socketClient.onConnect((id) => setMyId(id)); - socketClient.onRoomUpdate((updatedRoom) => { - setRoom(updatedRoom); - setGameState(GameState.LOBBY); - }); - socketClient.onGameStart(() => setGameState(GameState.PLAYING)); - }, []); - - return { gameState, room, myId }; -}; diff --git a/apps/client/src/network/SocketClient.ts b/apps/client/src/network/SocketClient.ts index c2702a2..f29309b 100644 --- a/apps/client/src/network/SocketClient.ts +++ b/apps/client/src/network/SocketClient.ts @@ -83,12 +83,10 @@ } /** - * ルーム入室リクエスト送信 - * @param roomId 入室先のID - * @param playerName 表示名 + * ルーム入室リクエスト送信 + * @param payload 入室ペイロード */ - joinRoom(roomId: string, playerName: string) { - const payload: roomTypes.JoinRoomPayload = { roomId, playerName }; + joinRoom(payload: roomTypes.JoinRoomPayload) { this.socket.emit(protocol.SocketEvents.JOIN_ROOM, payload); } diff --git a/packages/shared/src/domains/room/room.const.ts b/packages/shared/src/domains/room/room.const.ts index a4a757f..235dcd1 100644 --- a/packages/shared/src/domains/room/room.const.ts +++ b/packages/shared/src/domains/room/room.const.ts @@ -1,11 +1,11 @@ -import type { GameState as GameStateType, RoomStatus as RoomStatusType } from "./room.type"; +import type { AppState as AppStateType, RoomStatus as RoomStatusType } from "./room.type"; -// クライアント画面遷移利用ゲーム状態の値 -export const GameState = { +// クライアント画面遷移利用アプリ状態の値 +export const AppState = { TITLE: "title", LOBBY: "lobby", PLAYING: "playing", -} as const satisfies Record; +} as const satisfies Record; // ルーム進行フェーズ状態の値 export const RoomStatus = { diff --git a/packages/shared/src/domains/room/room.type.ts b/packages/shared/src/domains/room/room.type.ts index e97dd65..12ed833 100644 --- a/packages/shared/src/domains/room/room.type.ts +++ b/packages/shared/src/domains/room/room.type.ts @@ -1,5 +1,5 @@ -// クライアント画面遷移利用ゲーム状態型 -export type GameState = "title" | "lobby" | "playing"; +// クライアント画面遷移利用アプリ状態型 +export type AppState = "title" | "lobby" | "playing"; // ルーム進行フェーズ状態型 export type RoomStatus = "waiting" | "playing" | "result"; diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index 70c8d84..409abe2 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -3,9 +3,9 @@ export * as gridMapLogic from "./domains/gridMap/gridMap.logic"; export * as playerTypes from "./domains/player/player.type"; export * as roomTypes from "./domains/room/room.type"; -export { GameState, RoomStatus } from "./domains/room/room.const"; +export { AppState, RoomStatus } from "./domains/room/room.const"; export type { - GameState as GameStateType, + AppState as AppStateType, RoomStatus as RoomStatusType, Room, RoomMember,