diff --git a/apps/client/src/network/handlers/LobbyHandler.ts b/apps/client/src/network/handlers/LobbyHandler.ts index 00c037b..49ff35c 100644 --- a/apps/client/src/network/handlers/LobbyHandler.ts +++ b/apps/client/src/network/handlers/LobbyHandler.ts @@ -5,7 +5,11 @@ */ import type { Socket } from "socket.io-client"; import { contracts as protocol } from "@repo/shared"; -import type { ServerToClientPayloadOf, StartGameRequestPayload } from "@repo/shared"; +import type { + LobbySettingsUpdatePayload, + ServerToClientPayloadOf, + StartGameRequestPayload, +} from "@repo/shared"; import { createClientSocketEventBridge } from "./socketEventBridge"; /** ロビー画面で利用する通信操作の契約 */ @@ -26,6 +30,7 @@ ) => void, ) => void; startGame: (payload?: StartGameRequestPayload) => void; + updateLobbySettings: (payload: LobbySettingsUpdatePayload) => void; }; /** ロビー画面向けのソケットハンドラを生成する */ @@ -46,6 +51,9 @@ startGame: (payload) => { emitEvent(protocol.SocketEvents.START_GAME, payload ?? {}); }, + updateLobbySettings: (payload) => { + emitEvent(protocol.SocketEvents.LOBBY_SETTINGS_UPDATE, payload); + }, }; }; diff --git a/apps/client/src/scenes/lobby/LobbyScene.tsx b/apps/client/src/scenes/lobby/LobbyScene.tsx index f8dea50..8b22573 100644 --- a/apps/client/src/scenes/lobby/LobbyScene.tsx +++ b/apps/client/src/scenes/lobby/LobbyScene.tsx @@ -2,6 +2,7 @@ import { domain } from "@repo/shared"; import type { FieldSizePreset, StartGameRequestPayload } from "@repo/shared"; import { config } from "@client/config"; +import { socketManager } from "@client/network/SocketManager"; import { OVERLAY_BUTTON_STYLE } from "@client/scenes/shared/styles/overlayStyles"; import { LobbyRuleModal } from "./components/LobbyRuleModal"; import { LobbyStartConfirmModal } from "./components/LobbyStartConfirmModal"; @@ -10,6 +11,9 @@ LOBBY_BACKGROUND_STYLE, LOBBY_CONTAINER_STYLE, LOBBY_CONTROLS_BLOCK_STYLE, + LOBBY_HOST_SETTINGS_LABEL_STYLE, + LOBBY_HOST_SETTINGS_STYLE, + LOBBY_HOST_SETTINGS_VALUE_STYLE, LOBBY_LABEL_STYLE, LOBBY_LEFT_INNER_STYLE, LOBBY_LEFT_PANEL_STYLE, @@ -89,6 +93,18 @@ }); }, [minimumStartPlayerCount, maxStartPlayerCount]); + // ホストが設定を変更したらサーバーに通知して全員に反映する + useEffect(() => { + if (!isMeOwner) { + return; + } + + socketManager.lobby.updateLobbySettings({ + targetPlayerCount: selectedStartPlayerCount, + fieldSizePreset: selectedFieldSizePreset, + }); + }, [isMeOwner, selectedStartPlayerCount, selectedFieldSizePreset]); + const handleStartClick = () => { setIsStartConfirmVisible(true); }; @@ -219,6 +235,23 @@ ホストの開始を待っています... +
+
+
ゲーム人数
+
+ {room.targetPlayerCount != null + ? `${room.targetPlayerCount}人` + : "未設定"} +
+
+
+
フィールドサイズ
+
+ {toFieldPresetLabel(room.fieldSizePreset)} +
+
+
+