From 9fd3a5a041608824ebb0bbb2f6c6c7b3a667984c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 27 May 2025 16:21:14 +0900 Subject: [PATCH 01/11] add MeetingRoom store --- client/src/constans/meetingRoomZones.ts | 0 client/src/stores/MeetingRoomStores.ts | 62 +++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 client/src/constans/meetingRoomZones.ts create mode 100644 client/src/stores/MeetingRoomStores.ts diff --git a/client/src/constans/meetingRoomZones.ts b/client/src/constans/meetingRoomZones.ts new file mode 100644 index 00000000..e69de29b diff --git a/client/src/stores/MeetingRoomStores.ts b/client/src/stores/MeetingRoomStores.ts new file mode 100644 index 00000000..948bb81d --- /dev/null +++ b/client/src/stores/MeetingRoomStores.ts @@ -0,0 +1,62 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; + +export type MeetingRoomMode = 'open' | private' | 'secret'; + +export interface MeetingRoom { + id: string; + name: string; + mode: MeetingRoomMode; + hostUserId: string; + invitedUssers: string[]; + participants: string[]; +} + +interface MeetingRoomState { + meetingRooms : MeetingRoom[]; + currentMeetingRoomId: string | null; +} + +const initialState: MeetingRoomState = { + meetingRooms: [], + currentMeetingRoomId: null, +}; + + +export const meetingRoomSlice = createSlice({ + name: 'meetingRoom', + currentMeetingRoomId: null, + reducers: { + setMeetingRooms: (staet, action: PlayloadAction>MeetingRoom[]>) => { + state.meetingRooms = action.payload; + }, + addMeetingRoom: (state, action: PayloadAction) => { + state.meetingRooms.push(action.payload); + }, + + updateMeetingRoom: (state, action: PayloadAction) => { + const index = state.meetingRooms.findIndex(room => room.id === action.payload.id); + if (index !== -1) { + state.meetingRooms[index] = action.payload; + } + }, + removeMeetingRoom: (state, action: PayloadAction) => { + state.meetingRooms = state.meetingRooms.filter(room => room.id !== action.payload); + }, + + setCurrentMeetingRoomId: (state, action: PayloadAction) => { + state.currentMeetingRoomId = action.payload; + }, + + } +}); + +export const { + setMeetingRooms, + addMeetingRoom, + updateMeetingRoom, + removeMeetingRoom, + setCurrentMeetingRoomId +} = meetingRoomSlice.actions; + +export default meetingRoomSlice.reducer; + From 4f720a066fb6e1a71210451e52556378b31e371c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 27 May 2025 16:31:21 +0900 Subject: [PATCH 02/11] add MeetingRoomArea store --- client/src/constans/meetingRoomZones.ts | 0 client/src/stores/MeetingRoomStores.ts | 22 ++++++++++++++++++++++ 2 files changed, 22 insertions(+) delete mode 100644 client/src/constans/meetingRoomZones.ts diff --git a/client/src/constans/meetingRoomZones.ts b/client/src/constans/meetingRoomZones.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/stores/MeetingRoomStores.ts b/client/src/stores/MeetingRoomStores.ts index 948bb81d..b7496e52 100644 --- a/client/src/stores/MeetingRoomStores.ts +++ b/client/src/stores/MeetingRoomStores.ts @@ -11,14 +11,23 @@ export interface MeetingRoom { participants: string[]; } +export interface MeetingRoomArea{ + x: number; + y: number; + width: number; + height: number; +} + interface MeetingRoomState { meetingRooms : MeetingRoom[]; currentMeetingRoomId: string | null; + meetingRoomAreas: MeetingRoomArea[]; } const initialState: MeetingRoomState = { meetingRooms: [], currentMeetingRoomId: null, + meetingRoomAreas: [] }; @@ -46,6 +55,16 @@ export const meetingRoomSlice = createSlice({ setCurrentMeetingRoomId: (state, action: PayloadAction) => { state.currentMeetingRoomId = action.payload; }, + addMeetingRoomArea: (state, action: PayloadAction) => { + state.meetingRoomAreas.push(action.payload); + }, + updateMeetingRoomArea: (state, action: PayloadAction) => { + const idx = state.meetingRoomAreas.findIndex(area => area.meetingRoomId === action.payload.meetingRoomId); + if (idx !== -1) state.meetingRoomAreas[idx] = action.payload; + }, + removeMeetingRoomArea: (state, action: PayloadAction) => { + state.meetingRoomAreas = state.meetingRoomAreas.filter(area => area.meetingRoomId !== action.payload); + }, } }); @@ -56,6 +75,9 @@ export const { updateMeetingRoom, removeMeetingRoom, setCurrentMeetingRoomId + addMeetingRoomArea, + updateMeetingRoomArea, + removeMeetingRoomArea } = meetingRoomSlice.actions; export default meetingRoomSlice.reducer; From 5dc0fb096b8ea9afe8b841e00e35d598deb91bd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 27 May 2025 21:43:45 +0900 Subject: [PATCH 03/11] create the meeting room --- client/src/scenes/Game.ts | 27 ++++++++++++++++++- ...etingRoomStores.ts => MeetingRoomStore.ts} | 15 ++++++----- client/src/stores/index.ts | 2 ++ 3 files changed, 36 insertions(+), 8 deletions(-) rename client/src/stores/{MeetingRoomStores.ts => MeetingRoomStore.ts} (88%) diff --git a/client/src/scenes/Game.ts b/client/src/scenes/Game.ts index c797f36b..94a9e1d9 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -22,8 +22,11 @@ import store from '../stores' import { setFocused, setShowChat } from '../stores/ChatStore' import { NavKeys, Keyboard } from '../../../types/KeyboardState' +import { setCurrentMeetingRoomId } from '../stores/MeetingRoomStore' + export default class Game extends Phaser.Scene { network!: Network + private testAreaGraphics!: Phaser.GameObjects.Graphics private cursors!: NavKeys private keyE!: Phaser.Input.Keyboard.Key private keyR!: Phaser.Input.Keyboard.Key @@ -159,7 +162,17 @@ export default class Game extends Phaser.Scene { undefined, this ) - + // ********************** + // Meeting room areas + this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas + store.subscribe(() => { + this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas + }) + const testArea = { x: 192, y: 482, width: 448, height: 296, meetingRoomId: 'MeetingRoom' } + this.testAreaGraphics = this.add.graphics() + this.testAreaGraphics.lineStyle(3, 0xff0000, 1) // 赤・太さ3 + this.testAreaGraphics.strokeRect(testArea.x, testArea.y, testArea.width, testArea.height) + //********************** // register network event listeners this.network.onPlayerJoined(this.handlePlayerJoined, this) this.network.onPlayerLeft(this.handlePlayerLeft, this) @@ -280,10 +293,22 @@ export default class Game extends Phaser.Scene { const otherPlayer = this.otherPlayerMap.get(playerId) otherPlayer?.updateDialogBubble(content) } + private checkPlayerInMeetingRoom(x: number, y: number) { + // console.log('checkPlayerInMeetingRoom', x, y, this.currentMeetingRoomId) + const area = this.meetingRoomAreas.find( + (a) => x >= a.x && x <= a.x + a.width && y >= a.y && y <= a.y + a.height + ) + const nextId = area ? area.meetingRoomId : null + if (nextId !== this.currentMeetingRoomId) { + store.dispatch(setCurrentMeetingRoomId(nextId)) + this.currentMeetingRoomId = nextId + } + } update(t: number, dt: number) { if (this.myPlayer && this.network) { this.playerSelector.update(this.myPlayer, this.cursors) + this.checkPlayerInMeetingRoom(this.myPlayer.x, this.myPlayer.y) this.myPlayer.update(this.playerSelector, this.cursors, this.keyE, this.keyR, this.network) } } diff --git a/client/src/stores/MeetingRoomStores.ts b/client/src/stores/MeetingRoomStore.ts similarity index 88% rename from client/src/stores/MeetingRoomStores.ts rename to client/src/stores/MeetingRoomStore.ts index b7496e52..8a034138 100644 --- a/client/src/stores/MeetingRoomStores.ts +++ b/client/src/stores/MeetingRoomStore.ts @@ -1,17 +1,18 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -export type MeetingRoomMode = 'open' | private' | 'secret'; +export type MeetingRoomMode = 'open' | 'private' | 'secret'; export interface MeetingRoom { id: string; name: string; mode: MeetingRoomMode; hostUserId: string; - invitedUssers: string[]; + invitedUsers: string[]; participants: string[]; } export interface MeetingRoomArea{ + meetingRoomId: string; x: number; y: number; width: number; @@ -27,15 +28,15 @@ interface MeetingRoomState { const initialState: MeetingRoomState = { meetingRooms: [], currentMeetingRoomId: null, - meetingRoomAreas: [] + meetingRoomAreas: [], }; export const meetingRoomSlice = createSlice({ name: 'meetingRoom', - currentMeetingRoomId: null, + initialState, reducers: { - setMeetingRooms: (staet, action: PlayloadAction>MeetingRoom[]>) => { + setMeetingRooms: (state, action: PayloadAction) => { state.meetingRooms = action.payload; }, addMeetingRoom: (state, action: PayloadAction) => { @@ -74,10 +75,10 @@ export const { addMeetingRoom, updateMeetingRoom, removeMeetingRoom, - setCurrentMeetingRoomId + setCurrentMeetingRoomId, addMeetingRoomArea, updateMeetingRoomArea, - removeMeetingRoomArea + removeMeetingRoomArea, } = meetingRoomSlice.actions; export default meetingRoomSlice.reducer; diff --git a/client/src/stores/index.ts b/client/src/stores/index.ts index 020ab92b..77cf50a5 100644 --- a/client/src/stores/index.ts +++ b/client/src/stores/index.ts @@ -5,11 +5,13 @@ import computerReducer from './ComputerStore' import whiteboardReducer from './WhiteboardStore' import chatReducer from './ChatStore' import roomReducer from './RoomStore' +import meetingRoomReducer from './MeetingRoomStore' enableMapSet() const store = configureStore({ reducer: { + meetingRoom: meetingRoomReducer, user: userReducer, computer: computerReducer, whiteboard: whiteboardReducer, From 5fd878a948258c9fbd7ee015a5908a77b960fd0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 27 May 2025 22:54:30 +0900 Subject: [PATCH 04/11] meet area detect --- client/src/characters/MyPlayer.ts | 2 ++ client/src/scenes/Game.ts | 35 ++++++++++++++++------ client/src/utils/mRoom.ts | 50 +++++++++++++++++++++++++++++++ package.json | 4 ++- yarn.lock | 10 +++++++ 5 files changed, 91 insertions(+), 10 deletions(-) create mode 100644 client/src/utils/mRoom.ts diff --git a/client/src/characters/MyPlayer.ts b/client/src/characters/MyPlayer.ts index cf51bbe8..89603a2a 100644 --- a/client/src/characters/MyPlayer.ts +++ b/client/src/characters/MyPlayer.ts @@ -20,6 +20,7 @@ export default class MyPlayer extends Player { private playContainerBody: Phaser.Physics.Arcade.Body private chairOnSit?: Chair public joystickMovement?: JoystickMovement + public currentMeetingRoomId?: string | null = null constructor( scene: Phaser.Scene, x: number, @@ -30,6 +31,7 @@ export default class MyPlayer extends Player { ) { super(scene, x, y, texture, id, frame) this.playContainerBody = this.playerContainer.body as Phaser.Physics.Arcade.Body + this.currentMeetingRoomId = null } setPlayerName(name: string) { diff --git a/client/src/scenes/Game.ts b/client/src/scenes/Game.ts index 94a9e1d9..2fb77a62 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -21,12 +21,17 @@ import { ItemType } from '../../../types/Items' import store from '../stores' import { setFocused, setShowChat } from '../stores/ChatStore' import { NavKeys, Keyboard } from '../../../types/KeyboardState' +import { createMeetingRoomWithArea } from '../utils/mRoom' -import { setCurrentMeetingRoomId } from '../stores/MeetingRoomStore' +import { setCurrentMeetingRoomId, + MeetingRoom, + MeetingRoomArea, + +} from '../stores/MeetingRoomStore' export default class Game extends Phaser.Scene { network!: Network - private testAreaGraphics!: Phaser.GameObjects.Graphics + private meetAreaGraphics!: Phaser.GameObjects.Graphics private cursors!: NavKeys private keyE!: Phaser.Input.Keyboard.Key private keyR!: Phaser.Input.Keyboard.Key @@ -37,6 +42,7 @@ export default class Game extends Phaser.Scene { private otherPlayerMap = new Map() computerMap = new Map() private whiteboardMap = new Map() + meetingRoomAreas: MeetingRoomArea[] = [] constructor() { super('game') @@ -168,10 +174,20 @@ export default class Game extends Phaser.Scene { store.subscribe(() => { this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas }) - const testArea = { x: 192, y: 482, width: 448, height: 296, meetingRoomId: 'MeetingRoom' } - this.testAreaGraphics = this.add.graphics() - this.testAreaGraphics.lineStyle(3, 0xff0000, 1) // 赤・太さ3 - this.testAreaGraphics.strokeRect(testArea.x, testArea.y, testArea.width, testArea.height) + const { room, area } = createMeetingRoomWithArea( + 'Meeting Room', + 'open', + 'hostUserId', + 192, + 482, + 448, + 296 + ) + this.meetAreaGraphics = this.add.graphics() + this.meetAreaGraphics.setDepth(1000) + this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) + this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) + //********************** // register network event listeners this.network.onPlayerJoined(this.handlePlayerJoined, this) @@ -299,9 +315,10 @@ export default class Game extends Phaser.Scene { (a) => x >= a.x && x <= a.x + a.width && y >= a.y && y <= a.y + a.height ) const nextId = area ? area.meetingRoomId : null - if (nextId !== this.currentMeetingRoomId) { - store.dispatch(setCurrentMeetingRoomId(nextId)) - this.currentMeetingRoomId = nextId + if (nextId !== this.myPlayer.currentMeetingRoomId) { + console.log('Meeting room changed:', nextId) + this.myPlayer.currentMeetingRoomId = nextId + console.log(this.myPlayer.currentMeetingRoomId) } } diff --git a/client/src/utils/mRoom.ts b/client/src/utils/mRoom.ts new file mode 100644 index 00000000..22d746e7 --- /dev/null +++ b/client/src/utils/mRoom.ts @@ -0,0 +1,50 @@ +import store from '../stores' +import { v4 as uuidv4 } from 'uuid' +import { + addMeetingRoom, + addMeetingRoomArea, + MeetingRoom, + MeetingRoomArea, + MeetingRoomMode, +} from '../stores/MeetingRoomStore' + +/** + * 部屋エリアを作成し、Redux stateにMeetingRoomとMeetingRoomAreaを同時に追加する + * @param name 部屋名 + * @param mode 'open' | 'private' | 'secret' + * @param hostUserId ホストのユーザーID + * @param x エリア左上X + * @param y エリア左上Y + * @param width エリア幅 + * @param height エリア高さ + * @returns 作成したMeetingRoomとMeetingRoomArea + */ +export function createMeetingRoomWithArea( + name: string, + mode: MeetingRoomMode, + hostUserId: string, + x: number, + y: number, + width: number, + height: number +) { + + const id = uuidv4(); + const room: MeetingRoom = { + id, + name, + mode, + hostUserId, + invitedUsers: [], + participants: [], + }; + const area: MeetingRoomArea = { + meetingRoomId: id, + x, y, width, height + }; + + store.dispatch(addMeetingRoom(room)); + store.dispatch(addMeetingRoomArea(area)); + + return { room, area }; +} diff --git a/package.json b/package.json index c3657a60..fa831842 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ }, "homepage": "https://github.com/kevinshen56714/SkyOffice#readme", "devDependencies": { + "@types/uuid": "^10.0.0", "@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/parser": "^4.33.0", "copyfiles": "^2.4.1", @@ -42,6 +43,7 @@ "express": "^4.16.4", "phaser": "^3.55.2", "regenerator-runtime": "^0.13.7", - "typescript": "^4.8.2" + "typescript": "^4.8.2", + "uuid": "^11.1.0" } } diff --git a/yarn.lock b/yarn.lock index b3c1c71f..27d57fab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -278,6 +278,11 @@ resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1" integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ== +"@types/uuid@^10.0.0": + version "10.0.0" + resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-10.0.0.tgz#e9c07fe50da0f53dc24970cca94d619ff03f6f6d" + integrity sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ== + "@types/ws@^7.4.4": version "7.4.7" resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.7.tgz#f7c390a36f7a0679aa69de2d501319f4f8d9b702" @@ -2563,6 +2568,11 @@ utils-merge@1.0.1: resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM= +uuid@^11.1.0: + version "11.1.0" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.1.0.tgz#9549028be1753bb934fc96e2bca09bb4105ae912" + integrity sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A== + v8-compile-cache@^2.0.3: version "2.3.0" resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee" From beddf9134ede26c0ced8a51da635a94f27a426f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Wed, 28 May 2025 14:30:16 +0900 Subject: [PATCH 05/11] add feature meetingRoom mode --- client/src/App.tsx | 74 +++++---- client/src/components/MeetingRoomManager.tsx | 166 +++++++++++++++++++ client/src/scenes/Game.ts | 116 +++++++++++-- 3 files changed, 307 insertions(+), 49 deletions(-) create mode 100644 client/src/components/MeetingRoomManager.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 38316812..dae3d512 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -11,6 +11,7 @@ import VideoConnectionDialog from './components/VideoConnectionDialog' import Chat from './components/Chat' import HelperButtonGroup from './components/HelperButtonGroup' import MobileVirtualJoystick from './components/MobileVirtualJoystick' +import MeetingRoomManager from './components/MeetingRoomManager' const Backdrop = styled.div` position: absolute; @@ -19,46 +20,47 @@ const Backdrop = styled.div` ` function App() { - const loggedIn = useAppSelector((state) => state.user.loggedIn) - const computerDialogOpen = useAppSelector((state) => state.computer.computerDialogOpen) - const whiteboardDialogOpen = useAppSelector((state) => state.whiteboard.whiteboardDialogOpen) - const videoConnected = useAppSelector((state) => state.user.videoConnected) - const roomJoined = useAppSelector((state) => state.room.roomJoined) + const loggedIn = useAppSelector((state) => state.user.loggedIn) + const computerDialogOpen = useAppSelector((state) => state.computer.computerDialogOpen) + const whiteboardDialogOpen = useAppSelector((state) => state.whiteboard.whiteboardDialogOpen) + const videoConnected = useAppSelector((state) => state.user.videoConnected) + const roomJoined = useAppSelector((state) => state.room.roomJoined) - let ui: JSX.Element - if (loggedIn) { - if (computerDialogOpen) { - /* Render ComputerDialog if user is using a computer. */ - ui = - } else if (whiteboardDialogOpen) { - /* Render WhiteboardDialog if user is using a whiteboard. */ - ui = + let ui: JSX.Element + if (loggedIn) { + if (computerDialogOpen) { + /* Render ComputerDialog if user is using a computer. */ + ui = + } else if (whiteboardDialogOpen) { + /* Render WhiteboardDialog if user is using a whiteboard. */ + ui = + } else { + ui = ( + /* Render Chat or VideoConnectionDialog if no dialogs are opened. */ + <> + + {/* Render VideoConnectionDialog if user is not connected to a webcam. */} + {!videoConnected && } + + + + ) + } + } else if (roomJoined) { + /* Render LoginDialog if not logged in but selected a room. */ + ui = } else { - ui = ( - /* Render Chat or VideoConnectionDialog if no dialogs are opened. */ - <> - - {/* Render VideoConnectionDialog if user is not connected to a webcam. */} - {!videoConnected && } - - - ) + /* Render RoomSelectionDialog if yet selected a room. */ + ui = } - } else if (roomJoined) { - /* Render LoginDialog if not logged in but selected a room. */ - ui = - } else { - /* Render RoomSelectionDialog if yet selected a room. */ - ui = - } - return ( - - {ui} - {/* Render HelperButtonGroup if no dialogs are opened. */} - {!computerDialogOpen && !whiteboardDialogOpen && } - - ) + return ( + + {ui} + {/* Render HelperButtonGroup if no dialogs are opened. */} + {!computerDialogOpen && !whiteboardDialogOpen && } + + ) } export default App diff --git a/client/src/components/MeetingRoomManager.tsx b/client/src/components/MeetingRoomManager.tsx new file mode 100644 index 00000000..d5a5407e --- /dev/null +++ b/client/src/components/MeetingRoomManager.tsx @@ -0,0 +1,166 @@ +import React, { useState } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; + +import { + updateMeetingRoom, + updateMeetingRoomArea, + MeetingRoom, + MeetingRoomArea, +} from '../stores/MeetingRoomStore'; + +import type { RootState } from '../stores'; + +const MeetingRoomEditor: React.FC<{ room: MeetingRoom; area: MeetingRoomArea | undefined }> = ({ + room, + area, +}) => { + const dispatch = useDispatch(); + const [mode, setMode] = useState(room.mode); + const [hostUserId, setHostUserId] = useState(room.hostUserId); + const [invitedUsers, setInvitedUsers] = useState(room.invitedUsers); + const [areaVals, setAreaVals] = useState({ + x: area?.x ?? 0, + y: area?.y ?? 0, + width: area?.width ?? 100, + height: area?.height ?? 100, + }); + const currentUserId = useSelector((state: RootState) => state.user.sessionId); + console.log("currentUserId", currentUserId); + const allUsers = [ + { id :currentUserId, name: currentUserId }, + ]; + const handleSave = () => { + dispatch( + updateMeetingRoom({ + ...room, + mode, + hostUserId, + invitedUsers, + }) + ); + dispatch( + updateMeetingRoomArea({ + meetingRoomId: room.id, + ...areaVals, + }) + ); + alert("保存しました"); + }; + + const handleInvitedUserChange = (id: string, checked: boolean) => { + setInvitedUsers((prev) => + checked ? [...prev, id] : prev.filter((uid) => uid !== id) + ); + }; + + // 参加者表示 + const participantNames = room.participants + .map((id) => allUsers.find((u) => u.id === id)?.name || id) + .join(", "); + + return ( +
+

{room.name}

+
+ +
+
+ +
+
+ + {allUsers.map((u) => ( + + ))} +
+
+ +
+
+ +
+
+ +
+ +
+ ); +}; + +const MeetingRoomManager: React.FC = () => { + const rooms = useSelector((state: RootState) => state.meetingRoom.meetingRooms); + const areas = useSelector((state: RootState) => state.meetingRoom.meetingRoomAreas); + + if (rooms.length === 0) return
会議室がありません
; + + return ( +
+

MeetingRoomEditor

+ {rooms.map(room => ( + a.meetingRoomId === room.id)} + /> + ))} +
+ ); +}; + +export default MeetingRoomManager; diff --git a/client/src/scenes/Game.ts b/client/src/scenes/Game.ts index 2fb77a62..0a637d4d 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -23,19 +23,17 @@ import { setFocused, setShowChat } from '../stores/ChatStore' import { NavKeys, Keyboard } from '../../../types/KeyboardState' import { createMeetingRoomWithArea } from '../utils/mRoom' -import { setCurrentMeetingRoomId, - MeetingRoom, - MeetingRoomArea, - -} from '../stores/MeetingRoomStore' +import { setCurrentMeetingRoomId, MeetingRoom, MeetingRoomArea } from '../stores/MeetingRoomStore' export default class Game extends Phaser.Scene { network!: Network private meetAreaGraphics!: Phaser.GameObjects.Graphics + private meetAreaOverlay!: Phaser.GameObjects.Graphics private cursors!: NavKeys private keyE!: Phaser.Input.Keyboard.Key private keyR!: Phaser.Input.Keyboard.Key private map!: Phaser.Tilemaps.Tilemap + private rooms: MeetingRoom[] = [] myPlayer!: MyPlayer private playerSelector!: Phaser.GameObjects.Zone private otherPlayers!: Phaser.Physics.Arcade.Group @@ -170,9 +168,14 @@ export default class Game extends Phaser.Scene { ) // ********************** // Meeting room areas + this.meetAreaGraphics = this.add.graphics() + this.meetAreaOverlay = this.add.graphics() this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas store.subscribe(() => { + this.rooms = store.getState().meetingRoom.meetingRooms ?? [] + console.log('Meeting rooms updated:', this.rooms) this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas + this.drawMeetingRoomAreas() }) const { room, area } = createMeetingRoomWithArea( 'Meeting Room', @@ -183,11 +186,9 @@ export default class Game extends Phaser.Scene { 448, 296 ) - this.meetAreaGraphics = this.add.graphics() - this.meetAreaGraphics.setDepth(1000) - this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) - this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) - + console.log('Created meeting room:', room) + // this.rooms.push(room) + this.drawMeetingRoomAreas() //********************** // register network event listeners this.network.onPlayerJoined(this.handlePlayerJoined, this) @@ -316,9 +317,98 @@ export default class Game extends Phaser.Scene { ) const nextId = area ? area.meetingRoomId : null if (nextId !== this.myPlayer.currentMeetingRoomId) { - console.log('Meeting room changed:', nextId) - this.myPlayer.currentMeetingRoomId = nextId - console.log(this.myPlayer.currentMeetingRoomId) + if (nextId) { + const room = this.rooms.find((r) => r.id === nextId) + // console.log('checkPlayerInMeetingRoom', nextId, room) + if (room) { + const myUserId = this.myPlayer.playerId + if (room.mode === 'private') { + if ( + (room.hostUserId !== myUserId && !Array.isArray(room.invitedUsers)) || + !room.invitedUsers.includes(myUserId) + ) { + console.log('You are not invited to this private room') + } else { + console.log('You are entering a private room') + this.myPlayer.currentMeetingRoomId = nextId + } + } else if (room.mode === 'secret') { + if (room.hostUserId !== myUserId) { + console.log('You are not allowed to enter this secret room') + } + } else { + console.log('You are entering an open room') + this.myPlayer.currentMeetingRoomId = nextId + } + } + } else { + console.log('You are leaving the meeting room') + this.myPlayer.currentMeetingRoomId = null + } + } + } + private canAccessMeetingRoom(room: MeetingRoom): boolean { + const myUserId = this.myPlayer.playerId + + if (room.mode === 'private') { + return ( + room.hostUserId === myUserId || + (Array.isArray(room.invitedUsers) && room.invitedUsers.includes(myUserId)) + ) + } else if (room.mode === 'secret') { + return room.hostUserId === myUserId + } else { + return true // open room + } + } + + private drawMeetingRoomAreas() { + this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas + + this.meetAreaGraphics.clear() + this.meetAreaOverlay.clear() + + this.meetAreaGraphics.setDepth(1000) + this.meetAreaOverlay.setDepth(1001) + + for (const area of this.meetingRoomAreas) { + const room = this.rooms.find((r) => r.id === area.meetingRoomId) + + if (room) { + const canAccess = this.canAccessMeetingRoom(room) + + if (canAccess) { + this.meetAreaGraphics.lineStyle(3, 0x00ff00, 1) + this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) + } else { + this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) + this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) + + this.meetAreaOverlay.fillStyle(0x808080, 0.6) + this.meetAreaOverlay.fillRect(area.x, area.y, area.width, area.height) + + const centerX = area.x + area.width / 2 + const centerY = area.y + area.height / 2 + + const restrictedText = this.add.text(centerX, centerY, 'cannot access', { + fontSize: '16px', + color: '#ffffff', + backgroundColor: '#000000', + padding: { x: 8, y: 4 }, + }) + restrictedText.setOrigin(0.5) + restrictedText.setDepth(1002) + + this.time.delayedCall(3000, () => { + if (restrictedText && restrictedText.active) { + restrictedText.destroy() + } + }) + } + } else { + this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) + this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) + } } } From d5d7523620b67a68aa6d6c22f36348b965586bcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 3 Jun 2025 14:23:12 +0900 Subject: [PATCH 06/11] add meetingRoom inviolability --- client/src/characters/MyPlayer.ts | 2 + client/src/scenes/Game.ts | 86 +++++++++++++++++++++++++++++-- 2 files changed, 85 insertions(+), 3 deletions(-) diff --git a/client/src/characters/MyPlayer.ts b/client/src/characters/MyPlayer.ts index 89603a2a..25dd0519 100644 --- a/client/src/characters/MyPlayer.ts +++ b/client/src/characters/MyPlayer.ts @@ -21,6 +21,8 @@ export default class MyPlayer extends Player { private chairOnSit?: Chair public joystickMovement?: JoystickMovement public currentMeetingRoomId?: string | null = null + public prevX: number = 0 + public prevY: number = 0 constructor( scene: Phaser.Scene, x: number, diff --git a/client/src/scenes/Game.ts b/client/src/scenes/Game.ts index 0a637d4d..1de0d81a 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -24,6 +24,7 @@ import { NavKeys, Keyboard } from '../../../types/KeyboardState' import { createMeetingRoomWithArea } from '../utils/mRoom' import { setCurrentMeetingRoomId, MeetingRoom, MeetingRoomArea } from '../stores/MeetingRoomStore' +import { argv0 } from 'process' export default class Game extends Phaser.Scene { network!: Network @@ -41,6 +42,8 @@ export default class Game extends Phaser.Scene { computerMap = new Map() private whiteboardMap = new Map() meetingRoomAreas: MeetingRoomArea[] = [] + private meetingRoomZones: Phaser.GameObjects.Zone[] = [] + private prevRooms: MeetingRoom[] = [] constructor() { super('game') @@ -171,12 +174,34 @@ export default class Game extends Phaser.Scene { this.meetAreaGraphics = this.add.graphics() this.meetAreaOverlay = this.add.graphics() this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas + + store.subscribe(() => { this.rooms = store.getState().meetingRoom.meetingRooms ?? [] console.log('Meeting rooms updated:', this.rooms) this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas this.drawMeetingRoomAreas() + this.createMeetingRoomZones() + for (const room of this.rooms) { + const prevRoom = this.prevRooms.find((r) => r.id === room.id) + if (!prevRoom) continue // if the room is new, skip + + // check if you can access the meeting room + const prevCanAccess = this.canAccessMeetingRoom(prevRoom) + const nowCanAccess = this.canAccessMeetingRoom(room) + if (prevCanAccess !== nowCanAccess) { + this.onMeetingRoomPermissionChanged(room.id, nowCanAccess) + } + + // if the room mode changed, remove collider + if ((prevRoom.mode === 'private' || prevRoom.mode === 'secret') && room.mode === 'open') { + this.onMeetingRoomPermissionChanged(room.id, true) // collider削除 + } + } + // update prevRooms to current rooms + this.prevRooms = this.rooms.map((r) => ({ ...r })) }) + const { room, area } = createMeetingRoomWithArea( 'Meeting Room', 'open', @@ -186,9 +211,7 @@ export default class Game extends Phaser.Scene { 448, 296 ) - console.log('Created meeting room:', room) - // this.rooms.push(room) - this.drawMeetingRoomAreas() + //********************** // register network event listeners this.network.onPlayerJoined(this.handlePlayerJoined, this) @@ -347,6 +370,7 @@ export default class Game extends Phaser.Scene { } } } + private canAccessMeetingRoom(room: MeetingRoom): boolean { const myUserId = this.myPlayer.playerId @@ -362,6 +386,38 @@ export default class Game extends Phaser.Scene { } } + private meetingRoomColliders: Map = new Map() + + private createMeetingRoomZones() { + // delete existing colliders and zones + for (const collider of this.meetingRoomColliders.values()) { + collider.destroy() + } + this.meetingRoomColliders.clear() + + for (const zone of this.meetingRoomZones) { + zone.destroy() + } + this.meetingRoomZones = [] + + // create new zones and colliders + this.meetingRoomAreas.forEach((area) => { + const centerX = area.x + area.width / 2 + const centerY = area.y + area.height / 2 + const zone = this.add.zone(centerX, centerY, area.width, area.height) + this.physics.add.existing(zone, true) + zone.setName(area.meetingRoomId) + this.meetingRoomZones.push(zone) + + const room = this.rooms.find((r) => r.id === area.meetingRoomId) + if (!room) return + + if (!this.canAccessMeetingRoom(room)) { + const collider = this.physics.add.collider(this.myPlayer, zone) + this.meetingRoomColliders.set(room.id, collider) + } + }) + } private drawMeetingRoomAreas() { this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas @@ -411,9 +467,33 @@ export default class Game extends Phaser.Scene { } } } + // onMeetingRoomPermissionChanged で「canAccess === true」時は必ず削除 + private onMeetingRoomPermissionChanged(roomId: string, canAccess: boolean) { + const collider = this.meetingRoomColliders.get(roomId) + console.log('onMeetingRoomPermissionChanged', roomId, canAccess, collider) + if (canAccess && collider) { + console.log('before remove', collider.active) + collider.destroy() + console.log('after remove', collider.active) + + console.log('=== MeetingRoomColliders List ===') + for (const [roomId, collider] of this.meetingRoomColliders.entries()) { + console.log(roomId, collider, 'active:', collider.active) + } + this.meetingRoomColliders.delete(roomId) + } else if (!canAccess && !collider) { + const zone = this.meetingRoomZones.find((z) => z.name === roomId) + if (zone) { + const newCollider = this.physics.add.collider(this.myPlayer, zone) + this.meetingRoomColliders.set(roomId, newCollider) + } + } + } update(t: number, dt: number) { if (this.myPlayer && this.network) { + this.myPlayer.prevX = this.myPlayer.x + this.myPlayer.prevY = this.myPlayer.y this.playerSelector.update(this.myPlayer, this.cursors) this.checkPlayerInMeetingRoom(this.myPlayer.x, this.myPlayer.y) this.myPlayer.update(this.playerSelector, this.cursors, this.keyE, this.keyR, this.network) From 40cf65b1f6107636428b8d5c4112bb182d2d138d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 3 Jun 2025 14:55:01 +0900 Subject: [PATCH 07/11] fix collision bug --- client/src/scenes/Game.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/client/src/scenes/Game.ts b/client/src/scenes/Game.ts index 1de0d81a..c641c04f 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -175,7 +175,6 @@ export default class Game extends Phaser.Scene { this.meetAreaOverlay = this.add.graphics() this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas - store.subscribe(() => { this.rooms = store.getState().meetingRoom.meetingRooms ?? [] console.log('Meeting rooms updated:', this.rooms) @@ -195,7 +194,7 @@ export default class Game extends Phaser.Scene { // if the room mode changed, remove collider if ((prevRoom.mode === 'private' || prevRoom.mode === 'secret') && room.mode === 'open') { - this.onMeetingRoomPermissionChanged(room.id, true) // collider削除 + this.onMeetingRoomPermissionChanged(room.id, true) // collider } } // update prevRooms to current rooms @@ -413,7 +412,10 @@ export default class Game extends Phaser.Scene { if (!room) return if (!this.canAccessMeetingRoom(room)) { - const collider = this.physics.add.collider(this.myPlayer, zone) + const collider = this.physics.add.collider( + [this.myPlayer, this.myPlayer.playerContainer], + zone + ) this.meetingRoomColliders.set(room.id, collider) } }) @@ -467,7 +469,7 @@ export default class Game extends Phaser.Scene { } } } - // onMeetingRoomPermissionChanged で「canAccess === true」時は必ず削除 + private onMeetingRoomPermissionChanged(roomId: string, canAccess: boolean) { const collider = this.meetingRoomColliders.get(roomId) console.log('onMeetingRoomPermissionChanged', roomId, canAccess, collider) @@ -484,7 +486,7 @@ export default class Game extends Phaser.Scene { } else if (!canAccess && !collider) { const zone = this.meetingRoomZones.find((z) => z.name === roomId) if (zone) { - const newCollider = this.physics.add.collider(this.myPlayer, zone) + const newCollider = this.physics.add.collider([this.myPlayer, this.myPlayer.playerContainer], zone) this.meetingRoomColliders.set(roomId, newCollider) } } From 46cf41a76df59f1a954fb0b205350d4ab1c3a010 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 3 Jun 2025 17:44:38 +0900 Subject: [PATCH 08/11] spread meetingRoom component --- client/src/scenes/Game.ts | 211 ++----------------------- client/src/scenes/MeetingRoom.ts | 263 +++++++++++++++++++++++++++++++ 2 files changed, 274 insertions(+), 200 deletions(-) create mode 100644 client/src/scenes/MeetingRoom.ts diff --git a/client/src/scenes/Game.ts b/client/src/scenes/Game.ts index c641c04f..77a4062d 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -21,30 +21,21 @@ import { ItemType } from '../../../types/Items' import store from '../stores' import { setFocused, setShowChat } from '../stores/ChatStore' import { NavKeys, Keyboard } from '../../../types/KeyboardState' +import { MeetingRoomManager } from './MeetingRoom' import { createMeetingRoomWithArea } from '../utils/mRoom' - -import { setCurrentMeetingRoomId, MeetingRoom, MeetingRoomArea } from '../stores/MeetingRoomStore' -import { argv0 } from 'process' - export default class Game extends Phaser.Scene { network!: Network - private meetAreaGraphics!: Phaser.GameObjects.Graphics - private meetAreaOverlay!: Phaser.GameObjects.Graphics private cursors!: NavKeys private keyE!: Phaser.Input.Keyboard.Key private keyR!: Phaser.Input.Keyboard.Key private map!: Phaser.Tilemaps.Tilemap - private rooms: MeetingRoom[] = [] myPlayer!: MyPlayer private playerSelector!: Phaser.GameObjects.Zone private otherPlayers!: Phaser.Physics.Arcade.Group private otherPlayerMap = new Map() computerMap = new Map() private whiteboardMap = new Map() - meetingRoomAreas: MeetingRoomArea[] = [] - private meetingRoomZones: Phaser.GameObjects.Zone[] = [] - private prevRooms: MeetingRoom[] = [] - + private meetingRoomManager!: MeetingRoomManager constructor() { super('game') } @@ -170,36 +161,6 @@ export default class Game extends Phaser.Scene { this ) // ********************** - // Meeting room areas - this.meetAreaGraphics = this.add.graphics() - this.meetAreaOverlay = this.add.graphics() - this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas - - store.subscribe(() => { - this.rooms = store.getState().meetingRoom.meetingRooms ?? [] - console.log('Meeting rooms updated:', this.rooms) - this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas - this.drawMeetingRoomAreas() - this.createMeetingRoomZones() - for (const room of this.rooms) { - const prevRoom = this.prevRooms.find((r) => r.id === room.id) - if (!prevRoom) continue // if the room is new, skip - - // check if you can access the meeting room - const prevCanAccess = this.canAccessMeetingRoom(prevRoom) - const nowCanAccess = this.canAccessMeetingRoom(room) - if (prevCanAccess !== nowCanAccess) { - this.onMeetingRoomPermissionChanged(room.id, nowCanAccess) - } - - // if the room mode changed, remove collider - if ((prevRoom.mode === 'private' || prevRoom.mode === 'secret') && room.mode === 'open') { - this.onMeetingRoomPermissionChanged(room.id, true) // collider - } - } - // update prevRooms to current rooms - this.prevRooms = this.rooms.map((r) => ({ ...r })) - }) const { room, area } = createMeetingRoomWithArea( 'Meeting Room', @@ -210,6 +171,9 @@ export default class Game extends Phaser.Scene { 448, 296 ) + this.meetingRoomManager = new MeetingRoomManager(this, this.myPlayer) + this.events.on('enter-meeting-room', this.handleEnterMeetingRoom, this) + this.events.on('leave-meeting-room', this.handleLeaveMeetingRoom, this) //********************** // register network event listeners @@ -327,177 +291,24 @@ export default class Game extends Phaser.Scene { whiteboard?.removeCurrentUser(playerId) } } - private handleChatMessageAdded(playerId: string, content: string) { const otherPlayer = this.otherPlayerMap.get(playerId) otherPlayer?.updateDialogBubble(content) } - private checkPlayerInMeetingRoom(x: number, y: number) { - // console.log('checkPlayerInMeetingRoom', x, y, this.currentMeetingRoomId) - const area = this.meetingRoomAreas.find( - (a) => x >= a.x && x <= a.x + a.width && y >= a.y && y <= a.y + a.height - ) - const nextId = area ? area.meetingRoomId : null - if (nextId !== this.myPlayer.currentMeetingRoomId) { - if (nextId) { - const room = this.rooms.find((r) => r.id === nextId) - // console.log('checkPlayerInMeetingRoom', nextId, room) - if (room) { - const myUserId = this.myPlayer.playerId - if (room.mode === 'private') { - if ( - (room.hostUserId !== myUserId && !Array.isArray(room.invitedUsers)) || - !room.invitedUsers.includes(myUserId) - ) { - console.log('You are not invited to this private room') - } else { - console.log('You are entering a private room') - this.myPlayer.currentMeetingRoomId = nextId - } - } else if (room.mode === 'secret') { - if (room.hostUserId !== myUserId) { - console.log('You are not allowed to enter this secret room') - } - } else { - console.log('You are entering an open room') - this.myPlayer.currentMeetingRoomId = nextId - } - } - } else { - console.log('You are leaving the meeting room') - this.myPlayer.currentMeetingRoomId = null - } - } - } - - private canAccessMeetingRoom(room: MeetingRoom): boolean { - const myUserId = this.myPlayer.playerId - - if (room.mode === 'private') { - return ( - room.hostUserId === myUserId || - (Array.isArray(room.invitedUsers) && room.invitedUsers.includes(myUserId)) - ) - } else if (room.mode === 'secret') { - return room.hostUserId === myUserId - } else { - return true // open room - } - } - private meetingRoomColliders: Map = new Map() - - private createMeetingRoomZones() { - // delete existing colliders and zones - for (const collider of this.meetingRoomColliders.values()) { - collider.destroy() - } - this.meetingRoomColliders.clear() - - for (const zone of this.meetingRoomZones) { - zone.destroy() - } - this.meetingRoomZones = [] - - // create new zones and colliders - this.meetingRoomAreas.forEach((area) => { - const centerX = area.x + area.width / 2 - const centerY = area.y + area.height / 2 - const zone = this.add.zone(centerX, centerY, area.width, area.height) - this.physics.add.existing(zone, true) - zone.setName(area.meetingRoomId) - this.meetingRoomZones.push(zone) - - const room = this.rooms.find((r) => r.id === area.meetingRoomId) - if (!room) return - - if (!this.canAccessMeetingRoom(room)) { - const collider = this.physics.add.collider( - [this.myPlayer, this.myPlayer.playerContainer], - zone - ) - this.meetingRoomColliders.set(room.id, collider) - } - }) + handleEnterMeetingRoom(roomId: string, room: any): void { + console.log('handleEnterMeetingRoom', roomId, room) } - private drawMeetingRoomAreas() { - this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas - - this.meetAreaGraphics.clear() - this.meetAreaOverlay.clear() - - this.meetAreaGraphics.setDepth(1000) - this.meetAreaOverlay.setDepth(1001) - - for (const area of this.meetingRoomAreas) { - const room = this.rooms.find((r) => r.id === area.meetingRoomId) - - if (room) { - const canAccess = this.canAccessMeetingRoom(room) - - if (canAccess) { - this.meetAreaGraphics.lineStyle(3, 0x00ff00, 1) - this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) - } else { - this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) - this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) - - this.meetAreaOverlay.fillStyle(0x808080, 0.6) - this.meetAreaOverlay.fillRect(area.x, area.y, area.width, area.height) - - const centerX = area.x + area.width / 2 - const centerY = area.y + area.height / 2 - - const restrictedText = this.add.text(centerX, centerY, 'cannot access', { - fontSize: '16px', - color: '#ffffff', - backgroundColor: '#000000', - padding: { x: 8, y: 4 }, - }) - restrictedText.setOrigin(0.5) - restrictedText.setDepth(1002) - - this.time.delayedCall(3000, () => { - if (restrictedText && restrictedText.active) { - restrictedText.destroy() - } - }) - } - } else { - this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) - this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) - } - } + handleLeaveMeetingRoom(roomId: string): void { + console.log('handleLeaveMeetingRoom', roomId) } - - private onMeetingRoomPermissionChanged(roomId: string, canAccess: boolean) { - const collider = this.meetingRoomColliders.get(roomId) - console.log('onMeetingRoomPermissionChanged', roomId, canAccess, collider) - if (canAccess && collider) { - console.log('before remove', collider.active) - collider.destroy() - console.log('after remove', collider.active) - - console.log('=== MeetingRoomColliders List ===') - for (const [roomId, collider] of this.meetingRoomColliders.entries()) { - console.log(roomId, collider, 'active:', collider.active) - } - this.meetingRoomColliders.delete(roomId) - } else if (!canAccess && !collider) { - const zone = this.meetingRoomZones.find((z) => z.name === roomId) - if (zone) { - const newCollider = this.physics.add.collider([this.myPlayer, this.myPlayer.playerContainer], zone) - this.meetingRoomColliders.set(roomId, newCollider) - } - } - } - update(t: number, dt: number) { if (this.myPlayer && this.network) { this.myPlayer.prevX = this.myPlayer.x this.myPlayer.prevY = this.myPlayer.y this.playerSelector.update(this.myPlayer, this.cursors) - this.checkPlayerInMeetingRoom(this.myPlayer.x, this.myPlayer.y) + this.meetingRoomManager.checkPlayerInMeetingRoom(this.myPlayer.x, this.myPlayer.y) + this.myPlayer.update(this.playerSelector, this.cursors, this.keyE, this.keyR, this.network) } } diff --git a/client/src/scenes/MeetingRoom.ts b/client/src/scenes/MeetingRoom.ts new file mode 100644 index 00000000..7958b2fb --- /dev/null +++ b/client/src/scenes/MeetingRoom.ts @@ -0,0 +1,263 @@ +import Phaser from 'phaser' +import MyPlayer from '../characters/MyPlayer' +import store from '../stores' +import { MeetingRoom, MeetingRoomArea } from '../stores/MeetingRoomStore' + +export class MeetingRoomManager { + private scene: Phaser.Scene + private myPlayer: MyPlayer + // meeting rooms and areas + private rooms: MeetingRoom[] = [] + private meetingRoomAreas: MeetingRoomArea[] = [] + private meetingRoomZones: Phaser.GameObjects.Zone[] = [] + private prevRooms: MeetingRoom[] = [] + + //graphics for meeting room MeetingRoomAreas + private meetAreaGraphics!: Phaser.GameObjects.Graphics + private meetAreaOverlay!: Phaser.GameObjects.Graphics + private meetingRoomColliders: Map = new Map() + + constructor(scene: Phaser.Scene, myPlayer: MyPlayer) { + this.scene = scene + this.myPlayer = myPlayer + this.initializeGraphics() + this.seupStoreSubscription() + } + private initializeGraphics() { + this.meetAreaGraphics = this.scene.add.graphics() + this.meetAreaOverlay = this.scene.add.graphics() + } + + private seupStoreSubscription() { + this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas + store.subscribe(() => { + this.rooms = store.getState().meetingRoom.meetingRooms ?? [] + console.log('MeetingRoomManager: Rooms updated', this.rooms) + this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas ?? [] + this.drawMeetingRoomAreas() + this.createMeetingRoomZones() + + this.handleRoomUpdates() + this.updatePrevRooms() + }) + } + + checkPlayerInMeetingRoom(x: number, y: number): void { + const area = this.meetingRoomAreas.find( + (a) => x >= a.x && x <= a.x + a.width && y >= a.y && y <= a.y + a.height + ) + + const nextId = area ? area.meetingRoomId : null + if (nextId !== this.myPlayer.currentMeetingRoomId) { + this.handleMeetingRoomTransition(nextId) + } + } + + private handleMeetingRoomTransition(nextId: string | null): void { + if (nextId) { + const room = this.rooms.find((r) => r.id === nextId) + if (room) { + const myUserId = this.myPlayer.playerId + + if (room.mode === 'private') { + if ( + (room.hostUserId !== myUserId && !Array.isArray(room.invitedUsers)) || + !room.invitedUsers.includes(myUserId) + ) { + console.log('[MeetingRoomManager] You are not invited to this private room') + return + } else { + console.log('[MeetingRoomManager] You are entering a private room') + this.myPlayer.currentMeetingRoomId = nextId + } + } else if (room.mode === 'secret') { + if (room.hostUserId !== myUserId) { + console.log('[MeetingRoomManager] You are not allowed to enter this secret room') + return + } else { + console.log('[MeetingRoomManager] You are entering a secret room') + this.myPlayer.currentMeetingRoomId = nextId + } + } else { + console.log('[MeetingRoomManager] You are entering an open room') + this.myPlayer.currentMeetingRoomId = nextId + } + + // trigger meeting room enter event + this.scene.events.emit('enter-meeting-room', nextId, room) + } + } else { + console.log('[MeetingRoomManager] You are leaving the meeting room') + const previousRoomId = this.myPlayer.currentMeetingRoomId + this.myPlayer.currentMeetingRoomId = null + + // trigger meeting room leave event + this.scene.events.emit('leave-meeting-room', previousRoomId) + } + } + + private canAccessMeetingRoom(room: MeetingRoom): boolean { + const myUserId = this.myPlayer.playerId + + if (room.mode === 'private') { + return ( + room.hostUserId === myUserId || + (Array.isArray(room.invitedUsers) && room.invitedUsers.includes(myUserId)) + ) + } else if (room.mode === 'secret') { + return room.hostUserId === myUserId + } else { + return true // open room + } + } + + private createMeetingRoomZones(): void { + // delete existing colliders and zones + for (const collider of this.meetingRoomColliders.values()) { + collider.destroy() + } + this.meetingRoomColliders.clear() + + for (const zone of this.meetingRoomZones) { + zone.destroy() + } + this.meetingRoomZones = [] + + // make zones for each meeting room area + this.meetingRoomAreas.forEach((area) => { + const centerX = area.x + area.width / 2 + const centerY = area.y + area.height / 2 + const zone = this.scene.add.zone(centerX, centerY, area.width, area.height) + this.scene.physics.add.existing(zone, true) + zone.setName(area.meetingRoomId) + this.meetingRoomZones.push(zone) + + const room = this.rooms.find((r) => r.id === area.meetingRoomId) + if (!room) return + + if (!this.canAccessMeetingRoom(room)) { + const collider = this.scene.physics.add.collider( + [this.myPlayer, this.myPlayer.playerContainer], // Assuming myPlayer has a playerContainer], + zone + ) + this.meetingRoomColliders.set(room.id, collider) + } + }) + + console.log('[MeetingRoomManager] Created zones:', this.meetingRoomZones.length) + } + + private drawMeetingRoomAreas(): void { + this.meetAreaGraphics.clear() + this.meetAreaOverlay.clear() + + this.meetAreaGraphics.setDepth(1000) + this.meetAreaOverlay.setDepth(1001) + + for (const area of this.meetingRoomAreas) { + const room = this.rooms.find((r) => r.id === area.meetingRoomId) + + if (room) { + const canAccess = this.canAccessMeetingRoom(room) + + if (canAccess) { + // can access green border + this.meetAreaGraphics.lineStyle(3, 0x00ff00, 1) + this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) + } else { + // cannot access - red border + this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) + this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) + + this.meetAreaOverlay.fillStyle(0x808080, 0.6) + this.meetAreaOverlay.fillRect(area.x, area.y, area.width, area.height) + + this.showRestrictedText(area) + } + } else { + // If room not found, draw a red border + this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) + this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) + } + } + + console.log('[MeetingRoomManager] Drew room areas:', this.meetingRoomAreas.length) + } + private showRestrictedText(area: MeetingRoomArea): void { + const centerX = area.x + area.width / 2 + const centerY = area.y + area.height / 2 + + const restrictedText = this.scene.add.text(centerX, centerY, 'cannot access', { + fontSize: '16px', + color: '#ffffff', + backgroundColor: '#000000', + padding: { x: 8, y: 4 }, + }) + restrictedText.setOrigin(0.5) + restrictedText.setDepth(1002) + + this.scene.time.delayedCall(3000, () => { + if (restrictedText && restrictedText.active) { + restrictedText.destroy() + } + }) + } + + private handleRoomUpdates(): void { + for (const room of this.rooms) { + const prevRoom = this.prevRooms.find((r) => r.id === room.id) + if (!prevRoom) continue // if the room is new, skip + + //check your access permission changing + const prevCanAccess = this.canAccessMeetingRoom(prevRoom) + const nowCanAccess = this.canAccessMeetingRoom(room) + if (prevCanAccess !== nowCanAccess) { + this.onMeetingRoomPermissionChanged(room.id, nowCanAccess) + } + + // check mode change from private/secret to open + if ((prevRoom.mode === 'private' || prevRoom.mode === 'secret') && room.mode === 'open') { + this.onMeetingRoomPermissionChanged(room.id, true) + } + } + } + + private onMeetingRoomPermissionChanged(roomId: string, canAccess: boolean): void { + const collider = this.meetingRoomColliders.get(roomId) + console.log('[MeetingRoomManager] Permission changed:', roomId, canAccess) + + if (canAccess && collider) { + collider.destroy() + this.meetingRoomColliders.delete(roomId) + } else if (!canAccess && !collider) { + const zone = this.meetingRoomZones.find((z) => z.name === roomId) + if (zone) { + const newCollider = this.scene.physics.add.collider( + [this.myPlayer, this.myPlayer.playerContainer], + zone + ) + this.meetingRoomColliders.set(roomId, newCollider) + } + } + } + private updatePrevRooms(): void { + this.prevRooms = this.rooms.map((r) => ({ ...r })) + } + + update(): void {} + + destroy(): void { + for (const collider of this.meetingRoomColliders.values()) { + collider.destroy() + } + + this.meetingRoomColliders.clear() + for (const zone of this.meetingRoomZones) { + zone.destroy() + } + this.meetingRoomZones = [] + + this.meetAreaGraphics?.destroy() + this.meetAreaOverlay?.destroy() + } +} From 030e87847f4e1b6f4592932a7d69d1fb1d7a466c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Fri, 27 Jun 2025 16:59:01 +0900 Subject: [PATCH 09/11] context dependent feature --- .vscode/extensions.json | 7 - ARCHITECTURE.md | 164 ++ CLAUDE.md | 337 ++++ COP.md | 1346 ++++++++++++++ client/CLAUDE.md | 87 + client/README.md | 12 + client/context.md | 1298 ++++++++++++++ client/src/App.refactored.tsx | 113 ++ client/src/App.tsx | 99 +- client/src/App.tsx.backup | 131 ++ client/src/characters/MyPlayer.ts | 84 + client/src/characters/Player.ts | 51 + client/src/components/DevModePanel.tsx | 1749 +++++++++++++++++++ client/src/components/LoginDialog.tsx | 3 +- client/src/components/MeetingRoomChat.tsx | 372 ++++ client/src/components/PlayerStatusModal.tsx | 353 ++++ client/src/components/WorkStatusBadge.tsx | 101 ++ client/src/components/WorkStatusPanel.tsx | 256 +++ client/src/components/WorkTimeCounter.tsx | 163 ++ client/src/hooks/useAppNavigation.ts | 35 + client/src/hooks/useDevMode.ts | 116 ++ client/src/hooks/useGameContent.ts | 28 + client/src/hooks/useKeyboardShortcuts.ts | 35 + client/src/hooks/useModalManager.ts | 56 + client/src/scenes/Game.ts | 658 +++++++ client/src/scenes/MeetingRoom.ts | 330 ++++ client/src/services/EventBridge.ts | 97 + client/src/services/Network.ts | 842 +++++++++ client/src/services/WorkStatusService.ts | 208 +++ client/src/stores/ChatStore.ts | 78 +- client/src/stores/DevModeStore.ts | 31 + client/src/stores/WorkStore.ts | 208 +++ client/src/stores/index.ts | 10 + client/src/types/AvatarTypes.ts | 225 +++ client/src/types/ErrorTypes.ts | 52 + client/src/types/EventTypes.ts | 35 + client/src/utils/logger.ts | 162 ++ client/src/utils/meetingRoomPermissions.ts | 51 + my_modules/JSContext | 1 + server/rooms/SkyOffice.ts | 537 ++++++ server/rooms/schema/MeetingRoomState.ts | 34 + server/rooms/schema/OfficeState.ts | 34 + types/IOfficeState.ts | 63 + types/Messages.ts | 26 + yarn.lock | 1063 ++++++----- 45 files changed, 11260 insertions(+), 481 deletions(-) delete mode 100644 .vscode/extensions.json create mode 100644 ARCHITECTURE.md create mode 100644 CLAUDE.md create mode 100644 COP.md create mode 100644 client/CLAUDE.md create mode 100644 client/context.md create mode 100644 client/src/App.refactored.tsx create mode 100644 client/src/App.tsx.backup create mode 100644 client/src/components/DevModePanel.tsx create mode 100644 client/src/components/MeetingRoomChat.tsx create mode 100644 client/src/components/PlayerStatusModal.tsx create mode 100644 client/src/components/WorkStatusBadge.tsx create mode 100644 client/src/components/WorkStatusPanel.tsx create mode 100644 client/src/components/WorkTimeCounter.tsx create mode 100644 client/src/hooks/useAppNavigation.ts create mode 100644 client/src/hooks/useDevMode.ts create mode 100644 client/src/hooks/useGameContent.ts create mode 100644 client/src/hooks/useKeyboardShortcuts.ts create mode 100644 client/src/hooks/useModalManager.ts create mode 100644 client/src/services/EventBridge.ts create mode 100644 client/src/services/WorkStatusService.ts create mode 100644 client/src/stores/DevModeStore.ts create mode 100644 client/src/stores/WorkStore.ts create mode 100644 client/src/types/AvatarTypes.ts create mode 100644 client/src/types/ErrorTypes.ts create mode 100644 client/src/types/EventTypes.ts create mode 100644 client/src/utils/logger.ts create mode 100644 client/src/utils/meetingRoomPermissions.ts create mode 160000 my_modules/JSContext create mode 100644 server/rooms/schema/MeetingRoomState.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index d2614109..00000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "recommendations": [ - "esbenp.prettier-vscode", - "jpoissonnier.vscode-styled-components", - ], - "unwantedRecommendations": [] -} diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md new file mode 100644 index 00000000..473edf0d --- /dev/null +++ b/ARCHITECTURE.md @@ -0,0 +1,164 @@ +# SkyOfficeC クライアント アーキテクチャガイド + +## 推奨ディレクトリ構造 + +``` +src/ +├── components/ # React UIコンポーネント +│ ├── ui/ # 汎用UIコンポーネント +│ ├── forms/ # フォーム関連 +│ ├── modals/ # モーダルダイアログ +│ ├── layout/ # レイアウトコンポーネント +│ └── game/ # ゲーム固有UI +├── hooks/ # カスタムフック +│ ├── useAppNavigation.ts +│ ├── useModalManager.ts +│ ├── useKeyboardShortcuts.ts +│ └── useGameState.ts +├── services/ # ビジネスロジック・外部連携 +│ ├── WorkStatusService.ts +│ ├── ChatService.ts +│ ├── NetworkService.ts +│ └── EventBridge.ts +├── stores/ # Redux状態管理 +│ ├── slices/ # Redux Toolkit slices +│ ├── middleware/ # カスタムミドルウェア +│ └── selectors/ # メモ化セレクター +├── phaser/ # Phaserゲームエンジン +│ ├── scenes/ # ゲームシーン +│ ├── entities/ # ゲームエンティティ +│ ├── systems/ # ゲームシステム +│ └── utils/ # Phaser固有ユーティリティ +├── utils/ # 汎用ユーティリティ +├── types/ # 型定義 +├── constants/ # 定数 +└── config/ # 設定ファイル +``` + +## レイヤード アーキテクチャ + +### Presentation Layer (プレゼンテーション層) +- **責務**: UI表示、ユーザー入力受付 +- **技術**: React, Material-UI +- **ルール**: ビジネスロジックを含まない、サービス層を呼び出す + +### Application Layer (アプリケーション層) +- **責務**: ユーザーケースの実装、層間の調整 +- **技術**: カスタムフック、サービスクラス +- **ルール**: UIとビジネスロジックを仲介する + +### Domain Layer (ドメイン層) +- **責務**: ビジネスルール、エンティティ、値オブジェクト +- **技術**: TypeScript クラス・インターフェース +- **ルール**: 他の層に依存しない、純粋なビジネスロジック + +### Infrastructure Layer (インフラ層) +- **責務**: 外部システム連携、永続化、通信 +- **技術**: Colyseus, WebRTC, Phaser +- **ルール**: ドメイン層のインターフェースを実装 + +## 通信パターン + +### 1. React ↔ Redux +```typescript +// Custom Hooksを使用した抽象化 +const { workStatus, actions } = useWorkStatus() +``` + +### 2. Phaser ↔ React +```typescript +// EventBridge経由での通信 +eventBridge.emitCustomEvent('player:clicked', { playerId }) +``` + +### 3. Network ↔ State +```typescript +// Service層での抽象化 +await workStatusService.startWork() +``` + +## コーディング規約 + +### 1. ネーミング規約 +- **ファイル**: PascalCase (MyComponent.tsx) +- **フック**: use + 機能名 (useWorkStatus) +- **サービス**: 機能名 + Service (WorkStatusService) +- **イベント**: domain:action (work:started) + +### 2. Import順序 +```typescript +// 1. 外部ライブラリ +import React from 'react' +import { useSelector } from 'react-redux' + +// 2. 内部モジュール（相対パス順） +import { useAppSelector } from '../hooks' +import { WorkStatusService } from '../services' + +// 3. 型定義 +import type { WorkStatus } from '../types' +``` + +### 3. エラーハンドリング +```typescript +// Service層でのエラーハンドリング +try { + await workStatusService.startWork() +} catch (error) { + console.error('Work start failed:', error) + // UI層にエラーを伝播 + throw new WorkStatusError('Failed to start work', error) +} +``` + +## パフォーマンス最適化 + +### 1. メモ化 +```typescript +// useSelector with reselect +const workStatus = useAppSelector(selectWorkStatus) + +// useMemo for expensive calculations +const fatigueLevel = useMemo(() => + calculateFatigueLevel(startTime, currentTime), + [startTime, currentTime] +) +``` + +### 2. コンポーネント分割 +```typescript +// 小さく、単一責任のコンポーネント +const WorkStatusBadge = React.memo(({ status }) => { + // 最小限の責任のみ +}) +``` + +### 3. 遅延ローディング +```typescript +// 大きなコンポーネントの遅延読み込み +const PlayerStatusModal = lazy(() => import('./PlayerStatusModal')) +``` + +## テスト戦略 + +### 1. 単体テスト +- **対象**: カスタムフック、サービス、ユーティリティ +- **ツール**: Jest, React Testing Library + +### 2. 統合テスト +- **対象**: コンポーネントとフックの連携 +- **ツール**: Jest, React Testing Library + +### 3. E2Eテスト +- **対象**: ユーザーシナリオ全体 +- **ツール**: Playwright, Cypress + +## まとめ + +このアーキテクチャにより以下が実現されます： + +- ✅ **保守性**: 明確な責任分離 +- ✅ **拡張性**: 新機能追加が容易 +- ✅ **テスタビリティ**: 各層の独立テスト +- ✅ **可読性**: 一貫した構造とネーミング +- ✅ **再利用性**: 疎結合な設計 \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..1fa6c2d7 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,337 @@ +# Claude Code メモリー + +このファイルは、Claude Code がセッション間で覚えておくべき重要な情報を含んでいます。 + +## 🚨 重要な開発ルール +**新機能追加・変更時は必ずこのファイルを更新してください** +1. 実装した機能を「実装済み機能」セクションに追加 +2. 変更したファイルを「主要ファイル」セクションに記録 +3. 今後の予定があれば「開発予定」セクションを更新 + +## プロジェクト情報 +- **メインブランチ**: master +- **現在のブランチ**: emajs +- **作業ディレクトリ**: /Users/k_yo/develop/js_work/SkyOfficeC +- **プラットフォーム**: macOS (Darwin) +- **プロジェクトタイプ**: バーチャルオフィス（Multiplayer Online Game） + +## 技術スタック +- **フロントエンド**: React + TypeScript + Redux Toolkit + Phaser.js +- **バックエンド**: Node.js + TypeScript + Colyseus +- **リアルタイム通信**: WebSocket (Colyseus) +- **UI**: Material-UI + styled-components +- **ビルドツール**: Vite + +## 開発コマンド +- **サーバー起動**: `npm start` (root directory) +- **クライアント開発**: `cd client && npm run dev` +- **クライアントビルド**: `cd client && npm run build` +- **型チェック**: `cd client && tsc` + +## プロジェクト構造 +``` +SkyOfficeC/ +├── client/ # フロントエンド (React + Phaser.js) +│ ├── src/ +│ │ ├── components/ # React コンポーネント +│ │ ├── scenes/ # Phaser.js ゲームシーン +│ │ ├── stores/ # Redux ストア +│ │ └── services/ # Network など +├── server/ # バックエンド (Colyseus) +│ └── rooms/ # ゲームルーム管理 +├── types/ # 共有型定義 +└── my_modules/ # カスタムモジュール +``` + +## ✅ 実装済み機能 + +### **会議室システム** +- **権限管理**: open/private/secret の3モード +- **物理的制限**: 衝突検出による入室制御 +- **参加者管理**: ホスト・招待ユーザー・参加者の管理 + +### **会議室チャット機能** +- **リアルタイムチャット**: Colyseus WebSocket による即座通信 +- **権限ベースアクセス**: 会議室権限に応じたメッセージ送信制御 +- **Optimistic Update**: メッセージ送信時の即座UI表示 +- **フォーカス制御**: チャット入力中のキャラクター移動停止 +- **メッセージ履歴**: 入室時の過去メッセージ表示 + +### **EMAシステム削除** +- **標準イベントシステム**: EMA Signal/Layer から Phaser.js イベントへ移行 +- **コード簡素化**: 直接的な boolean 状態管理 + +### **勤務ステータス管理システム** 🆕 +- **勤務状態管理**: working/break/meeting/overtime/off-duty の5状態 +- **アバター外観変化**: 勤務状態に応じた服装・アクセサリー変更 +- **疲労度システム**: 0-100の疲労レベル表示 +- **勤務時間追跡**: リアルタイム勤務時間カウンター +- **チーム状況表示**: 全メンバーの勤務状況可視化 +- **労働基準法対応**: 8時間超過時の警告表示 + +## 主要ファイル + +### **会議室関連** +- `client/src/scenes/MeetingRoom.ts` - 会議室管理とアクセス制御 +- `client/src/components/MeetingRoomChat.tsx` - チャットUI +- `server/rooms/SkyOffice.ts` - サーバー側会議室・チャット処理 +- `client/src/stores/ChatStore.ts` - チャット状態管理 +- `client/src/services/Network.ts` - WebSocket 通信 + +### **型定義** +- `types/IOfficeState.ts` - 状態とメッセージの型定義 +- `types/Messages.ts` - メッセージタイプ定義 + +### **ユーティリティ** +- `client/src/utils/meetingRoomPermissions.ts` - 権限チェック関数 + +### **勤務ステータス関連** 🆕 +- `types/IOfficeState.ts` - 勤務状態と外観の型定義拡張 +- `server/rooms/schema/OfficeState.ts` - サーバー側スキーマ拡張 +- `client/src/stores/WorkStore.ts` - 勤務状態管理Redux +- `client/src/components/WorkStatusBadge.tsx` - ステータスバッジUI +- `client/src/components/WorkTimeCounter.tsx` - 勤務時間カウンター +- `client/src/components/WorkStatusPanel.tsx` - 勤務管理パネル +- `client/src/services/Network.ts` - 勤務ステータス通信 + +## 🔄 開発予定 + +### **次の実装予定** +1. **Phaserアバター外観の実装** + - Phaserシーン内での外観変化反映 + - スプライトテクスチャの動的変更 + - アニメーション統合 + +2. **時間帯による機能変化** + - 営業時間外のアクセス制限 + - 昼夜サイクルの実装 + - 自動スケジュール機能 + +## 最近のコンテキスト +- **emajs ブランチ**: EMA システム削除とチャット機能実装 +- **主要な課題解決**: + - Colyseus ArraySchema から broadcast messaging への移行 + - Redux Map → Record 変換による状態管理改善 + - リアルタイム更新の実装成功 + +## 開発時の注意点 +- **Colyseus**: ArraySchema.onAdd より broadcast messaging を推奨 +- **Redux**: Map より Record を使用（immutability 対応） +- **チャット**: 入退室ログと実際のメッセージを区別 +- **権限**: サーバー・クライアント双方でチェック実装 + +## 🏗️ アーキテクチャ・リファクタリングガイド + +### **現在の課題と改善方向** + +#### **課題1: ファットコンポーネント** +```typescript +// 問題: App.tsx が多すぎる責任を持っている +❌ 17個のuseAppSelector +❌ 複数のモーダル制御 +❌ キーボードイベントハンドリング +❌ 複雑な条件分岐 + +// 解決策: カスタムフックによる関心分離 +✅ useAppNavigation() - UI状態管理 +✅ useModalManager() - モーダル制御 +✅ useKeyboardShortcuts() - キーボード操作 +``` + +#### **課題2: 直接的なStore依存** +```typescript +// 問題: PhaserクラスがRedux Storeに直接依存 +❌ import store from '../stores' // Game.ts, MyPlayer.ts +❌ store.dispatch(action) // 直接dispatch + +// 解決策: EventBridge による抽象化 +✅ eventBridge.dispatchAction(action) +✅ eventBridge.emitCustomEvent(eventName, data) +``` + +#### **課題3: 混在するイベントシステム** +```typescript +// 問題: 3つの異なるイベントシステム +❌ Redux Actions/Reducers +❌ Phaser Events (phaserEvents) +❌ Custom DOM Events (window.dispatchEvent) + +// 解決策: EventBridge による統一 +✅ eventBridge.addEventListener() +✅ eventBridge.emitCustomEvent() +``` + +### **推奨アーキテクチャパターン** + +#### **レイヤード アーキテクチャ** +``` +┌─────────────────────────────────────┐ +│ Presentation Layer (React) │ ← UI表示・ユーザー入力 +├─────────────────────────────────────┤ +│ Application Layer (Hooks/Services)│ ← ユーザーケース・調整 +├─────────────────────────────────────┤ +│ Domain Layer (Business) │ ← ビジネスルール・エンティティ +├─────────────────────────────────────┤ +│ Infrastructure Layer (Network/Phaser)│ ← 外部システム・永続化 +└─────────────────────────────────────┘ +``` + +#### **モジュール分離原則** +```typescript +// 単一責任原則 (SRP) +✅ 各モジュールは1つの責任のみ +✅ WorkStatusService → 勤務ステータス管理のみ +✅ EventBridge → イベント変換のみ + +// 依存性逆転原則 (DIP) +✅ 抽象に依存、具象に依存しない +✅ Service インターフェース定義 +✅ 実装の差し替え可能性 +``` + +### **リファクタリング実装例** + +#### **カスタムフック例** +```typescript +// hooks/useAppNavigation.ts +export const useAppNavigation = () => { + const getCurrentView = () => { + if (!loggedIn) return roomJoined ? 'login' : 'room-selection' + if (computerDialogOpen) return 'computer' + return 'main' + } + return { currentView: getCurrentView() } +} + +// hooks/useModalManager.ts +export const useModalManager = () => { + const [modals, setModals] = useState({}) + const openPlayerStatusModal = (playerId?: string) => { + setModals(prev => ({ ...prev, playerStatus: { open: true, playerId }})) + } + return { modals, playerStatus: { open: openPlayerStatusModal }} +} +``` + +#### **サービス層例** +```typescript +// services/WorkStatusService.ts +export class WorkStatusService { + async startWork(): Promise { + // ネットワーク通信 + const game = phaserGame.scene.keys.game as Game + game?.network?.startWork() + + // イベント発火 + eventBridge.emitCustomEvent('work:started', { timestamp: Date.now() }) + } +} + +// services/EventBridge.ts +export class EventBridge { + emitCustomEvent(eventName: string, detail?: any) { + window.dispatchEvent(new CustomEvent(eventName, { detail })) + } + + dispatchAction(action: any) { + store.dispatch(action) + } +} +``` + +### **段階的リファクタリング戦略** + +#### **Phase 1: カスタムフック抽出** +```typescript +1. useAppNavigation.ts - App.tsx の条件分岐ロジック +2. useModalManager.ts - モーダル状態管理 +3. useKeyboardShortcuts.ts - キーボードイベント +4. useWorkStatus.ts - 勤務ステータス関連 +``` + +#### **Phase 2: サービス層導入** +```typescript +1. WorkStatusService.ts - 勤務管理ビジネスロジック +2. ChatService.ts - チャット機能 +3. NetworkService.ts - 通信抽象化 +4. EventBridge.ts - イベント統一 +``` + +#### **Phase 3: コンポーネント分割** +```typescript +1. App.tsx → 50行以下に削減 +2. Game.ts → システム別分割 +3. 汎用UIコンポーネント抽出 +4. ビジネスロジックの分離 +``` + +### **命名規約・ベストプラクティス** + +#### **ディレクトリ構造** +``` +src/ +├── components/ui/ # 汎用UIコンポーネント +├── components/game/ # ゲーム固有UI +├── hooks/ # カスタムフック +├── services/ # ビジネスロジック +├── stores/slices/ # Redux slices +├── phaser/scenes/ # Phaserシーン +├── phaser/entities/ # ゲームエンティティ +└── utils/ # 汎用ユーティリティ +``` + +#### **ネーミング規約** +```typescript +// ファイル名 +✅ PascalCase: WorkStatusService.ts, PlayerStatusModal.tsx +✅ camelCase: useAppNavigation.ts, workStatusService.ts + +// 関数・変数名 +✅ use + 機能名: useWorkStatus, useModalManager +✅ 機能名 + Service: WorkStatusService, ChatService +✅ domain:action: 'work:started', 'player:clicked' +``` + +#### **Import順序** +```typescript +// 1. 外部ライブラリ +import React from 'react' +import { useSelector } from 'react-redux' + +// 2. 内部モジュール（相対パス順） +import { useAppSelector } from '../hooks' +import { WorkStatusService } from '../services' + +// 3. 型定義 +import type { WorkStatus } from '../types' +``` + +### **テスト戦略** +```typescript +// 単体テスト +✅ カスタムフック: renderHook + act +✅ サービス: モック・スタブ活用 +✅ ユーティリティ: 純粋関数テスト + +// 統合テスト +✅ コンポーネント + フック連携 +✅ サービス + ネットワーク連携 + +// E2Eテスト +✅ ユーザーシナリオ全体 +✅ Playwright/Cypress使用 +``` + +### **参考リソース** +- **Clean Architecture**: Robert C. Martin +- **Domain-Driven Design**: Eric Evans +- **React Patterns**: https://reactpatterns.com/ +- **Redux Toolkit**: https://redux-toolkit.js.org/ +- **Testing Library**: https://testing-library.com/ + +## デバッグ情報 +- **重要なログタグ**: `[MeetingRoomChat]`, `[Network]`, `[ChatStore]`, `[Server]` +- **コンソール確認**: 送受信プロセスの詳細ログが出力される + +--- +**最終更新**: 2025-06-23 - アーキテクチャ・リファクタリングガイド追加 \ No newline at end of file diff --git a/COP.md b/COP.md new file mode 100644 index 00000000..bd59f048 --- /dev/null +++ b/COP.md @@ -0,0 +1,1346 @@ +# Context-Oriented Programming 導入検討 + +## 概要 + +このドキュメントでは、SkyOfficeCにContext-Oriented Programming（COP）パラダイムを導入することの可能性と実装戦略について検討します。 + +## 🎯 Context-Oriented Programming とは + +### 核心概念 + +**Context-Oriented Programming (COP)** は、実行時のコンテキスト（文脈・状況）に応じてプログラムの動作を動的に変化させるプログラミングパラダイムです。 + +#### 主要要素 + +1. **Layer（レイヤー）**: 特定のコンテキストで有効になる機能群 +2. **Context（コンテキスト）**: プログラムの実行環境や状況 +3. **Dynamic Adaptation（動的適応）**: 実行時のコンテキスト変化に応じた自動的な動作変更 + +### 従来のOOPとの違い + +| 観点 | OOP | COP | +|------|-----|-----| +| **機能の切り替え** | 継承・ポリモーフィズム | レイヤーの有効/無効化 | +| **変更のタイミング** | コンパイル時 | 実行時 | +| **変更の粒度** | クラス・メソッド単位 | 機能横断的 | +| **状態の表現** | オブジェクトの状態 | アクティブなコンテキスト | + +## 🔍 SkyOfficeCの現状分析 + +### context.mdの5つの動的処理システムのEMAjs検討 + +現在のSkyOfficeCで実装されている5つの動的処理システムをEMAjsで再実装する検討： + +#### 1. **Work Status Dynamic Processing（労働状態動的処理）** +```typescript +// context.mdの既存実装をEMAjsで表現 +import { Signal, SignalComp, EMA } from '../my_modules/JSContext/EMA' + +// 労働状態関連Signal +const workStatusSignal = new Signal('off-duty', 'workStatus') +const workStartTimeSignal = new Signal(null, 'workStartTime') +const fatigueSignal = new Signal(0, 'fatigueLevel') + +// 労働状態レイヤー群 +const WorkingLayer = { + name: "working", + condition: new SignalComp("workStatus == 'working'"), + enter: function() { + console.log('🏃‍♂️ [WorkingLayer] 勤務開始') + // アバタースプライト自動切り替え + this.updateAvatarSprite('working') + // 勤務時間カウンター表示 + this.showWorkTimer() + // Network層での勤務状態ブロードキャスト + this.broadcastWorkStatus('working') + }, + exit: function() { + this.hideWorkTimer() + } +} + +const BreakLayer = { + name: "break", + condition: new SignalComp("workStatus == 'break'"), + enter: function() { + console.log('☕ [BreakLayer] 休憩開始') + this.updateAvatarSprite('break') + this.showBreakUI() + } +} + +const FatigueHighLayer = { + name: "fatigueHigh", + condition: new SignalComp("fatigueLevel > 70"), + enter: function() { + console.log('😴 [FatigueLayer] 高疲労状態') + // 疲労度段階判定とアバター変更 + const fatigueCategory = this.getFatigueCategory() + this.updateAvatarForFatigue(fatigueCategory) + this.showFatigueWarning() + } +} + +// 複合条件レイヤー +const WorkingFatiguedLayer = { + name: "workingFatigued", + condition: new SignalComp("workStatus == 'working' && fatigueLevel > 80"), + enter: function() { + console.log('⚠️ [WorkingFatigued] 高疲労で勤務中') + // 強制休憩推奨 + this.showForceBreakRecommendation() + this.updateAvatarSprite('working_exhausted') + } +} +``` + +#### 2. **Fatigue Level Dynamic Processing（疲労度動的処理）** +```typescript +// 疲労度段階別レイヤー +const FatigueLowLayer = { + name: "fatigueLow", + condition: new SignalComp("fatigueLevel <= 30"), + enter: function() { + console.log('😊 [FatigueLow] 通常状態') + this.setAvatarFatigueState('normal') + } +} + +const FatigueMediumLayer = { + name: "fatigueMedium", + condition: new SignalComp("fatigueLevel > 30 && fatigueLevel <= 70"), + enter: function() { + console.log('😐 [FatigueMedium] 疲労状態') + this.setAvatarFatigueState('tired') + this.showMildFatigueIndicator() + } +} + +const FatigueHighLayer = { + name: "fatigueHigh", + condition: new SignalComp("fatigueLevel > 70"), + enter: function() { + console.log('😵 [FatigueHigh] 重疲労状態') + this.setAvatarFatigueState('exhausted') + this.showCriticalFatigueWarning() + // 将来実装: 移動速度低下 + this.reduceMovementSpeed(0.7) + } +} + +// アバターマッピングの動的処理 +const avatarUpdateMethod = function() { + const signals = EMA.getSignals() + const sprite = this.getAvatarSprite( + signals.baseAvatar.value, + signals.workStatus.value, + signals.fatigueLevel.value + ) + this.myPlayer.setTexture(sprite) +} +``` + +#### 3. **Meeting Room Permission Dynamic Processing（会議室権限動的処理）** +```typescript +// 会議室権限関連Signal +const roomModeSignal = new Signal('open', 'roomMode') +const userRoleSignal = new Signal('employee', 'userRole') +const currentRoomSignal = new Signal(null, 'currentRoom') + +// 権限レイヤー群 +const OpenRoomLayer = { + name: "openRoom", + condition: new SignalComp("roomMode == 'open'"), + enter: function() { + console.log('🏢 [OpenRoom] オープンルームモード') + this.enableRoomAccess(true) + this.showPublicRoomUI() + } +} + +const PrivateRoomLayer = { + name: "privateRoom", + condition: new SignalComp("roomMode == 'private'"), + enter: function() { + console.log('🔒 [PrivateRoom] プライベートルームモード') + // 招待ユーザーのみアクセス可能 + this.enforceInvitationCheck() + this.showPrivateRoomUI() + } +} + +const SecretRoomLayer = { + name: "secretRoom", + condition: new SignalComp("roomMode == 'secret'"), + enter: function() { + console.log('🕵️ [SecretRoom] シークレットルームモード') + // ホストのみアクセス、リストから非表示 + this.enforceHostOnlyAccess() + this.hideFromRoomList() + } +} + +const AdminAccessLayer = { + name: "adminAccess", + condition: new SignalComp("userRole == 'admin' || isDevMode == true"), + enter: function() { + console.log('👑 [AdminAccess] 管理者権限有効') + this.enableAllRoomAccess() + this.showAdminControls() + } +} +``` + +#### 4. **Visual Edit Mode Dynamic Processing（編集モード動的処理）** +```typescript +// 編集モード関連Signal +const editModeSignal = new Signal(false, 'editMode') +const selectedRoomSignal = new Signal(null, 'selectedRoom') + +const VisualEditLayer = { + name: "visualEdit", + condition: new SignalComp("editMode == true"), + enter: function() { + console.log('✏️ [VisualEdit] 編集モード開始') + // 既存MeetingRoomManager非表示 + this.meetingRoomManager.hideRoomAreas() + // 編集可能エリア作成 + this.createEditableRoomAreas() + // DOM-basedドラッグシステム有効化 + this.enableDragSystem() + }, + exit: function() { + console.log('✏️ [VisualEdit] 編集モード終了') + this.clearEditableRoomAreas() + this.meetingRoomManager.showRoomAreas() + this.disableDragSystem() + } +} + +const RoomDraggingLayer = { + name: "roomDragging", + condition: new SignalComp("editMode == true && selectedRoom != null"), + enter: function() { + console.log('🖱️ [RoomDragging] ルームドラッグ中') + this.showDragFeedback() + // リアルタイム位置更新 + this.enableRealTimePositionUpdate() + } +} + +// Partial Methodでドラッグ処理拡張 +EMA.addPartialMethod(VisualEditLayer, gameInstance, 'updateRoomPosition', + function(roomId, x, y) { + // Redux位置データ更新 + this.updateRoomPositionInStore(roomId, x, y) + // グローバル関数経由でDevModePanel連携 + window.devModeUpdateRoomArea(roomId, {x, y}) + } +) +``` + +#### 5. **DevMode Dynamic Processing（DevMode動的処理）** +```typescript +// DevMode関連Signal +const devModeSignal = new Signal(false, 'isDevMode') +const devTabSignal = new Signal(0, 'devTabValue') + +const DevModeActiveLayer = { + name: "devModeActive", + condition: new SignalComp("isDevMode == true"), + enter: function() { + console.log('🛠️ [DevModeActive] 開発モード有効') + // 7タブDevModePanelの表示 + this.showDevModePanel() + // デバッグ機能有効化 + this.enableDebugFeatures() + // 全システムへのアクセス許可 + this.enableSystemAccess() + }, + exit: function() { + this.hideDevModePanel() + this.disableDebugFeatures() + } +} + +const DevModeLoggingLayer = { + name: "devModeLogging", + condition: new SignalComp("isDevMode == true"), + enter: function() { + console.log('📊 [DevModeLogging] 詳細ログ有効') + // リアルタイムログ監視 + this.enableDetailedLogging() + // ログフィルタリング機能 + this.setupLogFiltering() + } +} + +const DevModeTestingLayer = { + name: "devModeTesting", + condition: new SignalComp("isDevMode == true && devTabValue == 5"), // Mockタブ + enter: function() { + console.log('🧪 [DevModeTesting] テストモード') + // モックデータ生成機能 + this.enableMockDataGeneration() + // テストシナリオ実行 + this.enableTestScenarios() + } +} + +// DevModeでの状態操作拡張 +EMA.addPartialMethod(DevModeActiveLayer, gameInstance, 'updateAnyState', + function(stateType, value) { + console.log(`🔧 [DevMode] ${stateType}を${value}に変更`) + // 任意の状態変更を許可 + switch(stateType) { + case 'workStatus': + EMA.getSignals().workStatus.value = value + break + case 'fatigueLevel': + EMA.getSignals().fatigueLevel.value = value + break + case 'roomMode': + EMA.getSignals().roomMode.value = value + break + } + } +) +``` + +### 現在のアーキテクチャの課題 + +#### 1. **責任の混在** +```typescript +// 問題のあるコード例 +const handleStartWork = () => { + dispatch(startWork()) // Redux更新 + game.network.startWork() // Network通信 + // UI層で複数の責任を持っている +} +``` + +#### 2. **コンテキスト判定の分散** +```typescript +// 各所に散らばったコンテキスト判定 +if (workStatus === 'working' && fatigueLevel > 70) { /* ... */ } +if (room.mode === 'private' && !isInvited) { /* ... */ } +if (isDevMode && hasPermission) { /* ... */ } +``` + +#### 3. **動的変更の複雑性** +- レイヤー間の依存関係が不明確 +- コンテキスト変化時の影響範囲が把握困難 +- テストケースの網羅が困難 + +## ⚖️ COP導入のメリット・デメリット + +### ✅ メリット + +#### 1. **関心の分離** +```typescript +// COPによる改善例 +class WorkStatusLayer extends Layer { + isActive(): boolean { + return this.context.workStatus === 'working' + } + + effects(): LayerEffects { + return { + avatar: { sprite: 'working_normal' }, + ui: { showWorkTimer: true }, + restrictions: { canTakeBreak: false } + } + } +} +``` + +#### 2. **テスタビリティの向上** +```typescript +// レイヤー単位でのテスト +describe('WorkStatusLayer', () => { + it('should activate when work status is working', () => { + const context = { workStatus: 'working' } + const layer = new WorkStatusLayer(context) + expect(layer.isActive()).toBe(true) + }) +}) +``` + +#### 3. **保守性の向上** +- 機能追加時の影響範囲の限定 +- レイヤー単位での機能の有効/無効化 +- 宣言的なコンテキスト定義 + +#### 4. **拡張性** +```typescript +// 新しいコンテキストの追加が容易 +class NightModeLayer extends Layer { + isActive(): boolean { + return this.context.timeOfDay === 'night' + } + + effects(): LayerEffects { + return { + ui: { theme: 'dark' }, + avatar: { visibility: 0.8 }, + sounds: { volume: 0.5 } + } + } +} +``` + +### ❌ デメリット + +#### 1. **学習コスト** +- 開発チームがCOPパラダイムを理解する必要 +- 新しい設計パターンの習得コスト + +#### 2. **実装複雑度** +```typescript +// ContextManagerの複雑性 +class ContextManager { + private layers: Layer[] = [] + private context: Context = {} + + updateContext(newContext: Partial) { + this.context = { ...this.context, ...newContext } + this.recalculateLayers() + this.applyEffects() + } + + private recalculateLayers() { + // レイヤー依存関係の解決 + // 優先順位の計算 + // 競合解決 + } +} +``` + +#### 3. **パフォーマンスオーバーヘッド** +- コンテキスト変化時の再計算コスト +- レイヤー評価のオーバーヘッド +- メモリ使用量の増加 + +#### 4. **デバッグの複雑性** +- どのレイヤーが有効かの追跡 +- レイヤー間の相互作用の理解 +- 動的な動作変更の予測困難性 + +## 🛠️ 具体的な実装提案 + +### 1. EMAjsを使ったContext定義 + +```typescript +// EMAjsのSignalを使ったリアクティブコンテキスト +import { Signal, SignalComp, EMA } from '../my_modules/JSContext/EMA' + +// コンテキストSignalの定義 +export class SkyOfficeSignals { + // 勤務関連シグナル + workStatus = new Signal('off-duty', 'workStatus') + workStartTime = new Signal(null, 'workStartTime') + fatigueLevel = new Signal(0, 'fatigueLevel') + breakCount = new Signal(0, 'breakCount') + + // 位置関連シグナル + currentArea = new Signal('lobby', 'currentArea') + roomId = new Signal(null, 'roomId') + playerX = new Signal(0, 'playerX') + playerY = new Signal(0, 'playerY') + nearbyPlayersCount = new Signal(0, 'nearbyPlayersCount') + + // 権限関連シグナル + userRole = new Signal('employee', 'userRole') + isDevMode = new Signal(false, 'isDevMode') + adminOverride = new Signal(false, 'adminOverride') + + // 時間関連シグナル + timeOfDay = new Signal('morning', 'timeOfDay') + workingHours = new Signal(true, 'workingHours') + isHoliday = new Signal(false, 'isHoliday') + + // 通信関連シグナル + videoEnabled = new Signal(false, 'videoEnabled') + audioEnabled = new Signal(false, 'audioEnabled') + isInCall = new Signal(false, 'isInCall') + + constructor() { + // ReduxストアとSignalの双方向バインディング + this.setupStoreBinding() + } + + private setupStoreBinding() { + // Redux状態変更をSignalに反映 + store.subscribe(() => { + const state = store.getState() + this.workStatus.value = state.work.workStatus + this.fatigueLevel.value = state.work.fatigueLevel + this.isDevMode.value = state.devMode.isDevMode + // 他のシグナル更新... + }) + } + + // Signalインターフェースオブジェクト（EMA.exhibit用） + getSignalInterface() { + return { + // 勤務関連 + workStatus: this.workStatus, + workStartTime: this.workStartTime, + fatigueLevel: this.fatigueLevel, + breakCount: this.breakCount, + + // 位置関連 + currentArea: this.currentArea, + roomId: this.roomId, + playerX: this.playerX, + playerY: this.playerY, + nearbyPlayersCount: this.nearbyPlayersCount, + + // 権限関連 + userRole: this.userRole, + isDevMode: this.isDevMode, + adminOverride: this.adminOverride, + + // 時間関連 + timeOfDay: this.timeOfDay, + workingHours: this.workingHours, + isHoliday: this.isHoliday, + + // 通信関連 + videoEnabled: this.videoEnabled, + audioEnabled: this.audioEnabled, + isInCall: this.isInCall + } + } +} +``` + +### 2. EMAjsレイヤー定義 + +```typescript +// EMAjsの標準レイヤー形式を使用 +import { EMA, SignalComp } from '../my_modules/JSContext/EMA' + +// 勤務状態関連レイヤー +export const WorkingLayer = { + name: "working", + condition: new SignalComp("workStatus == 'working'"), + + enter: function() { + console.log('🏃‍♂️ [WorkingLayer] Entering working state') + // アバター変更 + this.updateAvatarForWorking() + // UI更新 + this.showWorkingUI() + }, + + exit: function() { + console.log('🏃‍♂️ [WorkingLayer] Exiting working state') + this.hideWorkingUI() + } +} + +export const HighFatigueLayer = { + name: "highFatigue", + condition: new SignalComp("fatigueLevel > 80"), + + enter: function() { + console.log('😴 [HighFatigueLayer] High fatigue detected') + // 疲労状態のアバターに変更 + this.updateAvatarForFatigue() + // 休憩推奨UI表示 + this.showFatigueWarning() + }, + + exit: function() { + console.log('😴 [HighFatigueLayer] Fatigue level decreased') + this.hideFatigueWarning() + } +} + +export const DevModeLayer = { + name: "devMode", + condition: new SignalComp("isDevMode == true"), + + enter: function() { + console.log('🛠️ [DevModeLayer] DevMode activated') + // DevModeパネル表示 + this.showDevModePanel() + // デバッグ機能有効化 + this.enableDebugFeatures() + }, + + exit: function() { + console.log('🛠️ [DevModeLayer] DevMode deactivated') + this.hideDevModePanel() + this.disableDebugFeatures() + } +} + +export const MeetingRoomLayer = { + name: "meetingRoom", + condition: new SignalComp("currentArea == 'meeting-room'"), + + enter: function() { + console.log('🏢 [MeetingRoomLayer] Entered meeting room') + // ルーム固有チャットに切り替え + this.switchToRoomChat() + // ルーム管理UI表示 + this.showRoomControls() + }, + + exit: function() { + console.log('🏢 [MeetingRoomLayer] Left meeting room') + // グローバルチャットに戻る + this.switchToGlobalChat() + this.hideRoomControls() + } +} + +// 複合条件レイヤー +export const WorkingWithHighFatigueLayer = { + name: "workingHighFatigue", + condition: new SignalComp("workStatus == 'working' && fatigueLevel > 80"), + + enter: function() { + console.log('⚠️ [WorkingWithHighFatigue] Working while highly fatigued') + // 強制休憩推奨 + this.showForceBreakRecommendation() + // パフォーマンス低下エフェクト + this.applyFatigueEffects() + }, + + exit: function() { + console.log('⚠️ [WorkingWithHighFatigue] Fatigue or work status changed') + this.hideForceBreakRecommendation() + this.removeFatigueEffects() + } +} + +// 時間ベースレイヤー +export const OvertimeLayer = { + name: "overtime", + condition: new SignalComp("workStatus == 'working' && workingHours == false"), + + enter: function() { + console.log('🌙 [OvertimeLayer] Working overtime') + // 残業警告表示 + this.showOvertimeWarning() + // 疲労度蓄積率増加 + this.increaseFatigueRate() + }, + + exit: function() { + console.log('🌙 [OvertimeLayer] Overtime ended') + this.hideOvertimeWarning() + this.resetFatigueRate() + } +} + +// 権限ベースレイヤー +export const AdminLayer = { + name: "admin", + condition: new SignalComp("userRole == 'admin' || adminOverride == true"), + + enter: function() { + console.log('👑 [AdminLayer] Admin privileges activated') + // 管理機能UI表示 + this.showAdminControls() + // 全ルームアクセス許可 + this.enableAllRoomAccess() + }, + + exit: function() { + console.log('👑 [AdminLayer] Admin privileges deactivated') + this.hideAdminControls() + this.disableAllRoomAccess() + } +} +``` + +### 3. EMAjsを使ったPartial Methods実装 + +```typescript +// EMAjsのPartial Methodsを使用してメソッドの動的拡張 +import { EMA } from '../my_modules/JSContext/EMA' + +// ゲームオブジェクトの定義 +class SkyOfficeGame { + myPlayer: any + ui: any + network: any + + // 基本的なアバター更新メソッド + updateAvatar() { + console.log('🎮 [Game] Basic avatar update') + // 通常のアバター表示 + this.myPlayer.setTexture('default_avatar') + } + + // 基本的なUI表示メソッド + showUI() { + console.log('🎮 [Game] Basic UI display') + // 標準UI表示 + this.ui.showDefault() + } + + // 基本的なチャット切り替えメソッド + switchChat() { + console.log('💬 [Game] Basic chat mode') + // デフォルトチャット + this.ui.showGlobalChat() + } +} + +// EMAjsを使ったPartial Methods定義 +const gameInstance = new SkyOfficeGame() + +// 勤務中のアバター変更 +EMA.addPartialMethod( + WorkingLayer, + gameInstance, + 'updateAvatar', + function() { + console.log('🏃‍♂️ [WorkingLayer] Working avatar applied') + // 勤務中のアバター + this.myPlayer.setTexture('working_avatar') + // 疲労度に応じた調整 + const signals = EMA.getSignals() + if (signals.fatigueLevel.value > 70) { + this.myPlayer.setTexture('working_tired_avatar') + } + // 元メソッドも実行（必要に応じて） + // Layer.proceed() + } +) + +// 高疲労時のアバター変更 +EMA.addPartialMethod( + HighFatigueLayer, + gameInstance, + 'updateAvatar', + function() { + console.log('😴 [HighFatigueLayer] Tired avatar applied') + // 疲労状態のアバター（優先度が高い） + this.myPlayer.setTexture('exhausted_avatar') + this.myPlayer.setAlpha(0.8) // 透明度で疲労を表現 + } +) + +// DevMode時のUI拡張 +EMA.addPartialMethod( + DevModeLayer, + gameInstance, + 'showUI', + function() { + console.log('🛠️ [DevModeLayer] DevMode UI applied') + // 元のUI表示 + Layer.proceed() + // DevModeパネルを追加 + this.ui.showDevModePanel() + this.ui.showDebugInfo() + } +) + +// 会議室でのチャット切り替え +EMA.addPartialMethod( + MeetingRoomLayer, + gameInstance, + 'switchChat', + function() { + console.log('🏢 [MeetingRoomLayer] Room chat activated') + // ルーム固有チャットに切り替え + const signals = EMA.getSignals() + const roomId = signals.roomId.value + this.ui.showRoomChat(roomId) + this.ui.hideGlobalChat() + } +) + +// 複合条件での動作変更 +EMA.addPartialMethod( + WorkingWithHighFatigueLayer, + gameInstance, + 'updateAvatar', + function() { + console.log('⚠️ [WorkingWithHighFatigue] Critical fatigue warning') + // 警告状態のアバター + this.myPlayer.setTexture('critical_fatigue_avatar') + this.myPlayer.setTint(0xff0000) // 赤色で警告 + + // 追加の警告エフェクト + this.ui.showCriticalFatigueWarning() + this.ui.showForceBreakDialog() + } +) +``` + +### 4. EMAjsシステム管理クラス + +```typescript +// EMAjsを使ったSkyOfficeのコンテキスト管理 +import { EMA, Signal, SignalComp } from '../my_modules/JSContext/EMA' + +export class SkyOfficeContextManager { + private signals: SkyOfficeSignals + private gameInstance: SkyOfficeGame + private layers: any[] = [] + + constructor(gameInstance: SkyOfficeGame) { + this.gameInstance = gameInstance + this.signals = new SkyOfficeSignals() + this.initializeEMASystem() + } + + private initializeEMASystem() { + console.log('🚀 [ContextManager] Initializing EMAjs system') + + // シグナルをEMAに公開 + EMA.exhibit(this.gameInstance, this.signals.getSignalInterface()) + + // 全レイヤーをデプロイ + this.deployAllLayers() + + // システムイベントの監視を開始 + this.setupSystemMonitoring() + } + + private deployAllLayers() { + // 基本レイヤーのデプロイ + this.layers = [ + WorkingLayer, + HighFatigueLayer, + DevModeLayer, + MeetingRoomLayer, + WorkingWithHighFatigueLayer, + OvertimeLayer, + AdminLayer + ] + + this.layers.forEach(layer => { + console.log(`📋 [ContextManager] Deploying layer: ${layer.name}`) + EMA.deploy(layer) + }) + } + + private setupSystemMonitoring() { + // Redux状態変更の監視 + store.subscribe(() => { + const state = store.getState() + this.updateSignalsFromRedux(state) + }) + + // Phaser位置情報の監視 + if (this.gameInstance.myPlayer) { + this.gameInstance.myPlayer.on('move', (x: number, y: number) => { + this.signals.playerX.value = x + this.signals.playerY.value = y + }) + } + + // 時間ベースの更新 + setInterval(() => { + this.updateTemporalSignals() + }, 60000) // 1分ごと + } + + private updateSignalsFromRedux(state: any) { + // 勤務関連の更新 + if (state.work.workStatus !== this.signals.workStatus.value) { + console.log(`📊 [ContextManager] Work status changed: ${state.work.workStatus}`) + this.signals.workStatus.value = state.work.workStatus + } + + if (state.work.fatigueLevel !== this.signals.fatigueLevel.value) { + console.log(`😴 [ContextManager] Fatigue level changed: ${state.work.fatigueLevel}`) + this.signals.fatigueLevel.value = state.work.fatigueLevel + } + + // DevMode状態の更新 + if (state.devMode.isDevMode !== this.signals.isDevMode.value) { + console.log(`🛠️ [ContextManager] DevMode changed: ${state.devMode.isDevMode}`) + this.signals.isDevMode.value = state.devMode.isDevMode + } + + // ルーム状態の更新 + const currentArea = state.room.roomJoined ? 'meeting-room' : 'lobby' + if (currentArea !== this.signals.currentArea.value) { + console.log(`🏢 [ContextManager] Area changed: ${currentArea}`) + this.signals.currentArea.value = currentArea + } + + // 権限関連の更新 + if (state.user.role !== this.signals.userRole.value) { + console.log(`👑 [ContextManager] User role changed: ${state.user.role}`) + this.signals.userRole.value = state.user.role + } + } + + private updateTemporalSignals() { + const now = new Date() + const hour = now.getHours() + + // 時間帯の判定 + let timeOfDay: string + if (hour >= 6 && hour < 12) timeOfDay = 'morning' + else if (hour >= 12 && hour < 18) timeOfDay = 'afternoon' + else if (hour >= 18 && hour < 22) timeOfDay = 'evening' + else timeOfDay = 'night' + + if (timeOfDay !== this.signals.timeOfDay.value) { + console.log(`🌅 [ContextManager] Time of day changed: ${timeOfDay}`) + this.signals.timeOfDay.value = timeOfDay + } + + // 営業時間の判定（9:00-18:00） + const workingHours = hour >= 9 && hour < 18 + if (workingHours !== this.signals.workingHours.value) { + console.log(`⏰ [ContextManager] Working hours changed: ${workingHours}`) + this.signals.workingHours.value = workingHours + } + } + + // 外部からのシグナル更新メソッド + updateWorkStatus(status: string) { + console.log(`🔄 [ContextManager] Manual work status update: ${status}`) + this.signals.workStatus.value = status + } + + updateFatigueLevel(level: number) { + console.log(`🔄 [ContextManager] Manual fatigue level update: ${level}`) + this.signals.fatigueLevel.value = Math.max(0, Math.min(100, level)) + } + + updateLocation(area: string, roomId?: string) { + console.log(`🔄 [ContextManager] Manual location update: ${area}`) + this.signals.currentArea.value = area + if (roomId) { + this.signals.roomId.value = roomId + } + } + + // デバッグ用メソッド + getActiveLayersInfo() { + const activeLayers = EMA.getActiveLayers() + console.log('📋 [ContextManager] Active layers:', activeLayers.map(l => l.name)) + return activeLayers + } + + getSignalsInfo() { + const signals = this.signals.getSignalInterface() + const signalValues: any = {} + Object.keys(signals).forEach(key => { + signalValues[key] = signals[key].value + }) + console.log('📊 [ContextManager] Current signals:', signalValues) + return signalValues + } + + // システム停止 + shutdown() { + console.log('🛑 [ContextManager] Shutting down EMAjs system') + this.layers.forEach(layer => { + EMA.undeploy(layer) + }) + } +} + +// 使用例 +export function initializeSkyOfficeEMA(gameInstance: SkyOfficeGame) { + const contextManager = new SkyOfficeContextManager(gameInstance) + + // グローバルアクセス用（デバッグ用） + (window as any).skyOfficeContext = contextManager + + return contextManager +} +``` + +### 5. EMAjsと既存システムの統合例 + +```typescript +// EMAjsをSkyOfficeCの既存システムに統合する実装例 +import { initializeSkyOfficeEMA } from './SkyOfficeContextManager' + +// Game.tsでの統合 +export class Game extends Phaser.Scene { + private contextManager: SkyOfficeContextManager + myPlayer: MyPlayer + network: Network + + create() { + // 既存の初期化処理... + this.setupPlayers() + this.setupNetwork() + + // EMAjsシステムの初期化 + this.contextManager = initializeSkyOfficeEMA(this) + + // EMAjsの動作確認 + this.testEMAIntegration() + } + + private testEMAIntegration() { + console.log('🧪 [Game] Testing EMAjs integration') + + // 勤務状態の変更テスト + setTimeout(() => { + console.log('🧪 [Game] Testing work status change') + this.contextManager.updateWorkStatus('working') + }, 2000) + + // 疲労度の変更テスト + setTimeout(() => { + console.log('🧪 [Game] Testing fatigue level change') + this.contextManager.updateFatigueLevel(85) + }, 4000) + + // DevModeの切り替えテスト + setTimeout(() => { + console.log('🧪 [Game] Testing DevMode toggle') + store.dispatch(setDevmode(true)) + }, 6000) + } + + // 既存メソッドにEMAjs対応を追加 + updateAvatar() { + // このメソッドはEMAjsのPartial Methodsによって拡張される + console.log('🎮 [Game] Base avatar update') + if (this.myPlayer) { + this.myPlayer.setTexture('default_avatar') + } + } + + showUI() { + // このメソッドもEMAjsによって拡張される + console.log('🎮 [Game] Base UI display') + // 基本UI表示ロジック + } + + switchChat() { + // チャット切り替えもEMAjsで管理 + console.log('💬 [Game] Base chat switch') + // デフォルトチャット表示 + } +} + +// DevModePanel.tsxでのEMAjs統合 +export const DevModePanel: React.FC = () => { + const [emaInfo, setEmaInfo] = useState({}) + + useEffect(() => { + // EMAjsシステム情報の定期更新 + const interval = setInterval(() => { + if ((window as any).skyOfficeContext) { + const contextManager = (window as any).skyOfficeContext + setEmaInfo({ + activeLayers: contextManager.getActiveLayersInfo(), + signals: contextManager.getSignalsInfo() + }) + } + }, 1000) + + return () => clearInterval(interval) + }, []) + + // EMAjsテスト用ボタン + const testEMAFunctions = () => { + const contextManager = (window as any).skyOfficeContext + if (!contextManager) return + + // 各種テストシナリオ + console.log('🧪 [DevMode] Running EMAjs tests') + + // 1. 勤務状態サイクルテスト + contextManager.updateWorkStatus('working') + setTimeout(() => contextManager.updateFatigueLevel(90), 1000) + setTimeout(() => contextManager.updateWorkStatus('break'), 2000) + setTimeout(() => contextManager.updateFatigueLevel(30), 3000) + } + + return ( + + {/* 既存のDevModeパネル内容 */} + + {/* EMAjs情報表示セクション */} + 🎯 EMAjs Context System + + + Active Layers: + {emaInfo.activeLayers?.map((layer: any, index: number) => ( + + ))} + + + + Current Signals: + 
+          {JSON.stringify(emaInfo.signals, null, 2)}
+
+ + + + + ) +} + +// WorkStatusService.tsでのEMAjs統合 +export class WorkStatusService { + private contextManager: SkyOfficeContextManager | null = null + + constructor() { + // EMAjsシステムとの連携 + if ((window as any).skyOfficeContext) { + this.contextManager = (window as any).skyOfficeContext + } + } + + async startWork(): Promise { + console.log('💼 [WorkStatusService] Starting work with EMAjs') + + // 1. Redux Store更新 + store.dispatch(startWork()) + + // 2. Network通信 + const game = phaserGame.scene.keys.game as Game + game?.network?.startWork() + + // 3. EMAjsシグナル更新（自動でRedux監視により更新される） + // this.contextManager?.updateWorkStatus('working') // 必要に応じて手動更新 + } + + async endWork(): Promise { + console.log('💼 [WorkStatusService] Ending work with EMAjs') + + store.dispatch(endWork()) + const game = phaserGame.scene.keys.game as Game + game?.network?.endWork() + } + + async setFatigueLevel(level: number): Promise { + console.log(`😴 [WorkStatusService] Setting fatigue level: ${level}`) + + // Redux更新 + store.dispatch(setFatigueLevel(level)) + + // EMAjsへの直接更新（即座な反映のため） + this.contextManager?.updateFatigueLevel(level) + } +} + +// App.tsxでの初期化 +export const App: React.FC = () => { + useEffect(() => { + // アプリ起動時のEMAjsシステム確認 + setTimeout(() => { + if ((window as any).skyOfficeContext) { + console.log('✅ [App] EMAjs system is ready') + const contextManager = (window as any).skyOfficeContext + contextManager.getActiveLayersInfo() + contextManager.getSignalsInfo() + } else { + console.warn('⚠️ [App] EMAjs system not initialized') + } + }, 3000) + }, []) + + return ( +
+ {/* 既存のアプリケーション内容 */} +
+ ) +} +``` + +## 📋 段階的導入戦略 + +### Phase 1: 基盤整備（1-2週間） + +#### 目標 +- COP基盤クラスの実装 +- 基本的なContext定義 +- 既存システムとの最小限の統合 + +#### 作業項目 +1. **基盤クラス実装** + - `Layer` 抽象クラス + - `ContextManager` クラス + - `SkyOfficeContext` 型定義 + +2. **最初のレイヤー実装** + - `WorkingLayer` + - `DevModeLayer` + +3. **統合テスト** + - 基本的なレイヤー切り替え + - コンテキスト更新 + +### Phase 2: 勤務状態システムの移行（2-3週間） + +#### 目標 +- 既存の勤務状態管理をCOPパターンに移行 +- WorkStore.tsの段階的リファクタリング + +#### 作業項目 +1. **勤務関連レイヤー実装** + - `WorkingLayer`, `BreakLayer`, `MeetingLayer` + - `FatigueLayer`, `OvertimeLayer` + +2. **WorkStore.ts統合** + - ContextServiceとの連携 + - 既存のReact Componentの段階的更新 + +3. **テストカバレッジ拡張** + +### Phase 3: 権限・位置システムの移行（2-3週間） + +#### 目標 +- 会議室権限システムをCOPに移行 +- 位置ベースの機能制御 + +#### 作業項目 +1. **権限・位置レイヤー実装** + - `AdminLayer`, `ManagerLayer` + - `LobbyLayer`, `MeetingRoomLayer` + +2. **既存システムとの統合** + - MeetingRoomStore.tsの更新 + - Game.tsの位置情報統合 + +### Phase 4: 拡張機能と最適化（1-2週間） + +#### 目標 +- 新しいコンテキストの追加 +- パフォーマンス最適化 + +#### 作業項目 +1. **新機能レイヤー** + - `NightModeLayer` + - `HighTrafficLayer` + +2. **最適化** + - レイヤー評価のメモ化 + - 不要な再計算の削減 + +## ⚡ パフォーマンス・保守性考慮 + +### パフォーマンス最適化 + +#### 1. **レイヤー評価の最適化** +```typescript +class OptimizedContextManager extends ContextManager { + private layerCache = new Map() + private effectsCache = new Map() + + private shouldRecalculate(contextChange: Partial): boolean { + // 影響のあるレイヤーのみ再評価 + return this.layers.some(layer => + layer.isAffectedBy(contextChange) + ) + } +} +``` + +#### 2. **メモ化の活用** +```typescript +class MemoizedLayer extends Layer { + private memoizedEffects: LayerEffects | null = null + private lastContextHash: string = '' + + getEffects(): LayerEffects { + const currentHash = this.hashContext() + if (currentHash === this.lastContextHash && this.memoizedEffects) { + return this.memoizedEffects + } + + this.memoizedEffects = this.calculateEffects() + this.lastContextHash = currentHash + return this.memoizedEffects + } +} +``` + +### テスト戦略 + +#### 1. **レイヤー単体テスト** +```typescript +describe('WorkingLayer', () => { + it('activates when work status is working', () => { + const context = createTestContext({ work: { status: 'working' } }) + const layer = new WorkingLayer(context) + expect(layer.isActive()).toBe(true) + }) + + it('provides correct effects', () => { + const context = createTestContext({ + work: { status: 'working', fatigueLevel: 50 } + }) + const layer = new WorkingLayer(context) + const effects = layer.getEffects() + + expect(effects.avatar?.sprite).toBe('working_normal') + expect(effects.ui?.showPanels).toContain('work-timer') + }) +}) +``` + +#### 2. **統合テスト** +```typescript +describe('ContextManager Integration', () => { + it('applies multiple layers correctly', () => { + const manager = new ContextManager(initialContext) + manager.updateContext({ + work: { status: 'working', fatigueLevel: 85 }, + permission: { isDevMode: true } + }) + + const effects = manager.getActiveEffects() + expect(effects.avatar?.sprite).toBe('working_exhausted') // HighFatigueLayer wins + expect(effects.ui?.showPanels).toContain('dev-panel') // DevModeLayer + }) +}) +``` + +### ドキュメント保守 + +#### 1. **レイヤー仕様書** +各レイヤーについて以下を文書化： +- アクティブ化条件 +- 提供するエフェクト +- 他レイヤーとの相互作用 +- パフォーマンス特性 + +#### 2. **コンテキスト設計ガイド** +- 新しいコンテキストの追加方法 +- レイヤー優先度の決定指針 +- エフェクト競合の解決パターン + +## 🎯 結論 + +### COP導入の推奨度: ⭐⭐⭐⭐☆ + +#### 推奨理由 +1. **既存システムとの親和性**: 現在の動的コンテキストシステムとの概念的整合性 +2. **保守性向上**: 機能の分離と宣言的な定義による理解しやすさ +3. **拡張性**: 新機能追加時の影響範囲の限定 +4. **テスタビリティ**: レイヤー単位での独立したテスト + +#### 注意事項 +1. **段階的導入**: 一度に全システムを変更せず、部分的な移行を推奨 +2. **チーム教育**: COPパラダイムの理解と習得に時間を要する +3. **パフォーマンス監視**: 動的評価のオーバーヘッドに注意 + +### 次のステップ + +1. **チーム内での討議**: COP導入の是非とスケジュール検討 +2. **プロトタイプ実装**: Phase 1の範囲でのPoC作成 +3. **パフォーマンス評価**: 既存システムとの性能比較 +4. **段階的移行計画**: 具体的なマイルストーンの策定 + +--- + +**作成日**: 2025-06-25 +**更新者**: Claude Code Assistant +**ステータス**: 検討中 \ No newline at end of file diff --git a/client/CLAUDE.md b/client/CLAUDE.md new file mode 100644 index 00000000..38a55fd3 --- /dev/null +++ b/client/CLAUDE.md @@ -0,0 +1,87 @@ +# Claude Development Instructions + +## Language Policy +**CRITICAL**: All code comments, UI text, variable names, and documentation must be written in English only. This includes: +- Code comments and documentation +- UI labels, buttons, and messages +- Variable and function names +- Error messages and console logs +- README and other markdown files + +## DevMode Implementation + +The codebase includes a comprehensive DevMode system for debugging and development: + +### DevMode Components +- **DevModePanel**: Main debugging interface with tabbed layout +- **useDevMode**: Custom hook for DevMode state management +- **Logger**: Enhanced logging system with DevMode integration +- **Network**: Real-time synchronization debugging + +### DevMode Features + +The DevMode Panel includes 7 comprehensive tabs for complete application state management: + +#### 1. **Work Tab** - Work Status Management +- Live editing of work status (working, break, meeting, overtime, off-duty) +- Work time tracking with editable start times +- Fatigue level management (0-100%) +- Player appearance customization (clothing: business/casual/tired, accessories: coffee/documents/none) +- Real-time view of other players' work status with timestamps + +#### 2. **User Tab** - User State Control +- Background mode toggle (DAY/NIGHT) +- Login status simulation +- Video connection testing +- Mobile joystick visibility control +- Session ID and player mapping information + +#### 3. **Room Tab** - Connection & Room Management +- Lobby and room connection status toggles +- Editable room details (ID, name, description) +- Available rooms monitoring +- Connection state simulation for testing + +#### 4. **Chat Tab** - Communication Features +- Chat visibility and focus controls +- Message statistics and room tracking +- Test message generation +- Meeting room chat monitoring + +#### 5. **Features Tab** - Application Features +- Computer/Screen sharing dialog controls +- Whiteboard functionality testing +- Meeting room creation and management +- Feature state simulation + +#### 6. **Mock Tab** - Testing Scenarios +- Advanced scenario testing (Full Work Day, Fresh Start, etc.) +- Bulk player generation (5 test players) +- Work time and fatigue simulation +- Network synchronization testing +- Quick action buttons for common testing scenarios + +#### 7. **Logs Tab** - Debug Information +- Filtered logging with component-specific views +- Log level filtering (DEBUG, INFO, WARN, ERROR) +- Real-time log monitoring +- Log clearing functionality + +### Build Commands +- `npm run dev`: Start development server +- `npm run build`: Production build with TypeScript validation +- `npm run lint`: Run linting checks + +### Testing Real-time Sync +Use the DevModePanel's network testing tools to diagnose synchronization issues: +1. Enable DevMode to show the debugging panel +2. Use "Network Sync Test" to check connection status +3. Use "Test Other Player Status Change" to verify Redux updates +4. Monitor console logs for work-status-changed messages + +## Architecture Notes +- Uses Redux Toolkit for state management +- Phaser.js for game engine and player interactions +- Colyseus for real-time multiplayer networking +- Material-UI for component styling +- Custom hooks pattern for separation of concerns \ No newline at end of file diff --git a/client/README.md b/client/README.md index 5640acfd..501fbeb4 100644 --- a/client/README.md +++ b/client/README.md @@ -2,6 +2,18 @@ SkyOffice's client side was bootstrapped with [Vite](https://vitejs.dev/). +## Coding Standards + +### Language Policy +**All code comments, UI text, variable names, and documentation must be written in English only.** This includes: +- Code comments and documentation +- UI labels, buttons, and messages +- Variable and function names +- Error messages and console logs +- README and other markdown files + +This policy ensures code maintainability and international collaboration. + ## Available Scripts In the project directory, you can run: diff --git a/client/context.md b/client/context.md new file mode 100644 index 00000000..4fc0e5ed --- /dev/null +++ b/client/context.md @@ -0,0 +1,1298 @@ +# SkyOfficeC - 動的コンテキストシステム + +## 概要 + +このドキュメントは、SkyOfficeCのアプリケーション実行時に動的に変化する処理とコンテキストベースの機能をまとめています。 + +## 🏗️ System Architecture Overview (システムアーキテクチャ概要) + +``` +┌─────────────────────────────────────────────────────────────────────────────────┐ +│ SkyOfficeC アーキテクチャ │ +└─────────────────────────────────────────────────────────────────────────────────┘ + +┌─────────────────────────────────────────────────────────────────────────────────┐ +│ 🎨 UI層（表示層） │ +│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ +│ │ DevModePanel │ │ WorkStatusPanel │ │ MeetingRoom │ │ +│ │ /components/ │ │ (Future) │ │ Chat │ │ +│ │ DevModePanel. │ │ │ │ /components/ │ │ +│ │ tsx:50+ │ │ │ │ MeetingRoom │ │ +│ └─────────────────┘ └─────────────────┘ │ Chat.tsx │ │ +│ │ │ └─────────────────┘ │ +│ ▼ ▼ │ │ +└───────────┼──────────────────────┼───────────────────┼─────────────────────────┘ + │ │ │ +┌───────────┼──────────────────────┼───────────────────┼─────────────────────────┐ +│ ▼ 📊 Store層（状態管理層） ▼ │ +│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ +│ │ DevModeStore │ │ WorkStore │ │ MeetingRoomStore│ │ +│ │ /stores/ │ │ /stores/ │ │ /stores/ │ │ +│ │ DevModeStore. │ │ WorkStore.ts │ │ MeetingRoom │ │ +│ │ ts:4-25 │ │ :42-186 │ │ Store.ts:71-137 │ │ +│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ +│ │ │ │ │ +│ └──────────┬───────────┼───────────────────┘ │ +└──────────────────────┼───────────┼─────────────────────────────────────────────┘ + │ │ +┌──────────────────────┼───────────┼─────────────────────────────────────────────┐ +│ ┌──────────▼───────────▼──────────┐ 🎯 型層 │ +│ │ AvatarTypes.ts │ │ +│ │ /types/AvatarTypes.ts │ │ +│ │ getFatigueCategory():29-35 │ │ +│ │ getAvatarSprite():15-27 │ │ +│ │ AVATAR_MAPPING:37-85 │ │ +│ └─────────────────────────────────┘ │ +└───────────────────────┼─────────────────────────────────────────────────────────┘ + │ +┌───────────────────────┼─────────────────────────────────────────────────────────┐ +│ ▼ 🎮 ゲーム層 │ +│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ +│ │ Game.ts │ │ MyPlayer.ts │ │ MeetingRoom │ │ +│ │ /scenes/ │ │ /characters/ │ │ Manager.ts │ │ +│ │ Game.ts: │ │ MyPlayer.ts │ │ /scenes/ │ │ +│ │ 41,464-481, │ │ updateAvatar │ │ MeetingRoom.ts │ │ +│ │ 485-602 │ │ FromWorkState() │ │ │ │ +│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ +│ │ │ │ │ +│ ▼ ▼ ▼ │ +│ ┌─────────────────────────────────────────────────────────────┐ │ +│ │ DOM イベントシステム │ │ +│ │ document.addEventListener('mousemove') │ │ +│ │ document.addEventListener('mouseup') │ │ +│ │ Canvas マウスイベント │ │ +│ └─────────────────────────────────────────────────────────────┘ │ +└───────────────────────┼─────────────────────────────────────────────────────────┘ + │ +┌───────────────────────┼─────────────────────────────────────────────────────────┐ +│ ▼ 🌐 ネットワーク層 │ +│ ┌─────────────────────────────────────────────────────────────┐ │ +│ │ Network.ts │ │ +│ │ /services/Network.ts │ │ +│ │ updateOtherPlayerWorkStatus() │ │ +│ │ updateMeetingRoom():97-99 │ │ +│ │ Colyseus WebSocket通信 │ │ +│ └─────────────────────────────────────────────────────────────┘ │ +│ │ │ +└────────────────────────────────┼───────────────────────────────────────────────┘ + │ +┌────────────────────────────────┼───────────────────────────────────────────────┐ +│ ▼ 🌍 グローバル通信層 │ +│ ┌─────────────────────────────────────────────────────────────┐ │ +│ │ window.devModeUpdateRoomArea │ │ +│ │ 層間横断グローバル関数 │ │ +│ │ ゲーム層 ←→ UI層 通信 │ │ +│ └─────────────────────────────────────────────────────────────┘ │ +└─────────────────────────────────────────────────────────────────────────────────┘ + +┌─────────────────────────────────────────────────────────────────────────────────┐ +│ 🔄 データフローパターン │ +└─────────────────────────────────────────────────────────────────────────────────┘ + +ユーザーアクション → UI層 → Store層 → ゲーム層 → ネットワーク層 + ▲ │ │ + │ ▼ ▼ + └── 視覚フィードバック ←── 型層 ←── ゲーム状態 ←── サーバー状態 + +動的処理トリガー: +┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ +│ 勤務状態 │───▶│ 疲労度 │───▶│ アバター変更 │ +│ 変更 │ │ 計算 │ │ (全層) │ +└─────────────────┘ └─────────────────┘ └─────────────────┘ + +┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ +│ 会議室モード │───▶│ 権限 │───▶│ アクセス制御 │ +│ 変更 │ │ 検証 │ │ (ネット+ゲーム) │ +└─────────────────┘ └─────────────────┘ └─────────────────┘ + +┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ +│ DevMode切り替え │───▶│ 編集モード │───▶│ ビジュアル │ +│ │ │ 有効化 │ │ エディタ(G+D) │ +└─────────────────┘ └─────────────────┘ └─────────────────┘ +``` + +### 🔧 層別責任 (Layer Responsibilities) + +| 層 | 主要責任 | キーファイル | 動的処理の役割 | +| ------------------ | --------------------------------------------------------- | -------------------------------------------------- | -------------------------------------- | +| **UI層** | Reactコンポーネントレンダリング、ユーザーインターフェース | DevModePanel.tsx, Chat.tsx | 状態表示、ユーザー入力処理 | +| **Store層** | Redux状態管理、ビジネスロジック | WorkStore.ts, MeetingRoomStore.ts, DevModeStore.ts | 状態統合、アクションディスパッチ | +| **型層** | 型定義、純粋ロジック関数 | AvatarTypes.ts | アバターマッピング、疲労度計算 | +| **ゲーム層** | Phaserゲームエンジン、視覚表現 | Game.ts, MyPlayer.ts, MeetingRoomManager.ts | 視覚更新、インタラクティブコントロール | +| **ネットワーク層** | リアルタイム通信、サーバー同期 | Network.ts | マルチユーザー同期 | +| **グローバル層** | 層間横断通信 | windowオブジェクト | 層ブリッジ関数 | + +### 🔀 動的処理フロー (Dynamic Processing Flow) + +```` +┌─────────────────────────────────────────────────────────────────────────────────┐ +│ 5つの動的処理システム │ +└─────────────────────────────────────────────────────────────────────────────────┘ + +1. 勤務状態動的処理: + UI層 → Store層 → 型層 → ゲーム層 → ネットワーク層 + +2. 疲労度動的処理: + Store層 → 型層 → ゲーム層 → UI層 + +3. 会議室権限動的処理: + UI層 → Store層 → ネットワーク層 → ゲーム層 + + 実際のコード処理フロー: + ```typescript + // UI層: DevModePanel.tsx:465-487 + const updateRoomMode = (roomId: string, newMode: MeetingRoomMode) => { + dispatch(updateMeetingRoom({ room: { ...room, mode: newMode }, area })) + } + + // Store層: MeetingRoomStore.ts:71-113 + updateMeetingRoom: (state, action) => { + state.meetingRooms[roomIndex] = action.payload.room // 権限情報更新 + game.network.updateMeetingRoom({ + mode: action.payload.room.mode // ネットワーク層へ伝播 + }) + } + + // Network層: Network.ts + updateMeetingRoom(roomData) { + this.room?.send(Message.UPDATE_MEETING_ROOM, roomData) // サーバー送信 + } + + // Game層: MeetingRoom.ts:229-241 + private canAccessMeetingRoom(room: MeetingRoom): boolean { + if (room.mode === 'private') { + return room.invitedUsers.includes(myUserId) // 物理制限適用 + } + return room.mode === 'open' + } +```` + +4. ビジュアル編集モード動的処理: + UI層 → ゲーム層 → DOMイベント → Store層 +5. DevMode動的処理: + UI層 → Store層 → ゲーム層 → グローバル層 + +```` + +## 🎯 Five Core Dynamic Processing Systems (5つの主要動的処理システム) + +現在のシステムには以下の5つの動的処理が実装されています： + +### 1. 🏃‍♂️ Work Status Dynamic Processing (労働状態動的処理) + +**概要**: ユーザーの労働状態変化に基づくリアルタイム処理 +**実装場所**: `WorkStore.ts`, `Game.ts`, `MyPlayer.ts` + +**切り替え条件**: +```typescript +// 状態変更の前提条件とコード条件式 + +// 📍 /src/stores/WorkStore.ts:42-47 (startWork) +- working状態への切り替え: + if (workState.workStatus === 'off-duty' || workState.workStatus === 'break') { + // startWork() 実行可能 + state.workStatus = 'working' + state.workStartTime = Date.now() + } + +// 📍 /src/stores/WorkStore.ts:74-82 (startBreak) +- break状態への切り替え: + if (workState.workStatus === 'working' && + workState.workStartTime && + Date.now() - workState.workStartTime >= MIN_WORK_DURATION) { + // startBreak() 実行可能 + state.workStatus = 'break' + } + +// 📍 /src/stores/WorkStore.ts:101-109 (updateWorkStatus) +- meeting状態への切り替え: + if (roomState.joinedRoomData?.roomId || manualMeetingSet) { + // updateWorkStatus('meeting') 実行可能 + state.workStatus = action.payload.status + } + +// 📍 /src/stores/WorkStore.ts:101-109 (updateWorkStatus) +- overtime状態への切り替え: + if (workState.workStatus === 'working' && + Date.now() >= STANDARD_WORK_END_TIME) { + // updateWorkStatus('overtime') 実行可能 + state.workStatus = action.payload.status + } + +// 📍 /src/stores/WorkStore.ts:59-67 (endWork) +- off-duty状態への切り替え: + if (workState.workStatus !== 'off-duty' && (userLogout || workEndRequest)) { + // endWork() 実行可能 + state.workStatus = 'off-duty' + state.workStartTime = null + } + +// 使用している状態・変数 +- workState.workStatus: WorkStatus ('working' | 'break' | 'meeting' | 'overtime' | 'off-duty') +- workState.workStartTime: number | null +- roomState.joinedRoomData: IJoinedRoomData | null (/src/stores/RoomStore.ts) +- Date.now(): 現在時刻 +- MIN_WORK_DURATION, STANDARD_WORK_END_TIME: 設定値 +```` + +**動的処理内容**: + +```typescript +// 労働状態変更による実行・変化処理 + +// 📍 [Store層] /src/stores/WorkStore.ts:52-57 (startWork時のアバター更新) +1. アバタースプライト自動切り替え: + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.workStatus, + state.fatigueLevel + ) + +// 📍 [Game層] /src/characters/MyPlayer.ts (updateAvatarFromWorkState) +2. Phaserスプライト更新: + updateAvatarFromWorkState() { + const workState = store.getState().work + const newSprite = getAvatarSprite(...) + this.setTexture(newSprite) + } + +// 📍 [Network層] /src/services/Network.ts (updateOtherPlayerWorkStatus) +3. ネットワーク同期ブロードキャスト: + updateOtherPlayerWorkStatus(sessionId: string, workData: any) { + // Colyseusを通じて他プレイヤーに状態同期 + } + +// 📍 [Store層] /src/stores/WorkStore.ts:44-46 (workStartTime設定) +4. 時間計測開始/停止: + state.workStartTime = Date.now() // startWork時 + state.workStartTime = null // endWork時 + +// 📍 [UI層] /src/components/DevModePanel.tsx:52+ (useAppSelector) +5. DevModePanelリアルタイム表示更新: + const workState = useAppSelector((state) => state.work) + // workState変更で自動再レンダリング + +// 📍 [UI層] /src/components/WorkStatusPanel.tsx (将来実装) +6. WorkStatusPanel UI更新: + // 労働状態表示アイコン・時間表示の動的更新 + +**処理の層別分散**: +- **Store層**: Redux状態管理とアバタースプライト計算 +- **Game層**: Phaserゲーム内ビジュアル更新 +- **Network層**: マルチプレイヤー同期 +- **UI層**: React UI コンポーネント更新 +``` + +### 2. 😴 Fatigue Level Dynamic Processing (疲労度動的処理) + +**概要**: 疲労度レベル(0-100%)に基づく段階的視覚変化処理 +**実装場所**: `AvatarTypes.ts`, `WorkStore.ts` + +**切り替え条件**: + +```typescript +// 疲労度変更の条件とコード条件式 + +// 📍 /src/stores/WorkStore.ts:180-186 (setFatigueLevel) +- 疲労度設定: + setFatigueLevel: (state, action: PayloadAction) => { + state.fatigueLevel = Math.max(0, Math.min(100, action.payload)) + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, state.workStatus, state.fatigueLevel + ) + } + +// 📍 /src/types/AvatarTypes.ts:15-27 (getAvatarSprite) +- アバター選択ロジック: + export const getAvatarSprite = ( + baseAvatar: BaseAvatarType, + workStatus: WorkStatus, + fatigueLevel: number + ): string => { + const fatigueCategory = getFatigueCategory(fatigueLevel) + return AVATAR_MAPPING[baseAvatar][workStatus][fatigueCategory] + } + +// 📍 /src/types/AvatarTypes.ts:29-35 (getFatigueCategory) +- 疲労度段階判定: + const getFatigueCategory = (fatigueLevel: number): FatigueCategory => { + if (fatigueLevel <= 30) return 'low' + if (fatigueLevel <= 70) return 'medium' + return 'high' + } + +// 📍 /src/components/DevModePanel.tsx:169-174 (手動疲労度調整) +- DevMode手動調整: + const handleSetFatigue = () => { + if (mockFatigueLevel >= 0 && mockFatigueLevel <= 100) { + dispatch(setFatigueLevel(mockFatigueLevel)) + } + } + +// 📍 /src/stores/WorkStore.ts:42-57, 74-86 (自動疲労度変化 - 将来実装) +- 作業時間による自動増加: + if (workState.workStatus === 'working') { + const workDuration = Date.now() - workState.workStartTime + const fatigueIncrease = Math.min(100, workDuration / FATIGUE_RATE) + // 定期的なsetFatigueLevel(currentFatigue + fatigueIncrease) + } + +// 使用している状態・変数 +- workState.workStatus: WorkStatus (/src/stores/WorkStore.ts:21) +- workState.workStartTime: number | null (/src/stores/WorkStore.ts:22) +- workState.fatigueLevel: number (0-100) (/src/stores/WorkStore.ts:25) +- workState.baseAvatar: BaseAvatarType (/src/stores/WorkStore.ts:23) +- workState.currentAvatarSprite: string (/src/stores/WorkStore.ts:24) +- devModeState.isDevMode: boolean (/src/stores/DevModeStore.ts) +- AVATAR_MAPPING: 疲労度別アバターマッピング (/src/types/AvatarTypes.ts:37) +``` + +**動的処理内容**: + +```typescript +// 疲労度変更による実行・変化処理 + +// 📍 [Type層] /src/types/AvatarTypes.ts:29-35 (getFatigueCategory) +1. 疲労度段階判定: + const getFatigueCategory = (fatigueLevel: number): FatigueCategory => { + if (fatigueLevel <= 30) return 'low' // 通常状態 + if (fatigueLevel <= 70) return 'medium' // 疲労状態 + return 'high' // 重疲労状態 + } + +// 📍 [Store層] /src/stores/WorkStore.ts:182-186 (setFatigueLevel) +2. アバタースプライト自動更新: + state.fatigueLevel = Math.max(0, Math.min(100, action.payload)) + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, state.workStatus, state.fatigueLevel + ) + +// 📍 [Type層] /src/types/AvatarTypes.ts:37-85 (AVATAR_MAPPING) +3. 疲労度別アバター選択: + AVATAR_MAPPING[baseAvatar][workStatus][fatigueCategory] + // 例: 'adam_working_tired', 'lucy_break_exhausted' + +// 📍 [Game層] /src/characters/MyPlayer.ts (updateAvatarFromWorkState) +4. Phaserスプライト動的更新: + updateAvatarFromWorkState() { + const workState = store.getState().work + const newSprite = getAvatarSprite( + workState.baseAvatar, workState.workStatus, workState.fatigueLevel + ) + this.setTexture(newSprite) + } + +// 📍 [UI層] /src/components/DevModePanel.tsx:125+ (疲労度表示) +5. DevMode疲労度インジケーター: + Fatigue: {workState.fatigueLevel}% + // リアルタイム疲労度表示更新 + +// 📍 [Network層] /src/services/Network.ts (updateOtherPlayerWorkStatus) +6. 他プレイヤーへの疲労状態同期: + updateOtherPlayerWorkStatus(sessionId, { + workStatus: state.workStatus, + fatigueLevel: state.fatigueLevel, + currentAvatarSprite: state.currentAvatarSprite + }) + +// 📍 [Game層] /src/characters/OtherPlayer.ts (将来実装) +7. 他プレイヤー疲労状態表示: + // 疲労度に基づく他プレイヤーアバター表示 + +**処理の層別分散**: +- **Type層**: 疲労度分類ロジックとアバターマッピング +- **Store層**: Redux疲労度状態管理とスプライト計算 +- **Game層**: Phaserゲーム内疲労度ビジュアル表現 +- **UI層**: React疲労度インジケーター表示 +- **Network層**: マルチプレイヤー疲労状態同期 +``` + +### 3. 🏢 Meeting Room Permission Dynamic Processing (会議室権限動的処理) + +**概要**: 会議室のアクセス権限とモードに基づく動的アクセス制御 +**実装場所**: `MeetingRoomStore.ts`, `Network.ts` + +**切り替え条件**: + +```typescript +// 権限モード変更の条件とコード条件式 + +// 📍 /src/stores/MeetingRoomStore.ts:71-80 (updateMeetingRoom) +- 会議室モード更新: + updateMeetingRoom: ( + state, + action: PayloadAction<{ + roomId: string; + updates: Partial> + }> + ) => { + const room = state.meetingRooms.find(r => r.id === action.payload.roomId) + if (room) { + Object.assign(room, action.payload.updates) + } + } + +// 📍 /src/stores/MeetingRoomStore.ts:5 (MeetingRoomMode定義) +- 権限モード定義: + export type MeetingRoomMode = 'open' | 'private' | 'secret' + +// 📍 /src/components/DevModePanel.tsx:989-995 (DevMode権限チェック) +- DevMode経由のモード変更: + if (userState.sessionId === room.creatorId || + userState.permissions.includes('admin') || + devModeState.isDevMode) { + // updateMeetingRoom({ mode: 'open'/'private'/'secret' }) 実行可能 + } + +// 📍 Network.ts (将来実装 - アクセス権限判定) +- アクセス権限判定条件: + const canEnterRoom = (room: MeetingRoom, userId: string) => { + switch (room.mode) { + case 'open': + return true + case 'private': + return room.allowedUsers?.includes(userId) || false + case 'secret': + return room.allowedUsers?.includes(userId) || room.creatorId === userId + default: + return false + } + } + +// 📍 /src/stores/MeetingRoomStore.ts:10-14 (MeetingRoom interface) +- 会議室表示判定: + interface MeetingRoom { + id: string + name: string + mode: MeetingRoomMode + allowedUsers?: string[] + creatorId: string + } + +// 使用している状態・変数 +- userState.sessionId: string (現在のユーザーID) +- userState.permissions: string[] (ユーザー権限配列) +- room.creatorId: string (/src/stores/MeetingRoomStore.ts:14) +- room.mode: MeetingRoomMode (/src/stores/MeetingRoomStore.ts:12) +- room.allowedUsers: string[] | undefined (/src/stores/MeetingRoomStore.ts:13) +- devModeState.isDevMode: boolean (/src/stores/DevModeStore.ts:4) +``` + +**動的処理内容**: + +```typescript +// 会議室権限変更による実行・変化処理 + +// 📍 [Store層] /src/stores/MeetingRoomStore.ts:71-80 (updateMeetingRoom) +1. 会議室状態更新: + const room = state.meetingRooms.find(r => r.id === action.payload.roomId) + if (room) { + Object.assign(room, action.payload.updates) + // mode, allowedUsers, name等の動的更新 + } + +// 📍 [Network層] /src/services/Network.ts:97-99 (ネットワーク同期) +2. リアルタイム権限同期: + game.network.updateMeetingRoom({ + roomId: action.payload.roomId, + ...action.payload.updates + }) + +// 📍 [Game層] /src/scenes/MeetingRoom.ts (アクセス制御) +3. 入室権限チェック: + const canEnterRoom = (room: MeetingRoom, userId: string) => { + switch (room.mode) { + case 'open': return true + case 'private': return room.allowedUsers?.includes(userId) + case 'secret': return room.allowedUsers?.includes(userId) || room.creatorId === userId + } + } + +// 📍 [UI層] /src/components/RoomList.tsx (将来実装) +4. 会議室リスト動的表示: + const visibleRooms = meetingRooms.filter(room => { + if (room.mode === 'secret') { + return room.creatorId === currentUserId || room.allowedUsers?.includes(currentUserId) + } + return true + }) + +// 📍 [UI層] /src/components/DevModePanel.tsx:989-995 (DevMode権限制御UI) +5. DevMode権限管理UI: + + +// 📍 [Game層] /src/scenes/MeetingRoom.ts (占有状況管理) +6. 占有状況リアルタイム更新: + room.onStateChange((state) => { + // currentUsers配列の動的更新 + // 入退室時の権限再チェック + }) + +// 📍 [Network層] /src/services/Network.ts (権限違反検出) +7. 権限違反時の自動退室: + if (!canEnterRoom(room, sessionId)) { + // 自動的にロビーに移動 + this.leaveRoom() + } + +**処理の層別分散**: +- **Store層**: Redux会議室権限状態管理 +- **Network層**: Colyseus権限同期と違反検出 +- **Game層**: Phaser入退室制御と権限チェック +- **UI層**: React権限管理インターフェース +``` + +### 4. ✏️ Visual Edit Mode Dynamic Processing (編集モード動的処理) + +**概要**: 会議室視覚編集モードのオン/オフに基づくインタラクション変化 +**実装場所**: `Game.ts`, `DevModePanel.tsx` + +**切り替え条件**: + +```typescript +// 編集モード有効化の条件とコード条件式 + +// 📍 /src/scenes/Game.ts:464-481 (toggleMeetingRoomEditMode) +- 編集モード切り替え: + toggleMeetingRoomEditMode(enabled: boolean) { + console.log('🎯 [Game] toggleMeetingRoomEditMode called with:', enabled) + this.meetingRoomEditMode = enabled + + if (enabled) { + this.meetingRoomManager.hideRoomAreas() + this.createEditableRoomAreas() + } else { + this.clearEditableRoomAreas() + this.meetingRoomManager.showRoomAreas() + } + } + +// 📍 /src/scenes/Game.ts:41 (meetingRoomEditMode変数) +- 編集モード状態管理: + private meetingRoomEditMode = false + +// 📍 /src/scenes/Game.ts:485-530 (setupRoomDragSystem) +- DOM-basedドラッグシステム: + private setupRoomDragSystem(roomRect: Phaser.GameObjects.Rectangle, roomId: string) { + const roomDragState = { + isDragging: false, + startMouseX: 0, + startMouseY: 0, + startObjX: 0, + startObjY: 0, + roomId: roomId + } + + roomRect.on('pointerdown', (pointer: any) => { + if (this.meetingRoomEditMode && !roomDragState.isDragging) { + // ドラッグ開始処理 + } + }) + } + +// 📍 /src/scenes/Game.ts:574-602 (updateRoomPositionInStore) +- Redux位置更新: + private updateRoomPositionInStore(roomId: string, centerX: number, centerY: number) { + const meetingRoomState = store.getState().meetingRoom + const area = meetingRoomState.meetingRoomAreas.find(a => a.meetingRoomId === roomId) + + if (area) { + const updateFunction = (window as any).devModeUpdateRoomArea + if (updateFunction) { + updateFunction(roomId, { x: newX, y: newY, width: area.width, height: area.height }) + } + } + } + +// 📍 /src/components/DevModePanel.tsx:120-130 (devModeUpdateRoomArea) +- DevMode経由の更新関数: + const updateRoomAreaFromVisual = (roomId: string, newArea: any) => { + const currentArea = meetingRoomState.meetingRoomAreas.find(a => a.meetingRoomId === roomId) + if (currentArea) { + dispatch(updateMeetingRoomArea({ ...currentArea, ...newArea })) + } + } + +// 使用している状態・変数 +- this.meetingRoomEditMode: boolean (/src/scenes/Game.ts:41) +- devModeState.isDevMode: boolean (/src/stores/DevModeStore.ts:4) +- this.game.canvas: HTMLCanvasElement (/src/scenes/Game.ts:521) +- roomDragState.isDragging: boolean (/src/scenes/Game.ts:488) +- meetingRoomState.meetingRoomAreas: MeetingRoomArea[] (/src/stores/MeetingRoomStore.ts) +- store.getState(): RootState (/src/stores/index.ts) +- (window as any).devModeUpdateRoomArea: function (/src/components/DevModePanel.tsx:125) +``` + +**動的処理内容**: + +```typescript +// 編集モード切り替えによる実行・変化処理 + +// 📍 [Game層] /src/scenes/Game.ts:468-473 (編集モード有効化処理) +1. 編集可能オブジェクト表示: + if (enabled) { + this.meetingRoomManager.hideRoomAreas() // 既存エリア非表示 + this.createEditableRoomAreas() // 編集可能エリア作成 + } + +// 📍 [Game層] /src/scenes/Game.ts:682-692 (setupRoomDragSystem呼び出し) +2. DOM-basedドラッグシステム有効化: + this.setupRoomDragSystem(rect, roomId) + // document.addEventListener('mousemove', roomMouseMoveHandler) + // document.addEventListener('mouseup', roomMouseUpHandler) + +// 📍 [Game層] /src/scenes/Game.ts:642-653 (ホバー効果) +3. 視覚的フィードバック制御: + rect.on('pointerover', () => { + if (!rect.getData('isDragging')) { + rect.setFillStyle(0xff9800, 0.5) // ホバー時透明度変更 + } + }) + +// 📍 [Game層] /src/scenes/MeetingRoomManager.ts (showRoomAreas/hideRoomAreas) +4. 既存MeetingRoomManager表示制御: + hideRoomAreas() // 編集開始時 + showRoomAreas() // 編集終了時 + +// 📍 [Store層] /src/stores/MeetingRoomStore.ts:128-137 (updateMeetingRoomArea) +5. Redux位置データリアルタイム更新: + updateMeetingRoomArea: (state, action: PayloadAction) => { + const index = state.meetingRoomAreas.findIndex(area => + area.meetingRoomId === action.payload.meetingRoomId + ) + if (index !== -1) { + state.meetingRoomAreas[index] = action.payload + } + } + +// 📍 [UI層] /src/components/DevModePanel.tsx:125-130 (グローバル関数設定) +6. DevMode更新関数グローバル登録: + (window as any).devModeUpdateRoomArea = updateRoomAreaFromVisual + // ドラッグ終了時にGame.tsから呼び出し可能 + +// 📍 [Game層] /src/scenes/Game.ts:705-712 (DOM イベントクリーンアップ) +7. イベントリスナー管理: + // 編集モード終了時の自動クリーンアップ + document.removeEventListener('mousemove', roomMouseMoveHandler) + document.removeEventListener('mouseup', roomMouseUpHandler) + +**処理の層別分散**: +- **Game層**: Phaser編集モード制御、ドラッグシステム、ビジュアル管理 +- **Store層**: Redux会議室エリア位置状態管理 +- **UI層**: DevMode編集インターフェースとグローバル関数 +- **DOM層**: ブラウザマウスイベント直接制御 +``` + +### 5. 🛠️ DevMode Dynamic Processing (DevMode動的処理) + +**概要**: 開発モード状態に基づく包括的デバッグ機能の動的制御 +**実装場所**: `DevModePanel.tsx`, `DevModeStore.ts` + +**切り替え条件**: + +```typescript +// DevMode有効化の条件とコード条件式 + +// 📍 /src/stores/DevModeStore.ts:19-25 (setDevmode) +- DevMode状態切り替え: + setDevmode: (state, action) => { + const previousState = state.isDevMode + state.isDevMode = action.payload + if (previousState !== state.isDevMode) { + console.log(`🛠️ [DevMode] ${state.isDevMode ? 'ENABLED' : 'DISABLED'}`) + } + } + +// 📍 /src/stores/DevModeStore.ts:4-8 (DevModeState interface) +- DevMode状態定義: + interface DevModeState { + isDevMode: boolean + } + const initialState: DevModeState = { + isDevMode: false, + } + +// 📍 /src/components/DevModePanel.tsx:50 (DevModePanel component) +- DevModePanel表示制御: + const DevModePanel: React.FC = () => { + const isDevMode = useAppSelector((state) => state.devMode.isDevMode) + // Hook declarations... + + if (!isDevMode) { + return ( + + ) + } + // 7タブパネル表示 + } + +// 📍 /src/components/DevModePanel.tsx:138 (DevMode有効化ボタン) +- DevMode有効化トリガー: + + +// 📍 /src/components/DevModePanel.tsx:658-665 (DevMode無効化) +- DevMode無効化ボタン: + + +// 📍 環境変数ベースの制御 (将来実装) +- 環境制限: + const canEnableDevMode = () => { + return process.env.NODE_ENV === 'development' || + process.env.REACT_APP_ENABLE_DEVMODE === 'true' + } + +// 使用している状態・変数 +- state.devMode.isDevMode: boolean (/src/stores/DevModeStore.ts:4) +- useAppSelector((state) => state.devMode.isDevMode) (/src/components/DevModePanel.tsx:52) +- dispatch(setDevmode(boolean)) (/src/components/DevModePanel.tsx:138, 665) +- process.env.NODE_ENV: string (環境変数) +- process.env.REACT_APP_ENABLE_DEVMODE: string (環境変数) +- tabValue: number (/src/components/DevModePanel.tsx:54) +- localStorage.getItem('devmode_enabled'): string | null (将来実装) +``` + +**動的処理内容**: + +```typescript +// DevMode切り替えによる実行・変化処理 + +// 📍 [UI層] /src/components/DevModePanel.tsx:132-149 (DevMode有効時) +1. 7タブDevModePanelの表示: + if (!isDevMode) { + return + } + // 7タブパネル表示: Work, User, Room, Chat, Features, Mock, Logs + +// 📍 [UI層] /src/components/DevModePanel.tsx:1658+ (Logsタブ) +2. リアルタイムログ監視システム: + const logs = useAppSelector((state) => state.logger.logs) + const filteredLogs = logs.filter(log => { + if (logFilter !== 'all' && log.level !== logFilter) return false + if (componentFilter !== 'all' && log.component !== componentFilter) return false + return true + }) + +// 📍 [UI層] /src/components/DevModePanel.tsx:各タブ内容 +3. 状態操作インターフェース提供: + // Work Tab: 労働状態・疲労度・アバター変更 + // User Tab: 背景モード・ログイン状態制御 + // Room Tab: 会議室管理・Visual Editor + // Chat Tab: チャット機能テスト + +// 📍 [UI層] /src/components/DevModePanel.tsx:1520-1580 (Mock Tab) +4. モックデータ生成・テストシナリオ: + const handleFullWorkDay = () => { + dispatch(startWork()) + dispatch(setFatigueLevel(80)) + // 一括テストシナリオ実行 + } + +// 📍 [Store層] /src/stores/DevModeStore.ts:19-25 (状態変更ログ) +5. デバッグ情報ロギング: + setDevmode: (state, action) => { + const previousState = state.isDevMode + state.isDevMode = action.payload + if (previousState !== state.isDevMode) { + console.log(`🛠️ [DevMode] ${state.isDevMode ? 'ENABLED' : 'DISABLED'}`) + } + } + +// 📍 [Game層] /src/scenes/Game.ts:464+ (Visual Editor有効化) +6. Visual Editor機能統合: + if (devModeState.isDevMode) { + // toggleMeetingRoomEditMode() 使用可能 + // 会議室エリアドラッグ編集有効化 + } + +// 📍 [Network層] /src/services/Network.ts (デバッグ情報) +7. ネットワークデバッグ情報表示: + if (devModeState.isDevMode) { + // 詳細なネットワーク同期ログ + // 接続状態・エラー情報表示 + } + +// 📍 [UI層] /src/components/DevModePanel.tsx:120-130 (グローバル関数設定) +8. グローバルデバッグ関数提供: + (window as any).devModeUpdateRoomArea = updateRoomAreaFromVisual + // Game層からのダイレクト呼び出し可能 + +**処理の層別分散**: +- **UI層**: React DevModePanelインターフェース、7タブ制御、ログ表示 +- **Store層**: Redux DevMode状態管理とロギング +- **Game層**: Phaser Visual Editor統合、ゲーム内デバッグ表示 +- **Network層**: ネットワーク同期デバッグ情報 +- **Global層**: windowオブジェクト経由のクロス層通信 +``` + +## 🔄 Dynamic State-Based Processing (動的状態ベース処理) + +### 1. 労働状態による動的変化 (Work Status Dynamic Changes) + +#### Avatar Automatic Switching (アバター自動切り替え) + +```typescript +// WorkStore.ts - All work status changes trigger avatar updates +const getAvatarSprite = (baseAvatar: BaseAvatarType, workStatus: WorkStatus, fatigueLevel: number): string + +// Automatic triggers: +- startWork() → working avatar +- endWork() → off-duty avatar +- startBreak() → break avatar +- updateWorkStatus(meeting) → meeting avatar +- updateWorkStatus(overtime) → overtime avatar +- setFatigueLevel() → fatigue-based visual changes +``` + +#### Visual Feedback System + +```typescript +// Game.ts - MyPlayer avatar updates +updateAvatarFromWorkState() { + const workState = store.getState().work + const newSprite = getAvatarSprite( + workState.baseAvatar, + workState.workStatus, + workState.fatigueLevel + ) + // Real-time sprite switching +} +``` + +### 2. 会議室権限による動的変化 (Meeting Room Permission Changes) + +#### Access Control Dynamic Updates + +```typescript +// MeetingRoomStore.ts - Permission-based UI changes +interface MeetingRoom { + mode: 'open' | 'private' | 'secret' // Dynamic access control + allowedUsers?: string[] // Dynamic user whitelist + currentUsers: string[] // Real-time occupancy +} + +// Dynamic behaviors: +- mode: 'open' → Anyone can enter +- mode: 'private' → Invitation required +- mode: 'secret' → Hidden from room list +``` + +#### Real-time Room State Updates + +```typescript +// Network.ts - Live permission enforcement +room.onStateChange((state) => { + // Dynamic room visibility updates + // Real-time user access control + // Live occupancy management +}) +``` + +### 3. 疲労度による動的変化 (Fatigue Level Dynamic Changes) + +#### Progressive Visual Changes + +```typescript +// AvatarTypes.ts - Fatigue-based avatar mapping +const AVATAR_MAPPING = { + [baseAvatar]: { + [workStatus]: { + low: 'normal_sprite', // 0-30% fatigue + medium: 'tired_sprite', // 31-70% fatigue + high: 'exhausted_sprite', // 71-100% fatigue + }, + }, +} +``` + +#### Performance Impact System + +```typescript +// Future implementation potential: +- High fatigue → Slower movement speed +- High fatigue → Reduced work efficiency indicators +- High fatigue → Different interaction animations +``` + +### 4. 通信状態による動的変化 (Communication State Changes) + +#### Video/Audio Status Integration + +```typescript +// UserStore.ts - Communication state management +interface UserState { + videoConnected: boolean // Camera status + audioConnected: boolean // Microphone status + isInCall: boolean // Active call status +} + +// Dynamic visual indicators: +- videoConnected → Camera icon display +- audioConnected → Microphone icon display +- isInCall → Special avatar overlay/badge +``` + +#### Meeting Room Communication Mode + +```typescript +// ChatStore.ts - Context-aware messaging +interface ChatState { + currentMeetingRoomId: string | null // Active room context + showChat: boolean // Dynamic chat visibility + focused: boolean // Input focus management +} + +// Dynamic behaviors: +- In meeting room → Room-specific chat +- In lobby → Global chat +- Private room → Restricted messaging +``` + +## 🔄 Context-Aware Processing (コンテキスト対応処理) + +### 1. Location-Based Context + +#### Lobby vs Meeting Room Context + +```typescript +// RoomStore.ts - Location state management +interface RoomState { + lobbyJoined: boolean + roomJoined: boolean + joinedRoomData: IJoinedRoomData | null +} + +// Context-dependent features: +- Lobby: Global user list, public chat, room browser +- Meeting Room: Room-specific chat, private user list, room controls +``` + +#### Spatial Context in Game + +```typescript +// Game.ts - Position-based interactions +- Near computer → Computer interaction available +- Near whiteboard → Whiteboard access enabled +- In meeting area → Automatic room association +- Near other players → Direct communication options +``` + +### 2. Time-Based Context + +#### Work Hours Context + +```typescript +// WorkStore.ts - Temporal work patterns +interface WorkState { + workStartTime: number | null // Session start tracking + workStatus: WorkStatus // Current work phase + fatigueLevel: number // Accumulated fatigue +} + +// Dynamic time-based changes: +- Work duration → Progressive fatigue increase +- Break time → Fatigue recovery +- Overtime hours → Accelerated fatigue accumulation +``` + +#### Session Context Management + +```typescript +// DevModePanel.tsx - Development time context +- Fresh start scenarios +- Full work day simulations +- Stress testing with high fatigue +- Multi-user interaction testing +``` + +### 3. Permission-Based Context + +#### Role-Based Access Control + +```typescript +// Future enhancement potential: +interface UserRole { + type: 'admin' | 'manager' | 'employee' | 'guest' + permissions: string[] + meetingRoomAccess: string[] +} + +// Dynamic permission enforcement: +- Admin → Full system access, all room management +- Manager → Team room creation, user oversight +- Employee → Standard room access, personal settings +- Guest → Limited access, public areas only +``` + +## 🎮 Real-time Synchronization (リアルタイム同期) + +### データ伝播の全体的な流れ + +**現在の実装（問題あり）**: + +``` +自分のプレイヤー 他のプレイヤー +┌─────────────────┐ ┌─────────────────┐ +│ UI層: 勤務状態変更│ ────────┐ │ │ +│ ┌─ Redux更新 │ │ │ │ +│ └─ Network送信 │ │ │ │ +└─────────────────┘ │ │ │ + ↓ │ │ │ + ┌──────────────────────────────────────────────────────┐ + │ Colyseus Server │ + │ 'work-status-changed' │ + │ メッセージブロードキャスト │ + └──────────────────────────────────────────────────────┘ + ↓ │ │ ↓ +┌─────────────────┐ │ │ ┌─────────────────┐ +│Network層:メッセージ受信│ │ │ │Network層:メッセージ受信│ +└─────────────────┘ │ │ └─────────────────┘ + ↓ │ │ ↓ +┌─────────────────┐ │ │ ┌─────────────────┐ +│Store層:他プレイヤー更新│ │ │ │Store層:他プレイヤー更新│ +└─────────────────┘ │ │ └─────────────────┘ + ↓ │ │ ↓ +┌─────────────────┐ │ │ ┌─────────────────┐ +│UI層: DevMode表示 │ └─────────│→│UI層: DevMode表示 │ +└─────────────────┘ │ └─────────────────┘ + ↓ │ ↓ +┌─────────────────┐ │ ┌─────────────────┐ +│Game層:自分のアバター│ │ │Game層:他プレイヤー │ +│ 外観変更 │ │ │ アバター外観変更 │ +└─────────────────┘ │ └─────────────────┘ + │ (実装予定) + └─────────────────┘ +``` + +**実際のコード例**: + +```typescript +// UI層 (WorkStatusPanel.tsx) - 二重処理の問題 +const handleStartWork = () => { + dispatch(startWork()) // ← Redux Store更新 + const game = phaserGame.scene.keys.game as Game + if (game?.network) { + game.network.startWork() // ← 直接Network通信 + } +} + +// 問題: UI層でRedux更新とNetwork通信を両方実行 +``` + +**理想的なアーキテクチャ**: + +``` +UI層 → Service層 → [Store層 + Network層] → Server → 他クライアント +``` + +### 1. マルチプレイヤー状態同期 + +#### 勤務状態ブロードキャスト + +```typescript +// Network.ts - リアルタイム勤務状態更新 +updateOtherPlayerWorkStatus(sessionId: string, workData: any) { + // 他のプレイヤーに勤務状態変更をブロードキャスト + // リアルタイムで視覚表現を更新 + // クライアント間で疲労度を同期 +} +``` + +#### 会議室状態同期 + +```typescript +// MeetingRoomManager.ts - ライブルーム更新 +- ルーム作成 → 全ユーザーに即座に表示 +- 権限変更 → リアルタイムアクセス更新 +- ユーザー入退室 → ライブ占有状況追跡 +``` + +### 2. 他プレイヤーデータ表示同期 + +#### 他プレイヤー勤務状態の伝播フロー + +```typescript +// Network.ts:296-326 - サーバーからの勤務状態変更受信 +this.room.onMessage('work-status-changed', (data: { + playerId: string, + workStatus: string, + playerName: string +}) => { + // Redux Storeを更新 + store.dispatch(updateOtherPlayerWorkStatus({ + playerId: data.playerId, + playerName: data.playerName, + workStatus: data.workStatus + })) + + // Phaserイベントも発火（アバター外観変更用） + phaserEvents.emit('WORK_STATUS_CHANGED', data) +}) + +// WorkStore.ts - 他プレイヤー状態管理 +updateOtherPlayerWorkStatus: (state, action) => { + const { playerId, playerName, workStatus } = action.payload + state.otherPlayersWorkStatus[playerId] = { + playerId, + playerName, + workStatus, + lastUpdated: Date.now() // 最終更新時刻記録 + } +} + +// DevModePanel.tsx:772-786 - UI表示 +{Object.entries(workState.otherPlayersWorkStatus).map(([playerId, player]) => ( + + {player.playerName}: {player.workStatus} | + Updated: {new Date(player.lastUpdated).toLocaleTimeString()} + +))} +``` + +#### 他プレイヤーアバター外観同期（実装予定） + +```typescript +// OtherPlayer.ts - 勤務状態に応じた外観変更（未実装） +updateWorkStatusAppearance(workStatus: WorkStatus, fatigueLevel?: number) { + const avatarSprite = getAvatarSprite(this.baseAvatar, workStatus, fatigueLevel) + if (avatarSprite !== this.playerTexture) { + this.setTexture(avatarSprite) // スプライト変更 + this.anims.play(`${avatarSprite}_idle_down`, true) + } +} + +// Game.ts - Phaserイベントハンドリング（実装予定） +phaserEvents.on('WORK_STATUS_CHANGED', (data) => { + const otherPlayer = this.otherPlayerMap.get(data.playerId) + if (otherPlayer) { + otherPlayer.updateWorkStatusAppearance(data.workStatus) + } +}) +``` + +### 3. ビジュアル編集同期 + +#### リアルタイムルームエディター + +```typescript +// Game.ts - ライブ更新付きビジュアルルーム編集 +setupRoomDragSystem() { + // DOMベースドラッグシステム + // リアルタイム位置更新 + // Reduxストア同期 + // 他ユーザーへのネットワークブロードキャスト +} +``` + +## 🛠️ 開発コンテキスト機能 + +### 1. DevMode動的テスト + +#### シナリオシミュレーション + +```typescript +// DevModePanel.tsx - 動的テストシナリオ +- フルワークデー: 疲労を含む完全な作業サイクルをシミュレート +- フレッシュスタート: 全状態を初期状態にリセット +- 高ストレス: 最大疲労テスト +- マルチユーザー: チームインタラクションをシミュレート +``` + +#### ライブ状態監視 + +```typescript +// リアルタイムデバッグ機能: +;-勤務状態追跡 - アバター変更監視 - ネットワーク同期検証 - 会議室状態検査 +``` + +### 2. ビジュアルルームエディターコンテキスト + +#### 編集モード状態管理 + +```typescript +// Game.ts - コンテキスト感知編集 +toggleMeetingRoomEditMode(enabled: boolean) { + if (enabled) { + // 通常ルームグラフィックを非表示 + // ドラッグインタラクションを有効化 + // 編集専用UIを表示 + } else { + // 通常ビューを復元 + // 編集インタラクションを無効化 + // 変更をストアに保存 + } +} +``` + +## 📋 将来の動的コンテキスト拡張 + +### 1. 高度疲労システム + +- 疲労ベースの動的移動速度 +- 疲労ベースのインタラクション制限 +- 回復率計算 +- チーム疲労影響分析 + +### 2. 強化権限システム + +- ロールベースの動的UI変更 +- コンテキスト感知機能利用性 +- 動的セキュリティ強化 +- 権限変更の監査記録 + +### 3. スマートコンテキスト検出 + +- 自動会議検出 +- 作業パターン分析 +- 予測的疲労管理 +- インテリジェントルーム推奨 + +### 4. コミュニケーションコンテキスト + +- ステータスベースの利用可能性表示 +- コンテキスト感知通知フィルタリング +- 会議固有コミュニケーションモード +- 動的プライバシーコントロール + +## 🔧 実装ノート + +### 状態管理アーキテクチャ + +- 中央集中状態管理のRedux Toolkit +- Colyseus経由のリアルタイム同期 +- UI更新用コンテキスト感知セレクター +- 自動状態永続化 + +### パフォーマンス考慮事項 + +- React.memoでの効率的再レンダリング +- 選択的状態購読 +- デバウンスされたリアルタイム更新 +- 適切なクリーンアップでのメモリリーク防止 + +### エラーハンドリング + +- ネットワーク問題のグレースフルデグラデーション +- 状態回復メカニズム +- コンテキスト検証とフォールバック +- ユーザーフレンドリーなエラーメッセージ + +--- + +このコンテキストシステムにより、SkyOfficeCは**動的で応答性の高い仮想オフィス環境**を提供し、ユーザーの作業状態、権限、疲労度、コミュニケーション状況に基づいて**リアルタイムで適応**します。 diff --git a/client/src/App.refactored.tsx b/client/src/App.refactored.tsx new file mode 100644 index 00000000..a2ac156b --- /dev/null +++ b/client/src/App.refactored.tsx @@ -0,0 +1,113 @@ +import React from 'react' +import styled from 'styled-components' + +import { useAppDispatch } from './hooks' +import { useAppNavigation } from './hooks/useAppNavigation' +import { useModalManager } from './hooks/useModalManager' +import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts' +import { useGameContent } from './hooks/useGameContent' +import { toggleDevMode } from './stores/DevModeStore' + +import RoomSelectionDialog from './components/RoomSelectionDialog' +import LoginDialog from './components/LoginDialog' +import ComputerDialog from './components/ComputerDialog' +import WhiteboardDialog from './components/WhiteboardDialog' +import VideoConnectionDialog from './components/VideoConnectionDialog' +import Chat from './components/Chat' +import HelperButtonGroup from './components/HelperButtonGroup' +import MobileVirtualJoystick from './components/MobileVirtualJoystick' +import MeetingRoomManager from './components/MeetingRoomManager' +import MeetingRoomChat from './components/MeetingRoomChat' +import WorkStatusPanel from './components/WorkStatusPanel' +import PlayerStatusModal from './components/PlayerStatusModal' +import DevModePanel from './components/DevModePanel' + +const Backdrop = styled.div` + position: absolute; + height: 100%; + width: 100%; +` + +/** + * リファクタリング後のApp.tsx + * 関心分離により各機能がカスタムフックに分離されている + */ +function App() { + const dispatch = useAppDispatch() + + // ナビゲーション状態管理 + const { currentView, shouldShowVideoDialog, shouldShowHelperButtons } = useAppNavigation() + + // モーダル状態管理 + const { modals, playerStatus } = useModalManager() + + // キーボードショートカット + useKeyboardShortcuts({ + onToggleDevMode: () => dispatch(toggleDevMode()), + onOpenPlayerStatus: () => playerStatus.open() + }) + + // UI条件分岐の簡素化 + const renderMainContent = () => { + switch (currentView) { + case 'room-selection': + return + case 'login': + return + case 'computer': + return + case 'whiteboard': + return + case 'main': + default: + return + } + } + + return ( + + {renderMainContent()} + + {/* 条件付きコンポーネント */} + {shouldShowVideoDialog && } + {shouldShowHelperButtons && } + + {/* モーダル */} + + + {/* DevMode Panel */} + + + ) +} + +/** + * メインゲームコンテンツを分離 + */ +const MainGameContent = () => { + const { isDevMode, currentMeetingRoomId, currentRoom, userCanSendMessages } = useGameContent() + + return ( + <> + + + + + {isDevMode && } + + {currentMeetingRoomId && currentRoom && ( + + )} + + ) +} + +export default App \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx index dae3d512..14b5f155 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,7 +1,16 @@ -import React from 'react' +mport React from 'react' import styled from 'styled-components' +<<<<<<< Updated upstream import { useAppSelector } from './hooks' +======= +import { useAppDispatch } from './hooks' +import { useAppNavigation } from './hooks/useAppNavigation' +import { useModalManager } from './hooks/useModalManager' +import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts' +import { useGameContent } from './hooks/useGameContent' +import { toggleDevMode } from './stores/DevModeStore' +>>>>>>> Stashed changes import RoomSelectionDialog from './components/RoomSelectionDialog' import LoginDialog from './components/LoginDialog' @@ -12,13 +21,21 @@ import Chat from './components/Chat' import HelperButtonGroup from './components/HelperButtonGroup' import MobileVirtualJoystick from './components/MobileVirtualJoystick' import MeetingRoomManager from './components/MeetingRoomManager' +<<<<<<< Updated upstream +======= +import MeetingRoomChat from './components/MeetingRoomChat' +import WorkStatusPanel from './components/WorkStatusPanel' +import PlayerStatusModal from './components/PlayerStatusModal' +import DevModePanel from './components/DevModePanel' +>>>>>>> Stashed changes const Backdrop = styled.div` position: absolute; - height: 100%; + height: 100% width: 100%; ` +<<<<<<< Updated upstream function App() { const loggedIn = useAppSelector((state) => state.user.loggedIn) const computerDialogOpen = useAppSelector((state) => state.computer.computerDialogOpen) @@ -52,15 +69,87 @@ function App() { } else { /* Render RoomSelectionDialog if yet selected a room. */ ui = +======= +/** + * リファクタリング後のApp.tsx + * 関心分離により各機能がカスタムフックに分離されている + */ +function App() { + const dispatch = useAppDispatch() + + // ナビゲーション状態管理 + const { currentView, shouldShowVideoDialog, shouldShowHelperButtons } = useAppNavigation() + + // モーダル状態管理 + const { modals, playerStatus } = useModalManager() + + // キーボードショートカット + useKeyboardShortcuts({ + onToggleDevMode: () => dispatch(toggleDevMode()), + onOpenPlayerStatus: () => playerStatus.open() + }) + + // UI条件分岐の簡素化 + const renderMainContent = () => { + switch (currentView) { + case 'room-selection': + return + case 'login': + return + case 'computer': + return + case 'whiteboard': + return + case 'main': + default: + return + } +>>>>>>> Stashed changes } return ( - {ui} - {/* Render HelperButtonGroup if no dialogs are opened. */} - {!computerDialogOpen && !whiteboardDialogOpen && } + {renderMainContent()} + + {/* 条件付きコンポーネント */} + {shouldShowVideoDialog && } + {shouldShowHelperButtons && } + + {/* モーダル */} + + + {/* DevMode Panel */} + ) } +/** + * メインゲームコンテンツを分離 + */ +const MainGameContent = () => { + const { isDevMode, currentMeetingRoomId, currentRoom, userCanSendMessages } = useGameContent() + + return ( + <> + + + + + + {currentMeetingRoomId && currentRoom && ( + + )} + + ) +} + export default App diff --git a/client/src/App.tsx.backup b/client/src/App.tsx.backup new file mode 100644 index 00000000..5ff187c9 --- /dev/null +++ b/client/src/App.tsx.backup @@ -0,0 +1,131 @@ +import React from 'react' +import styled from 'styled-components' + +import { useAppSelector, useAppDispatch } from './hooks' + +import RoomSelectionDialog from './components/RoomSelectionDialog' +import LoginDialog from './components/LoginDialog' +import ComputerDialog from './components/ComputerDialog' +import WhiteboardDialog from './components/WhiteboardDialog' +import VideoConnectionDialog from './components/VideoConnectionDialog' +import Chat from './components/Chat' +import HelperButtonGroup from './components/HelperButtonGroup' +import MobileVirtualJoystick from './components/MobileVirtualJoystick' +import MeetingRoomManager from './components/MeetingRoomManager' +import MeetingRoomChat from './components/MeetingRoomChat' +import WorkStatusPanel from './components/WorkStatusPanel' +import PlayerStatusModal from './components/PlayerStatusModal' +import { useEffect, useState } from 'react' +import { toggleDevMode } from './stores/DevModeStore' +import { canSendMessages } from './utils/meetingRoomPermissions' + +const Backdrop = styled.div` + position: absolute; + height: 100%; + width: 100%; +` +function App() { + const loggedIn = useAppSelector((state) => state.user.loggedIn) + const computerDialogOpen = useAppSelector((state) => state.computer.computerDialogOpen) + const whiteboardDialogOpen = useAppSelector((state) => state.whiteboard.whiteboardDialogOpen) + const videoConnected = useAppSelector((state) => state.user.videoConnected) + const roomJoined = useAppSelector((state) => state.room.roomJoined) + const isDevMode = useAppSelector((state) => state.devMode.isDevMode) + const currentMeetingRoomId = useAppSelector((state) => state.chat.currentMeetingRoomId) + const meetingRooms = useAppSelector((state) => state.meetingRoom.meetingRooms) + const sessionId = useAppSelector((state) => state.user.sessionId) + const dispatch = useAppDispatch() + + // プレイヤーステータスモーダルの状態 + const [playerStatusModalOpen, setPlayerStatusModalOpen] = useState(false) + const [selectedPlayerId, setSelectedPlayerId] = useState(undefined) + + const currentRoom = currentMeetingRoomId ? meetingRooms.find(r => r.id === currentMeetingRoomId) : null + const userCanSendMessages = currentRoom ? canSendMessages(sessionId, currentRoom) : false + + + let ui: JSX.Element + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.ctrlKey && event.key === 'i') { + event.preventDefault() + dispatch(toggleDevMode()) + } + // Sキーでプレイヤーステータスモーダルを開く機能を無効化 + // if (event.key === 's' || event.key === 'S') { + // if (!playerStatusModalOpen) { + // console.log('🔤 [App] S key pressed, opening player status modal') + // setSelectedPlayerId(undefined) + // setPlayerStatusModalOpen(true) + // } + // } + } + + const handleOpenPlayerStatusModal = (event: CustomEvent) => { + console.log('🎯 [App] Received openPlayerStatusModal event:', event.detail) + setSelectedPlayerId(event.detail?.playerId) + setPlayerStatusModalOpen(true) + } + + window.addEventListener('keydown', handleKeyDown) + window.addEventListener('openPlayerStatusModal', handleOpenPlayerStatusModal as EventListener) + + return () => { + window.removeEventListener('keydown', handleKeyDown) + window.removeEventListener('openPlayerStatusModal', handleOpenPlayerStatusModal as EventListener) + } + }, [dispatch]) + if (loggedIn) { + if (computerDialogOpen) { + /* Render ComputerDialog if user is using a computer. */ + ui = + } else if (whiteboardDialogOpen) { + /* Render WhiteboardDialog if user is using a whiteboard. */ + ui = + } else { + ui = ( + /* Render Chat or VideoConnectionDialog if no dialogs are opened. */ + <> + + {/* Render VideoConnectionDialog if user is not connected to a webcam. */} + {!videoConnected && } + + {isDevMode && } + {currentMeetingRoomId && currentRoom && ( + + )} + + + ) + } + } else if (roomJoined) { + /* Render LoginDialog if not logged in but selected a room. */ + ui = + } else { + /* Render RoomSelectionDialog if yet selected a room. */ + ui = + } + + return ( + + {ui} + {/* Render HelperButtonGroup if no dialogs are opened. */} + {!computerDialogOpen && !whiteboardDialogOpen && } + {/* Player Status Modal */} + { + setPlayerStatusModalOpen(false) + setSelectedPlayerId(undefined) + }} + playerId={selectedPlayerId} + /> + + ) +} + +export default App diff --git a/client/src/characters/MyPlayer.ts b/client/src/characters/MyPlayer.ts index 25dd0519..b1c049ff 100644 --- a/client/src/characters/MyPlayer.ts +++ b/client/src/characters/MyPlayer.ts @@ -11,7 +11,9 @@ import Whiteboard from '../items/Whiteboard' import { phaserEvents, Event } from '../events/EventCenter' import store from '../stores' import { pushPlayerJoinedMessage } from '../stores/ChatStore' +import { setBaseAvatar } from '../stores/WorkStore' import { ItemType } from '../../../types/Items' +import { BaseAvatarType } from '../types/AvatarTypes' import { NavKeys } from '../../../types/KeyboardState' import { JoystickMovement } from '../components/Joystick' import { openURL } from '../utils/helpers' @@ -34,6 +36,56 @@ export default class MyPlayer extends Player { super(scene, x, y, texture, id, frame) this.playContainerBody = this.playerContainer.body as Phaser.Physics.Arcade.Body this.currentMeetingRoomId = null + + // 自分のキャラクターをクリック可能にする - 複数の方法を試す + console.log('🔧 [MyPlayer] Setting up interactive events for player') + + // 方法1: playerContainerをインタラクティブに + if (this.playerContainer) { + this.playerContainer.setInteractive({ + hitArea: new Phaser.Geom.Rectangle(-16, -16, 32, 32), + hitAreaCallback: Phaser.Geom.Rectangle.Contains, + cursor: 'pointer' + }) + + this.playerContainer.on('pointerdown', () => { + console.log('👤 [MyPlayer] Container clicked!') + this.openStatusModal() + }) + } + + // 方法2: スプライト自体をインタラクティブに（より大きなエリア） + this.setInteractive({ + hitArea: new Phaser.Geom.Rectangle(-20, -30, 40, 60), + hitAreaCallback: Phaser.Geom.Rectangle.Contains, + cursor: 'pointer' + }) + + this.on('pointerdown', (pointer: any) => { + console.log('👤 [MyPlayer] Sprite body clicked!', { x: pointer.x, y: pointer.y }) + this.openStatusModal() + }, this) + + this.on('pointerover', () => { + console.log('🎯 [MyPlayer] Hovering over sprite') + }) + + this.on('pointerout', () => { + console.log('🎯 [MyPlayer] Left sprite area') + }) + + // 方法3: ダブルクリック検知 + let clickCount = 0 + this.on('pointerup', () => { + clickCount++ + setTimeout(() => { + if (clickCount === 2) { + console.log('👤 [MyPlayer] Double clicked!') + this.openStatusModal() + } + clickCount = 0 + }, 300) + }) } setPlayerName(name: string) { @@ -48,6 +100,38 @@ export default class MyPlayer extends Player { phaserEvents.emit(Event.MY_PLAYER_TEXTURE_CHANGE, this.x, this.y, this.anims.currentAnim.key) } + /** + * Set base avatar character and update WorkStore + */ + setBaseAvatar(baseAvatar: BaseAvatarType) { + console.log(`🎭 [MyPlayer] Setting base avatar to ${baseAvatar}`) + store.dispatch(setBaseAvatar(baseAvatar)) + + // Get the updated avatar sprite from WorkStore + const workState = store.getState().work + this.setPlayerTexture(workState.currentAvatarSprite) + } + + /** + * Update avatar based on current work state (called when work status changes) + */ + updateAvatarFromWorkState() { + const workState = store.getState().work + const newSprite = workState.currentAvatarSprite + + if (newSprite !== this.playerTexture) { + console.log(`🔄 [MyPlayer] Updating avatar from ${this.playerTexture} to ${newSprite}`) + this.setPlayerTexture(newSprite) + } + } + + openStatusModal() { + console.log('🚀 [MyPlayer] Opening status modal') + window.dispatchEvent(new CustomEvent('openPlayerStatusModal', { + detail: { playerId: undefined } + })) + } + handleJoystickMovement(movement: JoystickMovement) { this.joystickMovement = movement } diff --git a/client/src/characters/Player.ts b/client/src/characters/Player.ts index 5052d7eb..62bddc45 100644 --- a/client/src/characters/Player.ts +++ b/client/src/characters/Player.ts @@ -53,6 +53,9 @@ export default class Player extends Phaser.Physics.Arcade.Sprite { .setOrigin(0.5) this.playerContainer.add(this.playerName) + // Make other players clickable + this.setupPlayerClickEvents() + this.scene.physics.world.enable(this.playerContainer) const playContainerBody = this.playerContainer.body as Phaser.Physics.Arcade.Body const collisionScale = [0.5, 0.2] @@ -104,4 +107,52 @@ export default class Player extends Phaser.Physics.Arcade.Sprite { clearTimeout(this.timeoutID) this.playerDialogBubble.removeAll(true) } + + /** + * Set up click events for other players + */ + private setupPlayerClickEvents() { + // Make player container clickable + this.playerContainer.setInteractive({ + hitArea: new Phaser.Geom.Rectangle(-16, -16, 32, 32), + hitAreaCallback: Phaser.Geom.Rectangle.Contains, + cursor: 'pointer' + }) + + this.playerContainer.on('pointerdown', () => { + console.log(`👤 [Player] ${this.playerName.text} (${this.playerId}) clicked!`) + this.openOtherPlayerStatusModal() + }) + + // Make player sprite itself clickable as well + this.setInteractive({ + hitArea: new Phaser.Geom.Rectangle(-20, -30, 40, 60), + hitAreaCallback: Phaser.Geom.Rectangle.Contains, + cursor: 'pointer' + }) + + this.on('pointerdown', () => { + console.log(`👤 [Player] ${this.playerName.text} (${this.playerId}) sprite clicked!`) + this.openOtherPlayerStatusModal() + }) + + // Hover effect + this.on('pointerover', () => { + this.setTint(0xcccccc) // Make slightly darker + }) + + this.on('pointerout', () => { + this.clearTint() // Return to original color + }) + } + + /** + * Open status modal for other players + */ + private openOtherPlayerStatusModal() { + console.log(`🚀 [Player] Opening status modal for ${this.playerName.text} (${this.playerId})`) + window.dispatchEvent(new CustomEvent('openPlayerStatusModal', { + detail: { playerId: this.playerId } + })) + } } diff --git a/client/src/components/DevModePanel.tsx b/client/src/components/DevModePanel.tsx new file mode 100644 index 00000000..e253f01c --- /dev/null +++ b/client/src/components/DevModePanel.tsx @@ -0,0 +1,1749 @@ +import React, { useState, useEffect } from 'react' +import { + Box, + Paper, + Typography, + Button, + Tabs, + Tab, + Accordion, + AccordionSummary, + AccordionDetails, + TextField, + Select, + MenuItem, + FormControl, + InputLabel, + Chip, + Grid, + Switch, + FormControlLabel, + Divider +} from '@mui/material' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' +import { useAppSelector, useAppDispatch } from '../hooks' +import { useDevMode } from '../hooks/useDevMode' +import { LogLevel, LogEntry } from '../utils/logger' +import { BackgroundMode } from '../../../types/BackgroundMode' +import { BaseAvatarType } from '../types/AvatarTypes' +import { startWork, endWork, startBreak, endBreak, setWorkStartTime, setFatigueLevel, updateWorkStatus, updateOtherPlayerWorkStatus, setBaseAvatar } from '../stores/WorkStore' +import { toggleBackgroundMode, setVideoConnected, setLoggedIn, setShowJoystick } from '../stores/UserStore' +import { setDevmode } from '../stores/DevModeStore' +import { setLobbyJoined, setRoomJoined, setJoinedRoomData } from '../stores/RoomStore' +import { setShowChat, setFocused, pushChatMessage, setCurrentMeetingRoomId } from '../stores/ChatStore' +import { openComputerDialog, closeComputerDialog } from '../stores/ComputerStore' +import { openWhiteboardDialog, closeWhiteboardDialog } from '../stores/WhiteboardStore' +import { addMeetingRoom, updateMeetingRoom, removeMeetingRoom, setCurrentMeetingRoomId as setMeetingRoomId, MeetingRoomMode } from '../stores/MeetingRoomStore' + +interface TabPanelProps { + children?: React.ReactNode + index: number + value: number +} + +const TabPanel: React.FC = ({ children, value, index }) => ( + +) + +const DevModePanel: React.FC = () => { + // ALL HOOKS MUST BE CALLED BEFORE ANY CONDITIONAL RETURNS + const { isDevMode, logManager, setLogLevel } = useDevMode() + const dispatch = useAppDispatch() + + // Get Redux state - ALWAYS call these hooks + const workState = useAppSelector((state) => state.work) + const userState = useAppSelector((state) => state.user) + const roomState = useAppSelector((state) => state.room) + const chatState = useAppSelector((state) => state.chat) + const computerState = useAppSelector((state) => state.computer) + const whiteboardState = useAppSelector((state) => state.whiteboard) + const meetingRoomState = useAppSelector((state) => state.meetingRoom) + + // Panel state - ALWAYS call these hooks + const [tabValue, setTabValue] = useState(0) + const [logs, setLogs] = useState([]) + const [logFilter, setLogFilter] = useState('all') + const [componentFilter, setComponentFilter] = useState('all') + const [mockWorkTime, setMockWorkTime] = useState('') + const [mockFatigue, setMockFatigue] = useState(0) + + // State editing - ALWAYS call these hooks + const [editMode, setEditMode] = useState<{ [key: string]: boolean }>({}) + const [editValues, setEditValues] = useState<{ [key: string]: any }>({}) + + // Meeting Room management - ALWAYS call these hooks + const [newRoomName, setNewRoomName] = useState('') + const [newRoomMode, setNewRoomMode] = useState('open') + const [newRoomArea, setNewRoomArea] = useState({ x: 100, y: 100, width: 150, height: 100 }) + + // Room editing states - ALWAYS call these hooks + const [expandedRoom, setExpandedRoom] = useState(null) + const [editingRooms, setEditingRooms] = useState<{ [roomId: string]: { + name: string + area: { x: number, y: number, width: number, height: number } + invitedUsers: string + } }>({}) + + // Visual editing mode - ALWAYS call this hook + const [visualEditMode, setVisualEditMode] = useState(false) + + // Monitor logs + useEffect(() => { + const updateLogs = () => setLogs(logManager.getLogs()) + + logManager.addListener(updateLogs) + updateLogs() + + return () => logManager.removeListener(updateLogs) + }, [logManager]) + + // Expose visual edit functions globally for game scene access + useEffect(() => { + const updateRoomAreaFromVisual = (roomId: string, area: { x: number, y: number, width: number, height: number }) => { + // Update Redux store + const room = meetingRoomState.meetingRooms.find(r => r.id === roomId) + if (!room) return + + const updatedArea = { + meetingRoomId: roomId, + ...area + } + + dispatch(updateMeetingRoom({ room, area: updatedArea })) + + // Send to network + const network = (window as any).network + if (network) { + network.updateMeetingRoomArea({ roomId, area: updatedArea }) + } + + console.log(`🎨 [DevMode] Updated room area visually:`, { roomId, area }) + } + + (window as any).devModeUpdateRoomArea = updateRoomAreaFromVisual + return () => { + delete (window as any).devModeUpdateRoomArea + } + }, [meetingRoomState, dispatch]) + + // Now that ALL hooks have been called, we can do conditional rendering + if (!isDevMode) { + return ( + + ) + } + + // Filtered logs + const filteredLogs = logs.filter(log => { + if (logFilter !== 'all' && log.level !== logFilter) return false + if (componentFilter !== 'all' && log.component !== componentFilter) return false + return true + }) + + // Component list + const components = ['all', ...Array.from(new Set(logs.map(log => log.component)))] + + // Mock operation functions + const handleMockWorkStart = () => { + const startTime = mockWorkTime ? new Date(mockWorkTime).getTime() : Date.now() + dispatch(setWorkStartTime(startTime)) + dispatch(startWork()) + } + + const handleSetFatigue = () => { + dispatch(setFatigueLevel(mockFatigue)) + } + + // Add other player + const addMockPlayer = () => { + const mockPlayerId = `mock_player_${Date.now()}` + const mockPlayerName = `TestPlayer${Math.floor(Math.random() * 100)}` + const statuses = ['working', 'break', 'meeting', 'off-duty'] as const + const randomStatus = statuses[Math.floor(Math.random() * statuses.length)] + + dispatch(updateOtherPlayerWorkStatus({ + playerId: mockPlayerId, + playerName: mockPlayerName, + workStatus: randomStatus + })) + } + + // Network sync test + const testNetworkSync = () => { + console.log('🔄 [DevMode] Testing network sync...') + console.log('Current other players:', workState.otherPlayersWorkStatus) + console.log('Network connection:', (window as any).network ? 'Connected' : 'Disconnected') + console.log('User state:', { + sessionId: userState.sessionId, + loggedIn: userState.loggedIn, + playerNameMap: userState.playerNameMap + }) + + // Check all currently existing players + Object.entries(workState.otherPlayersWorkStatus).forEach(([playerId, playerData]) => { + console.log(`Player ${playerId}:`, playerData) + console.log(` - Name: ${playerData.playerName}`) + console.log(` - Status: ${playerData.workStatus}`) + console.log(` - Last Updated: ${new Date(playerData.lastUpdated).toLocaleString()}`) + }) + + // Test work status message reception from network + console.log('📡 [DevMode] Checking for work-status message listeners...') + const network = (window as any).network + if (network && network.room) { + console.log('✅ Network room is available') + console.log('🎧 Message listeners count:', Object.keys(network.room._messageHandlers || {}).length) + console.log('📋 Available message types:', Object.keys(network.room._messageHandlers || {})) + + // Manually test work-status-changed message + if (Object.keys(workState.otherPlayersWorkStatus).length > 0) { + const firstPlayerId = Object.keys(workState.otherPlayersWorkStatus)[0] + const testMessage = { + playerId: firstPlayerId, + playerName: workState.otherPlayersWorkStatus[firstPlayerId].playerName, + workStatus: 'working' + } + console.log('🧪 [DevMode] Simulating work-status-changed message:', testMessage) + } + } else { + console.error('❌ Network room is not available') + } + } + + // Force change other player status (for testing) + const simulateOtherPlayerStatusChange = () => { + const playerIds = Object.keys(workState.otherPlayersWorkStatus) + if (playerIds.length === 0) { + console.warn('⚠️ No other players to test with') + return + } + + const testPlayerId = playerIds[0] + const player = workState.otherPlayersWorkStatus[testPlayerId] + const statuses = ['working', 'break', 'meeting', 'off-duty'] as const + const currentIndex = statuses.indexOf(player.workStatus as any) + const nextStatus = statuses[(currentIndex + 1) % statuses.length] + + console.log(`🧪 [DevMode] Simulating status change for ${player.playerName}: ${player.workStatus} → ${nextStatus}`) + + // Directly update Redux state (simulate message from server) + dispatch(updateOtherPlayerWorkStatus({ + playerId: testPlayerId, + playerName: player.playerName, + workStatus: nextStatus + })) + } + + // Change own work status and test network transmission + const testSendWorkStatus = () => { + const network = (window as any).network + if (!network) { + console.error('❌ Network not available') + return + } + + const currentStatus = workState.currentWorkStatus + const newStatus = currentStatus === 'working' ? 'break' : 'working' + + console.log(`📤 [DevMode] Testing work status send: ${currentStatus} → ${newStatus}`) + + // Change own status and send to server + if (newStatus === 'working') { + dispatch(startWork()) + network.startWork?.() + } else { + dispatch(startBreak()) + network.startBreak?.() + } + + console.log('✅ [DevMode] Work status change sent to server') + } + + // State editing helper functions + const startEdit = (field: string, currentValue: any) => { + setEditMode(prev => ({ ...prev, [field]: true })) + setEditValues(prev => ({ ...prev, [field]: currentValue })) + } + + const cancelEdit = (field: string) => { + setEditMode(prev => ({ ...prev, [field]: false })) + setEditValues(prev => ({ ...prev, [field]: undefined })) + } + + const saveEdit = (field: string) => { + const value = editValues[field] + + switch (field) { + // Work Store fields + case 'workStatus': + dispatch(updateWorkStatus({ workStatus: value as any })) + // Update MyPlayer sprite after work status change + setTimeout(() => { + const game = (window as any).game + if (game?.myPlayer) { + game.myPlayer.updateAvatarFromWorkState() + } + }, 0) + break + case 'workStartTime': + dispatch(setWorkStartTime(new Date(value).getTime())) + break + case 'fatigueLevel': + dispatch(setFatigueLevel(Number(value))) + // Update MyPlayer sprite after fatigue level change + setTimeout(() => { + const game = (window as any).game + if (game?.myPlayer) { + game.myPlayer.updateAvatarFromWorkState() + } + }, 0) + break + case 'currentClothing': + dispatch(updateWorkStatus({ workStatus: workState.currentWorkStatus, clothing: value })) + break + case 'currentAccessory': + dispatch(updateWorkStatus({ workStatus: workState.currentWorkStatus, accessory: value })) + break + + // Room Store fields + case 'roomId': + case 'roomName': + case 'roomDescription': + dispatch(setJoinedRoomData({ + id: field === 'roomId' ? value : roomState.roomId, + name: field === 'roomName' ? value : roomState.roomName, + description: field === 'roomDescription' ? value : roomState.roomDescription + })) + break + + default: + console.warn(`Unknown field: ${field}`) + } + + setEditMode(prev => ({ ...prev, [field]: false })) + setEditValues(prev => ({ ...prev, [field]: undefined })) + } + + // Editable field renderer + const renderEditableField = (field: string, label: string, currentValue: any, type: 'text' | 'number' | 'select' = 'text', options?: string[]) => { + const isEditing = editMode[field] + const editValue = editValues[field] + + // Debug log for select fields + if (type === 'select') { + console.log(`🔍 [DevMode] Rendering select field: ${field}`, { + options, + optionsLength: options?.length, + currentValue, + editValue, + isEditing + }) + } + + return ( + + {label}: + + {isEditing ? ( + <> + {type === 'select' && options ? ( + + ) : ( + setEditValues(prev => ({ ...prev, [field]: e.target.value }))} + sx={{ fontSize: '10px', minWidth: '100px' }} + /> + )} + + + + ) : ( + <> + + {currentValue} + + + + )} + + ) + } + + // Meeting Room management functions + const generateRoomId = () => `room_${Date.now()}_${Math.random().toString(36).substr(2, 9)}` + + const createMeetingRoom = () => { + if (!newRoomName.trim()) return + + const roomId = generateRoomId() + const room = { + id: roomId, + name: newRoomName, + mode: newRoomMode, + hostUserId: userState.sessionId || 'unknown', + invitedUsers: [], + participants: [] + } + + const area = { + meetingRoomId: roomId, + ...newRoomArea + } + + dispatch(addMeetingRoom({ room, area })) + + // Send to network if available + const network = (window as any).network + if (network) { + network.createMeetingRoom({ + id: roomId, + name: newRoomName, + mode: newRoomMode, + hostUserId: userState.sessionId || 'unknown', + invitedUsers: [], + area: newRoomArea + }) + } + + // Reset form + setNewRoomName('') + setNewRoomMode('open') + setNewRoomArea({ x: 100, y: 100, width: 150, height: 100 }) + } + + const deleteMeetingRoom = (roomId: string) => { + dispatch(removeMeetingRoom(roomId)) + + // Send to network if available + const network = (window as any).network + if (network) { + network.deleteMeetingRoom(roomId) + } + } + + const updateRoomMode = (roomId: string, newMode: MeetingRoomMode) => { + const room = meetingRoomState.meetingRooms.find(r => r.id === roomId) + if (!room) return + + const updatedRoom = { ...room, mode: newMode } + const area = meetingRoomState.meetingRoomAreas.find(a => a.meetingRoomId === roomId) + + if (area) { + dispatch(updateMeetingRoom({ room: updatedRoom, area })) + + // Send to network if available + const network = (window as any).network + if (network) { + network.updateMeetingRoom({ + id: roomId, + name: room.name, + mode: newMode, + hostUserId: room.hostUserId, + invitedUsers: room.invitedUsers + }) + } + } + } + + // Room editing functions + const startRoomEdit = (room: any, area: any) => { + setEditingRooms(prev => ({ + ...prev, + [room.id]: { + name: room.name, + area: { + x: area?.x || 0, + y: area?.y || 0, + width: area?.width || 100, + height: area?.height || 100 + }, + invitedUsers: room.invitedUsers.join(', ') + } + })) + } + + const saveRoomEdit = (roomId: string) => { + const editing = editingRooms[roomId] + if (!editing) return + + const room = meetingRoomState.meetingRooms.find(r => r.id === roomId) + if (!room) return + + const updatedRoom = { + ...room, + name: editing.name, + invitedUsers: editing.invitedUsers.split(',').map(u => u.trim()).filter(u => u) + } + + const updatedArea = { + meetingRoomId: roomId, + ...editing.area + } + + dispatch(updateMeetingRoom({ room: updatedRoom, area: updatedArea })) + + // Send to network + const network = (window as any).network + if (network) { + network.updateMeetingRoom({ + id: roomId, + name: editing.name, + mode: room.mode, + hostUserId: room.hostUserId, + invitedUsers: updatedRoom.invitedUsers, + area: editing.area + }) + } + + // Clear editing state + setEditingRooms(prev => { + const { [roomId]: _, ...rest } = prev + return rest + }) + } + + const cancelRoomEdit = (roomId: string) => { + setEditingRooms(prev => { + const { [roomId]: _, ...rest } = prev + return rest + }) + } + + const updateRoomEdit = (roomId: string, field: string, value: any) => { + setEditingRooms(prev => ({ + ...prev, + [roomId]: { + ...prev[roomId], + [field]: value + } + })) + } + + const updateRoomAreaEdit = (roomId: string, field: string, value: number) => { + setEditingRooms(prev => ({ + ...prev, + [roomId]: { + ...prev[roomId], + area: { + ...prev[roomId].area, + [field]: value + } + } + })) + } + + // Visual editing mode functions + const toggleVisualEditMode = () => { + console.log('🎯 [DevMode] toggleVisualEditMode called, current state:', visualEditMode) + setVisualEditMode(!visualEditMode) + + // Send visual edit mode to game scene + const game = (window as any).game + console.log('🎯 [DevMode] Game object:', game) + console.log('🎯 [DevMode] Game object keys:', Object.keys(game || {})) + console.log('🎯 [DevMode] Game.scene:', game?.scene) + console.log('🎯 [DevMode] Game.scene keys:', Object.keys(game?.scene || {})) + + // Try different ways to access the game scene + let gameScene = null + + // Method 1: Check if game IS the scene + if (game && (game as any).toggleMeetingRoomEditMode) { + console.log('🎯 [DevMode] Method 1: Game object is the scene') + gameScene = game + } + // Method 2: Check game.scene.scenes + else if (game?.scene?.scenes) { + console.log('🎯 [DevMode] Method 2: Using game.scene.scenes') + console.log('🎯 [DevMode] Available scenes:', game.scene.scenes.map((s: any) => s.scene?.key || s.key || 'unknown')) + gameScene = game.scene.scenes.find((s: any) => (s.scene?.key === 'game' || s.key === 'game')) + } + // Method 3: Check game.scene directly + else if (game?.scene && (game.scene as any).toggleMeetingRoomEditMode) { + console.log('🎯 [DevMode] Method 3: Using game.scene directly') + gameScene = game.scene + } + // Method 4: Check if scene manager exists differently + else if (game?.scene?.getScene) { + console.log('🎯 [DevMode] Method 4: Using getScene method') + gameScene = game.scene.getScene('game') + } + + console.log('🎯 [DevMode] Found game scene:', gameScene) + console.log('🎯 [DevMode] Game scene keys:', Object.keys(gameScene || {})) + + if (gameScene && (gameScene as any).toggleMeetingRoomEditMode) { + console.log('🎯 [DevMode] Calling toggleMeetingRoomEditMode with:', !visualEditMode) + ;(gameScene as any).toggleMeetingRoomEditMode(!visualEditMode) + } else { + console.warn('🎯 [DevMode] toggleMeetingRoomEditMode not found on game scene') + console.warn('🎯 [DevMode] Available methods on scene:', Object.keys(gameScene || {})) + } + + console.log(`🎨 [DevMode] Visual edit mode: ${!visualEditMode ? 'ENABLED' : 'DISABLED'}`) + } + + + return ( + + + + + 🛠️ DevMode Panel (Tab: {tabValue}) + + + + setTabValue(newValue)} + variant="scrollable" + scrollButtons="auto" + sx={{ + '& .MuiTab-root': { + fontSize: '10px', + minWidth: '60px', + padding: '6px 8px' + } + }} + > + + + + + + + + + + + {/* Work State Tab */} + + + }> + 💼 Work Status + + + + {renderEditableField( + 'workStatus', + 'Status', + workState.currentWorkStatus, + 'select', + ['off-duty', 'working', 'break', 'meeting', 'overtime'] + )} + {renderEditableField( + 'workStartTime', + 'Start Time', + workState.workStartTime ? new Date(workState.workStartTime).toISOString().slice(0, 16) : '', + 'text' + )} + {renderEditableField( + 'fatigueLevel', + 'Fatigue', + workState.fatigueLevel, + 'number' + )} + + + + + + }> + 🎭 Avatar & Appearance + + + + + Base Avatar: + + + + + Current Sprite: + + {workState.currentAvatarSprite} + + + + {renderEditableField( + 'currentClothing', + 'Clothing', + workState.currentClothing, + 'select', + ['business', 'casual', 'tired'] + )} + {renderEditableField( + 'currentAccessory', + 'Accessory', + workState.currentAccessory, + 'select', + ['coffee', 'documents', 'none'] + )} + + + + + + }> + 👥 Other Players + + + + Players: {Object.keys(workState.otherPlayersWorkStatus).length} + + {Object.entries(workState.otherPlayersWorkStatus).map(([playerId, player]) => ( + + {player.playerName} + + Status: {player.workStatus} | Updated: {new Date(player.lastUpdated).toLocaleTimeString()} + + + ))} + + + + + {/* User State Tab */} + + + }> + 👤 User Settings + + + + + Background: + + + + + Logged In: + dispatch(setLoggedIn(e.target.checked))} + /> + + + + Video: + dispatch(setVideoConnected(e.target.checked))} + /> + + + + Joystick: + dispatch(setShowJoystick(e.target.checked))} + /> + + + + + + + }> + 🆔 Session Info + + + + Session ID: {userState.sessionId || 'Not Set'} + Players Mapped: {userState.playerNameMap?.size || 0} + + + + + + {/* Room State Tab */} + + + }> + 🏠 Connection Status + + + + + Lobby: + dispatch(setLobbyJoined(e.target.checked))} + /> + + + + Room: + dispatch(setRoomJoined(e.target.checked))} + /> + + + + + + + }> + 📋 Room Details + + + + {renderEditableField( + 'roomId', + 'Room ID', + roomState.roomId, + 'text' + )} + {renderEditableField( + 'roomName', + 'Room Name', + roomState.roomName, + 'text' + )} + {renderEditableField( + 'roomDescription', + 'Description', + roomState.roomDescription, + 'text' + )} + + + + + + }> + 🎯 Available Rooms + + + + Available: {roomState.availableRooms?.length || 0} rooms + + + + + + }> + 🏢 Meeting Room Management + + + + {/* Visual Editing Mode */} + + + 🎨 Visual Room Editor + + + + + {visualEditMode && ( + + + 📝 Visual Edit Mode Active + + + • Click and drag room areas in the game to move them + + + • Drag corners/edges to resize room areas + + + • Changes are saved automatically + + + )} + + {/* Create New Meeting Room */} + Create New Room + + + Name: + setNewRoomName(e.target.value)} + placeholder="Room name" + sx={{ fontSize: '10px', flex: 1 }} + /> + + + Mode: + + + + + setNewRoomArea(prev => ({ ...prev, x: Number(e.target.value) }))} + sx={{ fontSize: '10px' }} + /> + + + setNewRoomArea(prev => ({ ...prev, y: Number(e.target.value) }))} + sx={{ fontSize: '10px' }} + /> + + + setNewRoomArea(prev => ({ ...prev, width: Number(e.target.value) }))} + sx={{ fontSize: '10px' }} + /> + + + setNewRoomArea(prev => ({ ...prev, height: Number(e.target.value) }))} + sx={{ fontSize: '10px' }} + /> + + + + + + {/* Existing Meeting Rooms */} + + Existing Rooms ({meetingRoomState.meetingRooms.length}) + + {meetingRoomState.meetingRooms.length === 0 ? ( + + No meeting rooms created yet + + ) : ( + meetingRoomState.meetingRooms.map((room) => { + const area = meetingRoomState.meetingRoomAreas.find(a => a.meetingRoomId === room.id) + const isExpanded = expandedRoom === room.id + const isEditing = editingRooms[room.id] + + return ( + setExpandedRoom(isExpanded ? null : room.id)}> + + + {room.name} + + + + {room.participants.length} users + + + + + + + {isEditing ? ( + /* Editing Mode */ + + {/* Room Name */} + + Name: + updateRoomEdit(room.id, 'name', e.target.value)} + sx={{ fontSize: '10px', flex: 1 }} + /> + + + {/* Mode */} + + Mode: + + + + {/* Invited Users */} + + Invites: + updateRoomEdit(room.id, 'invitedUsers', e.target.value)} + placeholder="user1, user2, user3" + sx={{ fontSize: '10px', flex: 1 }} + helperText="Comma-separated user IDs" + /> + + + {/* Area Settings */} + Area Settings + + + updateRoomAreaEdit(room.id, 'x', Number(e.target.value))} + sx={{ fontSize: '10px' }} + /> + + + updateRoomAreaEdit(room.id, 'y', Number(e.target.value))} + sx={{ fontSize: '10px' }} + /> + + + updateRoomAreaEdit(room.id, 'width', Number(e.target.value))} + sx={{ fontSize: '10px' }} + /> + + + updateRoomAreaEdit(room.id, 'height', Number(e.target.value))} + sx={{ fontSize: '10px' }} + /> + + + + {/* Action Buttons */} + + + + + + + ) : ( + /* View Mode */ + + + + + + + + ID: {room.id} + + + Host: {room.hostUserId} + + + Participants: {room.participants.length > 0 ? room.participants.join(', ') : 'None'} + + + Invited: {room.invitedUsers.length > 0 ? room.invitedUsers.join(', ') : 'None'} + + {area && ( + + Area: ({area.x}, {area.y}) {area.width}×{area.height} + + )} + + )} + + + + ) + }) + )} + + + + + + {/* Chat State Tab */} + + + }> + 💬 Chat Settings + + + + + Show Chat: + dispatch(setShowChat(e.target.checked))} + /> + + + + Focused: + dispatch(setFocused(e.target.checked))} + /> + + + + + + + }> + 📨 Message Statistics + + + + Chat Messages: {chatState.chatMessages?.length || 0} + Meeting Rooms: {Object.keys(chatState.meetingRoomChatMessages || {}).length} + Current Room: {chatState.currentMeetingRoomId || 'None'} + + + + + + }> + ⚡ Quick Actions + + + + + + + + {/* Features Tab */} + + + }> + 💻 Computer/Screen Share + + + + + Dialog Open: + { + if (e.target.checked) { + dispatch(openComputerDialog({ computerId: 'test-computer', myUserId: 'test-user' })) + } else { + dispatch(closeComputerDialog()) + } + }} + /> + + + Connected Computer: {computerState.computerId || 'None'} + + + + + + + }> + 📋 Whiteboard + + + + + Dialog Open: + { + if (e.target.checked) { + dispatch(openWhiteboardDialog('test-whiteboard')) + } else { + dispatch(closeWhiteboardDialog()) + } + }} + /> + + + Current Board: {whiteboardState.whiteboardId || 'None'} + + + + + + + }> + 🏢 Meeting Rooms + + + + + Total Rooms: {meetingRoomState.meetingRooms?.length || 0} + + + Current Room: {meetingRoomState.currentMeetingRoomId || 'None'} + + + + + + + + {/* Mock Data Tab */} + + 🎭 Mock Operations + + + Work Time Setting + setMockWorkTime(e.target.value)} + fullWidth + sx={{ mb: 1 }} + /> + + + + + + + Fatigue Level Setting: {mockFatigue}% + setMockFatigue(Number(e.target.value))} + inputProps={{ min: 0, max: 100 }} + fullWidth + sx={{ mb: 1 }} + /> + + + + + + + Quick Actions + + + + + + + + + + + + + + + + + + + + Other Player Testing + + + + + + After adding, click "Detailed Status" in WorkStatusPanel to check player list + + + + + + Scenario Testing + + + + + + + + + + + + + Network Sync Status + + + Other Players: {Object.keys(workState.otherPlayersWorkStatus).length} + + {Object.entries(workState.otherPlayersWorkStatus).map(([playerId, player]) => ( + + {player.playerName}: {player.workStatus} ({new Date(player.lastUpdated).toLocaleTimeString()}) + + ))} + + + + + {/* Log Display Tab */} + + + + + + Level + + + + + + Component + + + + + + + + + {filteredLogs.slice(-50).reverse().map((log, index) => ( + + + + {log.component} + + {new Date(log.timestamp).toLocaleTimeString()} + + + + {log.message} + + {log.data && ( + + {JSON.stringify(log.data, null, 2)} + + )} + + ))} + + + + ) +} + +export default DevModePanel \ No newline at end of file diff --git a/client/src/components/LoginDialog.tsx b/client/src/components/LoginDialog.tsx index 989d4cf8..48f8245b 100644 --- a/client/src/components/LoginDialog.tsx +++ b/client/src/components/LoginDialog.tsx @@ -159,7 +159,8 @@ export default function LoginDialog() { console.log('Join! Name:', name, 'Avatar:', avatars[avatarIndex].name) game.registerKeys() game.myPlayer.setPlayerName(name) - game.myPlayer.setPlayerTexture(avatars[avatarIndex].name) + // Set base avatar using new avatar group system + game.myPlayer.setBaseAvatar(avatars[avatarIndex].name as any) game.network.readyToConnect() dispatch(setLoggedIn(true)) } diff --git a/client/src/components/MeetingRoomChat.tsx b/client/src/components/MeetingRoomChat.tsx new file mode 100644 index 00000000..29378660 --- /dev/null +++ b/client/src/components/MeetingRoomChat.tsx @@ -0,0 +1,372 @@ +import React, { useState, useEffect, useRef } from 'react' +import { useSelector, useDispatch } from 'react-redux' +import { Button, TextField, Box, Typography, Paper, List, ListItem, ListItemText } from '@mui/material' +import { RootState } from '../stores' +import { IMeetingRoomChatMessage } from '../../../types/IOfficeState' +import { MeetingRoomMessageType, pushMeetingRoomChatMessage, setFocused } from '../stores/ChatStore' +import phaserGame from '../PhaserGame' +import Game from '../scenes/Game' + +interface MeetingRoomChatProps { + meetingRoomId: string | null + roomName: string + canSendMessages: boolean +} + +const MeetingRoomChat: React.FC = ({ + meetingRoomId, + roomName, + canSendMessages +}) => { + const dispatch = useDispatch() + const [message, setMessage] = useState('') + const [isVisible, setIsVisible] = useState(false) + const messagesEndRef = useRef(null) + + const meetingRoomChatMessages = useSelector((state: RootState) => + meetingRoomId ? state.chat.meetingRoomChatMessages[meetingRoomId] || [] : [] + ) + + const sessionId = useSelector((state: RootState) => state.user.sessionId) + const playerNameMap = useSelector((state: RootState) => state.user.playerNameMap) + + const scrollToBottom = () => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }) + } + + useEffect(() => { + console.log('💬 [MeetingRoomChat] Messages updated:', { + roomId: meetingRoomId, + messageCount: meetingRoomChatMessages.length, + messages: meetingRoomChatMessages.map(m => `${m.chatMessage.author}: ${m.chatMessage.content}`) + }) + scrollToBottom() + }, [meetingRoomChatMessages, meetingRoomId]) + + useEffect(() => { + if (meetingRoomId) { + setIsVisible(true) + // Request chat history when entering a room + const game = phaserGame.scene.keys.game as Game + if (game?.network) { + game.network.getMeetingRoomChatHistory(meetingRoomId) + } + } else { + setIsVisible(false) + } + }, [meetingRoomId]) + + const handleSendMessage = () => { + if (!message.trim() || !meetingRoomId || !canSendMessages) { + console.log('❌ [MeetingRoomChat] Cannot send message:', { + hasMessage: !!message.trim(), + hasMeetingRoomId: !!meetingRoomId, + canSendMessages + }) + return + } + + const game = phaserGame.scene.keys.game as Game + if (game?.network) { + const messageContent = message.trim() + console.log('📤 [MeetingRoomChat] Sending message:', { + roomId: meetingRoomId, + roomName: roomName, + message: messageContent, + timestamp: new Date().toLocaleTimeString() + }) + + // 実際のプレイヤー名を取得 + const currentPlayerName = sessionId ? playerNameMap[sessionId] : 'Unknown' + + // Optimistic Update: 即座にUIに表示 + const optimisticMessage = { + messageId: `temp_${Date.now()}_${Math.random()}`, + author: currentPlayerName || 'You', + content: messageContent, + meetingRoomId: meetingRoomId, + createdAt: Date.now() + } as IMeetingRoomChatMessage + + console.log('🚀 [MeetingRoomChat] Adding optimistic message to local store:', { + messageId: optimisticMessage.messageId, + author: optimisticMessage.author, + content: optimisticMessage.content, + timestamp: new Date(optimisticMessage.createdAt).toLocaleTimeString() + }) + + // 即座にローカルストアに追加 + dispatch(pushMeetingRoomChatMessage({ + meetingRoomId: meetingRoomId, + message: optimisticMessage + })) + + // サーバーに送信 + game.network.sendMeetingRoomChatMessage(meetingRoomId, messageContent) + setMessage('') + } + } + + const handleKeyPress = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault() + console.log('⌨️ [MeetingRoomChat] Enter key pressed, sending message') + handleSendMessage() + } + } + + const formatTimestamp = (timestamp: number) => { + return new Date(timestamp).toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit' + }) + } + + const getMessageColor = (messageType: MeetingRoomMessageType) => { + switch (messageType) { + case MeetingRoomMessageType.USER_JOINED: + return '#2e7d32' // Darker Green + case MeetingRoomMessageType.USER_LEFT: + return '#d32f2f' // Darker Red + case MeetingRoomMessageType.PERMISSION_CHANGED: + return '#f57c00' // Darker Orange + default: + return '#1565c0' // Blue for regular messages + } + } + + const getMessageBackgroundColor = (messageType: MeetingRoomMessageType) => { + switch (messageType) { + case MeetingRoomMessageType.USER_JOINED: + return '#e8f5e8' // Light Green background + case MeetingRoomMessageType.USER_LEFT: + return '#ffebee' // Light Red background + case MeetingRoomMessageType.PERMISSION_CHANGED: + return '#fff3e0' // Light Orange background + default: + return '#f5f5f5' // Light gray for regular messages + } + } + + if (!isVisible || !meetingRoomId) { + return null + } + + return ( + + {/* Header */} + + + 💬 {roomName} + + + + + {/* Messages List */} + + + {meetingRoomChatMessages.map((msgData, index) => { + const { messageType, chatMessage } = msgData + const isSystemMessage = messageType !== MeetingRoomMessageType.REGULAR_MESSAGE + return ( + + + + {formatTimestamp(chatMessage.createdAt)} + + + {isSystemMessage && ( + + {messageType === MeetingRoomMessageType.USER_JOINED ? '🟢' : + messageType === MeetingRoomMessageType.USER_LEFT ? '🔴' : '🔶'} + + )} + {chatMessage.author} + + + } + secondary={ + + {chatMessage.content} + + } + /> + + ) + })} + +
+ + + {/* Input Area */} + + setMessage(e.target.value)} + onKeyPress={handleKeyPress} + onFocus={() => { + console.log('🎯 [MeetingRoomChat] TextField focused - disabling game keys') + dispatch(setFocused(true)) + }} + onBlur={() => { + console.log('🎯 [MeetingRoomChat] TextField blurred - enabling game keys') + dispatch(setFocused(false)) + }} + disabled={!canSendMessages} + multiline + maxRows={3} + sx={{ + '& .MuiOutlinedInput-root': { + fontSize: '12px', + backgroundColor: 'white', + color: '#333', + '& input': { + color: '#333', + }, + '& textarea': { + color: '#333', + }, + '& .MuiInputBase-input::placeholder': { + color: '#888', + opacity: 1, + }, + }, + }} + /> + + + + ) +} + +export default MeetingRoomChat \ No newline at end of file diff --git a/client/src/components/PlayerStatusModal.tsx b/client/src/components/PlayerStatusModal.tsx new file mode 100644 index 00000000..f32edf18 --- /dev/null +++ b/client/src/components/PlayerStatusModal.tsx @@ -0,0 +1,353 @@ +import React, { useState, useEffect } from 'react' +import { + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Button, + Box, + Typography, + Grid, + Divider, + Avatar, + Chip, + LinearProgress, + Paper +} from '@mui/material' +import { useSelector, useDispatch } from 'react-redux' +import { RootState } from '../stores' +import { startWork, endWork, startBreak, endBreak, updateWorkStatus } from '../stores/WorkStore' +import WorkStatusBadge from './WorkStatusBadge' +import phaserGame from '../PhaserGame' +import Game from '../scenes/Game' + +interface PlayerStatusModalProps { + open: boolean + onClose: () => void + playerId?: string // Own player ID or other player ID +} + +const PlayerStatusModal: React.FC = ({ open, onClose, playerId }) => { + const dispatch = useDispatch() + const [currentTime, setCurrentTime] = useState(Date.now()) + + const { + currentWorkStatus, + workStartTime, + lastBreakTime, + fatigueLevel, + currentClothing, + currentAccessory, + otherPlayersWorkStatus + } = useSelector((state: RootState) => state.work) + + const { sessionId, playerNameMap } = useSelector((state: RootState) => state.user) + const isOwnPlayer = !playerId || playerId === sessionId + const targetPlayer = isOwnPlayer ? null : otherPlayersWorkStatus[playerId || ''] + const playerName = isOwnPlayer ? playerNameMap[sessionId || ''] || 'You' : targetPlayer?.playerName || 'Unknown' + + // Debug: Log when other player data is not found + useEffect(() => { + if (!isOwnPlayer && playerId && !targetPlayer) { + console.warn(`⚠️ [PlayerStatusModal] Player data not found for ID: ${playerId}`) + console.log('Available other players:', Object.keys(otherPlayersWorkStatus)) + console.log('Full other players data:', otherPlayersWorkStatus) + } + }, [isOwnPlayer, playerId, targetPlayer, otherPlayersWorkStatus]) + + useEffect(() => { + const interval = setInterval(() => { + setCurrentTime(Date.now()) + }, 1000) + return () => clearInterval(interval) + }, []) + + const formatDuration = (milliseconds: number): string => { + const totalSeconds = Math.floor(milliseconds / 1000) + const hours = Math.floor(totalSeconds / 3600) + const minutes = Math.floor((totalSeconds % 3600) / 60) + const seconds = totalSeconds % 60 + return `${hours}h ${minutes}m ${seconds}s` + } + + const getWorkDuration = (): number => { + if (currentWorkStatus === 'off-duty' || workStartTime === 0) { + return 0 + } + return currentTime - workStartTime + } + + const getBreakDuration = (): number => { + if (currentWorkStatus !== 'break' || lastBreakTime === 0) { + return 0 + } + return currentTime - lastBreakTime + } + + const getFatigueColor = (level: number): string => { + if (level < 30) return '#4caf50' // Green + if (level < 60) return '#ff9800' // Orange + return '#f44336' // Red + } + + const getClothingDisplay = (clothing: string): string => { + switch (clothing) { + case 'business': return '🤵 Business Suit' + case 'casual': return '👕 Casual' + case 'tired': return '😴 Tired' + default: return '👔 Uniform' + } + } + + const getAccessoryDisplay = (accessory: string): string => { + switch (accessory) { + case 'coffee': return '☕ Coffee' + case 'documents': return '📄 Documents' + case 'none': return 'None' + default: return 'None' + } + } + + const handleStatusChange = (newStatus: string) => { + const game = phaserGame.scene.keys.game as Game + switch (newStatus) { + case 'working': + if (currentWorkStatus === 'off-duty') { + dispatch(startWork()) + game?.network?.startWork() + } else if (currentWorkStatus === 'break') { + dispatch(endBreak()) + game?.network?.endBreak() + } + break + case 'break': + dispatch(startBreak()) + game?.network?.startBreak() + break + case 'off-duty': + dispatch(endWork()) + game?.network?.endWork() + break + } + } + + const workDuration = getWorkDuration() + const breakDuration = getBreakDuration() + const displayStatus = isOwnPlayer ? currentWorkStatus : targetPlayer?.workStatus || 'off-duty' + + return ( + + + + + 👤 + + + + {playerName}'s Status + + + + + + + + + + + {/* Work Information */} + + + + 📊 Work Information + + {isOwnPlayer ? ( + + + + Today's Work Time + + + {workDuration > 0 ? formatDuration(workDuration) : 'Not Working'} + + + + + Current Break Time + + + {breakDuration > 0 ? formatDuration(breakDuration) : '-'} + + + + ) : ( + + + Current Status + + + + 💡 Other players' detailed work information is private + + {targetPlayer && ( + + Last Updated: {new Date(targetPlayer.lastUpdated).toLocaleString()} + + )} + + )} + + + + {/* Fatigue Level (own player only) */} + {isOwnPlayer && ( + + + + 😴 Fatigue Level + + + + + {fatigueLevel}% + + + {fatigueLevel > 70 && ( + + ⚠️ Fatigue is accumulating. Taking a break is recommended. + + )} + + + )} + + {/* Appearance Information (own player only) */} + {isOwnPlayer && ( + + + + 👔 Appearance + + + + + Clothing + + + + + + Accessory + + + + + + + )} + + {/* Labor Standards Check (own player only) */} + {isOwnPlayer && workDuration > 8 * 60 * 60 * 1000 && ( + + + + ⚠️ Working Hours Notice + + + Today's work time exceeds 8 hours. It is recommended to take appropriate breaks in accordance with labor standards. + + + + )} + + + + + + + {isOwnPlayer && ( + <> + {currentWorkStatus === 'off-duty' && ( + + )} + {currentWorkStatus === 'working' && ( + <> + + + + )} + {currentWorkStatus === 'break' && ( + + )} + + )} + + + + ) +} + +export default PlayerStatusModal \ No newline at end of file diff --git a/client/src/components/WorkStatusBadge.tsx b/client/src/components/WorkStatusBadge.tsx new file mode 100644 index 00000000..025cffe1 --- /dev/null +++ b/client/src/components/WorkStatusBadge.tsx @@ -0,0 +1,101 @@ +import React from 'react' +import { Chip, Tooltip } from '@mui/material' +import { WorkStatus } from '../../../types/IOfficeState' +import { useDevLogger } from '../hooks/useDevMode' + +interface WorkStatusBadgeProps { + workStatus: WorkStatus + playerName?: string + size?: 'small' | 'medium' + showLabel?: boolean +} + +const getStatusConfig = (status: WorkStatus) => { + switch (status) { + case 'working': + return { + icon: '🟢', + label: '勤務中', + color: '#2e7d32' as const, + bgcolor: '#e8f5e8' + } + case 'break': + return { + icon: '🟡', + label: '休憩中', + color: '#f57c00' as const, + bgcolor: '#fff3e0' + } + case 'meeting': + return { + icon: '🔴', + label: '会議中', + color: '#d32f2f' as const, + bgcolor: '#ffebee' + } + case 'overtime': + return { + icon: '🟠', + label: '残業中', + color: '#f57c00' as const, + bgcolor: '#fff3e0' + } + case 'off-duty': + default: + return { + icon: '⚫', + label: '退勤済み', + color: '#616161' as const, + bgcolor: '#f5f5f5' + } + } +} + +const WorkStatusBadge: React.FC = ({ + workStatus, + playerName, + size = 'small', + showLabel = true +}) => { + const logger = useDevLogger('WorkStatusBadge') + + // DevMode時のみデバッグログ + logger.debug('Props:', { + workStatus, + playerName, + size, + showLabel + }) + + const config = getStatusConfig(workStatus) + + const chipContent = showLabel + ? `${config.icon} ${config.label}` + : config.icon + + const tooltipTitle = playerName + ? `${playerName}: ${config.label}` + : config.label + + return ( + + + + ) +} + +export default WorkStatusBadge \ No newline at end of file diff --git a/client/src/components/WorkStatusPanel.tsx b/client/src/components/WorkStatusPanel.tsx new file mode 100644 index 00000000..54a9b352 --- /dev/null +++ b/client/src/components/WorkStatusPanel.tsx @@ -0,0 +1,256 @@ +import React from 'react' +import { Box, Button, Paper, Typography, Grid } from '@mui/material' +import { useSelector, useDispatch } from 'react-redux' +import { RootState } from '../stores' +import { startWork, endWork, startBreak, endBreak } from '../stores/WorkStore' +import WorkStatusBadge from './WorkStatusBadge' +import WorkTimeCounter from './WorkTimeCounter' +import { useDevLogger } from '../hooks/useDevMode' +import phaserGame from '../PhaserGame' +import Game from '../scenes/Game' + +interface WorkStatusPanelProps { + compact?: boolean +} + +const WorkStatusPanel: React.FC = ({ compact = false }) => { + const dispatch = useDispatch() + const { currentWorkStatus, otherPlayersWorkStatus, workStartTime, fatigueLevel } = useSelector((state: RootState) => state.work) + const logger = useDevLogger('WorkStatusPanel') + + // DevMode時のみデバッグログ + logger.debug('Current state:', { + currentWorkStatus, + workStartTime, + fatigueLevel, + otherPlayersCount: Object.keys(otherPlayersWorkStatus).length + }) + + const handleStartWork = () => { + logger.info('Starting work...') + dispatch(startWork()) + const game = phaserGame.scene.keys.game as Game + if (game?.network) { + game.network.startWork() + } else { + logger.error('Network not available') + } + } + + const handleEndWork = () => { + dispatch(endWork()) + const game = phaserGame.scene.keys.game as Game + game?.network?.endWork() + } + + const handleStartBreak = () => { + dispatch(startBreak()) + const game = phaserGame.scene.keys.game as Game + game?.network?.startBreak() + } + + const handleEndBreak = () => { + dispatch(endBreak()) + const game = phaserGame.scene.keys.game as Game + game?.network?.endBreak() + } + + const getStatusCounts = () => { + const counts = { + working: 0, + break: 0, + meeting: 0, + overtime: 0, + 'off-duty': 0 + } + + // 自分の状態を含める + counts[currentWorkStatus]++ + + // 他のプレイヤーの状態をカウント + Object.values(otherPlayersWorkStatus).forEach(player => { + counts[player.workStatus]++ + }) + + return counts + } + + const statusCounts = getStatusCounts() + + if (compact) { + logger.debug('Rendering compact view') + return ( + + + + 💼 勤務状況 + + + + + + + + + + {currentWorkStatus === 'off-duty' && ( + + )} + {currentWorkStatus === 'working' && ( + <> + + + + )} + {currentWorkStatus === 'break' && ( + + )} + + + + + + + ) + } + + return ( + + + 💼 勤務管理パネル + + + {/* 現在の状態 */} + + + 現在の状態 + + + + + + + + {/* 操作ボタン */} + + + 操作 + + + + + + + + + + + + + + + {/* チーム状況 */} + + + チーム勤務状況 + + + {statusCounts.working > 0 && ( + + 🟢 勤務中: {statusCounts.working}人 + + )} + {statusCounts.break > 0 && ( + + 🟡 休憩中: {statusCounts.break}人 + + )} + {statusCounts.meeting > 0 && ( + + 🔴 会議中: {statusCounts.meeting}人 + + )} + {statusCounts['off-duty'] > 0 && ( + + ⚫ 退勤済み: {statusCounts['off-duty']}人 + + )} + + + + ) +} + +export default WorkStatusPanel \ No newline at end of file diff --git a/client/src/components/WorkTimeCounter.tsx b/client/src/components/WorkTimeCounter.tsx new file mode 100644 index 00000000..9633a9ce --- /dev/null +++ b/client/src/components/WorkTimeCounter.tsx @@ -0,0 +1,163 @@ +import React, { useState, useEffect } from 'react' +import { Box, Typography, Paper } from '@mui/material' +import { useSelector } from 'react-redux' +import { RootState } from '../stores' +import { useDevLogger } from '../hooks/useDevMode' + +interface WorkTimeCounterProps { + compact?: boolean +} + +const WorkTimeCounter: React.FC = ({ compact = false }) => { + const { currentWorkStatus, workStartTime, fatigueLevel } = useSelector((state: RootState) => state.work) + const [currentTime, setCurrentTime] = useState(Date.now()) + const logger = useDevLogger('WorkTimeCounter') + + // DevMode時のみデバッグログ + logger.debug('Current state:', { + currentWorkStatus, + workStartTime, + fatigueLevel, + currentTime, + isWorking: currentWorkStatus !== 'off-duty' && workStartTime > 0 + }) + + useEffect(() => { + const interval = setInterval(() => { + setCurrentTime(Date.now()) + }, 1000) // 1秒ごとに更新 + + return () => clearInterval(interval) + }, []) + + const formatDuration = (milliseconds: number): string => { + const totalSeconds = Math.floor(milliseconds / 1000) + const hours = Math.floor(totalSeconds / 3600) + const minutes = Math.floor((totalSeconds % 3600) / 60) + const seconds = totalSeconds % 60 + + if (compact) { + return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}` + } + return `${hours}時間${minutes}分${seconds}秒` + } + + const getWorkDuration = (): number => { + if (currentWorkStatus === 'off-duty' || workStartTime === 0) { + return 0 + } + return currentTime - workStartTime + } + + const getFatigueColor = (level: number): string => { + if (level < 30) return '#4caf50' // Green + if (level < 60) return '#ff9800' // Orange + return '#f44336' // Red + } + + const workDuration = getWorkDuration() + const isWorking = currentWorkStatus !== 'off-duty' && workStartTime > 0 + + // compact表示でも常に何かしらの情報を表示する + if (compact && !isWorking) { + return ( + + 未勤務 + + ) + } + + return ( + + {!compact && ( + + ⏰ 勤務時間 + + )} + + + + {isWorking ? formatDuration(workDuration) : '未勤務'} + + + {!compact && fatigueLevel > 0 && ( + + + 疲労度: + + + + + + {fatigueLevel}% + + + )} + + + {!compact && workDuration > 8 * 60 * 60 * 1000 && ( // 8時間超過 + + ⚠️ 労働基準法の上限を超えています + + )} + + ) +} + +export default WorkTimeCounter \ No newline at end of file diff --git a/client/src/hooks/useAppNavigation.ts b/client/src/hooks/useAppNavigation.ts new file mode 100644 index 00000000..eccca95e --- /dev/null +++ b/client/src/hooks/useAppNavigation.ts @@ -0,0 +1,35 @@ +import { useAppSelector } from '../hooks' + +/** + * アプリケーションのナビゲーション状態を管理するカスタムフック + * App.tsxの複雑な条件分岐ロジックを分離 + */ +export const useAppNavigation = () => { + const loggedIn = useAppSelector((state) => state.user.loggedIn) + const computerDialogOpen = useAppSelector((state) => state.computer.computerDialogOpen) + const whiteboardDialogOpen = useAppSelector((state) => state.whiteboard.whiteboardDialogOpen) + const videoConnected = useAppSelector((state) => state.user.videoConnected) + const roomJoined = useAppSelector((state) => state.room.roomJoined) + + // UI状態の計算ロジック + const getCurrentView = () => { + if (!loggedIn) { + return roomJoined ? 'login' : 'room-selection' + } + + if (computerDialogOpen) return 'computer' + if (whiteboardDialogOpen) return 'whiteboard' + + return 'main' + } + + const shouldShowVideoDialog = loggedIn && !videoConnected + const shouldShowHelperButtons = !computerDialogOpen && !whiteboardDialogOpen + + return { + currentView: getCurrentView(), + shouldShowVideoDialog, + shouldShowHelperButtons, + isDialogOpen: computerDialogOpen || whiteboardDialogOpen + } +} \ No newline at end of file diff --git a/client/src/hooks/useDevMode.ts b/client/src/hooks/useDevMode.ts new file mode 100644 index 00000000..4ce67c89 --- /dev/null +++ b/client/src/hooks/useDevMode.ts @@ -0,0 +1,116 @@ +import { useEffect, useMemo } from 'react' +import { useAppSelector, useAppDispatch } from '../hooks' +import { toggleDevMode, setDevmode } from '../stores/DevModeStore' +import { logger, createComponentLogger, LogLevel, LogEntry } from '../utils/logger' + +/** + * Custom hook for managing DevMode functionality + * Provides integration between Redux DevModeStore and logger + */ +export const useDevMode = () => { + const dispatch = useAppDispatch() + const isDevMode = useAppSelector((state) => state.devMode.isDevMode) + + // Set DevMode state checker for logger + useEffect(() => { + logger.setDevModeChecker(() => isDevMode) + }, [isDevMode]) + + // DevMode toggle log (commented out as already handled by DevModeStore) + // useEffect(() => { + // if (isDevMode) { + // console.log('🐛 [DevMode] Debug logging enabled - Components will now show detailed logs') + // console.log('📊 [DevMode] DevMode Panel is now visible in the top-right corner') + // } else { + // console.log('🔇 [DevMode] Debug logging disabled - Only INFO+ logs will be shown') + // } + // }, [isDevMode]) + + // DevMode toggle function + const toggleDev = () => { + dispatch(toggleDevMode()) + } + + // DevMode setting function + const setDev = (enabled: boolean) => { + dispatch(setDevmode(enabled)) + } + + // Log level setting + const setLogLevel = (level: LogLevel) => { + logger.setLogLevel(level) + } + + // DevMode-specific log functionality + const devLog = { + debug: (component: string, message: string, data?: any) => { + if (isDevMode) { + logger.debug(component, message, data) + } + }, + info: (component: string, message: string, data?: any) => { + if (isDevMode) { + logger.info(component, message, data) + } + }, + warn: (component: string, message: string, data?: any) => { + logger.warn(component, message, data) + }, + error: (component: string, message: string, data?: any) => { + logger.error(component, message, data) + } + } + + // Log management functionality (memoized) + const logManager = useMemo(() => ({ + getLogs: () => logger.getLogs(), + getLogsByComponent: (component: string) => logger.getLogsByComponent(component), + getLogsByLevel: (level: LogLevel) => logger.getLogsByLevel(level), + clearLogs: () => logger.clearLogs(), + getStats: () => logger.getLogStats(), + addListener: (listener: (entry: LogEntry) => void) => logger.addListener(listener), + removeListener: (listener: (entry: LogEntry) => void) => logger.removeListener(listener) + }), []) + + // Create component-specific logger + const createLogger = (componentName: string) => { + const componentLogger = createComponentLogger(componentName) + + // Return logger that considers DevMode state + return { + debug: (message: string, data?: any) => { + if (isDevMode) { + componentLogger.debug(message, data) + } + }, + info: (message: string, data?: any) => { + if (isDevMode) { + componentLogger.info(message, data) + } + }, + warn: (message: string, data?: any) => componentLogger.warn(message, data), + error: (message: string, data?: any) => componentLogger.error(message, data) + } + } + + return { + isDevMode, + toggleDev, + setDev, + setLogLevel, + devLog, + logManager, + createLogger + } +} + +// Convenient type definition for Redux state debugging +export interface DevModeState { + isDevMode: boolean +} + +// DevMode-specific utility hook +export const useDevLogger = (componentName: string) => { + const { createLogger } = useDevMode() + return createLogger(componentName) +} \ No newline at end of file diff --git a/client/src/hooks/useGameContent.ts b/client/src/hooks/useGameContent.ts new file mode 100644 index 00000000..1bc41842 --- /dev/null +++ b/client/src/hooks/useGameContent.ts @@ -0,0 +1,28 @@ +import { useAppSelector } from '../hooks' +import { canSendMessages } from '../utils/meetingRoomPermissions' + +/** + * メインゲームコンテンツで使用される状態とロジックを管理 + * App.tsxのゲーム関連ロジックを分離 + */ +export const useGameContent = () => { + const isDevMode = useAppSelector((state) => state.devMode.isDevMode) + const currentMeetingRoomId = useAppSelector((state) => state.chat.currentMeetingRoomId) + const meetingRooms = useAppSelector((state) => state.meetingRoom.meetingRooms) + const sessionId = useAppSelector((state) => state.user.sessionId) + + const currentRoom = currentMeetingRoomId + ? meetingRooms.find(r => r.id === currentMeetingRoomId) + : null + + const userCanSendMessages = currentRoom + ? canSendMessages(sessionId, currentRoom) + : false + + return { + isDevMode, + currentMeetingRoomId, + currentRoom, + userCanSendMessages + } +} \ No newline at end of file diff --git a/client/src/hooks/useKeyboardShortcuts.ts b/client/src/hooks/useKeyboardShortcuts.ts new file mode 100644 index 00000000..0383c9e2 --- /dev/null +++ b/client/src/hooks/useKeyboardShortcuts.ts @@ -0,0 +1,35 @@ +import { useEffect } from 'react' + +interface KeyboardShortcutsOptions { + onToggleDevMode?: () => void + onOpenPlayerStatus?: () => void +} + +/** + * キーボードショートカットを管理するカスタムフック + * App.tsxからキーボード関連ロジックを分離 + */ +export const useKeyboardShortcuts = (options: KeyboardShortcutsOptions) => { + const { onToggleDevMode, onOpenPlayerStatus } = options + + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + // Ctrl+I でデベロッパーモード切り替え + if (event.ctrlKey && event.key === 'i' && onToggleDevMode) { + event.preventDefault() + onToggleDevMode() + } + + // Sキーでプレイヤーステータスモーダルを開く機能を無効化 + // if ((event.key === 's' || event.key === 'S') && onOpenPlayerStatus) { + // onOpenPlayerStatus() + // } + } + + window.addEventListener('keydown', handleKeyDown) + + return () => { + window.removeEventListener('keydown', handleKeyDown) + } + }, [onToggleDevMode, onOpenPlayerStatus]) +} \ No newline at end of file diff --git a/client/src/hooks/useModalManager.ts b/client/src/hooks/useModalManager.ts new file mode 100644 index 00000000..63315c6c --- /dev/null +++ b/client/src/hooks/useModalManager.ts @@ -0,0 +1,56 @@ +import { useState, useEffect } from 'react' + +interface ModalState { + playerStatus: { + open: boolean + playerId?: string + } + // 将来的に他のモーダルも追加可能 +} + +/** + * アプリケーション全体のモーダル状態を管理するカスタムフック + * モーダル関連のロジックをApp.tsxから分離 + */ +export const useModalManager = () => { + const [modals, setModals] = useState({ + playerStatus: { open: false } + }) + + // プレイヤーステータスモーダル制御 + const openPlayerStatusModal = (playerId?: string) => { + setModals(prev => ({ + ...prev, + playerStatus: { open: true, playerId } + })) + } + + const closePlayerStatusModal = () => { + setModals(prev => ({ + ...prev, + playerStatus: { open: false, playerId: undefined } + })) + } + + // カスタムイベントリスナー + useEffect(() => { + const handleOpenPlayerStatusModal = (event: CustomEvent) => { + console.log('🎯 [ModalManager] Opening player status modal:', event.detail) + openPlayerStatusModal(event.detail?.playerId) + } + + window.addEventListener('openPlayerStatusModal', handleOpenPlayerStatusModal as EventListener) + + return () => { + window.removeEventListener('openPlayerStatusModal', handleOpenPlayerStatusModal as EventListener) + } + }, []) + + return { + modals, + playerStatus: { + open: openPlayerStatusModal, + close: closePlayerStatusModal + } + } +} \ No newline at end of file diff --git a/client/src/scenes/Game.ts b/client/src/scenes/Game.ts index 77a4062d..182a6ba1 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -36,6 +36,30 @@ export default class Game extends Phaser.Scene { computerMap = new Map() private whiteboardMap = new Map() private meetingRoomManager!: MeetingRoomManager + + // Meeting Room Edit Mode + private meetingRoomEditMode = false + private editableRoomAreas: Map = new Map() + private draggedRoom: { roomId: string, startX: number, startY: number, graphics: Phaser.GameObjects.Graphics } | null = null + private resizeHandle: { roomId: string, handle: 'nw' | 'ne' | 'sw' | 'se', graphics: Phaser.GameObjects.Graphics } | null = null + + // Global drag state for manual implementation + private globalDragState: { + isDragging: boolean + roomId: string | null + startX: number + startY: number + rectStartX: number + rectStartY: number + } = { + isDragging: false, + roomId: null, + startX: 0, + startY: 0, + rectStartX: 0, + rectStartY: 0 + } + constructor() { super('game') } @@ -75,6 +99,22 @@ export default class Game extends Phaser.Scene { } createCharacterAnims(this.anims) + + // Make game instance globally available for DevMode + if (typeof window !== 'undefined') { + (window as any).game = this + } + + // Set up Redux store subscription for avatar updates + let previousAvatarSprite = '' + store.subscribe(() => { + const currentAvatarSprite = store.getState().work.currentAvatarSprite + if (currentAvatarSprite !== previousAvatarSprite && this.myPlayer) { + console.log(`🔄 [Game] Avatar sprite changed: ${previousAvatarSprite} → ${currentAvatarSprite}`) + this.myPlayer.updateAvatarFromWorkState() + previousAvatarSprite = currentAvatarSprite + } + }) this.map = this.make.tilemap({ key: 'tilemap' }) const FloorAndGround = this.map.addTilesetImage('FloorAndGround', 'tiles_wall') @@ -185,6 +225,28 @@ export default class Game extends Phaser.Scene { this.network.onItemUserAdded(this.handleItemUserAdded, this) this.network.onItemUserRemoved(this.handleItemUserRemoved, this) this.network.onChatMessageAdded(this.handleChatMessageAdded, this) + + // CRITICAL: Ensure input is properly enabled + console.log('🔧 [Game] Enabling input systems explicitly...') + this.input.enabled = true + this.input.mouse.enabled = true + + // FORCE enable pointer events specifically + this.input.mouse.disableContextMenu() + this.input.manager.enabled = true + + console.log('🔧 [Game] Input manager state after force enable:', { + inputEnabled: this.input.enabled, + mouseEnabled: this.input.mouse.enabled, + managerEnabled: this.input.manager.enabled, + keyboard: this.input.keyboard.enabled + }) + + // Register keys (this might have been missing!) + this.registerKeys() + + // Initialize meeting room edit mode + this.initializeMeetingRoomEditMode() } private handleItemSelectorOverlap(playerSelector, selectionItem) { @@ -296,6 +358,15 @@ export default class Game extends Phaser.Scene { otherPlayer?.updateDialogBubble(content) } + // プレイヤーステータスモーダルを開くイベントを発火 + openPlayerStatusModal(playerId?: string) { + console.log('👤 [Game] Opening player status modal for:', playerId || 'self') + // Reactコンポーネントに通知するためのイベント発火 + window.dispatchEvent(new CustomEvent('openPlayerStatusModal', { + detail: { playerId } + })) + } + handleEnterMeetingRoom(roomId: string, room: any): void { console.log('handleEnterMeetingRoom', roomId, room) } @@ -311,5 +382,592 @@ export default class Game extends Phaser.Scene { this.myPlayer.update(this.playerSelector, this.cursors, this.keyE, this.keyR, this.network) } + + // Manual drag handling in update loop + if (this.meetingRoomEditMode && this.globalDragState.isDragging) { + const pointer = this.input.activePointer + if (pointer && pointer.isDown) { + // Debug global drag state + console.log('🎯 [Game] Global drag state check:', { + startX: this.globalDragState.startX, + startY: this.globalDragState.startY, + pointerX: pointer.x, + pointerY: pointer.y, + rectStartX: this.globalDragState.rectStartX, + rectStartY: this.globalDragState.rectStartY + }) + + const deltaX = pointer.x - this.globalDragState.startX + const deltaY = pointer.y - this.globalDragState.startY + + console.log('🎯 [Game] *** UPDATE DRAGGING *** room:', this.globalDragState.roomId, 'pointer:', pointer.x, pointer.y, 'delta:', deltaX, deltaY) + + // Only update if delta is significant to avoid spam + if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) { + const newX = this.globalDragState.rectStartX + deltaX + const newY = this.globalDragState.rectStartY + deltaY + + // Update room rectangle position + const rect = this.editableRoomAreas.get(this.globalDragState.roomId!) as Phaser.GameObjects.Rectangle + const label = this.editableRoomAreas.get(`${this.globalDragState.roomId}_label`) as Phaser.GameObjects.Text + + if (rect) { + rect.setPosition(newX, newY) + console.log('🎯 [Game] Rectangle moved to:', newX, newY) + } + if (label) { + label.setPosition(newX, newY) + } + } + } else if (!pointer?.isDown && this.globalDragState.isDragging) { + // Mouse was released + console.log('🎯 [Game] Mouse released - ending drag via update') + this.endGlobalDrag() + } + } + } + + // Helper method to end global drag + private endGlobalDrag() { + if (!this.globalDragState.isDragging) return + + console.log('🎯 [Game] Ending global drag for room:', this.globalDragState.roomId) + + const rect = this.editableRoomAreas.get(this.globalDragState.roomId!) as Phaser.GameObjects.Rectangle + if (rect) { + // Reset color + rect.setFillStyle(0xff9800, 0.3) + rect.setStrokeStyle(3, 0xff9800) + + // Update Redux + const meetingRoomState = store.getState().meetingRoom + const area = meetingRoomState.meetingRoomAreas.find(a => a.meetingRoomId === this.globalDragState.roomId) + if (area) { + const newX = rect.x - area.width/2 + const newY = rect.y - area.height/2 + + console.log('🎯 [Game] Final position update to:', newX, newY) + + const updateFunction = (window as any).devModeUpdateRoomArea + if (updateFunction) { + updateFunction(this.globalDragState.roomId, { + x: newX, + y: newY, + width: area.width, + height: area.height + }) + } + } + } + + this.globalDragState.isDragging = false + this.globalDragState.roomId = null + } + + // Meeting Room Edit Mode Methods + private initializeMeetingRoomEditMode() { + // Using built-in Phaser drag functionality for clean, simple implementation + console.log('🎯 [Game] Initialized meeting room edit mode with built-in drag support') + } + + toggleMeetingRoomEditMode(enabled: boolean) { + console.log('🎯 [Game] toggleMeetingRoomEditMode called with:', enabled) + this.meetingRoomEditMode = enabled + + if (enabled) { + console.log('🎯 [Game] Creating editable room areas...') + // Hide existing meeting room manager graphics to avoid conflicts + this.meetingRoomManager.hideRoomAreas() + this.createEditableRoomAreas() + console.log('🎨 [Game] Meeting room edit mode ENABLED') + } else { + console.log('🎯 [Game] Clearing editable room areas...') + this.clearEditableRoomAreas() + // Show meeting room manager graphics again + this.meetingRoomManager.showRoomAreas() + console.log('🎨 [Game] Meeting room edit mode DISABLED') + } + } + + + // Setup DOM-based drag system for meeting room areas + private setupRoomDragSystem(roomRect: Phaser.GameObjects.Rectangle, roomId: string) { + console.log('🎯 [Game] Setting up DOM drag for room:', roomId) + + // Room-specific drag state + const roomDragState = { + isDragging: false, + startMouseX: 0, + startMouseY: 0, + startObjX: 0, + startObjY: 0, + roomId: roomId + } + + const canvas = this.game.canvas + if (!canvas) { + console.error('🎯 [Game] Canvas not found for room drag setup') + return + } + + // Pointer down event to start drag + roomRect.on('pointerdown', (pointer: any) => { + console.log('🎯 [Game] === ROOM POINTER DOWN ===', roomId) + console.log(' Room position before:', roomRect.x, roomRect.y) + + roomDragState.isDragging = true + roomDragState.startObjX = roomRect.x + roomDragState.startObjY = roomRect.y + + // Store absolute mouse position + const rect = canvas.getBoundingClientRect() + roomDragState.startMouseX = pointer.x + rect.left + roomDragState.startMouseY = pointer.y + rect.top + + // Visual feedback + roomRect.setFillStyle(0x00ff00, 0.5) // Green while dragging + roomRect.setStrokeStyle(3, 0x00ff00) + + console.log('🎯 [Game] Room drag started for:', roomId) + }) + + // Document-level mousemove for room dragging + const roomMouseMoveHandler = (event: MouseEvent) => { + if (roomDragState.isDragging && roomRect.active) { + const deltaX = event.clientX - roomDragState.startMouseX + const deltaY = event.clientY - roomDragState.startMouseY + const newX = roomDragState.startObjX + deltaX + const newY = roomDragState.startObjY + deltaY + + console.log('🎯 [Game] ROOM DRAG -', roomId, 'delta:', deltaX, deltaY, 'newPos:', newX, newY) + + roomRect.setPosition(newX, newY) + + // Update label if exists + const label = this.editableRoomAreas.get(`${roomId}_label`) + if (label && 'setPosition' in label) { + (label as any).setPosition(newX, newY) + } + } + } + + // Document-level mouseup for room drag release + const roomMouseUpHandler = (event: MouseEvent) => { + if (roomDragState.isDragging) { + console.log('🎯 [Game] === ROOM MOUSE UP ===', roomId) + console.log(' Final position:', roomRect.x, roomRect.y) + + roomDragState.isDragging = false + + // Reset visual style + roomRect.setFillStyle(0xff9800, 0.3) // Back to orange + roomRect.setStrokeStyle(3, 0xff9800) + + // Update Redux store with new position + this.updateRoomPositionInStore(roomId, roomRect.x, roomRect.y) + + console.log('🎯 [Game] Room drag ended for:', roomId) + } + } + + // Add document event listeners + document.addEventListener('mousemove', roomMouseMoveHandler) + document.addEventListener('mouseup', roomMouseUpHandler) + + // Store handlers for cleanup + roomRect.setData('mouseMoveHandler', roomMouseMoveHandler) + roomRect.setData('mouseUpHandler', roomMouseUpHandler) + + console.log('🎯 [Game] DOM drag system setup complete for room:', roomId) + } + + // Update room position in Redux store + private updateRoomPositionInStore(roomId: string, centerX: number, centerY: number) { + const meetingRoomState = store.getState().meetingRoom + const area = meetingRoomState.meetingRoomAreas.find(a => a.meetingRoomId === roomId) + + if (area) { + // Convert from center position to top-left position + const newX = centerX - area.width / 2 + const newY = centerY - area.height / 2 + + console.log('🎯 [Game] Updating room position in store:', roomId, 'to:', newX, newY) + + // Use global function to update position + const updateFunction = (window as any).devModeUpdateRoomArea + if (updateFunction) { + updateFunction(roomId, { + x: newX, + y: newY, + width: area.width, + height: area.height + }) + console.log('🎯 [Game] Store updated successfully for room:', roomId) + } else { + console.warn('🎯 [Game] devModeUpdateRoomArea function not available') + } + } else { + console.error('🎯 [Game] Room area not found in store:', roomId) + } + } + + private createEditableRoomAreas() { + const meetingRoomState = store.getState().meetingRoom + console.log('🎯 [Game] Meeting room state:', meetingRoomState) + console.log('🎯 [Game] Meeting room areas:', meetingRoomState.meetingRoomAreas) + + if (meetingRoomState.meetingRoomAreas.length === 0) { + console.warn('🎯 [Game] No meeting room areas found in state!') + } + + meetingRoomState.meetingRoomAreas.forEach(area => { + console.log('🎯 [Game] Processing area:', area) + if (area.meetingRoomId) { + this.createEditableRoomGraphics(area.meetingRoomId, area.x, area.y, area.width, area.height) + } else { + console.warn('🎯 [Game] Area has no meetingRoomId:', area) + } + }) + } + + private createEditableRoomGraphics(roomId: string, x: number, y: number, width: number, height: number) { + console.log('🎯 [Game] Creating editable room graphics for:', roomId, 'at position:', x, y, 'size:', width, height) + + // Create a simple rectangle sprite instead of graphics + const rect = this.add.rectangle(x + width/2, y + height/2, width, height, 0xff9800, 0.3) + rect.setStrokeStyle(3, 0xff9800) + rect.setInteractive() // Make interactive but use DOM drag + rect.setData('roomId', roomId) + + // Apply DOM-based drag system to meeting room area + this.setupRoomDragSystem(rect, roomId) + rect.setData('type', 'room') + rect.setDepth(2000) // Higher depth to ensure it's above MeetingRoomManager graphics + + console.log('🎯 [Game] Rectangle created for room:', roomId) + + // Visual feedback on hover + rect.on('pointerover', () => { + if (!rect.getData('isDragging')) { + rect.setFillStyle(0xff9800, 0.5) // Slightly more opaque on hover + } + }) + + rect.on('pointerout', () => { + if (!rect.getData('isDragging')) { + rect.setFillStyle(0xff9800, 0.3) // Back to normal opacity + } + }) + + // Add room label + const text = this.add.text(x + width/2, y + height/2, '🏢 ROOM\n(Drag me!)', { + fontSize: '12px', + color: '#bf360c', + align: 'center', + backgroundColor: '#ffffff', + padding: { x: 4, y: 2 } + }) + text.setOrigin(0.5, 0.5) + text.setDepth(2001) // Higher depth to ensure it's above MeetingRoomManager graphics + + this.editableRoomAreas.set(roomId, rect) + this.editableRoomAreas.set(`${roomId}_label`, text) + + // Resize handles + this.createResizeHandles(roomId, x, y, width, height) + } + + // Old drawRoomArea method - no longer needed with Rectangle approach + /* + private drawRoomArea(graphics: Phaser.GameObjects.Graphics, x: number, y: number, width: number, height: number, isDragging: boolean = false) { + // Replaced by Rectangle objects with built-in fill/stroke methods + } + */ + + private createResizeHandles(roomId: string, x: number, y: number, width: number, height: number) { + const handleSize = 10 + const handles = [ + { key: 'nw', x: x - handleSize/2, y: y - handleSize/2 }, + { key: 'ne', x: x + width - handleSize/2, y: y - handleSize/2 }, + { key: 'sw', x: x - handleSize/2, y: y + height - handleSize/2 }, + { key: 'se', x: x + width - handleSize/2, y: y + height - handleSize/2 } + ] + + handles.forEach(handle => { + const handleGraphics = this.add.graphics() + handleGraphics.setPosition(handle.x, handle.y) + handleGraphics.setInteractive(new Phaser.Geom.Rectangle(0, 0, handleSize, handleSize), Phaser.Geom.Rectangle.Contains) + handleGraphics.input.draggable = true + handleGraphics.setData('roomId', roomId) + handleGraphics.setData('type', 'handle') + handleGraphics.setData('handle', handle.key) + + handleGraphics.fillStyle(0xff5722, 1) + handleGraphics.fillRect(0, 0, handleSize, handleSize) + handleGraphics.setDepth(1001) + + // Add resize drag functionality + let isResizing = false + let resizeStartX = 0 + let resizeStartY = 0 + let originalRoomData = { x: 0, y: 0, width: 0, height: 0 } + + handleGraphics.on('dragstart', (pointer: any) => { + console.log('🎯 [Game] Resize handle drag start:', handle.key, 'for room:', roomId) + isResizing = true + resizeStartX = pointer.x + resizeStartY = pointer.y + + // Store original room data + const rect = this.editableRoomAreas.get(roomId) as Phaser.GameObjects.Rectangle + if (rect) { + const area = store.getState().meetingRoom.meetingRoomAreas.find(a => a.meetingRoomId === roomId) + if (area) { + originalRoomData = { x: area.x, y: area.y, width: area.width, height: area.height } + } + } + + // Change handle color during resize + handleGraphics.clear() + handleGraphics.fillStyle(0x4caf50, 1) // Green when resizing + handleGraphics.fillRect(0, 0, handleSize, handleSize) + }) + + handleGraphics.on('drag', (pointer: any, dragX: number, dragY: number) => { + console.log('🎯 [Game] Resizing room:', roomId, 'handle:', handle.key, 'to:', dragX, dragY) + + const rect = this.editableRoomAreas.get(roomId) as Phaser.GameObjects.Rectangle + const label = this.editableRoomAreas.get(`${roomId}_label`) as Phaser.GameObjects.Text + if (!rect) return + + const deltaX = pointer.x - resizeStartX + const deltaY = pointer.y - resizeStartY + + let newX = originalRoomData.x + let newY = originalRoomData.y + let newWidth = originalRoomData.width + let newHeight = originalRoomData.height + + // Calculate new dimensions based on handle type + switch (handle.key) { + case 'nw': // Northwest: adjust x, y, width, height + newX = originalRoomData.x + deltaX + newY = originalRoomData.y + deltaY + newWidth = originalRoomData.width - deltaX + newHeight = originalRoomData.height - deltaY + break + case 'ne': // Northeast: adjust y, width, height + newY = originalRoomData.y + deltaY + newWidth = originalRoomData.width + deltaX + newHeight = originalRoomData.height - deltaY + break + case 'sw': // Southwest: adjust x, width, height + newX = originalRoomData.x + deltaX + newWidth = originalRoomData.width - deltaX + newHeight = originalRoomData.height + deltaY + break + case 'se': // Southeast: adjust width, height + newWidth = originalRoomData.width + deltaX + newHeight = originalRoomData.height + deltaY + break + } + + // Enforce minimum size constraints + const minSize = 50 + if (newWidth < minSize) { + if (handle.key.includes('w')) newX = originalRoomData.x + originalRoomData.width - minSize + newWidth = minSize + } + if (newHeight < minSize) { + if (handle.key.includes('n')) newY = originalRoomData.y + originalRoomData.height - minSize + newHeight = minSize + } + + // Update rectangle visual + rect.setPosition(newX + newWidth/2, newY + newHeight/2) + rect.setSize(newWidth, newHeight) + rect.setFillStyle(0x4caf50, 0.4) // Green tint during resize + rect.setStrokeStyle(3, 0x4caf50) + + // Update label position + if (label) { + label.setPosition(newX + newWidth/2, newY + newHeight/2) + } + + // Update all handles positions + this.updateHandlePositions(roomId, newX, newY, newWidth, newHeight) + }) + + handleGraphics.on('dragend', (pointer: any) => { + console.log('🎯 [Game] Resize handle drag end for room:', roomId) + isResizing = false + + // Reset handle color + handleGraphics.clear() + handleGraphics.fillStyle(0xff5722, 1) + handleGraphics.fillRect(0, 0, handleSize, handleSize) + + const rect = this.editableRoomAreas.get(roomId) as Phaser.GameObjects.Rectangle + if (rect) { + // Reset rectangle color + rect.setFillStyle(0xff9800, 0.3) + rect.setStrokeStyle(3, 0xff9800) + + // Calculate final dimensions + const deltaX = pointer.x - resizeStartX + const deltaY = pointer.y - resizeStartY + + let finalX = originalRoomData.x + let finalY = originalRoomData.y + let finalWidth = originalRoomData.width + let finalHeight = originalRoomData.height + + switch (handle.key) { + case 'nw': + finalX = originalRoomData.x + deltaX + finalY = originalRoomData.y + deltaY + finalWidth = originalRoomData.width - deltaX + finalHeight = originalRoomData.height - deltaY + break + case 'ne': + finalY = originalRoomData.y + deltaY + finalWidth = originalRoomData.width + deltaX + finalHeight = originalRoomData.height - deltaY + break + case 'sw': + finalX = originalRoomData.x + deltaX + finalWidth = originalRoomData.width - deltaX + finalHeight = originalRoomData.height + deltaY + break + case 'se': + finalWidth = originalRoomData.width + deltaX + finalHeight = originalRoomData.height + deltaY + break + } + + // Enforce minimum constraints + const minSize = 50 + if (finalWidth < minSize) { + if (handle.key.includes('w')) finalX = originalRoomData.x + originalRoomData.width - minSize + finalWidth = minSize + } + if (finalHeight < minSize) { + if (handle.key.includes('n')) finalY = originalRoomData.y + originalRoomData.height - minSize + finalHeight = minSize + } + + // Update Redux store + const updateFunction = (window as any).devModeUpdateRoomArea + if (updateFunction) { + updateFunction(roomId, { + x: finalX, + y: finalY, + width: finalWidth, + height: finalHeight + }) + console.log('🎯 [Game] Updated room area via resize to:', finalX, finalY, finalWidth, finalHeight) + } + } + }) + + this.editableRoomAreas.set(`${roomId}_handle_${handle.key}`, handleGraphics) + }) + } + + private updateHandlePositions(roomId: string, x: number, y: number, width: number, height: number) { + const handleSize = 10 + const handlePositions = [ + { key: 'nw', x: x - handleSize/2, y: y - handleSize/2 }, + { key: 'ne', x: x + width - handleSize/2, y: y - handleSize/2 }, + { key: 'sw', x: x - handleSize/2, y: y + height - handleSize/2 }, + { key: 'se', x: x + width - handleSize/2, y: y + height - handleSize/2 } + ] + + handlePositions.forEach(pos => { + const handle = this.editableRoomAreas.get(`${roomId}_handle_${pos.key}`) as Phaser.GameObjects.Graphics + if (handle) { + handle.setPosition(pos.x, pos.y) + } + }) + } + + private clearEditableRoomAreas() { + console.log('🎯 [Game] Clearing all editable room areas with DOM cleanup') + this.editableRoomAreas.forEach((gameObject, key) => { + if (gameObject) { + console.log('🎯 [Game] Destroying room area object:', key) + + // Clean up DOM event listeners for room objects + if ('getData' in gameObject) { + const mouseMoveHandler = (gameObject as any).getData('mouseMoveHandler') + const mouseUpHandler = (gameObject as any).getData('mouseUpHandler') + + if (mouseMoveHandler) { + document.removeEventListener('mousemove', mouseMoveHandler) + console.log('🎯 [Game] Removed mousemove listener for:', key) + } + if (mouseUpHandler) { + document.removeEventListener('mouseup', mouseUpHandler) + console.log('🎯 [Game] Removed mouseup listener for:', key) + } + } + + gameObject.destroy() + } + }) + this.editableRoomAreas.clear() + console.log('🎯 [Game] All editable room areas cleared with DOM event cleanup') + } + + // Old pointer event handlers - commented out in favor of built-in drag functionality + /* + private handleMeetingRoomPointerDown(pointer: Phaser.Input.Pointer) { + // This method is now replaced by built-in Phaser drag events on Rectangle objects + } + + private handleMeetingRoomPointerMove(pointer: Phaser.Input.Pointer) { + // This method is now replaced by built-in Phaser drag events on Rectangle objects + } + + private handleMeetingRoomPointerUp(pointer: Phaser.Input.Pointer) { + // This method is now replaced by built-in Phaser drag events on Rectangle objects + } + */ + + private updateRoomAreaVisuals(roomId: string, x: number, y: number, width: number, height: number, isDragging: boolean = false) { + const rect = this.editableRoomAreas.get(roomId) as Phaser.GameObjects.Rectangle | undefined + const label = this.editableRoomAreas.get(`${roomId}_label`) as Phaser.GameObjects.Text | undefined + + if (rect) { + rect.setPosition(x + width/2, y + height/2) + rect.setSize(width, height) + + if (isDragging) { + rect.setFillStyle(0xffeb3b, 0.5) // Yellow when dragging + rect.setStrokeStyle(3, 0xffeb3b) + } else { + rect.setFillStyle(0xff9800, 0.3) // Orange when normal + rect.setStrokeStyle(3, 0xff9800) + } + } + + if (label) { + label.setPosition(x + width/2, y + height/2) + } + + // Update resize handles + this.clearRoomHandles(roomId) + this.createResizeHandles(roomId, x, y, width, height) + } + + private clearRoomHandles(roomId: string) { + const handleKeys = Array.from(this.editableRoomAreas.keys()).filter(key => key.includes(`${roomId}_handle_`)) + handleKeys.forEach(key => { + const handle = this.editableRoomAreas.get(key) + if (handle) { + handle.destroy() + this.editableRoomAreas.delete(key) + } + }) } } diff --git a/client/src/scenes/MeetingRoom.ts b/client/src/scenes/MeetingRoom.ts index 7958b2fb..70e3c0dd 100644 --- a/client/src/scenes/MeetingRoom.ts +++ b/client/src/scenes/MeetingRoom.ts @@ -2,8 +2,10 @@ import Phaser from 'phaser' import MyPlayer from '../characters/MyPlayer' import store from '../stores' import { MeetingRoom, MeetingRoomArea } from '../stores/MeetingRoomStore' +import { setCurrentMeetingRoomId, pushMeetingRoomUserJoinedMessage, pushMeetingRoomUserLeftMessage } from '../stores/ChatStore' export class MeetingRoomManager { +<<<<<<< Updated upstream private scene: Phaser.Scene private myPlayer: MyPlayer // meeting rooms and areas @@ -11,6 +13,17 @@ export class MeetingRoomManager { private meetingRoomAreas: MeetingRoomArea[] = [] private meetingRoomZones: Phaser.GameObjects.Zone[] = [] private prevRooms: MeetingRoom[] = [] +======= + private scene: Phaser.Scene + private myPlayer: MyPlayer + // Meeting rooms and areas + private rooms: MeetingRoom[] = [] + private canAccess: boolean = true + private meetingRoomAreas: MeetingRoomArea[] = [] + private meetingRoomZones: Phaser.GameObjects.Zone[] = [] + private prevRooms: MeetingRoom[] = [] + private prevAreas: MeetingRoomArea[] = [] // Store previous areas for comparison +>>>>>>> Stashed changes //graphics for meeting room MeetingRoomAreas private meetAreaGraphics!: Phaser.GameObjects.Graphics @@ -28,6 +41,7 @@ export class MeetingRoomManager { this.meetAreaOverlay = this.scene.add.graphics() } +<<<<<<< Updated upstream private seupStoreSubscription() { this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas store.subscribe(() => { @@ -50,13 +64,217 @@ export class MeetingRoomManager { const nextId = area ? area.meetingRoomId : null if (nextId !== this.myPlayer.currentMeetingRoomId) { this.handleMeetingRoomTransition(nextId) +======= +>>>>>>> Stashed changes } } +<<<<<<< Updated upstream private handleMeetingRoomTransition(nextId: string | null): void { if (nextId) { const room = this.rooms.find((r) => r.id === nextId) if (room) { +======= + private initializeGraphics() { + this.meetAreaGraphics = this.scene.add.graphics() + this.meetAreaOverlay = this.scene.add.graphics() + } + + private setupStoreSubscription() { + this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas + this.rooms = store.getState().meetingRoom.meetingRooms ?? [] + + // Initial rendering + this.drawMeetingRoomAreas() + this.createMeetingRoomZones() + this.updatePrevStates() + + store.subscribe(() => { + const newRooms = store.getState().meetingRoom.meetingRooms ?? [] + const newAreas = store.getState().meetingRoom.meetingRoomAreas ?? [] + + // Recreate areas and zones only when areas have changed + if (this.hasAreasChanged(newAreas)) { + this.meetingRoomAreas = newAreas + this.drawMeetingRoomAreas() + this.createMeetingRoomZones() + } + + // Update room processing only when rooms have changed + if (this.hasRoomsChanged(newRooms)) { + this.rooms = newRooms + this.handleRoomUpdates() // Handle room state changes and update signals + this.drawMeetingRoomAreas() // Redraw if access permissions have changed + } + + this.updatePrevStates() + }) + } + + // Check if areas have changed + private hasAreasChanged(newAreas: MeetingRoomArea[]): boolean { + if (this.prevAreas.length !== newAreas.length) { + return true + } + + for (let i = 0; i < newAreas.length; i++) { + const newArea = newAreas[i] + const prevArea = this.prevAreas[i] + + if ( + !prevArea || + newArea.meetingRoomId !== prevArea.meetingRoomId || + newArea.x !== prevArea.x || + newArea.y !== prevArea.y || + newArea.width !== prevArea.width || + newArea.height !== prevArea.height + ) { + return true + } + } + + return false + } + + // Check if rooms have changed + private hasRoomsChanged(newRooms: MeetingRoom[]): boolean { + if (this.prevRooms.length !== newRooms.length) { + return true + } + + for (let i = 0; i < newRooms.length; i++) { + const newRoom = newRooms[i] + const prevRoom = this.prevRooms[i] + + if ( + !prevRoom || + newRoom.id !== prevRoom.id || + newRoom.mode !== prevRoom.mode || + newRoom.hostUserId !== prevRoom.hostUserId || + JSON.stringify(newRoom.invitedUsers) !== JSON.stringify(prevRoom.invitedUsers) + ) { + return true + } + } + + return false + } + + // Get access permission for the area where the player is currently located + private getCurrentAreaAccess(): boolean { + const currentArea = this.meetingRoomAreas.find((area) => { + const playerX = this.myPlayer.x + const playerY = this.myPlayer.y + return ( + playerX >= area.x && + playerX <= area.x + area.width && + playerY >= area.y && + playerY <= area.y + area.height + ) + }) + + if (!currentArea) { + return true // Always accessible outside of areas + } + + const room = this.rooms.find((r) => r.id === currentArea.meetingRoomId) + if (!room) { + return true // Accessible if room is not found + } + + return this.canAccessMeetingRoom(room) + } + + // Update canAccess state based on current area + private updateCanAccessState(): void { + const newCanAccess = this.getCurrentAreaAccess() + console.log(`[MeetingRoomManager] Can access current area: ${newCanAccess}`) + if (this.canAccess !== newCanAccess) { + this.canAccess = newCanAccess + this.scene.events.emit('meeting-room-access-changed', { + canAccess: newCanAccess + }) + } + } + + checkPlayerInMeetingRoom(x: number, y: number): void { + const area = this.meetingRoomAreas.find( + (a) => x >= a.x && x <= a.x + a.width && y >= a.y && y <= a.y + a.height + ) + + const nextId = area ? area.meetingRoomId : null + if (nextId !== this.myPlayer.currentMeetingRoomId) { + this.handleMeetingRoomTransition(nextId) + this.updateCanAccessState() // Update state on room transition + } + } + + private handleMeetingRoomTransition(nextId: string | null): void { + if (nextId) { + const room = this.rooms.find((r) => r.id === nextId) + if (room) { + const myUserId = this.myPlayer.playerId + + if (room.mode === 'private') { + if ( + (room.hostUserId !== myUserId && !Array.isArray(room.invitedUsers)) || + !room.invitedUsers.includes(myUserId) + ) { + console.log('[MeetingRoomManager] You are not invited to this private room') + return + } else { + console.log('[MeetingRoomManager] You are entering a private room') + this.myPlayer.currentMeetingRoomId = nextId + } + } else if (room.mode === 'secret') { + if (room.hostUserId !== myUserId) { + console.log('[MeetingRoomManager] You are not allowed to enter this secret room') + return + } else { + console.log('[MeetingRoomManager] You are entering a secret room') + this.myPlayer.currentMeetingRoomId = nextId + } + } else { + console.log('[MeetingRoomManager] You are entering an open room') + this.myPlayer.currentMeetingRoomId = nextId + } + + // Update chat store with current meeting room + store.dispatch(setCurrentMeetingRoomId(nextId)) + + // Add user joined message to meeting room chat + store.dispatch(pushMeetingRoomUserJoinedMessage({ + meetingRoomId: nextId, + userName: this.myPlayer.name || this.myPlayer.playerId + })) + + // Trigger meeting room enter event + this.scene.events.emit('enter-meeting-room', nextId, room) + } + } else { + console.log('[MeetingRoomManager] You are leaving the meeting room') + const previousRoomId = this.myPlayer.currentMeetingRoomId + + if (previousRoomId) { + // Add user left message to meeting room chat + store.dispatch(pushMeetingRoomUserLeftMessage({ + meetingRoomId: previousRoomId, + userName: this.myPlayer.name || this.myPlayer.playerId + })) + } + + this.myPlayer.currentMeetingRoomId = null + + // Update chat store - no longer in a meeting room + store.dispatch(setCurrentMeetingRoomId(null)) + + // Trigger meeting room leave event + this.scene.events.emit('leave-meeting-room', previousRoomId) + } + } + + private canAccessMeetingRoom(room: MeetingRoom): boolean { +>>>>>>> Stashed changes const myUserId = this.myPlayer.playerId if (room.mode === 'private') { @@ -174,9 +392,76 @@ export class MeetingRoomManager { this.showRestrictedText(area) } +<<<<<<< Updated upstream } else { // If room not found, draw a red border this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) +======= + this.meetingRoomColliders.clear() + + for (const zone of this.meetingRoomZones) { + zone.destroy() + } + this.meetingRoomZones = [] + } + + private drawMeetingRoomAreas(): void { + // Don't draw if in visual edit mode + if (this.isVisualEditMode) { + console.log('🎯 [MeetingRoomManager] Skipping drawing - in visual edit mode') + return + } + + this.meetAreaGraphics.clear() + this.meetAreaOverlay.clear() + + this.meetAreaGraphics.setDepth(1000) + this.meetAreaOverlay.setDepth(1001) + + for (const area of this.meetingRoomAreas) { + const room = this.rooms.find((r) => r.id === area.meetingRoomId) + + if (room) { + this.drawMeetingRoomArea(area) + } + } + } + + // Methods to hide/show room areas for visual editing mode + private isVisualEditMode = false + + public hideRoomAreas(): void { + console.log('🎯 [MeetingRoomManager] Hiding room areas for visual edit mode') + this.isVisualEditMode = true + this.meetAreaGraphics.setVisible(false) + this.meetAreaOverlay.setVisible(false) + } + + public showRoomAreas(): void { + console.log('🎯 [MeetingRoomManager] Showing room areas - exiting visual edit mode') + this.isVisualEditMode = false + this.meetAreaGraphics.setVisible(true) + this.meetAreaOverlay.setVisible(true) + // Redraw after exiting visual edit mode + this.drawMeetingRoomAreas() + } + + private drawMeetingRoomArea(area: MeetingRoomArea): void { + const room = this.rooms.find(r => r.id === area.meetingRoomId) + if (!room) return + + const canAccess = this.canAccessMeetingRoom(room) + + if (canAccess) { + // 緑の枠線（アクセス可能） + this.meetAreaGraphics.lineStyle(3, 0x00ff00, 1) + } else { + // 赤の枠線（アクセス不可） + this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) + this.showRestrictedText(area) + } + +>>>>>>> Stashed changes this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) } } @@ -251,9 +536,50 @@ export class MeetingRoomManager { collider.destroy() } +<<<<<<< Updated upstream this.meetingRoomColliders.clear() for (const zone of this.meetingRoomZones) { zone.destroy() +======= + private handleRoomUpdates(): void { + console.log('[MeetingRoomManager] handleRoomUpdates called') + + // Process each room for access permission changes + for (const room of this.rooms) { + const prevRoom = this.prevRooms.find((r) => r.id === room.id) + if (!prevRoom) continue // If the room is new, skip + + // Check if access permission has changed + const prevCanAccess = this.canAccessMeetingRoom(prevRoom) + const nowCanAccess = this.canAccessMeetingRoom(room) + + if (prevCanAccess !== nowCanAccess) { + console.log( + `[MeetingRoomManager] Access permission changed for room ${room.id}: ${prevCanAccess} → ${nowCanAccess}` + ) + + // Update state when room permission changes + this.canAccess = nowCanAccess + this.scene.events.emit('meeting-room-access-changed', { + roomId: room.id, + canAccess: nowCanAccess + }) + + this.onMeetingRoomPermissionChanged(room.id, nowCanAccess) + } + + // Check mode change from private/secret to open + if ((prevRoom.mode === 'private' || prevRoom.mode === 'secret') && room.mode === 'open') { + console.log(`[MeetingRoomManager] Room ${room.id} changed to open mode`) + this.canAccess = true + this.scene.events.emit('meeting-room-access-changed', { + roomId: room.id, + canAccess: true + }) + this.onMeetingRoomPermissionChanged(room.id, true) + } + } +>>>>>>> Stashed changes } this.meetingRoomZones = [] @@ -261,3 +587,7 @@ export class MeetingRoomManager { this.meetAreaOverlay?.destroy() } } +<<<<<<< Updated upstream +======= + +>>>>>>> Stashed changes diff --git a/client/src/services/EventBridge.ts b/client/src/services/EventBridge.ts new file mode 100644 index 00000000..170b5a23 --- /dev/null +++ b/client/src/services/EventBridge.ts @@ -0,0 +1,97 @@ +import { phaserEvents, Event } from '../events/EventCenter' +import store from '../stores' +import type { CustomEventName, CustomEventTypes, TypedCustomEvent } from '../types/EventTypes' + +/** + * Phaser ↔ React 間の通信を管理するイベントブリッジ + * 異なるイベントシステムを統一的に扱う + */ +export class EventBridge { + private static instance: EventBridge + private customEventHandlers = new Map() + + private constructor() { + this.initializeBridge() + } + + static getInstance(): EventBridge { + if (!EventBridge.instance) { + EventBridge.instance = new EventBridge() + } + return EventBridge.instance + } + + /** + * Phaserイベントを DOM Custom Event に変換 + */ + private initializeBridge() { + // プレイヤー関連イベント + phaserEvents.on(Event.PLAYER_JOINED, (player, key) => { + this.emitCustomEvent('player:joined', { player, key }) + }) + + phaserEvents.on(Event.PLAYER_LEFT, (key) => { + this.emitCustomEvent('player:left', { key }) + }) + + // 勤務ステータス関連イベント + phaserEvents.on('WORK_STATUS_CHANGED', (data) => { + this.emitCustomEvent('work:statusChanged', data) + }) + } + + /** + * Phaserから DOM Custom Event を発火（型安全） + */ + emitCustomEvent( + eventName: T, + detail: CustomEventTypes[T] + ) { + console.log(`🌉 [EventBridge] Emitting custom event: ${eventName}`, detail) + window.dispatchEvent(new CustomEvent(eventName, { detail })) + } + + /** + * DOM Custom Event リスナーを登録（型安全） + */ + addEventListener( + eventName: T, + handler: (event: TypedCustomEvent) => void + ) { + const wrappedHandler = (event: unknown) => handler(event as TypedCustomEvent) + window.addEventListener(eventName, wrappedHandler as EventListener) + this.customEventHandlers.set(eventName, wrappedHandler) + } + + /** + * DOM Custom Event リスナーを削除 + */ + removeEventListener(eventName: string) { + const handler = this.customEventHandlers.get(eventName) + if (handler) { + window.removeEventListener(eventName, handler as EventListener) + this.customEventHandlers.delete(eventName) + } + } + + /** + * Redux Action を発火（Phaserから安全にアクセス） + */ + dispatchAction(action: any) { + console.log('🔄 [EventBridge] Dispatching Redux action:', action.type) + store.dispatch(action) + } + + /** + * 全てのリスナーをクリーンアップ + */ + cleanup() { + this.customEventHandlers.forEach((handler, eventName) => { + window.removeEventListener(eventName, handler as EventListener) + }) + this.customEventHandlers.clear() + } +} + +// シングルトンインスタンスをエクスポート +export const eventBridge = EventBridge.getInstance() \ No newline at end of file diff --git a/client/src/services/Network.ts b/client/src/services/Network.ts index 2e9c2ede..8712a28d 100644 --- a/client/src/services/Network.ts +++ b/client/src/services/Network.ts @@ -15,6 +15,7 @@ import { removeAvailableRooms, } from '../stores/RoomStore' import { +<<<<<<< Updated upstream pushChatMessage, pushPlayerJoinedMessage, pushPlayerLeftMessage, @@ -26,6 +27,31 @@ export default class Network { private room?: Room private lobby!: Room webRTC?: WebRTC +======= + pushChatMessage, + pushPlayerJoinedMessage, + pushPlayerLeftMessage, + pushMeetingRoomChatMessage, + setMeetingRoomChatHistory, +} from '../stores/ChatStore' +import { setWhiteboardUrls } from '../stores/WhiteboardStore' + +import { + addMeetingRoomFromServer, + removeMeetingRoomFromServer, + addMeetingRoomAreaFromServer, + removeMeetingRoomAreaFromServer, +} from '../stores/MeetingRoomStore' +import { updateOtherPlayerWorkStatus } from '../stores/WorkStore' +import { IMeetingRoomChatMessage } from '../../../types/IOfficeState' + +export default class Network { + private client: Client + private room?: Room + private lobby!: Room + private chatListenerAttached = false + webRTC?: WebRTC +>>>>>>> Stashed changes mySessionId!: string @@ -115,7 +141,19 @@ export default class Network { store.dispatch(pushPlayerJoinedMessage(value)) } }) +<<<<<<< Updated upstream } +======= + + phaserEvents.on(Event.MY_PLAYER_NAME_CHANGE, this.updatePlayerName, this) + phaserEvents.on(Event.MY_PLAYER_TEXTURE_CHANGE, this.updatePlayer, this) + phaserEvents.on(Event.PLAYER_DISCONNECTED, this.playerStreamDisconnect, this) + + // Make globally accessible for DevMode + if (typeof window !== 'undefined') { + (window as any).network = this + } +>>>>>>> Stashed changes } // an instance removed from the players MapSchema @@ -160,6 +198,7 @@ export default class Network { store.dispatch(pushChatMessage(item)) } +<<<<<<< Updated upstream // when the server sends room data this.room.onMessage(Message.SEND_ROOM_DATA, (content) => { store.dispatch(setJoinedRoomData(content)) @@ -282,4 +321,807 @@ export default class Network { addChatMessage(content: string) { this.room?.send(Message.ADD_CHAT_MESSAGE, { content: content }) } +======= + // Method to join a custom room + async joinCustomById(roomId: string, password: string | null) { + this.room = await this.client.joinById(roomId, { password }) + this.initialize() + } + + // Method to create a custom room + async createCustom(roomData: IRoomData) { + const { name, description, password, autoDispose } = roomData + this.room = await this.client.create(RoomType.CUSTOM, { + name, + description, + password, + autoDispose, + }) + this.initialize() + } + + // Set up all network listeners before the game starts + initialize() { + if (!this.room) return + + this.lobby.leave() + this.mySessionId = this.room.sessionId + store.dispatch(setSessionId(this.room.sessionId)) + this.webRTC = new WebRTC(this.mySessionId, this) + + // New instance added to the players MapSchema + this.room.state.players.onAdd = (player: IPlayer, key: string) => { + if (key === this.mySessionId) return + + // Sync existing player work status (if name is already set) + if (player.name) { + const workStatus = (player as any).workStatus || 'off-duty' + console.log('👥 [Network] Adding existing player work status (onAdd):', { + playerId: key, + playerName: player.name, + workStatus: workStatus + }) + store.dispatch(updateOtherPlayerWorkStatus({ + playerId: key, + playerName: player.name, + workStatus: workStatus + })) + } + + // Track changes on every child object inside the players MapSchema + player.onChange = (changes) => { + changes.forEach((change) => { + const { field, value } = change + phaserEvents.emit(Event.PLAYER_UPDATED, field, value, key) + + // When a new player finished setting up player name + if (field === 'name' && value !== '') { + phaserEvents.emit(Event.PLAYER_JOINED, player, key) + store.dispatch(setPlayerNameMap({ id: key, name: value })) + store.dispatch(pushPlayerJoinedMessage(value)) + + // Add initial work status for other players to store + const currentState = store.getState() + if (key !== currentState.user.sessionId) { + const workStatus = (player as any).workStatus || 'off-duty' + console.log('👥 [Network] Adding new player work status:', { + playerId: key, + playerName: value, + workStatus: workStatus + }) + store.dispatch(updateOtherPlayerWorkStatus({ + playerId: key, + playerName: value, + workStatus: workStatus + })) + } + } + }) + } + } + + // An instance removed from the players MapSchema + this.room.state.players.onRemove = (player: IPlayer, key: string) => { + phaserEvents.emit(Event.PLAYER_LEFT, key) + this.webRTC?.deleteVideoStream(key) + this.webRTC?.deleteOnCalledVideoStream(key) + store.dispatch(pushPlayerLeftMessage(player.name)) + store.dispatch(removePlayerNameMap(key)) + } + + // New instance added to the computers MapSchema + this.room.state.computers.onAdd = (computer: IComputer, key: string) => { + // Track changes on every child object's connectedUser (with safety check) + if (computer.connectedUser) { + computer.connectedUser.onAdd = (item, index) => { + phaserEvents.emit(Event.ITEM_USER_ADDED, item, key, ItemType.COMPUTER) + } + computer.connectedUser.onRemove = (item, index) => { + phaserEvents.emit(Event.ITEM_USER_REMOVED, item, key, ItemType.COMPUTER) + } + } + } + + // New instance added to the whiteboards MapSchema + this.room.state.whiteboards.onAdd = (whiteboard: IWhiteboard, key: string) => { + store.dispatch( + setWhiteboardUrls({ + whiteboardId: key, + roomId: whiteboard.roomId, + }) + ) + // Track changes on every child object's connectedUser (with safety check) + if (whiteboard.connectedUser) { + whiteboard.connectedUser.onAdd = (item, index) => { + phaserEvents.emit(Event.ITEM_USER_ADDED, item, key, ItemType.WHITEBOARD) + } + whiteboard.connectedUser.onRemove = (item, index) => { + phaserEvents.emit(Event.ITEM_USER_REMOVED, item, key, ItemType.WHITEBOARD) + } + } + } + + // New instance added to the chatMessages ArraySchema + this.room.state.chatMessages.onAdd = (item, index) => { + store.dispatch(pushChatMessage(item)) + } + + // When the server sends room data + this.room.onMessage(Message.SEND_ROOM_DATA, (content) => { + store.dispatch(setJoinedRoomData(content)) + }) + + // When a user sends a message + this.room.onMessage(Message.ADD_CHAT_MESSAGE, ({ clientId, content }) => { + phaserEvents.emit(Event.UPDATE_DIALOG_BUBBLE, clientId, content) + }) + + // When a peer disconnects with myPeer + this.room.onMessage(Message.DISCONNECT_STREAM, (clientId: string) => { + this.webRTC?.deleteOnCalledVideoStream(clientId) + }) + + // When a computer user stops sharing screen + this.room.onMessage(Message.STOP_SCREEN_SHARE, (clientId: string) => { + const computerState = store.getState().computer + computerState.shareScreenManager?.onUserLeft(clientId) + }) + + // Meeting room chat message listeners + this.room.onMessage('meeting-room-chat-history', (data: { + meetingRoomId: string + messages: IMeetingRoomChatMessage[] + }) => { + console.log('📚 [Network] Received chat history via onMessage:', { + meetingRoomId: data.meetingRoomId, + messageCount: data.messages.length + }) + store.dispatch(setMeetingRoomChatHistory({ + meetingRoomId: data.meetingRoomId, + messages: data.messages + })) + }) + + this.room.onMessage('new-meeting-room-chat-message', (data: IMeetingRoomChatMessage) => { + console.log('🆕 [Network] Received new meeting room message via onMessage:', { + messageId: data.messageId, + author: data.author, + content: data.content, + meetingRoomId: data.meetingRoomId, + timestamp: new Date(data.createdAt).toLocaleTimeString() + }) + store.dispatch(pushMeetingRoomChatMessage({ + meetingRoomId: data.meetingRoomId, + message: data + })) + }) + + // Monitor all messages (detailed log only in DevMode) + this.room.onMessage('*', (type, data) => { + if (store.getState().devMode?.isDevMode) { + console.log('📨 [Network] Received message:', type, data) + } + + // Special log for work status related messages + if (typeof type === 'string' && (type.includes('work') || type.includes('status'))) { + console.log('💼 [Network] Work-related message:', { type, data, timestamp: new Date().toISOString() }) + } + }) + + // Receive initial state when player joins + this.room.onMessage('player-joined', (data: { + playerId: string, + playerName: string, + workStatus?: string + }) => { + console.log('👋 [Network] Player joined:', data) + + // Add initial work status for other players to store + if (data.playerId && data.playerName) { + store.dispatch(updateOtherPlayerWorkStatus({ + playerId: data.playerId, + playerName: data.playerName, + workStatus: (data.workStatus || 'off-duty') as any + })) + } + }) + + // Receive work status change notifications + this.room.onMessage('work-status-changed', (data: { + playerId: string, + workStatus: string, + playerName: string + }) => { + console.log('💼 [Network] Work status changed (received):', { + playerId: data.playerId, + workStatus: data.workStatus, + playerName: data.playerName, + timestamp: new Date().toISOString(), + isDevMode: store.getState().devMode?.isDevMode + }) + + // Notify WorkStore of status change + store.dispatch(updateOtherPlayerWorkStatus({ + playerId: data.playerId, + playerName: data.playerName, + workStatus: data.workStatus as any + })) + + // Also emit Phaser event (for avatar appearance change) + phaserEvents.emit('WORK_STATUS_CHANGED', data) + + // Detailed log in DevMode + if (store.getState().devMode?.isDevMode) { + console.log('🐛 [Network] Updated other players work status. Current state:', { + totalOtherPlayers: Object.keys(store.getState().work.otherPlayersWorkStatus).length, + allPlayers: store.getState().work.otherPlayersWorkStatus + }) + } + }) + + this.room.onMessage('MEETING_ROOM_MANUAL_UPDATE', (data: any) => { + // Log state before update + const currentState = store.getState().meetingRoom + // Update meeting room + if (data.room) { + store.dispatch(addMeetingRoomFromServer(data.room)) + } + + // Update meeting room area + if (data.area) { + store.dispatch(addMeetingRoomAreaFromServer(data.area)) + } + + // Log state after update + setTimeout(() => { + const updatedState = store.getState().meetingRoom + }, 100) + }) + + // Set up meeting room chat message listeners first (before state listeners) + this.setupMeetingRoomChatListeners() + + // Set up meeting room listeners with safety checks + this.setupMeetingRoomListeners() + + // Also setup chat listeners when state changes + this.room.onStateChange(() => { + if (!this.chatListenerAttached && this.room?.state?.meetingRoomState?.meetingRoomChatMessages) { + console.log('🔄 [Network] State changed, setting up chat listeners') + this.setupMeetingRoomChatMessageListener() + } + }) + } + + // Safely set up meeting room listeners + private setupMeetingRoomListeners() { + // Check if meeting room state is immediately available + if ( + this.room?.state?.meetingRoomState?.meetingRooms && + this.room?.state?.meetingRoomState?.meetingRoomAreas + ) { + this.attachMeetingRoomListeners() + return + } + + // Wait for meeting room state to be ready + this.room?.onStateChange((state) => { + if (state.meetingRoomState?.meetingRooms && state.meetingRoomState?.meetingRoomAreas) { + this.attachMeetingRoomListeners() + } + }) + } + + // 修正されたattachMeetingRoomListenersメソッド + private attachMeetingRoomListeners() { + if (!this.room?.state?.meetingRoomState) { + console.error('Cannot attach meeting room listeners: meetingRoomState not available') + return + } + + const meetingRooms = this.room.state.meetingRoomState.meetingRooms + const meetingRoomAreas = this.room.state.meetingRoomState.meetingRoomAreas + + // 既存の meeting rooms を処理 + if (meetingRooms) { + meetingRooms.forEach((room, key) => { + if ( + typeof key === 'string' && + !key.startsWith('$') && + key !== 'onAdd' && + key !== 'onRemove' + ) { + if ( + room && + typeof room === 'object' && + !Array.isArray(room) && + typeof room !== 'function' + ) { + this.handleMeetingRoomAdded(room, key) + } + } + }) + + // 新しい meeting room の追加を監視 + meetingRooms.onAdd = (meetingRoom: any, key: string) => { + this.handleMeetingRoomAdded(meetingRoom, key) + } + + meetingRooms.onRemove = (meetingRoom: any, key: string) => { + store.dispatch(removeMeetingRoomFromServer(key)) + } + } + + // 既存の meeting room areas を処理 + if (meetingRoomAreas) { + meetingRoomAreas.forEach((area, key) => { + if ( + typeof key === 'string' && + !key.startsWith('$') && + key !== 'onAdd' && + key !== 'onRemove' + ) { + if ( + area && + typeof area === 'object' && + !Array.isArray(area) && + typeof area !== 'function' + ) { + this.handleMeetingRoomAreaAdded(area, key) + } + } + }) + + // 新しい meeting room area の追加を監視 + meetingRoomAreas.onAdd = (area: any, key: string) => { + this.handleMeetingRoomAreaAdded(area, key) + } + + meetingRoomAreas.onRemove = (area: any, key: string) => { + store.dispatch(removeMeetingRoomAreaFromServer(key)) + } + } + } + + private handleMeetingRoomAdded(meetingRoom: any, key: string) { + if (!meetingRoom || typeof meetingRoom !== 'object') { + console.error('Invalid meeting room object:', meetingRoom) + return + } + + const roomData = { + id: key, + name: meetingRoom.name || '', + mode: meetingRoom.mode || 'open', + hostUserId: meetingRoom.hostUserId || '', + invitedUsers: meetingRoom.invitedUsers + ? (Array.from(meetingRoom.invitedUsers) as string[]) + : [], + participants: meetingRoom.participants + ? (Array.from(meetingRoom.participants) as string[]) + : [], + } + + try { + store.dispatch(addMeetingRoomFromServer(roomData)) + + if (typeof meetingRoom.onChange === 'function' && !meetingRoom._changeListenerAttached) { + meetingRoom.onChange = (changes: any[]) => { + changes.forEach((change) => { }) + + const updatedRoomData = { + id: key, + name: meetingRoom.name || '', + mode: meetingRoom.mode || 'open', + hostUserId: meetingRoom.hostUserId || '', + invitedUsers: meetingRoom.invitedUsers + ? (Array.from(meetingRoom.invitedUsers) as string[]) + : [], + participants: meetingRoom.participants + ? (Array.from(meetingRoom.participants) as string[]) + : [], + } + + store.dispatch(addMeetingRoomFromServer(updatedRoomData)) + } + + meetingRoom._changeListenerAttached = true + } else if (meetingRoom._changeListenerAttached) { + } + } catch (e) { + console.error('Failed to dispatch addMeetingRoomFromServer:', e) + } + } + + private handleMeetingRoomAreaAdded(area: any, key: string) { + if (!area || typeof area !== 'object') { + console.error('Invalid area object:', area) + return + } + + const areaData = { + meetingRoomId: area.meetingRoomId || key, + x: area.x || 0, + y: area.y || 0, + width: area.width || 100, + height: area.height || 100, + } + + + try { + store.dispatch(addMeetingRoomAreaFromServer(areaData)) + + if (typeof area.onChange === 'function' && !area._changeListenerAttached) { + + area.onChange = (changes: any[]) => { + + // 変更された値を詳細にログ出力 + changes.forEach((change) => { + }) + + const updatedAreaData = { + meetingRoomId: area.meetingRoomId || key, + x: area.x || 0, + y: area.y || 0, + width: area.width || 100, + height: area.height || 100, + } + + store.dispatch(addMeetingRoomAreaFromServer(updatedAreaData)) + } + + area._changeListenerAttached = true + } else if (area._changeListenerAttached) { + } + } catch (e) { + console.error('Failed to dispatch addMeetingRoomAreaFromServer:', e) + } + } + + // 定期的な状態同期チェック（オプション） + private setupPeriodicSync() { + setInterval(() => { + if (this.room?.state?.meetingRoomState) { + const serverRooms = this.room.state.meetingRoomState.meetingRooms + const serverAreas = this.room.state.meetingRoomState.meetingRoomAreas + const clientState = store.getState().meetingRoom + if (serverRooms && serverAreas) { + serverRooms.forEach((room, key) => { + if (!clientState.meetingRooms[key]) { + this.handleMeetingRoomAdded(room, key) + } + }) + + serverAreas.forEach((area, key) => { + if (!clientState.meetingRoomAreas[key]) { + this.handleMeetingRoomAreaAdded(area, key) + } + }) + } + } + }, 5000) // 5秒ごとにチェック + } + + // Method to update meeting room mode + updateMeetingRoomMode(roomId: string, newMode: 'open' | 'private' | 'secret') { + + const currentState = store.getState().meetingRoom + const currentRoom = currentState.meetingRooms[roomId] + + if (!currentRoom) { + console.error(`Cannot update room mode ${roomId}: not found`) + return + } + + const updatedRoomData = { + id: roomId, + name: currentRoom.name, + mode: newMode, + hostUserId: currentRoom.hostUserId, + invitedUsers: currentRoom.invitedUsers, + } + + this.room?.send(Message.UPDATE_MEETING_ROOM, updatedRoomData) + } + + // Method to update meeting room area + updateMeetingRoomArea( + roomId: string, + areaUpdates: { + x?: number + y?: number + width?: number + height?: number + } + ) { + + const currentState = store.getState().meetingRoom + const currentRoom = currentState.meetingRooms[roomId] + const currentArea = currentState.meetingRoomAreas.find(area => area.meetingRoomId === roomId) + + if (!currentRoom || !currentArea) { + console.error(`Cannot update room area ${roomId}: not found`, { + roomExists: !!currentRoom, + areaExists: !!currentArea, + availableRooms: Object.keys(currentState.meetingRooms), + availableAreas: currentState.meetingRoomAreas.map(a => a.meetingRoomId) + }) + return + } + + const updatedRoomData = { + id: roomId, + name: currentRoom.name, + mode: currentRoom.mode, + hostUserId: currentRoom.hostUserId, + invitedUsers: currentRoom.invitedUsers, + area: { + x: areaUpdates.x !== undefined ? areaUpdates.x : currentArea.x, + y: areaUpdates.y !== undefined ? areaUpdates.y : currentArea.y, + width: areaUpdates.width !== undefined ? areaUpdates.width : currentArea.width, + height: areaUpdates.height !== undefined ? areaUpdates.height : currentArea.height, + }, + } + + this.room?.send(Message.UPDATE_MEETING_ROOM, updatedRoomData) + } + + // Method to register event listener and call back function when a item user added + onChatMessageAdded(callback: (playerId: string, content: string) => void, context?: any) { + phaserEvents.on(Event.UPDATE_DIALOG_BUBBLE, callback, context) + } + + // Method to register event listener and call back function when a item user added + onItemUserAdded( + callback: (playerId: string, key: string, itemType: ItemType) => void, + context?: any + ) { + phaserEvents.on(Event.ITEM_USER_ADDED, callback, context) + } + + // Method to register event listener and call back function when a item user removed + onItemUserRemoved( + callback: (playerId: string, key: string, itemType: ItemType) => void, + context?: any + ) { + phaserEvents.on(Event.ITEM_USER_REMOVED, callback, context) + } + + // Method to register event listener and call back function when a player joined + onPlayerJoined(callback: (Player: IPlayer, key: string) => void, context?: any) { + phaserEvents.on(Event.PLAYER_JOINED, callback, context) + } + + // Method to register event listener and call back function when a player left + onPlayerLeft(callback: (key: string) => void, context?: any) { + phaserEvents.on(Event.PLAYER_LEFT, callback, context) + } + + // Method to register event listener and call back function when myPlayer is ready to connect + onMyPlayerReady(callback: (key: string) => void, context?: any) { + phaserEvents.on(Event.MY_PLAYER_READY, callback, context) + } + + // Method to register event listener and call back function when my video is connected + onMyPlayerVideoConnected(callback: (key: string) => void, context?: any) { + phaserEvents.on(Event.MY_PLAYER_VIDEO_CONNECTED, callback, context) + } + + // Method to register event listener and call back function when a player updated + onPlayerUpdated( + callback: (field: string, value: number | string, key: string) => void, + context?: any + ) { + phaserEvents.on(Event.PLAYER_UPDATED, callback, context) + } + + // Method to send player updates to Colyseus server + updatePlayer(currentX: number, currentY: number, currentAnim: string) { + this.room?.send(Message.UPDATE_PLAYER, { x: currentX, y: currentY, anim: currentAnim }) + } + + // Method to send player name to Colyseus server + updatePlayerName(currentName: string) { + this.room?.send(Message.UPDATE_PLAYER_NAME, { name: currentName }) + } + + // Method to send ready-to-connect signal to Colyseus server + readyToConnect() { + this.room?.send(Message.READY_TO_CONNECT) + phaserEvents.emit(Event.MY_PLAYER_READY) + } + + // Method to send ready-to-connect signal to Colyseus server + videoConnected() { + this.room?.send(Message.VIDEO_CONNECTED) + phaserEvents.emit(Event.MY_PLAYER_VIDEO_CONNECTED) + } + + // Method to send stream-disconnection signal to Colyseus server + playerStreamDisconnect(id: string) { + this.room?.send(Message.DISCONNECT_STREAM, { clientId: id }) + this.webRTC?.deleteVideoStream(id) + } + + connectToComputer(id: string) { + this.room?.send(Message.CONNECT_TO_COMPUTER, { computerId: id }) + } + + disconnectFromComputer(id: string) { + this.room?.send(Message.DISCONNECT_FROM_COMPUTER, { computerId: id }) + } + + connectToWhiteboard(id: string) { + this.room?.send(Message.CONNECT_TO_WHITEBOARD, { whiteboardId: id }) + } + + disconnectFromWhiteboard(id: string) { + this.room?.send(Message.DISCONNECT_FROM_WHITEBOARD, { whiteboardId: id }) + } + + onStopScreenShare(id: string) { + this.room?.send(Message.STOP_SCREEN_SHARE, { computerId: id }) + } + + addChatMessage(content: string) { + this.room?.send(Message.ADD_CHAT_MESSAGE, { content: content }) + } + + createMeetingRoom(roomData: { + id: string + name: string + mode: 'open' | 'private' | 'secret' + hostUserId: string + invitedUsers: string[] + area: { x: number; y: number; width: number; height: number } + }) { + this.room?.send(Message.CREATE_MEETING_ROOM, roomData) + } + + // Update meeting room + updateMeetingRoom(roomData: { + id: string + name: string + mode: 'open' | 'private' | 'secret' + hostUserId: string + invitedUsers: string[] + area?: { x: number; y: number; width: number; height: number } + }) { + this.room?.send(Message.UPDATE_MEETING_ROOM, roomData) + } + + // Delete meeting room + deleteMeetingRoom(roomId: string) { + this.room?.send(Message.DELETE_MEETING_ROOM, { id: roomId }) + } + + // Register event listener for meeting room area added + onMeetingRoomAdded(callback: (meetingRoom: any, key: string) => void, context?: any) { + phaserEvents.on(Event.MEETING_ROOM_ADDED, callback, context) + } + + // Register event listener for meeting room area added + onMeetingRoomRemoved(callback: (key: string) => void, context?: any) { + phaserEvents.on(Event.MEETING_ROOM_REMOVED, callback, context) + } + + // Meeting room chat methods + sendMeetingRoomChatMessage(meetingRoomId: string, content: string) { + console.log('🚀 [Network] Sending meeting room chat message to server:', { + meetingRoomId, + content, + timestamp: new Date().toLocaleTimeString() + }) + this.room?.send(Message.ADD_MEETING_ROOM_CHAT_MESSAGE, { + meetingRoomId, + content + }) + } + + getMeetingRoomChatHistory(meetingRoomId: string) { + this.room?.send(Message.GET_MEETING_ROOM_CHAT_HISTORY, { + meetingRoomId + }) + } + + // Work status related methods + startWork() { + console.log('🏢 [Network] Sending START_WORK', { + connected: !!this.room, + timestamp: new Date().toISOString() + }) + this.room?.send(Message.START_WORK) + } + + endWork() { + console.log('🏠 [Network] Sending END_WORK', { + connected: !!this.room, + timestamp: new Date().toISOString() + }) + this.room?.send(Message.END_WORK) + } + + startBreak() { + console.log('☕ [Network] Sending START_BREAK', { + connected: !!this.room, + timestamp: new Date().toISOString() + }) + this.room?.send(Message.START_BREAK) + } + + endBreak() { + console.log('💼 [Network] Sending END_BREAK', { + connected: !!this.room, + timestamp: new Date().toISOString() + }) + this.room?.send(Message.END_BREAK) + } + + updateWorkStatus(workStatus: string, clothing?: string, accessory?: string) { + console.log('🔄 [Network] Sending UPDATE_WORK_STATUS:', { workStatus, clothing, accessory }) + this.room?.send(Message.UPDATE_WORK_STATUS, { + workStatus, + clothing, + accessory + }) + } + + private setupMeetingRoomChatListeners() { + console.log('🎧 [Network] Setting up meeting room chat listeners') + if (!this.room) { + console.error('❌ [Network] Cannot setup chat listeners: room is null') + return + } + + // Message listeners are now set up in the main joinOrCreateRoom method + console.log('✅ [Network] Meeting room chat listeners are already registered') + + // Wait for meeting room state to be available (fallback for ArraySchema) + this.setupMeetingRoomChatMessageListener() + } + + private setupMeetingRoomChatMessageListener() { + console.log('🔗 [Network] Attempting to setup chat message listener') + + if (this.room?.state?.meetingRoomState?.meetingRoomChatMessages) { + console.log('✅ [Network] Meeting room chat messages array found, setting up listener') + + // Check if it's an ArraySchema and has onAdd method + if (this.room.state.meetingRoomState.meetingRoomChatMessages.onAdd !== undefined) { + this.room.state.meetingRoomState.meetingRoomChatMessages.onAdd = (message: IMeetingRoomChatMessage, index: number) => { + console.log('🆕 [Network] New meeting room message received via ArraySchema.onAdd:', { + messageId: message.messageId, + author: message.author, + content: message.content, + meetingRoomId: message.meetingRoomId, + timestamp: new Date(message.createdAt).toLocaleTimeString() + }) + store.dispatch(pushMeetingRoomChatMessage({ + meetingRoomId: message.meetingRoomId, + message + })) + } + this.chatListenerAttached = true + } else { + console.log('ℹ️ [Network] Using message-based approach for meeting room chat (onAdd not available)') + // The chat messages are handled via onMessage listeners instead + this.chatListenerAttached = true + } + } else { + console.warn('⚠️ [Network] Meeting room chat messages not available yet, will retry') + // Retry after state is available + if (this.room && !this.chatListenerAttached) { + const stateChangeHandler = () => { + if (this.room?.state?.meetingRoomState?.meetingRoomChatMessages && !this.chatListenerAttached) { + console.log('🔄 [Network] Retrying chat message listener setup after state change') + this.setupMeetingRoomChatMessageListener() + // Remove this handler after successful setup + // this.room.removeAllListeners('statechange') + } + } + this.room.onStateChange(stateChangeHandler) + } + } + } +>>>>>>> Stashed changes } diff --git a/client/src/services/WorkStatusService.ts b/client/src/services/WorkStatusService.ts new file mode 100644 index 00000000..cde9eed9 --- /dev/null +++ b/client/src/services/WorkStatusService.ts @@ -0,0 +1,208 @@ +import { WorkStatus, ClothingType, AccessoryType } from '../../../types/IOfficeState' +import { eventBridge } from './EventBridge' +import { WorkStatusError, NetworkError, ValidationError } from '../types/ErrorTypes' +import phaserGame from '../PhaserGame' +import Game from '../scenes/Game' + +/** + * 勤務ステータス関連のビジネスロジックを管理するサービス + * UI層から具体的な実装を隠蔽 + */ +export class WorkStatusService { + private static instance: WorkStatusService + + private constructor() {} + + static getInstance(): WorkStatusService { + if (!WorkStatusService.instance) { + WorkStatusService.instance = new WorkStatusService() + } + return WorkStatusService.instance + } + + /** + * 勤務を開始する + */ + async startWork(): Promise { + try { + console.log('🏢 [WorkStatusService] Starting work') + + // ゲームインスタンスの検証 + const game = phaserGame.scene.keys.game as Game + if (!game) { + throw new WorkStatusError('Game instance not found', undefined, 'GAME_NOT_FOUND') + } + + // ネットワーク接続の検証 + if (!game?.network) { + throw new NetworkError('Network connection not available', undefined, 'NETWORK_UNAVAILABLE') + } + + // ネットワーク経由でサーバーに通知 + game.network.startWork() + + // イベントブリッジ経由でUIに通知 + eventBridge.emitCustomEvent('work:started', { + timestamp: Date.now() + }) + + } catch (error) { + console.error('❌ [WorkStatusService] Failed to start work:', error) + + if (error instanceof WorkStatusError || error instanceof NetworkError) { + throw error + } + + throw new WorkStatusError('Unexpected error while starting work', error as Error) + } + } + + /** + * 勤務を終了する + */ + async endWork(): Promise { + try { + console.log('🏠 [WorkStatusService] Ending work') + + const game = phaserGame.scene.keys.game as Game + if (game?.network) { + game.network.endWork() + } + + eventBridge.emitCustomEvent('work:ended', { + timestamp: Date.now() + }) + + } catch (error) { + console.error('❌ [WorkStatusService] Failed to end work:', error) + throw error + } + } + + /** + * 休憩を開始する + */ + async startBreak(): Promise { + try { + console.log('☕ [WorkStatusService] Starting break') + + const game = phaserGame.scene.keys.game as Game + if (game?.network) { + game.network.startBreak() + } + + eventBridge.emitCustomEvent('work:breakStarted', { + timestamp: Date.now() + }) + + } catch (error) { + console.error('❌ [WorkStatusService] Failed to start break:', error) + throw error + } + } + + /** + * 休憩を終了する + */ + async endBreak(): Promise { + try { + console.log('💼 [WorkStatusService] Ending break') + + const game = phaserGame.scene.keys.game as Game + if (game?.network) { + game.network.endBreak() + } + + eventBridge.emitCustomEvent('work:breakEnded', { + timestamp: Date.now() + }) + + } catch (error) { + console.error('❌ [WorkStatusService] Failed to end break:', error) + throw error + } + } + + /** + * 勤務ステータスを更新する + */ + async updateWorkStatus( + workStatus: WorkStatus, + clothing?: ClothingType, + accessory?: AccessoryType + ): Promise { + try { + // パラメータ検証 + if (!workStatus) { + throw new ValidationError('Work status is required', 'workStatus', workStatus) + } + + console.log('🔄 [WorkStatusService] Updating work status:', { workStatus, clothing, accessory }) + + const game = phaserGame.scene.keys.game as Game + if (!game) { + throw new WorkStatusError('Game instance not found', undefined, 'GAME_NOT_FOUND') + } + + if (!game?.network) { + throw new NetworkError('Network connection not available', undefined, 'NETWORK_UNAVAILABLE') + } + + game.network.updateWorkStatus(workStatus, clothing, accessory) + + eventBridge.emitCustomEvent('work:statusUpdated', { + workStatus: workStatus as string, + clothing: clothing as string, + accessory: accessory as string, + timestamp: Date.now() + }) + + } catch (error) { + console.error('❌ [WorkStatusService] Failed to update work status:', error) + + if (error instanceof WorkStatusError || error instanceof NetworkError || error instanceof ValidationError) { + throw error + } + + throw new WorkStatusError('Unexpected error while updating work status', error as Error) + } + } + + /** + * 疲労度を計算する + */ + calculateFatigueLevel(workStartTime: number, currentTime: number): number { + if (workStartTime === 0) return 0 + + const workDurationHours = (currentTime - workStartTime) / (1000 * 60 * 60) + + // 8時間を基準とした疲労度計算 + if (workDurationHours <= 4) return Math.min(workDurationHours * 10, 40) + if (workDurationHours <= 8) return Math.min(40 + (workDurationHours - 4) * 15, 100) + return 100 // 8時間超過で最大疲労 + } + + /** + * 労働基準法チェック + */ + checkLaborStandards(workStartTime: number, currentTime: number): { + isOvertime: boolean + message?: string + } { + if (workStartTime === 0) return { isOvertime: false } + + const workDurationHours = (currentTime - workStartTime) / (1000 * 60 * 60) + + if (workDurationHours > 8) { + return { + isOvertime: true, + message: '労働基準法に基づき、8時間を超える勤務には注意が必要です。' + } + } + + return { isOvertime: false } + } +} + +// シングルトンインスタンスをエクスポート +export const workStatusService = WorkStatusService.getInstance() \ No newline at end of file diff --git a/client/src/stores/ChatStore.ts b/client/src/stores/ChatStore.ts index ba537b0d..14b658ac 100644 --- a/client/src/stores/ChatStore.ts +++ b/client/src/stores/ChatStore.ts @@ -1,5 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' -import { IChatMessage } from '../../../types/IOfficeState' +import { IChatMessage, IMeetingRoomChatMessage } from '../../../types/IOfficeState' import phaserGame from '../PhaserGame' import Game from '../scenes/Game' @@ -9,10 +9,19 @@ export enum MessageType { REGULAR_MESSAGE, } +export enum MeetingRoomMessageType { + REGULAR_MESSAGE, + USER_JOINED, + USER_LEFT, + PERMISSION_CHANGED, +} + export const chatSlice = createSlice({ name: 'chat', initialState: { chatMessages: new Array<{ messageType: MessageType; chatMessage: IChatMessage }>(), + meetingRoomChatMessages: {} as Record>, + currentMeetingRoomId: null as string | null, focused: false, showChat: true, }, @@ -51,6 +60,68 @@ export const chatSlice = createSlice({ setShowChat: (state, action: PayloadAction) => { state.showChat = action.payload }, + pushMeetingRoomChatMessage: (state, action: PayloadAction<{ meetingRoomId: string; message: IMeetingRoomChatMessage }>) => { + const { meetingRoomId, message } = action.payload + console.log('📥 [ChatStore] Received meeting room message:', { + roomId: meetingRoomId, + author: message.author, + content: message.content, + timestamp: new Date(message.createdAt).toLocaleTimeString() + }) + if (!state.meetingRoomChatMessages[meetingRoomId]) { + state.meetingRoomChatMessages[meetingRoomId] = [] + } + state.meetingRoomChatMessages[meetingRoomId].push({ + messageType: MeetingRoomMessageType.REGULAR_MESSAGE, + chatMessage: message, + }) + }, + setMeetingRoomChatHistory: (state, action: PayloadAction<{ meetingRoomId: string; messages: IMeetingRoomChatMessage[] }>) => { + const { meetingRoomId, messages } = action.payload + console.log('📚 [ChatStore] Setting chat history for room:', { + roomId: meetingRoomId, + messageCount: messages.length + }) + state.meetingRoomChatMessages[meetingRoomId] = messages.map(msg => ({ + messageType: MeetingRoomMessageType.REGULAR_MESSAGE, + chatMessage: msg, + })) + }, + setCurrentMeetingRoomId: (state, action: PayloadAction) => { + state.currentMeetingRoomId = action.payload + }, + pushMeetingRoomUserJoinedMessage: (state, action: PayloadAction<{ meetingRoomId: string; userName: string }>) => { + const { meetingRoomId, userName } = action.payload + if (!state.meetingRoomChatMessages[meetingRoomId]) { + state.meetingRoomChatMessages[meetingRoomId] = [] + } + state.meetingRoomChatMessages[meetingRoomId].push({ + messageType: MeetingRoomMessageType.USER_JOINED, + chatMessage: { + author: userName, + content: 'joined the meeting room', + createdAt: Date.now(), + meetingRoomId, + messageId: `join_${Date.now()}_${Math.random()}`, + } as IMeetingRoomChatMessage, + }) + }, + pushMeetingRoomUserLeftMessage: (state, action: PayloadAction<{ meetingRoomId: string; userName: string }>) => { + const { meetingRoomId, userName } = action.payload + if (!state.meetingRoomChatMessages[meetingRoomId]) { + state.meetingRoomChatMessages[meetingRoomId] = [] + } + state.meetingRoomChatMessages[meetingRoomId].push({ + messageType: MeetingRoomMessageType.USER_LEFT, + chatMessage: { + author: userName, + content: 'left the meeting room', + createdAt: Date.now(), + meetingRoomId, + messageId: `leave_${Date.now()}_${Math.random()}`, + } as IMeetingRoomChatMessage, + }) + }, }, }) @@ -60,6 +131,11 @@ export const { pushPlayerLeftMessage, setFocused, setShowChat, + pushMeetingRoomChatMessage, + setMeetingRoomChatHistory, + setCurrentMeetingRoomId, + pushMeetingRoomUserJoinedMessage, + pushMeetingRoomUserLeftMessage, } = chatSlice.actions export default chatSlice.reducer diff --git a/client/src/stores/DevModeStore.ts b/client/src/stores/DevModeStore.ts new file mode 100644 index 00000000..41b6dc6a --- /dev/null +++ b/client/src/stores/DevModeStore.ts @@ -0,0 +1,31 @@ +import { createSlice } from '@reduxjs/toolkit' + +interface DevmodeState { + isDevMode: boolean +} + +const initialState: DevmodeState = { + isDevMode: false, +} + +export const devModeSlice = createSlice({ + name: 'devmode', + initialState, + reducers: { + toggleDevMode: (state) => { + state.isDevMode = !state.isDevMode + console.log(`🛠️ [DevMode] ${state.isDevMode ? 'ENABLED' : 'DISABLED'} - Debug logging ${state.isDevMode ? 'ON' : 'OFF'}`) + }, + setDevmode: (state, action) => { + const previousState = state.isDevMode + state.isDevMode = action.payload + if (previousState !== action.payload) { + console.log(`🛠️ [DevMode] ${state.isDevMode ? 'ENABLED' : 'DISABLED'} - Debug logging ${state.isDevMode ? 'ON' : 'OFF'}`) + } + }, + }, +}) + +export const { toggleDevMode, setDevmode } = devModeSlice.actions + +export default devModeSlice.reducer diff --git a/client/src/stores/WorkStore.ts b/client/src/stores/WorkStore.ts new file mode 100644 index 00000000..102deb54 --- /dev/null +++ b/client/src/stores/WorkStore.ts @@ -0,0 +1,208 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' +import { WorkStatus, ClothingType, AccessoryType } from '../../../types/IOfficeState' +import { BaseAvatarType, getAvatarSprite } from '../types/AvatarTypes' + +interface WorkState { + currentWorkStatus: WorkStatus + workStartTime: number + lastBreakTime: number + fatigueLevel: number + currentClothing: ClothingType + currentAccessory: AccessoryType + // Avatar group system + baseAvatar: BaseAvatarType + currentAvatarSprite: string + // 他のプレイヤーの勤務状況も管理 + otherPlayersWorkStatus: Record +} + +const initialState: WorkState = { + currentWorkStatus: 'off-duty', + workStartTime: 0, + lastBreakTime: 0, + fatigueLevel: 0, + currentClothing: 'casual', + currentAccessory: 'none', + baseAvatar: 'adam', + currentAvatarSprite: getAvatarSprite('adam', 'off-duty', 0), // Calculate correct initial sprite + otherPlayersWorkStatus: {} +} + +console.log('🔧 [WorkStore] Initial state created:', initialState) + +export const workSlice = createSlice({ + name: 'work', + initialState, + reducers: { + startWork: (state) => { + const currentTime = Date.now() + state.currentWorkStatus = 'working' + state.workStartTime = currentTime + state.lastBreakTime = currentTime + state.fatigueLevel = 0 + state.currentClothing = 'business' + state.currentAccessory = 'none' + + // Update avatar sprite for work status + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`🏢 [WorkStore] Started work, avatar: ${state.currentAvatarSprite}`) + }, + endWork: (state) => { + state.currentWorkStatus = 'off-duty' + state.workStartTime = 0 + state.fatigueLevel = 0 + state.currentClothing = 'casual' + state.currentAccessory = 'none' + + // Update avatar sprite for off-duty status + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`🏠 [WorkStore] Ended work, avatar: ${state.currentAvatarSprite}`) + }, + startBreak: (state) => { + state.currentWorkStatus = 'break' + state.lastBreakTime = Date.now() + state.currentClothing = 'casual' + state.currentAccessory = 'coffee' + + // Update avatar sprite for break status + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`☕ [WorkStore] Started break, avatar: ${state.currentAvatarSprite}`) + }, + endBreak: (state) => { + state.currentWorkStatus = 'working' + state.currentClothing = 'business' + state.currentAccessory = 'documents' + + // Update avatar sprite back to working status + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`💼 [WorkStore] Ended break, avatar: ${state.currentAvatarSprite}`) + }, + updateWorkStatus: (state, action: PayloadAction<{ + workStatus: WorkStatus, + clothing?: ClothingType, + accessory?: AccessoryType + }>) => { + state.currentWorkStatus = action.payload.workStatus + if (action.payload.clothing) { + state.currentClothing = action.payload.clothing + } + if (action.payload.accessory) { + state.currentAccessory = action.payload.accessory + } + + // Update avatar sprite based on new work status + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`🔄 [WorkStore] Updated work status to ${action.payload.workStatus}, avatar: ${state.currentAvatarSprite}`) + }, + updateFatigueLevel: (state, action: PayloadAction) => { + state.fatigueLevel = Math.max(0, Math.min(100, action.payload)) + // Update clothing based on fatigue level + if (state.fatigueLevel > 70) { + state.currentClothing = 'tired' + } else if (state.currentWorkStatus === 'working') { + state.currentClothing = 'business' + } + + // Update avatar sprite based on new fatigue level + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`💪 [WorkStore] Fatigue level updated to ${state.fatigueLevel}%, avatar: ${state.currentAvatarSprite}`) + }, + updateOtherPlayerWorkStatus: (state, action: PayloadAction<{ + playerId: string, + playerName: string, + workStatus: WorkStatus + }>) => { + const { playerId, playerName, workStatus } = action.payload + state.otherPlayersWorkStatus[playerId] = { + playerId, + playerName, + workStatus, + lastUpdated: Date.now() + } + console.log(`👥 [WorkStore] Updated ${playerName}'s work status to ${workStatus}`) + }, + removePlayerWorkStatus: (state, action: PayloadAction) => { + delete state.otherPlayersWorkStatus[action.payload] + }, + // Avatar group system actions + setBaseAvatar: (state, action: PayloadAction) => { + state.baseAvatar = action.payload + // Update current avatar sprite based on new base avatar + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`🎭 [WorkStore] Base avatar changed to ${state.baseAvatar}, sprite: ${state.currentAvatarSprite}`) + }, + updateAvatarSprite: (state) => { + // Force update avatar sprite based on current state + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`🔄 [WorkStore] Avatar sprite updated to ${state.currentAvatarSprite}`) + }, + // DevMode exclusive actions + setWorkStartTime: (state, action: PayloadAction) => { + state.workStartTime = action.payload + }, + setFatigueLevel: (state, action: PayloadAction) => { + state.fatigueLevel = Math.max(0, Math.min(100, action.payload)) + // Update avatar when fatigue is set via DevMode + state.currentAvatarSprite = getAvatarSprite( + state.baseAvatar, + state.currentWorkStatus, + state.fatigueLevel + ) + console.log(`🐛 [WorkStore DevMode] Fatigue set to ${state.fatigueLevel}%, avatar: ${state.currentAvatarSprite}`) + } + } +}) + +export const { + startWork, + endWork, + startBreak, + endBreak, + updateWorkStatus, + updateFatigueLevel, + updateOtherPlayerWorkStatus, + removePlayerWorkStatus, + setBaseAvatar, + updateAvatarSprite, + setWorkStartTime, + setFatigueLevel +} = workSlice.actions + +export default workSlice.reducer \ No newline at end of file diff --git a/client/src/stores/index.ts b/client/src/stores/index.ts index 77cf50a5..05e7e025 100644 --- a/client/src/stores/index.ts +++ b/client/src/stores/index.ts @@ -6,6 +6,11 @@ import whiteboardReducer from './WhiteboardStore' import chatReducer from './ChatStore' import roomReducer from './RoomStore' import meetingRoomReducer from './MeetingRoomStore' +<<<<<<< Updated upstream +======= +import devModeReducer from './DevModeStore' +import workReducer from './WorkStore' +>>>>>>> Stashed changes enableMapSet() @@ -17,6 +22,11 @@ const store = configureStore({ whiteboard: whiteboardReducer, chat: chatReducer, room: roomReducer, +<<<<<<< Updated upstream +======= + devMode: devModeReducer, + work: workReducer, +>>>>>>> Stashed changes }, // Temporary disable serialize check for redux as we store MediaStream in ComputerStore. // https://stackoverflow.com/a/63244831 diff --git a/client/src/types/AvatarTypes.ts b/client/src/types/AvatarTypes.ts new file mode 100644 index 00000000..e0c0e096 --- /dev/null +++ b/client/src/types/AvatarTypes.ts @@ -0,0 +1,225 @@ +/** + * Avatar Group System Types + * Defines avatar variations based on work status and fatigue levels + */ + +export type BaseAvatarType = 'adam' | 'ash' | 'lucy' | 'nancy' + +export type WorkStatusAvatarType = + | 'business' // Formal business attire + | 'casual' // Casual/relaxed clothing + | 'tired' // Tired/exhausted appearance + | 'meeting' // Meeting/presentation ready + | 'overtime' // Late night/overtime appearance + | 'off-duty' // Off work/going home appearance + +export type FatigueLevel = 'fresh' | 'normal' | 'tired' | 'exhausted' + +export interface AvatarGroup { + baseCharacter: BaseAvatarType + workStatus: WorkStatusAvatarType + fatigueLevel: FatigueLevel + spriteName: string // Current: use existing sprites, Future: specific sprite files +} + +export interface AvatarMapping { + [key: string]: { + [status in WorkStatusAvatarType]: { + [fatigue in FatigueLevel]: string + } + } +} + +// Default avatar mapping using existing assets +export const AVATAR_MAPPING: AvatarMapping = { + adam: { + business: { + fresh: 'adam', + normal: 'adam', + tired: 'ash', // Temporary: use ash for tired business + exhausted: 'ash' + }, + casual: { + fresh: 'adam', + normal: 'adam', + tired: 'ash', + exhausted: 'ash' + }, + tired: { + fresh: 'ash', // Use ash as tired version + normal: 'ash', + tired: 'ash', + exhausted: 'ash' + }, + meeting: { + fresh: 'adam', // Use base for meeting + normal: 'adam', + tired: 'ash', + exhausted: 'ash' + }, + overtime: { + fresh: 'ash', // Use ash for overtime + normal: 'ash', + tired: 'ash', + exhausted: 'ash' + }, + 'off-duty': { + fresh: 'lucy', // Use lucy for adam off-duty + normal: 'lucy', + tired: 'lucy', + exhausted: 'lucy' + } + }, + ash: { + business: { + fresh: 'ash', + normal: 'ash', + tired: 'adam', // Swap for variation + exhausted: 'adam' + }, + casual: { + fresh: 'ash', + normal: 'ash', + tired: 'adam', + exhausted: 'adam' + }, + tired: { + fresh: 'adam', + normal: 'adam', + tired: 'adam', + exhausted: 'adam' + }, + meeting: { + fresh: 'ash', + normal: 'ash', + tired: 'adam', + exhausted: 'adam' + }, + overtime: { + fresh: 'adam', + normal: 'adam', + tired: 'adam', + exhausted: 'adam' + }, + 'off-duty': { + fresh: 'nancy', // Use nancy for ash off-duty + normal: 'nancy', + tired: 'nancy', + exhausted: 'nancy' + } + }, + lucy: { + business: { + fresh: 'lucy', + normal: 'lucy', + tired: 'nancy', + exhausted: 'nancy' + }, + casual: { + fresh: 'lucy', + normal: 'lucy', + tired: 'nancy', + exhausted: 'nancy' + }, + tired: { + fresh: 'nancy', + normal: 'nancy', + tired: 'nancy', + exhausted: 'nancy' + }, + meeting: { + fresh: 'lucy', + normal: 'lucy', + tired: 'nancy', + exhausted: 'nancy' + }, + overtime: { + fresh: 'nancy', + normal: 'nancy', + tired: 'nancy', + exhausted: 'nancy' + }, + 'off-duty': { + fresh: 'adam', // Use adam for lucy off-duty + normal: 'adam', + tired: 'adam', + exhausted: 'adam' + } + }, + nancy: { + business: { + fresh: 'nancy', + normal: 'nancy', + tired: 'lucy', + exhausted: 'lucy' + }, + casual: { + fresh: 'nancy', + normal: 'nancy', + tired: 'lucy', + exhausted: 'lucy' + }, + tired: { + fresh: 'lucy', + normal: 'lucy', + tired: 'lucy', + exhausted: 'lucy' + }, + meeting: { + fresh: 'nancy', + normal: 'nancy', + tired: 'lucy', + exhausted: 'lucy' + }, + overtime: { + fresh: 'lucy', + normal: 'lucy', + tired: 'lucy', + exhausted: 'lucy' + }, + 'off-duty': { + fresh: 'ash', // Use ash for nancy off-duty + normal: 'ash', + tired: 'ash', + exhausted: 'ash' + } + } +} + +/** + * Get fatigue level based on fatigue percentage + */ +export function getFatigueLevelFromPercentage(fatiguePercentage: number): FatigueLevel { + if (fatiguePercentage <= 20) return 'fresh' + if (fatiguePercentage <= 50) return 'normal' + if (fatiguePercentage <= 80) return 'tired' + return 'exhausted' +} + +/** + * Convert work status to avatar work status + */ +export function getAvatarWorkStatus(workStatus: string): WorkStatusAvatarType { + switch (workStatus) { + case 'working': return 'business' + case 'break': return 'casual' + case 'meeting': return 'meeting' + case 'overtime': return 'overtime' + case 'off-duty': return 'off-duty' + default: return 'casual' + } +} + +/** + * Get appropriate sprite name based on base character, work status, and fatigue + */ +export function getAvatarSprite( + baseCharacter: BaseAvatarType, + workStatus: string, + fatiguePercentage: number +): string { + const avatarWorkStatus = getAvatarWorkStatus(workStatus) + const fatigueLevel = getFatigueLevelFromPercentage(fatiguePercentage) + + return AVATAR_MAPPING[baseCharacter][avatarWorkStatus][fatigueLevel] +} \ No newline at end of file diff --git a/client/src/types/ErrorTypes.ts b/client/src/types/ErrorTypes.ts new file mode 100644 index 00000000..3ddaad43 --- /dev/null +++ b/client/src/types/ErrorTypes.ts @@ -0,0 +1,52 @@ +/** + * アプリケーション全体で使用されるエラークラス定義 + */ + +export class WorkStatusError extends Error { + public readonly code: string + public readonly originalError?: Error + + constructor(message: string, originalError?: Error, code = 'WORK_STATUS_ERROR') { + super(message) + this.name = 'WorkStatusError' + this.code = code + this.originalError = originalError + + // スタックトレースを正しく保持 + if (Error.captureStackTrace) { + Error.captureStackTrace(this, WorkStatusError) + } + } +} + +export class NetworkError extends Error { + public readonly code: string + public readonly originalError?: Error + + constructor(message: string, originalError?: Error, code = 'NETWORK_ERROR') { + super(message) + this.name = 'NetworkError' + this.code = code + this.originalError = originalError + + if (Error.captureStackTrace) { + Error.captureStackTrace(this, NetworkError) + } + } +} + +export class ValidationError extends Error { + public readonly field: string + public readonly value: any + + constructor(message: string, field: string, value: any) { + super(message) + this.name = 'ValidationError' + this.field = field + this.value = value + + if (Error.captureStackTrace) { + Error.captureStackTrace(this, ValidationError) + } + } +} \ No newline at end of file diff --git a/client/src/types/EventTypes.ts b/client/src/types/EventTypes.ts new file mode 100644 index 00000000..352c32ae --- /dev/null +++ b/client/src/types/EventTypes.ts @@ -0,0 +1,35 @@ +/** + * イベントブリッジで使用されるカスタムイベントの型定義 + */ + +export interface WorkStatusEventDetail { + timestamp: number + workStatus?: string + clothing?: string + accessory?: string +} + +export interface PlayerEventDetail { + player?: any + key?: string + playerId?: string +} + +export interface CustomEventTypes { + 'work:started': WorkStatusEventDetail + 'work:ended': WorkStatusEventDetail + 'work:breakStarted': WorkStatusEventDetail + 'work:breakEnded': WorkStatusEventDetail + 'work:statusUpdated': WorkStatusEventDetail + 'work:statusChanged': WorkStatusEventDetail + 'player:joined': PlayerEventDetail + 'player:left': PlayerEventDetail + 'player:clicked': PlayerEventDetail + 'openPlayerStatusModal': PlayerEventDetail +} + +export type CustomEventName = keyof CustomEventTypes + +export interface TypedCustomEvent extends CustomEvent { + detail: CustomEventTypes[T] +} \ No newline at end of file diff --git a/client/src/utils/logger.ts b/client/src/utils/logger.ts new file mode 100644 index 00000000..930745b2 --- /dev/null +++ b/client/src/utils/logger.ts @@ -0,0 +1,162 @@ +/** + * DevMode対応ログ管理システム + * Redux DevModeStore と連携してログ出力を制御 + */ + +export enum LogLevel { + DEBUG = 0, + INFO = 1, + WARN = 2, + ERROR = 3 +} + +export interface LogEntry { + timestamp: number + level: LogLevel + component: string + message: string + data?: any +} + +class Logger { + private logs: LogEntry[] = [] + private maxLogs = 1000 + private listeners: Array<(entry: LogEntry) => void> = [] + + // DevMode状態を外部から注入 + private isDevModeEnabled: () => boolean = () => false + private currentLogLevel: LogLevel = LogLevel.INFO + + setDevModeChecker(checker: () => boolean) { + this.isDevModeEnabled = checker + } + + setLogLevel(level: LogLevel) { + this.currentLogLevel = level + } + + private shouldLog(level: LogLevel): boolean { + // 本番環境では ERROR のみ + if (import.meta.env.PROD && level < LogLevel.ERROR) { + return false + } + + // DevMode無効時は INFO 以上のみ + if (!this.isDevModeEnabled() && level < LogLevel.INFO) { + return false + } + + return level >= this.currentLogLevel + } + + private addLog(level: LogLevel, component: string, message: string, data?: any) { + const entry: LogEntry = { + timestamp: Date.now(), + level, + component, + message, + data + } + + this.logs.push(entry) + if (this.logs.length > this.maxLogs) { + this.logs.shift() + } + + // リスナーに通知 + this.listeners.forEach(listener => listener(entry)) + } + + debug(component: string, message: string, data?: any) { + if (this.shouldLog(LogLevel.DEBUG)) { + console.log(`🐛 [${component}] ${message}`, data || '') + this.addLog(LogLevel.DEBUG, component, message, data) + } + } + + info(component: string, message: string, data?: any) { + if (this.shouldLog(LogLevel.INFO)) { + console.log(`ℹ️ [${component}] ${message}`, data || '') + this.addLog(LogLevel.INFO, component, message, data) + } + } + + warn(component: string, message: string, data?: any) { + if (this.shouldLog(LogLevel.WARN)) { + console.warn(`⚠️ [${component}] ${message}`, data || '') + this.addLog(LogLevel.WARN, component, message, data) + } + } + + error(component: string, message: string, data?: any) { + if (this.shouldLog(LogLevel.ERROR)) { + console.error(`❌ [${component}] ${message}`, data || '') + this.addLog(LogLevel.ERROR, component, message, data) + } + } + + // DevMode専用機能 + getLogs(): LogEntry[] { + return [...this.logs] + } + + getLogsByComponent(component: string): LogEntry[] { + return this.logs.filter(log => log.component === component) + } + + getLogsByLevel(level: LogLevel): LogEntry[] { + return this.logs.filter(log => log.level === level) + } + + clearLogs() { + this.logs = [] + } + + addListener(listener: (entry: LogEntry) => void) { + this.listeners.push(listener) + } + + removeListener(listener: (entry: LogEntry) => void) { + const index = this.listeners.indexOf(listener) + if (index > -1) { + this.listeners.splice(index, 1) + } + } + + // 統計情報 + getLogStats() { + const stats = { + total: this.logs.length, + debug: 0, + info: 0, + warn: 0, + error: 0, + components: new Map() + } + + this.logs.forEach(log => { + switch (log.level) { + case LogLevel.DEBUG: stats.debug++; break + case LogLevel.INFO: stats.info++; break + case LogLevel.WARN: stats.warn++; break + case LogLevel.ERROR: stats.error++; break + } + + const count = stats.components.get(log.component) || 0 + stats.components.set(log.component, count + 1) + }) + + return stats + } +} + +// グローバルロガーインスタンス +export const logger = new Logger() + +// 便利なコンポーネント別ロガー作成関数 +export const createComponentLogger = (componentName: string) => ({ + debug: (message: string, data?: any) => logger.debug(componentName, message, data), + info: (message: string, data?: any) => logger.info(componentName, message, data), + warn: (message: string, data?: any) => logger.warn(componentName, message, data), + error: (message: string, data?: any) => logger.error(componentName, message, data) +}) \ No newline at end of file diff --git a/client/src/utils/meetingRoomPermissions.ts b/client/src/utils/meetingRoomPermissions.ts new file mode 100644 index 00000000..a0a0a96c --- /dev/null +++ b/client/src/utils/meetingRoomPermissions.ts @@ -0,0 +1,51 @@ +import { MeetingRoom } from '../stores/MeetingRoomStore' + +export const canAccessMeetingRoom = (userId: string, room: MeetingRoom): boolean => { + if (room.mode === 'open') { + return true + } else if (room.mode === 'private') { + return room.hostUserId === userId || room.invitedUsers.includes(userId) + } else if (room.mode === 'secret') { + return room.hostUserId === userId + } + return false +} + +export const canSendMessages = (userId: string, room: MeetingRoom): boolean => { + // For now, same as access permission + // Can be extended for more granular control (e.g., read-only participants) + return canAccessMeetingRoom(userId, room) +} + +export const canViewMessages = (userId: string, room: MeetingRoom): boolean => { + // For now, same as access permission + return canAccessMeetingRoom(userId, room) +} + +export const isHost = (userId: string, room: MeetingRoom): boolean => { + return room.hostUserId === userId +} + +export const isInvited = (userId: string, room: MeetingRoom): boolean => { + return room.invitedUsers.includes(userId) +} + +export const getUserRoleInRoom = (userId: string, room: MeetingRoom): 'host' | 'invited' | 'guest' | 'denied' => { + if (isHost(userId, room)) { + return 'host' + } + + if (room.mode === 'open') { + return 'guest' + } + + if (room.mode === 'private') { + return isInvited(userId, room) ? 'invited' : 'denied' + } + + if (room.mode === 'secret') { + return 'denied' + } + + return 'denied' +} \ No newline at end of file diff --git a/my_modules/JSContext b/my_modules/JSContext new file mode 160000 index 00000000..ebb7fcbc --- /dev/null +++ b/my_modules/JSContext @@ -0,0 +1 @@ +Subproject commit ebb7fcbc2fd5fbf122f3d5e579d093b2797def90 diff --git a/server/rooms/SkyOffice.ts b/server/rooms/SkyOffice.ts index 3946fe2e..387bb6ae 100644 --- a/server/rooms/SkyOffice.ts +++ b/server/rooms/SkyOffice.ts @@ -5,6 +5,10 @@ import { Player, OfficeState, Computer, Whiteboard } from './schema/OfficeState' import { Message } from '../../types/Messages' import { IRoomData } from '../../types/Rooms' import { whiteboardRoomIds } from './schema/OfficeState' +<<<<<<< Updated upstream +======= +import { MeetingRoom, MeetingRoomArea, MeetingRoomChatMessage } from './schema/MeetingRoomState' +>>>>>>> Stashed changes import PlayerUpdateCommand from './commands/PlayerUpdateCommand' import PlayerUpdateNameCommand from './commands/PlayerUpdateNameCommand' import { @@ -16,6 +20,7 @@ import { WhiteboardRemoveUserCommand, } from './commands/WhiteboardUpdateArrayCommand' import ChatMessageUpdateCommand from './commands/ChatMessageUpdateCommand' +import { v4 as uuidv4 } from 'uuid' export class SkyOffice extends Room { private dispatcher = new Dispatcher(this) @@ -39,9 +44,541 @@ export class SkyOffice extends Room { this.setState(new OfficeState()) +<<<<<<< Updated upstream // HARD-CODED: Add 5 computers in a room for (let i = 0; i < 5; i++) { this.state.computers.set(String(i), new Computer()) +======= + // Debug: Check meetingRoomState initialization + console.log('OfficeState set, checking meetingRoomState...') + console.log('meetingRoomState initialized:', !!this.state.meetingRoomState) + console.log('meetingRooms exists:', !!this.state.meetingRoomState?.meetingRooms) + console.log('meetingRoomAreas exists:', !!this.state.meetingRoomState?.meetingRoomAreas) + + // HARD-CODED: Add 5 computers in a room + for (let i = 0; i < 5; i++) { + this.state.computers.set(String(i), new Computer()) + } + + // HARD-CODED: Add 3 whiteboards in a room + for (let i = 0; i < 3; i++) { + this.state.whiteboards.set(String(i), new Whiteboard()) + } + + // Initialize default meeting room + this.initializeDefaultMeetingRoom() + + // when a player connect to a computer, add to the computer connectedUser array + this.onMessage(Message.CONNECT_TO_COMPUTER, (client, message: { computerId: string }) => { + this.dispatcher.dispatch(new ComputerAddUserCommand(), { + client, + computerId: message.computerId, + }) + }) + + // when a player disconnect from a computer, remove from the computer connectedUser array + this.onMessage(Message.DISCONNECT_FROM_COMPUTER, (client, message: { computerId: string }) => { + this.dispatcher.dispatch(new ComputerRemoveUserCommand(), { + client, + computerId: message.computerId, + }) + }) + + // when a player stop sharing screen + this.onMessage(Message.STOP_SCREEN_SHARE, (client, message: { computerId: string }) => { + const computer = this.state.computers.get(message.computerId) + computer.connectedUser.forEach((id) => { + this.clients.forEach((cli) => { + if (cli.sessionId === id && cli.sessionId !== client.sessionId) { + cli.send(Message.STOP_SCREEN_SHARE, client.sessionId) + } + }) + }) + }) + + // when a player connect to a whiteboard, add to the whiteboard connectedUser array + this.onMessage(Message.CONNECT_TO_WHITEBOARD, (client, message: { whiteboardId: string }) => { + this.dispatcher.dispatch(new WhiteboardAddUserCommand(), { + client, + whiteboardId: message.whiteboardId, + }) + }) + + // when a player disconnect from a whiteboard, remove from the whiteboard connectedUser array + this.onMessage( + Message.DISCONNECT_FROM_WHITEBOARD, + (client, message: { whiteboardId: string }) => { + this.dispatcher.dispatch(new WhiteboardRemoveUserCommand(), { + client, + whiteboardId: message.whiteboardId, + }) + } + ) + + // when receiving updatePlayer message, call the PlayerUpdateCommand + this.onMessage( + Message.UPDATE_PLAYER, + (client, message: { x: number; y: number; anim: string }) => { + this.dispatcher.dispatch(new PlayerUpdateCommand(), { + client, + x: message.x, + y: message.y, + anim: message.anim, + }) + } + ) + + // when receiving updatePlayerName message, call the PlayerUpdateNameCommand + this.onMessage(Message.UPDATE_PLAYER_NAME, (client, message: { name: string }) => { + this.dispatcher.dispatch(new PlayerUpdateNameCommand(), { + client, + name: message.name, + }) + }) + + // when a player is ready to connect, call the PlayerReadyToConnectCommand + this.onMessage(Message.READY_TO_CONNECT, (client) => { + const player = this.state.players.get(client.sessionId) + if (player) player.readyToConnect = true + }) + + // when a player is ready to connect, call the PlayerReadyToConnectCommand + this.onMessage(Message.VIDEO_CONNECTED, (client) => { + const player = this.state.players.get(client.sessionId) + if (player) player.videoConnected = true + }) + + // when a player disconnect a stream, broadcast the signal to the other player connected to the stream + this.onMessage(Message.DISCONNECT_STREAM, (client, message: { clientId: string }) => { + this.clients.forEach((cli) => { + if (cli.sessionId === message.clientId) { + cli.send(Message.DISCONNECT_STREAM, client.sessionId) + } + }) + }) + + // when a player send a chat message, update the message array and broadcast to all connected clients except the sender + this.onMessage(Message.ADD_CHAT_MESSAGE, (client, message: { content: string }) => { + // update the message array (so that players join later can also see the message) + this.dispatcher.dispatch(new ChatMessageUpdateCommand(), { + client, + content: message.content, + }) + + // broadcast to all currently connected clients except the sender (to render in-game dialog on top of the character) + this.broadcast( + Message.ADD_CHAT_MESSAGE, + { clientId: client.sessionId, content: message.content }, + { except: client } + ) + }) + + // Meeting Room Message Handlers + this.onMessage( + Message.CREATE_MEETING_ROOM, + ( + client, + message: { + id: string + name: string + mode: 'open' | 'private' | 'secret' + hostUserId: string + invitedUsers: string[] + area: { x: number; y: number; width: number; height: number } + } + ) => { + console.log('SkyOffice: CREATE_MEETING_ROOM message received:', message) + // Safety check + if (!this.state.meetingRoomState) { + console.error('meetingRoomState is not initialized!') + return + } + + if (!this.state.meetingRoomState.meetingRooms) { + console.error('meetingRooms is not initialized!') + return + } + + if (!this.state.meetingRoomState.meetingRoomAreas) { + console.error('meetingRoomAreas is not initialized!') + return + } + console.log('Creating meeting room:', message) + + // Create a new meeting room + const meetingRoom = new MeetingRoom() + meetingRoom.id = message.id + meetingRoom.name = message.name + meetingRoom.mode = message.mode + meetingRoom.hostUserId = message.hostUserId + // Initialize participants and invited users + message.invitedUsers.forEach((userId) => { + meetingRoom.invitedUsers.push(userId) + }) + + this.state.meetingRoomState.meetingRooms.set(message.id, meetingRoom) + + // Create a new meeting room area + const area = new MeetingRoomArea() + area.meetingRoomId = message.id + area.x = message.area.x + area.y = message.area.y + area.width = message.area.width + area.height = message.area.height + + this.state.meetingRoomState.meetingRoomAreas.set(message.id, area) + + console.log(`Meeting room created: ${message.name} (${message.id})`) + } + ) + + this.onMessage( + Message.UPDATE_MEETING_ROOM, + ( + client, + message: { + id: string + name: string + mode: 'open' | 'private' | 'secret' + hostUserId: string + invitedUsers: string[] + area?: { x: number; y: number; width: number; height: number } + } + ) => { + console.log('=== UPDATE_MEETING_ROOM received ===') + console.log('Client:', client.sessionId) + console.log('Message:', message) + + // Safety check + if (!this.state.meetingRoomState) { + console.error('meetingRoomState is not initialized!') + return + } + + const oldMeetingRoom = this.state.meetingRoomState.meetingRooms.get(message.id) + if (oldMeetingRoom) { + console.log('Before update:', { + name: oldMeetingRoom.name, + mode: oldMeetingRoom.mode, + hostUserId: oldMeetingRoom.hostUserId, + invitedUsersCount: oldMeetingRoom.invitedUsers.length, + }) + + // 新しいインスタンスを生成 + const newMeetingRoom = new MeetingRoom() + newMeetingRoom.id = message.id + newMeetingRoom.name = message.name + newMeetingRoom.mode = message.mode + newMeetingRoom.hostUserId = message.hostUserId + message.invitedUsers.forEach((userId) => { + newMeetingRoom.invitedUsers.push(userId) + }) + // 必要ならparticipantsもコピー + oldMeetingRoom.participants.forEach((id) => { + newMeetingRoom.participants.push(id) + }) + + // Remove and re-add the room to force Colyseus change detection + this.state.meetingRoomState.meetingRooms.delete(message.id) + this.state.meetingRoomState.meetingRooms.set(message.id, newMeetingRoom) + + // Handle area updates similarly + if (message.area) { + console.log('Updating area for room:', message.id) + const oldArea = this.state.meetingRoomState.meetingRoomAreas.get(message.id) + // 新しいインスタンスを生成 + const newArea = new MeetingRoomArea() + newArea.meetingRoomId = message.id + newArea.x = message.area.x + newArea.y = message.area.y + newArea.width = message.area.width + newArea.height = message.area.height + // 必要ならoldAreaの他のフィールドもコピー + // Remove and re-add the area + this.state.meetingRoomState.meetingRoomAreas.delete(message.id) + this.state.meetingRoomState.meetingRoomAreas.set(message.id, newArea) + } + + console.log('After update:', { + name: newMeetingRoom.name, + mode: newMeetingRoom.mode, + hostUserId: newMeetingRoom.hostUserId, + invitedUsersCount: newMeetingRoom.invitedUsers.length, + }) + + console.log(`Meeting room updated successfully: ${message.name} (${message.id})`) + } else { + console.error(`Meeting room not found for update: ${message.id}`) + console.log('Available rooms:') + this.state.meetingRoomState.meetingRooms.forEach((room, key) => { + console.log(` - ${key}: ${room.name}`) + }) + } + } + ) + this.onMessage(Message.DELETE_MEETING_ROOM, (client, message: { id: string }) => { + // Safety check + if (!this.state.meetingRoomState) { + console.error('meetingRoomState is not initialized!') + return + } + + // Delete the meeting room from the state + if (this.state.meetingRoomState.meetingRooms.has(message.id)) { + this.state.meetingRoomState.meetingRooms.delete(message.id) + console.log(`Meeting room deleted: ${message.id}`) + } + + // Delete the meeting room area from the state + if (this.state.meetingRoomState.meetingRoomAreas.has(message.id)) { + this.state.meetingRoomState.meetingRoomAreas.delete(message.id) + } + }) + + // Meeting room chat message handler + this.onMessage( + Message.ADD_MEETING_ROOM_CHAT_MESSAGE, + ( + client, + message: { + meetingRoomId: string + content: string + } + ) => { + console.log('=== ADD_MEETING_ROOM_CHAT_MESSAGE received ===') + console.log('Client:', client.sessionId) + console.log('Message:', message) + + // Safety check + if (!this.state.meetingRoomState) { + console.error('meetingRoomState is not initialized!') + return + } + + // Check if meeting room exists + const meetingRoom = this.state.meetingRoomState.meetingRooms.get(message.meetingRoomId) + if (!meetingRoom) { + console.error('Meeting room not found:', message.meetingRoomId) + return + } + + // Check if user has permission to send messages + const player = this.state.players.get(client.sessionId) + if (!player) { + console.error('Player not found:', client.sessionId) + return + } + + console.log('🔍 [Server] Player info for chat message:', { + sessionId: client.sessionId, + playerName: player.name, + hasName: !!player.name + }) + + // Check room access permission + if (!this.canAccessMeetingRoom(client.sessionId, meetingRoom)) { + console.error('User does not have permission to send messages to this room') + return + } + + // Create new chat message + const chatMessage = new MeetingRoomChatMessage() + chatMessage.messageId = uuidv4() + chatMessage.author = player.name + chatMessage.content = message.content + chatMessage.meetingRoomId = message.meetingRoomId + chatMessage.createdAt = Date.now() + + // Add to meeting room chat messages + this.state.meetingRoomState.meetingRoomChatMessages.push(chatMessage) + + console.log(`📢 [Server] Meeting room chat message added and broadcasted:`, { + messageId: chatMessage.messageId, + author: chatMessage.author, + content: chatMessage.content, + meetingRoomId: chatMessage.meetingRoomId, + timestamp: new Date(chatMessage.createdAt).toLocaleTimeString(), + connectedClients: this.clients.length + }) + + // Send individual message to all clients for immediate update + this.broadcast('new-meeting-room-chat-message', { + messageId: chatMessage.messageId, + author: chatMessage.author, + content: chatMessage.content, + meetingRoomId: chatMessage.meetingRoomId, + createdAt: chatMessage.createdAt + }) + } + ) + + // Get meeting room chat history + this.onMessage( + Message.GET_MEETING_ROOM_CHAT_HISTORY, + ( + client, + message: { + meetingRoomId: string + } + ) => { + console.log('=== GET_MEETING_ROOM_CHAT_HISTORY received ===') + console.log('Client:', client.sessionId) + console.log('Meeting Room ID:', message.meetingRoomId) + + // Safety check + if (!this.state.meetingRoomState) { + console.error('meetingRoomState is not initialized!') + return + } + + // Check if meeting room exists and user has access + const meetingRoom = this.state.meetingRoomState.meetingRooms.get(message.meetingRoomId) + if (!meetingRoom) { + console.error('Meeting room not found:', message.meetingRoomId) + return + } + + // Check room access permission + if (!this.canAccessMeetingRoom(client.sessionId, meetingRoom)) { + console.error('User does not have permission to view chat history for this room') + return + } + + // Filter messages for this meeting room + const roomMessages = this.state.meetingRoomState.meetingRoomChatMessages.filter( + msg => msg.meetingRoomId === message.meetingRoomId + ) + + // Send chat history to client + client.send('meeting-room-chat-history', { + meetingRoomId: message.meetingRoomId, + messages: roomMessages.map(msg => ({ + messageId: msg.messageId, + author: msg.author, + content: msg.content, + createdAt: msg.createdAt, + meetingRoomId: msg.meetingRoomId + })) + }) + + console.log(`Sent ${roomMessages.length} chat messages for room ${message.meetingRoomId}`) + } + ) + + // 勤務ステータス関連のメッセージハンドラー + this.onMessage(Message.START_WORK, (client) => { + const player = this.state.players.get(client.sessionId) + if (player) { + const currentTime = Date.now() + player.workStatus = 'working' + player.workStartTime = currentTime + player.lastBreakTime = currentTime + player.fatigueLevel = 0 + player.appearance.clothing = 'business' + player.appearance.accessory = 'none' + + console.log(`🏢 [Server] ${player.name || client.sessionId} started work`) + + // 他のクライアントに通知 + this.broadcast('work-status-changed', { + playerId: client.sessionId, + workStatus: player.workStatus, + playerName: player.name + }) + } + }) + + this.onMessage(Message.END_WORK, (client) => { + const player = this.state.players.get(client.sessionId) + if (player) { + player.workStatus = 'off-duty' + player.workStartTime = 0 + player.fatigueLevel = 0 + player.appearance.clothing = 'casual' + player.appearance.accessory = 'none' + + console.log(`🏠 [Server] ${player.name || client.sessionId} ended work`) + + this.broadcast('work-status-changed', { + playerId: client.sessionId, + workStatus: player.workStatus, + playerName: player.name + }) + } + }) + + this.onMessage(Message.START_BREAK, (client) => { + const player = this.state.players.get(client.sessionId) + if (player) { + player.workStatus = 'break' + player.lastBreakTime = Date.now() + player.appearance.clothing = 'casual' + player.appearance.accessory = 'coffee' + + console.log(`☕ [Server] ${player.name || client.sessionId} started break`) + + this.broadcast('work-status-changed', { + playerId: client.sessionId, + workStatus: player.workStatus, + playerName: player.name + }) + } + }) + + this.onMessage(Message.END_BREAK, (client) => { + const player = this.state.players.get(client.sessionId) + if (player) { + player.workStatus = 'working' + player.appearance.clothing = 'business' + player.appearance.accessory = 'documents' + + console.log(`💼 [Server] ${player.name || client.sessionId} ended break`) + + this.broadcast('work-status-changed', { + playerId: client.sessionId, + workStatus: player.workStatus, + playerName: player.name + }) + } + }) + + this.onMessage(Message.UPDATE_WORK_STATUS, (client, message: { + workStatus: string, + clothing?: string, + accessory?: string + }) => { + const player = this.state.players.get(client.sessionId) + if (player) { + player.workStatus = message.workStatus as any + if (message.clothing) { + player.appearance.clothing = message.clothing as any + } + if (message.accessory) { + player.appearance.accessory = message.accessory as any + } + + console.log(`🔄 [Server] ${player.name || client.sessionId} updated work status to ${message.workStatus}`) + + this.broadcast('work-status-changed', { + playerId: client.sessionId, + workStatus: player.workStatus, + playerName: player.name + }) + } + }) + } + + // Helper method to check meeting room access permission + private canAccessMeetingRoom(userId: string, meetingRoom: MeetingRoom): boolean { + if (meetingRoom.mode === 'open') { + return true + } else if (meetingRoom.mode === 'private') { + return meetingRoom.hostUserId === userId || meetingRoom.invitedUsers.includes(userId) + } else if (meetingRoom.mode === 'secret') { + return meetingRoom.hostUserId === userId + } + return false +>>>>>>> Stashed changes } // HARD-CODED: Add 3 whiteboards in a room diff --git a/server/rooms/schema/MeetingRoomState.ts b/server/rooms/schema/MeetingRoomState.ts new file mode 100644 index 00000000..afeb7e18 --- /dev/null +++ b/server/rooms/schema/MeetingRoomState.ts @@ -0,0 +1,34 @@ +import { Schema, type, MapSchema, ArraySchema } from '@colyseus/schema' + +export type MeetingRoomMode = 'open' | 'private' | 'secret' + +export class MeetingRoomChatMessage extends Schema { + @type('string') author: string = '' + @type('number') createdAt: number = 0 + @type('string') content: string = '' + @type('string') meetingRoomId: string = '' + @type('string') messageId: string = '' +} + +export class MeetingRoom extends Schema { + @type('string') id: string = '' + @type('string') name: string = '' + @type('string') mode: MeetingRoomMode = 'open' // Default mode is 'open' + @type('string') hostUserId: string = '' + @type(['string']) invitedUsers = new ArraySchema() + @type(['string']) participants = new ArraySchema() +} + +export class MeetingRoomArea extends Schema { + @type('string') meetingRoomId: string = '' + @type('number') x: number = 0 + @type('number') y: number = 0 + @type('number') width: number = 100 + @type('number') height: number = 100 +} + +export class MeetingRoomState extends Schema { + @type({ map: MeetingRoom }) meetingRooms = new MapSchema() + @type({ map: MeetingRoomArea }) meetingRoomAreas = new MapSchema() + @type([MeetingRoomChatMessage]) meetingRoomChatMessages = new ArraySchema() +} diff --git a/server/rooms/schema/OfficeState.ts b/server/rooms/schema/OfficeState.ts index 954dcbdb..9af16f73 100644 --- a/server/rooms/schema/OfficeState.ts +++ b/server/rooms/schema/OfficeState.ts @@ -1,5 +1,6 @@ import { Schema, ArraySchema, SetSchema, MapSchema, type } from '@colyseus/schema' import { +<<<<<<< Updated upstream IPlayer, IOfficeState, IComputer, @@ -14,6 +15,39 @@ export class Player extends Schema implements IPlayer { @type('string') anim = 'adam_idle_down' @type('boolean') readyToConnect = false @type('boolean') videoConnected = false +======= + IPlayer, + IOfficeState, + IComputer, + IWhiteboard, + IChatMessage, + IPlayerAppearance, + WorkStatus, + ClothingType, + AccessoryType, +} from '../../../types/IOfficeState' + +import { MeetingRoomState } from './MeetingRoomState' + +export class PlayerAppearance extends Schema implements IPlayerAppearance { + @type('string') clothing: ClothingType = 'business' + @type('string') accessory: AccessoryType = 'none' +} + +export class Player extends Schema implements IPlayer { + @type('string') name = '' + @type('number') x = 705 + @type('number') y = 500 + @type('string') anim = 'adam_idle_down' + @type('boolean') readyToConnect = false + @type('boolean') videoConnected = false + // 勤務関連の新しいフィールド + @type('string') workStatus: WorkStatus = 'off-duty' + @type('number') workStartTime = 0 + @type('number') lastBreakTime = 0 + @type('number') fatigueLevel = 0 + @type(PlayerAppearance) appearance = new PlayerAppearance() +>>>>>>> Stashed changes } export class Computer extends Schema implements IComputer { diff --git a/types/IOfficeState.ts b/types/IOfficeState.ts index 9bcb6582..442bfcb4 100644 --- a/types/IOfficeState.ts +++ b/types/IOfficeState.ts @@ -1,12 +1,39 @@ import { Schema, ArraySchema, SetSchema, MapSchema } from '@colyseus/schema' +// 勤務状態の型定義 +export type WorkStatus = 'working' | 'break' | 'meeting' | 'overtime' | 'off-duty' + +// 外観の型定義 +export type ClothingType = 'business' | 'casual' | 'tired' +export type AccessoryType = 'coffee' | 'documents' | 'none' + +export interface IPlayerAppearance { + clothing: ClothingType + accessory: AccessoryType +} + export interface IPlayer extends Schema { +<<<<<<< Updated upstream name: string x: number y: number anim: string readyToConnect: boolean videoConnected: boolean +======= + name: string + x: number + y: number + anim: string + readyToConnect: boolean + videoConnected: boolean + // 勤務関連の新しいフィールド + workStatus: WorkStatus + workStartTime: number + lastBreakTime: number + fatigueLevel: number // 0-100 + appearance: IPlayerAppearance +>>>>>>> Stashed changes } export interface IComputer extends Schema { @@ -19,9 +46,45 @@ export interface IWhiteboard extends Schema { } export interface IChatMessage extends Schema { +<<<<<<< Updated upstream author: string createdAt: number content: string +======= + author: string + createdAt: number + content: string +} + +export interface IMeetingRoomChatMessage extends Schema { + author: string + createdAt: number + content: string + meetingRoomId: string + messageId: string +} +export interface IMeetingRoom { + id: string + name: string + mode: 'open' | 'private' | 'secret' + hostUserId: string + invitedUsers: string[] + participants: string[] +} + +export interface IMeetingRoomArea { + meetingRoomId: string + x: number + y: number + width: number + height: number +} + +export interface IMeetingRoomState { + meetingRooms: MapSchema + meetingRoomAreas: MapSchema + meetingRoomChatMessages: ArraySchema +>>>>>>> Stashed changes } export interface IOfficeState extends Schema { diff --git a/types/Messages.ts b/types/Messages.ts index 25180f03..815cf045 100644 --- a/types/Messages.ts +++ b/types/Messages.ts @@ -1,4 +1,5 @@ export enum Message { +<<<<<<< Updated upstream UPDATE_PLAYER, UPDATE_PLAYER_NAME, READY_TO_CONNECT, @@ -11,4 +12,29 @@ export enum Message { VIDEO_CONNECTED, ADD_CHAT_MESSAGE, SEND_ROOM_DATA, +======= + UPDATE_PLAYER, + UPDATE_PLAYER_NAME, + READY_TO_CONNECT, + DISCONNECT_STREAM, + CONNECT_TO_COMPUTER, + DISCONNECT_FROM_COMPUTER, + STOP_SCREEN_SHARE, + CONNECT_TO_WHITEBOARD, + DISCONNECT_FROM_WHITEBOARD, + VIDEO_CONNECTED, + ADD_CHAT_MESSAGE, + SEND_ROOM_DATA, + CREATE_MEETING_ROOM, + UPDATE_MEETING_ROOM, + DELETE_MEETING_ROOM, + ADD_MEETING_ROOM_CHAT_MESSAGE, + GET_MEETING_ROOM_CHAT_HISTORY, + // 勤務ステータス関連 + UPDATE_WORK_STATUS, + START_WORK, + END_WORK, + START_BREAK, + END_BREAK, +>>>>>>> Stashed changes } diff --git a/yarn.lock b/yarn.lock index 27d57fab..d0ff6975 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9,19 +9,20 @@ dependencies: "@babel/highlight" "^7.10.4" -"@babel/helper-validator-identifier@^7.16.7": - version "7.16.7" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad" - integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw== +"@babel/helper-validator-identifier@^7.25.9": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8" + integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow== "@babel/highlight@^7.10.4": - version "7.17.12" - resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.12.tgz#257de56ee5afbd20451ac0a75686b6b404257351" - integrity sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg== + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.9.tgz#8141ce68fc73757946f983b343f1231f4691acc6" + integrity sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw== dependencies: - "@babel/helper-validator-identifier" "^7.16.7" - chalk "^2.0.0" + "@babel/helper-validator-identifier" "^7.25.9" + chalk "^2.4.2" js-tokens "^4.0.0" + picocolors "^1.0.0" "@colyseus/command@^0.1.7": version "0.1.7" @@ -30,11 +31,12 @@ dependencies: debug "^4.1.1" -"@colyseus/core@^0.14.20": - version "0.14.28" - resolved "https://registry.yarnpkg.com/@colyseus/core/-/core-0.14.28.tgz#5bc76cec27bed33cd0ee7055b4ab11de5c842df3" - integrity sha512-hq7IzKWL4aQK9+3/IOkSD6gzMCFWZ4JaC3AvoTNXfLiScVsvw5JaWoqSO5/5GmsiiqPWygqQrOQ52kvU2YUjOQ== +"@colyseus/core@^0.14.20", "@colyseus/core@^0.14.33": + version "0.14.36" + resolved "https://registry.yarnpkg.com/@colyseus/core/-/core-0.14.36.tgz#651c1a13ee72b781798e29daa3af050c32bff113" + integrity sha512-Gy1/3xQV6Fd/NmmmWD3Cgb1aC2w516GGmOELcrKAgEBP0LAEal19hz0DaQRVJuLkUCo/9j5OxqK0ZvED4925YQ== dependencies: + "@colyseus/greeting-banner" "^1.0.0" "@colyseus/schema" "^1.0.15" "@gamestdio/timer" "^1.3.0" "@types/redis" "^2.8.12" @@ -43,7 +45,12 @@ nanoid "^2.0.0" notepack.io "^2.2.0" -"@colyseus/mongoose-driver@^0.14.21": +"@colyseus/greeting-banner@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@colyseus/greeting-banner/-/greeting-banner-1.0.0.tgz#a1057ca2b5e9c6b4fe5f5a7e498fb1781e23d541" + integrity sha512-B/gAslDjeIUdelpF/ILycRLVIwisgoNCw70MlzwntOrfYwZ5L6MA9SDd8hGG+ONN6Ic8MkziZpyo8UqApLXLfg== + +"@colyseus/mongoose-driver@^0.14.22": version "0.14.22" resolved "https://registry.yarnpkg.com/@colyseus/mongoose-driver/-/mongoose-driver-0.14.22.tgz#8c085158c747438cd07f9f58116786bb47460391" integrity sha512-Bqg+1XGHo4t3UUqBxSCDuvxzuuDBObxOWVBH0GjdFmXWzJgrkMgkDFH8YXjo9h/sXaPRJNzJRlXMCV1txbYadw== @@ -60,18 +67,18 @@ node-os-utils "^1.2.0" superagent "^3.8.2" -"@colyseus/redis-presence@^0.14.20": - version "0.14.20" - resolved "https://registry.yarnpkg.com/@colyseus/redis-presence/-/redis-presence-0.14.20.tgz#b0530925d3c30da139c4e673c29ec6f5f3ad968c" - integrity sha512-ZxpY9ji/tGYT4ms/4q5w7tjUfqekCDnpZ8J+XuXVpZN02iD6cd/RpCwIyaEsRUVpkcRZw9jxX8hSQ3L5aG/3VA== +"@colyseus/redis-presence@^0.14.21": + version "0.14.22" + resolved "https://registry.yarnpkg.com/@colyseus/redis-presence/-/redis-presence-0.14.22.tgz#2719e3cb0841543715684537df0e32588c2faa7d" + integrity sha512-VBdvJccjcEop24elJtcTdknA/kfh8wvg2/a+xnsH9z38GwtjI9Tsa8ZcjubiTMBP0f3Ye+gw/7ocjBZ/yzKwhA== dependencies: "@colyseus/core" "^0.14.20" - redis "^2.8.0" + redis "^3.1.1" "@colyseus/schema@^1.0.15", "@colyseus/schema@^1.0.22": - version "1.0.34" - resolved "https://registry.yarnpkg.com/@colyseus/schema/-/schema-1.0.34.tgz#b20d3590c78c6aaf006daea9b9541abaff13843d" - integrity sha512-2PfCqu9dJlfbkQsxGi9oM+fAmWpPeMLol6tazRdBxb5mj8QykUzRFMY4pipBlUB2tkQ4qidoRMQqjVHj2HznNg== + version "1.0.46" + resolved "https://registry.yarnpkg.com/@colyseus/schema/-/schema-1.0.46.tgz#1ba1e3088ff454a42eeec4bc330e508003990fac" + integrity sha512-0cgirRomXDuDlppgJPXDLzsWw8/ZHwJEnndgzyX9hOCoFHJyFIyOYoKIV4eVPtKNQm6l6rGax1rE2LId4ujr4g== "@colyseus/ws-transport@^0.14.21": version "0.14.21" @@ -104,9 +111,9 @@ integrity sha512-O+PG3aRRytgX2BhAPMIhbM2ftq1Q8G4xUrYjEWYM6EmpoKn8oY4lXENGhpgfww6mQxHPbjfWyIAR6Xj3y1+avw== "@gamestdio/timer@^1.3.0": - version "1.3.2" - resolved "https://registry.yarnpkg.com/@gamestdio/timer/-/timer-1.3.2.tgz#9d4a6ce5b4823fd0fb8de1dce0b1c05467e3e073" - integrity sha512-l6Mrlibx8ScmEAbTKxtZ3QJD8z3htzl1wxSRopFyDwudq73nb+pYvRYERrj5+rZLjA6cX0Nt+OKTRXBi/BSejw== + version "1.4.2" + resolved "https://registry.yarnpkg.com/@gamestdio/timer/-/timer-1.4.2.tgz#21f48ede315a24285dc109f566a20e9082385073" + integrity sha512-WNciVCKSJzY56CM95TCVf+dtWShWNFUdziY1Qc+2gaqNCRbC3Egqzq9zumGRrV92Ym9GL6znkqTzF2AoAdydNw== dependencies: "@gamestdio/clock" "^1.1.9" @@ -124,10 +131,10 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== -"@mapbox/node-pre-gyp@^1.0.0": - version "1.0.9" - resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.9.tgz#09a8781a3a036151cdebbe8719d6f8b25d4058bc" - integrity sha512-aDF3S3rK9Q2gey/WAttUlISduDItz5BU3306M9Eyv6/oS40aMprnopshtlKTykxRNIBEZuRMaZAnbrQ4QtKGyw== +"@mapbox/node-pre-gyp@^1.0.11": + version "1.0.11" + resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz#417db42b7f5323d79e93b34a6d7a2a12c0df43fa" + integrity sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ== dependencies: detect-libc "^2.0.0" https-proxy-agent "^5.0.0" @@ -161,24 +168,24 @@ fastq "^1.6.0" "@types/bcrypt@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@types/bcrypt/-/bcrypt-5.0.0.tgz#a835afa2882d165aff5690893db314eaa98b9f20" - integrity sha512-agtcFKaruL8TmcvqbndlqHPSJgsolhf/qPWchFlgnW1gECTN/nKbFcoFnvKAQRFfKbh+BO6A3SWdJu9t+xF3Lw== + version "5.0.2" + resolved "https://registry.yarnpkg.com/@types/bcrypt/-/bcrypt-5.0.2.tgz#22fddc11945ea4fbc3655b3e8b8847cc9f811477" + integrity sha512-6atioO8Y75fNcbmj0G7UjI9lXN2pQ/IGJ2FWT4a/btd0Lk9lQalHLKhkgKVZ3r+spnmWUKfbMi1GEe9wyHQfNQ== dependencies: "@types/node" "*" "@types/body-parser@*": - version "1.19.2" - resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0" - integrity sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g== + version "1.19.6" + resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.6.tgz#1859bebb8fd7dac9918a45d54c1971ab8b5af474" + integrity sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g== dependencies: "@types/connect" "*" "@types/node" "*" "@types/bson@*": - version "4.2.0" - resolved "https://registry.yarnpkg.com/@types/bson/-/bson-4.2.0.tgz#a2f71e933ff54b2c3bf267b67fa221e295a33337" - integrity sha512-ELCPqAdroMdcuxqwMgUpifQyRoTpyYCNr1V9xKyF40VsBobsj+BbWNRvwGchMgBPGqkw655ypkjj2MEF5ywVwg== + version "4.2.4" + resolved "https://registry.yarnpkg.com/@types/bson/-/bson-4.2.4.tgz#3bb08ab0de5dd07103fba355361814019ba2ae88" + integrity sha512-SG23E3JDH6y8qF20a4G9txLuUl+TCV16gxsKyntmGiJez2V9VBJr1Y8WxTBBD6OgBVcvspQ7sxgdNMkXFVcaEA== dependencies: bson "*" @@ -190,45 +197,53 @@ "@types/node" "*" "@types/connect@*": - version "3.4.35" - resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1" - integrity sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ== + version "3.4.38" + resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.38.tgz#5ba7f3bc4fbbdeaff8dded952e5ff2cc53f8d858" + integrity sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug== dependencies: "@types/node" "*" "@types/cors@^2.8.12": - version "2.8.12" - resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.12.tgz#6b2c510a7ad7039e98e7b8d3d6598f4359e5c080" - integrity sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw== + version "2.8.19" + resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.19.tgz#d93ea2673fd8c9f697367f5eeefc2bbfa94f0342" + integrity sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg== + dependencies: + "@types/node" "*" -"@types/express-serve-static-core@^4.17.18": - version "4.17.28" - resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz#c47def9f34ec81dc6328d0b1b5303d1ec98d86b8" - integrity sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig== +"@types/express-serve-static-core@^4.17.33": + version "4.19.6" + resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz#e01324c2a024ff367d92c66f48553ced0ab50267" + integrity sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A== dependencies: "@types/node" "*" "@types/qs" "*" "@types/range-parser" "*" + "@types/send" "*" "@types/express@^4.17.13": - version "4.17.13" - resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.13.tgz#a76e2995728999bab51a33fabce1d705a3709034" - integrity sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA== + version "4.17.23" + resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.23.tgz#35af3193c640bfd4d7fe77191cd0ed411a433bef" + integrity sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ== dependencies: "@types/body-parser" "*" - "@types/express-serve-static-core" "^4.17.18" + "@types/express-serve-static-core" "^4.17.33" "@types/qs" "*" "@types/serve-static" "*" +"@types/http-errors@*": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.5.tgz#5b749ab2b16ba113423feb1a64a95dcd30398472" + integrity sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg== + "@types/json-schema@^7.0.7": - version "7.0.11" - resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" - integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== + version "7.0.15" + resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841" + integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA== "@types/mime@^1": - version "1.3.2" - resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a" - integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw== + version "1.3.5" + resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.5.tgz#1ef302e01cf7d2b5a0fa526790c9123bf1d06690" + integrity sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w== "@types/mongodb@^3.5.27": version "3.6.20" @@ -239,19 +254,21 @@ "@types/node" "*" "@types/node@*": - version "17.0.40" - resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.40.tgz#76ee88ae03650de8064a6cf75b8d95f9f4a16090" - integrity sha512-UXdBxNGqTMtm7hCwh9HtncFVLrXoqA3oJW30j6XWp5BH/wu3mVeaxo7cq5benFdBw34HB3XDT2TRPI7rXZ+mDg== + version "24.0.3" + resolved "https://registry.yarnpkg.com/@types/node/-/node-24.0.3.tgz#f935910f3eece3a3a2f8be86b96ba833dc286cab" + integrity sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg== + dependencies: + undici-types "~7.8.0" "@types/qs@*": - version "6.9.7" - resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" - integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== + version "6.14.0" + resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.14.0.tgz#d8b60cecf62f2db0fb68e5e006077b9178b85de5" + integrity sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ== "@types/range-parser@*": - version "1.2.4" - resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" - integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== + version "1.2.7" + resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb" + integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ== "@types/redis@^2.8.12": version "2.8.32" @@ -260,14 +277,23 @@ dependencies: "@types/node" "*" -"@types/serve-static@*": - version "1.13.10" - resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.10.tgz#f5e0ce8797d2d7cc5ebeda48a52c96c4fa47a8d9" - integrity sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ== +"@types/send@*": + version "0.17.5" + resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.5.tgz#d991d4f2b16f2b1ef497131f00a9114290791e74" + integrity sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w== dependencies: "@types/mime" "^1" "@types/node" "*" +"@types/serve-static@*": + version "1.15.8" + resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.8.tgz#8180c3fbe4a70e8f00b9f70b9ba7f08f35987877" + integrity sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg== + dependencies: + "@types/http-errors" "*" + "@types/node" "*" + "@types/send" "*" + "@types/strip-bom@^3.0.0": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2" @@ -401,14 +427,14 @@ ajv@^6.10.0, ajv@^6.12.4: uri-js "^4.2.2" ajv@^8.0.1: - version "8.11.0" - resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f" - integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg== + version "8.17.1" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6" + integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g== dependencies: - fast-deep-equal "^3.1.1" + fast-deep-equal "^3.1.3" + fast-uri "^3.0.1" json-schema-traverse "^1.0.0" require-from-string "^2.0.2" - uri-js "^4.2.2" ansi-colors@^4.1.1: version "4.1.3" @@ -435,9 +461,9 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: color-convert "^2.0.1" anymatch@~3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" - integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== + version "3.1.3" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e" + integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw== dependencies: normalize-path "^3.0.0" picomatch "^2.0.4" @@ -492,23 +518,18 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== -base64-js@^1.3.1: - version "1.5.1" - resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" - integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA== - bcrypt@^5.0.1: - version "5.0.1" - resolved "https://registry.yarnpkg.com/bcrypt/-/bcrypt-5.0.1.tgz#f1a2c20f208e2ccdceea4433df0c8b2c54ecdf71" - integrity sha512-9BTgmrhZM2t1bNuDtrtIMVSmmxZBrJ71n8Wg+YgdjHuIWYF7SjjmCPZFB+/5i/o/PIeRpwVJR3P+NrpIItUjqw== + version "5.1.1" + resolved "https://registry.yarnpkg.com/bcrypt/-/bcrypt-5.1.1.tgz#0f732c6dcb4e12e5b70a25e326a72965879ba6e2" + integrity sha512-AGBHOG5hPYZ5Xl9KXzU5iKq9516yEmvCKDg3ecP5kX2aB6UqTeXZxk2ELnDgDm6BQSMlLt9rDB4LoSMx0rYwww== dependencies: - "@mapbox/node-pre-gyp" "^1.0.0" - node-addon-api "^3.1.0" + "@mapbox/node-pre-gyp" "^1.0.11" + node-addon-api "^5.0.0" binary-extensions@^2.0.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" - integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== + version "2.3.0" + resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522" + integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw== bl@^2.2.1: version "2.2.1" @@ -523,45 +544,43 @@ bluebird@3.5.1: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9" integrity sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA== -body-parser@1.20.0: - version "1.20.0" - resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5" - integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg== +body-parser@1.20.3: + version "1.20.3" + resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6" + integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g== dependencies: bytes "3.1.2" - content-type "~1.0.4" + content-type "~1.0.5" debug "2.6.9" depd "2.0.0" destroy "1.2.0" http-errors "2.0.0" iconv-lite "0.4.24" on-finished "2.4.1" - qs "6.10.3" - raw-body "2.5.1" + qs "6.13.0" + raw-body "2.5.2" type-is "~1.6.18" unpipe "1.0.0" brace-expansion@^1.1.7: - version "1.1.11" - resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" - integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== + version "1.1.12" + resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.12.tgz#ab9b454466e5a8cc3a187beaad580412a9c5b843" + integrity sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg== dependencies: balanced-match "^1.0.0" concat-map "0.0.1" -braces@^3.0.2, braces@~3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" - integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== +braces@^3.0.3, braces@~3.0.2: + version "3.0.3" + resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" + integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== dependencies: - fill-range "^7.0.1" + fill-range "^7.1.1" bson@*: - version "4.6.4" - resolved "https://registry.yarnpkg.com/bson/-/bson-4.6.4.tgz#e66d4a334f1ab230dfcfb9ec4ea9091476dd372e" - integrity sha512-TdQ3FzguAu5HKPPlr0kYQCyrYUYh8tFM+CMTpxjNzVzxeiJY00Rtuj3LXLHSgiGvmaWlZ8PE+4KyM2thqE38pQ== - dependencies: - buffer "^5.6.0" + version "6.10.4" + resolved "https://registry.yarnpkg.com/bson/-/bson-6.10.4.tgz#d530733bb5bb16fb25c162e01a3344fab332fd2b" + integrity sha512-WIsKqkSC0ABoBJuT1LEX+2HEvNmNKKgnTAyd0fL8qzK4SH2i9NXg+t08YtdZp/V9IZ33cxe3iV4yM0qg8lMQng== bson@^1.1.4: version "1.1.6" @@ -573,33 +592,33 @@ buffer-from@^1.0.0: resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5" integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ== -buffer@^5.6.0: - version "5.7.1" - resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0" - integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ== - dependencies: - base64-js "^1.3.1" - ieee754 "^1.1.13" - bytes@3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5" integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg== -call-bind@^1.0.0: +call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2: version "1.0.2" - resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c" - integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA== + resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6" + integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ== + dependencies: + es-errors "^1.3.0" + function-bind "^1.1.2" + +call-bound@^1.0.2: + version "1.0.4" + resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.4.tgz#238de935d2a2a692928c538c7ccfa91067fd062a" + integrity sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg== dependencies: - function-bind "^1.1.1" - get-intrinsic "^1.0.2" + call-bind-apply-helpers "^1.0.2" + get-intrinsic "^1.3.0" callsites@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== -chalk@^2.0.0: +chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -617,9 +636,9 @@ chalk@^4.0.0: supports-color "^7.1.0" chokidar@^3.5.1: - version "3.5.3" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" - integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== + version "3.6.0" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b" + integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw== dependencies: anymatch "~3.1.2" braces "~3.0.2" @@ -686,16 +705,16 @@ colyseus.js@^0.14.12: tslib "^2.1.0" colyseus@^0.14.0: - version "0.14.23" - resolved "https://registry.yarnpkg.com/colyseus/-/colyseus-0.14.23.tgz#7cc1e42f198438fd5d47336ad1f8402d3856348f" - integrity sha512-y2F0vmOx+k8nG2KGcKMeDNjamYNYA+x+E0dVqqWw7lD6g2PhuX8/hkGRrWagJqbFiYTIMfZfa+zN9DinAMCshg== + version "0.14.24" + resolved "https://registry.yarnpkg.com/colyseus/-/colyseus-0.14.24.tgz#7477abba74d939ed46d6c804e587ca46b85865f3" + integrity sha512-plKZ2vmxyHDo01ZUaNwmTz5L6uAn1PDJG7gPi8bgsXXVpBIrM6YuiMgw8qNq8lZdqjEuL9uDLxGjgwnXVq6NqQ== dependencies: - "@colyseus/core" "^0.14.20" - "@colyseus/mongoose-driver" "^0.14.21" - "@colyseus/redis-presence" "^0.14.20" + "@colyseus/core" "^0.14.33" + "@colyseus/mongoose-driver" "^0.14.22" + "@colyseus/redis-presence" "^0.14.21" "@colyseus/ws-transport" "^0.14.21" -combined-stream@^1.0.6: +combined-stream@^1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== @@ -703,9 +722,9 @@ combined-stream@^1.0.6: delayed-stream "~1.0.0" component-emitter@^1.2.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0" - integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg== + version "1.3.1" + resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.1.tgz#ef1d5796f7d93f135ee6fb684340b26403c97d17" + integrity sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ== concat-map@0.0.1: version "0.0.1" @@ -724,25 +743,25 @@ content-disposition@0.5.4: dependencies: safe-buffer "5.2.1" -content-type@~1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" - integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== +content-type@~1.0.4, content-type@~1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918" + integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA== cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c" integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ== -cookie@0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b" - integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== +cookie@0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9" + integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w== cookiejar@^2.1.0: - version "2.1.3" - resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.3.tgz#fc7a6216e408e74414b90230050842dacda75acc" - integrity sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ== + version "2.1.4" + resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.4.tgz#ee669c1fea2cf42dc31585469d193fef0d65771b" + integrity sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw== copyfiles@^2.4.1: version "2.4.1" @@ -776,9 +795,9 @@ create-require@^1.1.0: integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ== cross-spawn@^6.0.0: - version "6.0.5" - resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" - integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ== + version "6.0.6" + resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.6.tgz#30d0efa0712ddb7eb5a76e1e8721bffafa6b5d57" + integrity sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw== dependencies: nice-try "^1.0.4" path-key "^2.0.1" @@ -787,9 +806,9 @@ cross-spawn@^6.0.0: which "^1.2.9" cross-spawn@^7.0.2: - version "7.0.3" - resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" - integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== + version "7.0.6" + resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f" + integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA== dependencies: path-key "^3.1.0" shebang-command "^2.0.0" @@ -810,11 +829,11 @@ debug@3.1.0: ms "2.0.0" debug@4, debug@^4.0.1, debug@^4.1.1, debug@^4.3.1: - version "4.3.4" - resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" - integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== + version "4.4.1" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.1.tgz#e5a8bc6cbc4c6cd3e64308b0693a3d4fa550189b" + integrity sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ== dependencies: - ms "2.1.2" + ms "^2.1.3" debug@^3.1.0: version "3.2.7" @@ -846,7 +865,7 @@ delegates@^1.0.0: resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ== -denque@^1.4.1: +denque@^1.4.1, denque@^1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/denque/-/denque-1.5.1.tgz#07f670e29c9a78f8faecb2566a1e2c11929c5cbf" integrity sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw== @@ -862,9 +881,9 @@ destroy@1.2.0: integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg== detect-libc@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd" - integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w== + version "2.0.4" + resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.4.tgz#f04715b8ba815e53b4d8109655b6508a6865a7e8" + integrity sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA== diff@^4.0.1: version "4.0.2" @@ -885,10 +904,14 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -double-ended-queue@^2.1.0-0: - version "2.1.0-0" - resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c" - integrity sha512-+BNfZ+deCo8hMNpDqDnvT+c0XpJ5cUa6mqYq89bho2Ifze4URTqRkcwR399hWoTrTkbZ/XJYDgP6rc7pRgffEQ== +dunder-proto@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a" + integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A== + dependencies: + call-bind-apply-helpers "^1.0.1" + es-errors "^1.3.0" + gopd "^1.2.0" dynamic-dedupe@^0.3.0: version "0.3.0" @@ -912,24 +935,57 @@ encodeurl@~1.0.2: resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w== +encodeurl@~2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58" + integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg== + end-of-stream@^1.1.0: - version "1.4.4" - resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0" - integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q== + version "1.4.5" + resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.5.tgz#7344d711dea40e0b74abc2ed49778743ccedb08c" + integrity sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg== dependencies: once "^1.4.0" enquirer@^2.3.5: - version "2.3.6" - resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d" - integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg== + version "2.4.1" + resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56" + integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ== dependencies: ansi-colors "^4.1.1" + strip-ansi "^6.0.1" + +es-define-property@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa" + integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g== + +es-errors@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f" + integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw== + +es-object-atoms@^1.0.0, es-object-atoms@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1" + integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA== + dependencies: + es-errors "^1.3.0" + +es-set-tostringtag@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d" + integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA== + dependencies: + es-errors "^1.3.0" + get-intrinsic "^1.2.6" + has-tostringtag "^1.0.2" + hasown "^2.0.2" escalade@^3.1.1: - version "3.1.1" - resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" - integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== + version "3.2.0" + resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" + integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== escape-html@~1.0.3: version "1.0.3" @@ -1039,9 +1095,9 @@ esprima@^4.0.0: integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== esquery@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5" - integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w== + version "1.6.0" + resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7" + integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg== dependencies: estraverse "^5.1.0" @@ -1072,10 +1128,10 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg== -eventemitter3@^4.0.7: - version "4.0.7" - resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" - integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== +eventemitter3@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4" + integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA== execa@^1.0.0: version "1.0.0" @@ -1091,36 +1147,36 @@ execa@^1.0.0: strip-eof "^1.0.0" express@^4.16.2, express@^4.16.4: - version "4.18.1" - resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf" - integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q== + version "4.21.2" + resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32" + integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA== dependencies: accepts "~1.3.8" array-flatten "1.1.1" - body-parser "1.20.0" + body-parser "1.20.3" content-disposition "0.5.4" content-type "~1.0.4" - cookie "0.5.0" + cookie "0.7.1" cookie-signature "1.0.6" debug "2.6.9" depd "2.0.0" - encodeurl "~1.0.2" + encodeurl "~2.0.0" escape-html "~1.0.3" etag "~1.8.1" - finalhandler "1.2.0" + finalhandler "1.3.1" fresh "0.5.2" http-errors "2.0.0" - merge-descriptors "1.0.1" + merge-descriptors "1.0.3" methods "~1.1.2" on-finished "2.4.1" parseurl "~1.3.3" - path-to-regexp "0.1.7" + path-to-regexp "0.1.12" proxy-addr "~2.0.7" - qs "6.10.3" + qs "6.13.0" range-parser "~1.2.1" safe-buffer "5.2.1" - send "0.18.0" - serve-static "1.15.0" + send "0.19.0" + serve-static "1.16.2" setprototypeof "1.2.0" statuses "2.0.1" type-is "~1.6.18" @@ -1138,15 +1194,15 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== fast-glob@^3.2.9: - version "3.2.11" - resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" - integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew== + version "3.3.3" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818" + integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg== dependencies: "@nodelib/fs.stat" "^2.0.2" "@nodelib/fs.walk" "^1.2.3" glob-parent "^5.1.2" merge2 "^1.3.0" - micromatch "^4.0.4" + micromatch "^4.0.8" fast-json-stable-stringify@^2.0.0: version "2.1.0" @@ -1158,10 +1214,15 @@ fast-levenshtein@^2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw== +fast-uri@^3.0.1: + version "3.0.6" + resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.6.tgz#88f130b77cfaea2378d56bf970dea21257a68748" + integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw== + fastq@^1.6.0: - version "1.13.0" - resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c" - integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw== + version "1.19.1" + resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.19.1.tgz#d50eaba803c8846a883c16492821ebcd2cda55f5" + integrity sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ== dependencies: reusify "^1.0.4" @@ -1172,20 +1233,20 @@ file-entry-cache@^6.0.1: dependencies: flat-cache "^3.0.4" -fill-range@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" - integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== +fill-range@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292" + integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg== dependencies: to-regex-range "^5.0.1" -finalhandler@1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32" - integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg== +finalhandler@1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019" + integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ== dependencies: debug "2.6.9" - encodeurl "~1.0.2" + encodeurl "~2.0.0" escape-html "~1.0.3" on-finished "2.4.1" parseurl "~1.3.3" @@ -1193,26 +1254,29 @@ finalhandler@1.2.0: unpipe "~1.0.0" flat-cache@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11" - integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg== + version "3.2.0" + resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee" + integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw== dependencies: - flatted "^3.1.0" + flatted "^3.2.9" + keyv "^4.5.3" rimraf "^3.0.2" -flatted@^3.1.0: - version "3.2.5" - resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3" - integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg== +flatted@^3.2.9: + version "3.3.3" + resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358" + integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg== form-data@^2.3.1: - version "2.5.1" - resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4" - integrity sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA== + version "2.5.3" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.3.tgz#f9bcf87418ce748513c0c3494bb48ec270c97acc" + integrity sha512-XHIrMD0NpDrNM/Ckf7XJiBbLl57KEhT3+i3yY+eWm+cqYZJQTZrKo8Y8AWKnuV5GT4scfuUGt9LzNoIx3dU1nQ== dependencies: asynckit "^0.4.0" - combined-stream "^1.0.6" - mime-types "^2.1.12" + combined-stream "^1.0.8" + es-set-tostringtag "^2.1.0" + mime-types "^2.1.35" + safe-buffer "^5.2.1" formidable@^1.2.0: version "1.2.6" @@ -1242,14 +1306,14 @@ fs.realpath@^1.0.0: integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== fsevents@~2.3.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" - integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + version "2.3.3" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== -function-bind@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" - integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== +function-bind@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c" + integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA== functional-red-black-tree@^1.0.1: version "1.0.1" @@ -1276,14 +1340,29 @@ get-caller-file@^2.0.5: resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== -get-intrinsic@^1.0.2: - version "1.1.1" - resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6" - integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q== +get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01" + integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ== + dependencies: + call-bind-apply-helpers "^1.0.2" + es-define-property "^1.0.1" + es-errors "^1.3.0" + es-object-atoms "^1.1.1" + function-bind "^1.1.2" + get-proto "^1.0.1" + gopd "^1.2.0" + has-symbols "^1.1.0" + hasown "^2.0.2" + math-intrinsics "^1.1.0" + +get-proto@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1" + integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g== dependencies: - function-bind "^1.1.1" - has "^1.0.3" - has-symbols "^1.0.1" + dunder-proto "^1.0.1" + es-object-atoms "^1.0.0" get-stream@^4.0.0: version "4.1.0" @@ -1312,9 +1391,9 @@ glob@^7.0.5, glob@^7.1.3: path-is-absolute "^1.0.0" globals@^13.6.0, globals@^13.9.0: - version "13.15.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-13.15.0.tgz#38113218c907d2f7e98658af246cef8b77e90bac" - integrity sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog== + version "13.24.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171" + integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ== dependencies: type-fest "^0.20.2" @@ -1330,6 +1409,11 @@ globby@^11.0.3: merge2 "^1.4.1" slash "^3.0.0" +gopd@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1" + integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg== + has-flag@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" @@ -1340,22 +1424,29 @@ has-flag@^4.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== -has-symbols@^1.0.1: - version "1.0.3" - resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8" - integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A== +has-symbols@^1.0.3, has-symbols@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338" + integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ== + +has-tostringtag@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc" + integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw== + dependencies: + has-symbols "^1.0.3" has-unicode@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9" integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ== -has@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" - integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== +hasown@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003" + integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ== dependencies: - function-bind "^1.1.1" + function-bind "^1.1.2" http-errors@2.0.0: version "2.0.0" @@ -1388,25 +1479,20 @@ iconv-lite@0.4.24: dependencies: safer-buffer ">= 2.1.2 < 3" -ieee754@^1.1.13: - version "1.2.1" - resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" - integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== - ignore@^4.0.6: version "4.0.6" resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== ignore@^5.1.8, ignore@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a" - integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ== + version "5.3.2" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5" + integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g== import-fresh@^3.0.0, import-fresh@^3.2.1: - version "3.3.0" - resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" - integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw== + version "3.3.1" + resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf" + integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ== dependencies: parent-module "^1.0.0" resolve-from "^4.0.0" @@ -1429,11 +1515,6 @@ inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, i resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== -inherits@2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" - integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw== - internal-ip@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907" @@ -1459,12 +1540,12 @@ is-binary-path@~2.1.0: dependencies: binary-extensions "^2.0.0" -is-core-module@^2.8.1: - version "2.9.0" - resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69" - integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A== +is-core-module@^2.16.0: + version "2.16.1" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4" + integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w== dependencies: - has "^1.0.3" + hasown "^2.0.2" is-extglob@^2.1.1: version "2.1.1" @@ -1521,6 +1602,11 @@ js-yaml@^3.13.1: argparse "^1.0.7" esprima "^4.0.0" +json-buffer@3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13" + integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ== + json-schema-traverse@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" @@ -1541,6 +1627,13 @@ kareem@2.3.2: resolved "https://registry.yarnpkg.com/kareem/-/kareem-2.3.2.tgz#78c4508894985b8d38a0dc15e1a8e11078f2ca93" integrity sha512-STHz9P7X2L4Kwn72fA4rGyqyXdmrMSdxqHx9IXon/FXluXieaFA6KJ2upcHAHxQPQ0LeM/OjLrhFxifHewOALQ== +keyv@^4.5.3: + version "4.5.4" + resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93" + integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw== + dependencies: + json-buffer "3.0.1" + levn@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade" @@ -1559,13 +1652,6 @@ lodash.truncate@^4.4.2: resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193" integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw== -lru-cache@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94" - integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA== - dependencies: - yallist "^4.0.0" - make-dir@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" @@ -1578,6 +1664,11 @@ make-error@^1.1.1: resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2" integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw== +math-intrinsics@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9" + integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g== + media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -1588,10 +1679,10 @@ memory-pager@^1.0.2: resolved "https://registry.yarnpkg.com/memory-pager/-/memory-pager-1.5.0.tgz#d8751655d22d384682741c972f2c3d6dfa3e66b5" integrity sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg== -merge-descriptors@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" - integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w== +merge-descriptors@1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5" + integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ== merge2@^1.3.0, merge2@^1.4.1: version "1.4.1" @@ -1603,12 +1694,12 @@ methods@^1.1.1, methods@~1.1.2: resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w== -micromatch@^4.0.4: - version "4.0.5" - resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6" - integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA== +micromatch@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202" + integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA== dependencies: - braces "^3.0.2" + braces "^3.0.3" picomatch "^2.3.1" mime-db@1.52.0: @@ -1616,7 +1707,7 @@ mime-db@1.52.0: resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== -mime-types@^2.1.12, mime-types@~2.1.24, mime-types@~2.1.34: +mime-types@^2.1.35, mime-types@~2.1.24, mime-types@~2.1.34: version "2.1.35" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== @@ -1636,17 +1727,22 @@ minimatch@^3.0.3, minimatch@^3.0.4, minimatch@^3.1.1: brace-expansion "^1.1.7" minimist@>=1.2.2, minimist@^1.2.5: - version "1.2.6" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" - integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== + version "1.2.8" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c" + integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA== minipass@^3.0.0: - version "3.1.6" - resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.6.tgz#3b8150aa688a711a1521af5e8779c1d3bb4f45ee" - integrity sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ== + version "3.3.6" + resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a" + integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw== dependencies: yallist "^4.0.0" +minipass@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d" + integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ== + minizlib@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931" @@ -1660,10 +1756,10 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -mongodb@3.7.3: - version "3.7.3" - resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-3.7.3.tgz#b7949cfd0adc4cc7d32d3f2034214d4475f175a5" - integrity sha512-Psm+g3/wHXhjBEktkxXsFMZvd3nemI0r3IPsE0bU+4//PnvNWKkzhZcEsbPcYiWqe8XqXJJEg4Tgtr7Raw67Yw== +mongodb@3.7.4: + version "3.7.4" + resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-3.7.4.tgz#119530d826361c3e12ac409b769796d6977037a4" + integrity sha512-K5q8aBqEXMwWdVNh94UQTwZ6BejVbFhh1uB6c5FKtPE9eUMZPUO3sRZdgIEcHSrAWmxzpG/FeODDKL388sqRmw== dependencies: bl "^2.2.1" bson "^1.1.4" @@ -1679,15 +1775,15 @@ mongoose-legacy-pluralize@1.0.2: integrity sha512-Yo/7qQU4/EyIS8YDFSeenIvXxZN+ld7YdV9LqFVQJzTLye8unujAWPZ4NWKfFA+RNjh+wvTWKY9Z3E5XM6ZZiQ== mongoose@^5.11.3: - version "5.13.14" - resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-5.13.14.tgz#ffc9704bd022dd018fbddcbe27dc802c77719fb4" - integrity sha512-j+BlQjjxgZg0iWn42kLeZTB91OejcxWpY2Z50bsZTiKJ7HHcEtcY21Godw496GMkBqJMTzmW7G/kZ04mW+Cb7Q== + version "5.13.23" + resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-5.13.23.tgz#befbe2f82247b0057c145900be871f37147d7f27" + integrity sha512-Q5bo1yYOcH2wbBPP4tGmcY5VKsFkQcjUDh66YjrbneAFB3vNKQwLvteRFLuLiU17rA5SDl3UMcMJLD9VS8ng2Q== dependencies: "@types/bson" "1.x || 4.0.x" "@types/mongodb" "^3.5.27" bson "^1.1.4" kareem "2.3.2" - mongodb "3.7.3" + mongodb "3.7.4" mongoose-legacy-pluralize "1.0.2" mpath "0.8.4" mquery "3.2.5" @@ -1724,7 +1820,7 @@ ms@2.1.2: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -ms@2.1.3, ms@^2.1.1: +ms@2.1.3, ms@^2.1.1, ms@^2.1.3: version "2.1.3" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== @@ -1754,22 +1850,22 @@ nice-try@^1.0.4: resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== -node-addon-api@^3.1.0: - version "3.2.1" - resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161" - integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A== +node-addon-api@^5.0.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.1.0.tgz#49da1ca055e109a23d537e9de43c09cca21eb762" + integrity sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA== node-fetch@^2.6.7: - version "2.6.7" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" - integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ== + version "2.7.0" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d" + integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A== dependencies: whatwg-url "^5.0.0" node-os-utils@^1.2.0: - version "1.3.6" - resolved "https://registry.yarnpkg.com/node-os-utils/-/node-os-utils-1.3.6.tgz#92ec217972436df67b677f9c939aac57eda2804c" - integrity sha512-WympE9ELtdOzNak/rAuuIV5DwvX/PTJtN0LjyWeGyTTR2Kt0sY56ldLoGbVBnfM1dz46VeO3sHcNZI5BZ+EB+w== + version "1.3.7" + resolved "https://registry.yarnpkg.com/node-os-utils/-/node-os-utils-1.3.7.tgz#77cc341ae39584e12d3aadf6046fe420ff4c9340" + integrity sha512-fvnX9tZbR7WfCG5BAy3yO/nCLyjVWD6MghEq0z5FDfN+ZXpLWNITBdbifxQkQ25ebr16G0N7eRWJisOcMEHG3Q== noms@0.0.0: version "0.0.0" @@ -1818,10 +1914,10 @@ object-assign@^4, object-assign@^4.1.1: resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== -object-inspect@^1.9.0: - version "1.12.2" - resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea" - integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ== +object-inspect@^1.13.3: + version "1.13.4" + resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213" + integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew== on-finished@2.4.1: version "2.4.1" @@ -1850,16 +1946,16 @@ optional-require@^1.1.8: require-at "^1.0.6" optionator@^0.9.1: - version "0.9.1" - resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499" - integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw== + version "0.9.4" + resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734" + integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g== dependencies: deep-is "^0.1.3" fast-levenshtein "^2.0.6" levn "^0.4.1" prelude-ls "^1.2.1" type-check "^0.4.0" - word-wrap "^1.2.3" + word-wrap "^1.2.5" p-finally@^1.0.0: version "1.0.0" @@ -1898,31 +1994,27 @@ path-parse@^1.0.7: resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== -path-to-regexp@0.1.7: - version "0.1.7" - resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" - integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ== +path-to-regexp@0.1.12: + version "0.1.12" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7" + integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ== path-type@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -path@^0.12.7: - version "0.12.7" - resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f" - integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q== - dependencies: - process "^0.11.1" - util "^0.10.3" - phaser@^3.55.2: - version "3.55.2" - resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.55.2.tgz#c1e2e9e70de7085502885e06f46b7eb4bd95e29a" - integrity sha512-amKXsbb2Ht29dGPKvt1edq3yGGYKtq8373GpJYGKPNPnneYY6MtVTOgjHDuZwtmUyK4v86FugkT3hzW/N4tjxQ== + version "3.90.0" + resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.90.0.tgz#a281b2e5e67ec3638cbf73ea3bbfe72b52c4e7de" + integrity sha512-/cziz/5ZIn02uDkC9RzN8VF9x3Gs3XdFFf9nkiMEQT3p7hQlWuyjy4QWosU802qqno2YSLn2BfqwOKLv/sSVfQ== dependencies: - eventemitter3 "^4.0.7" - path "^0.12.7" + eventemitter3 "^5.0.1" + +picocolors@^1.0.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: version "2.3.1" @@ -1939,11 +2031,6 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== -process@^0.11.1: - version "0.11.10" - resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" - integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== - progress@^2.0.0: version "2.0.3" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8" @@ -1958,24 +2045,31 @@ proxy-addr@~2.0.7: ipaddr.js "1.9.1" pump@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64" - integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww== + version "3.0.3" + resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.3.tgz#151d979f1a29668dc0025ec589a455b53282268d" + integrity sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA== dependencies: end-of-stream "^1.1.0" once "^1.3.1" punycode@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" - integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== + version "2.3.1" + resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5" + integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg== -qs@6.10.3, qs@^6.5.1: - version "6.10.3" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e" - integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ== +qs@6.13.0: + version "6.13.0" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906" + integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg== dependencies: - side-channel "^1.0.4" + side-channel "^1.0.6" + +qs@^6.5.1: + version "6.14.0" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.14.0.tgz#c63fa40680d2c5c941412a0e899c89af60c0a930" + integrity sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w== + dependencies: + side-channel "^1.1.0" queue-microtask@^1.2.2: version "1.2.3" @@ -1987,10 +2081,10 @@ range-parser@~1.2.1: resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg== -raw-body@2.5.1: - version "2.5.1" - resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857" - integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig== +raw-body@2.5.2: + version "2.5.2" + resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a" + integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA== dependencies: bytes "3.1.2" http-errors "2.0.0" @@ -1998,9 +2092,9 @@ raw-body@2.5.1: unpipe "1.0.0" readable-stream@^2.3.5, readable-stream@~2.3.6: - version "2.3.7" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57" - integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw== + version "2.3.8" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b" + integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA== dependencies: core-util-is "~1.0.0" inherits "~2.0.3" @@ -2011,9 +2105,9 @@ readable-stream@^2.3.5, readable-stream@~2.3.6: util-deprecate "~1.0.1" readable-stream@^3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198" - integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA== + version "3.6.2" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967" + integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA== dependencies: inherits "^2.0.3" string_decoder "^1.1.1" @@ -2022,7 +2116,7 @@ readable-stream@^3.6.0: readable-stream@~1.0.31: version "1.0.34" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" - integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw= + integrity sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg== dependencies: core-util-is "~1.0.0" inherits "~2.0.1" @@ -2036,29 +2130,37 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" -redis-commands@^1.2.0: +redis-commands@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.7.0.tgz#15a6fea2d58281e27b1cd1acfb4b293e278c3a89" integrity sha512-nJWqw3bTFy21hX/CPKHth6sfhZbdiHP6bTawSgQBlKOVRG7EZkfHbbHwQJnrE4vsQf0CMNE+3gJ4Fmm16vdVlQ== -redis-parser@^2.6.0: - version "2.6.0" - resolved "https://registry.yarnpkg.com/redis-parser/-/redis-parser-2.6.0.tgz#52ed09dacac108f1a631c07e9b69941e7a19504b" - integrity sha1-Uu0J2srBCPGmMcB+m2mUHnoZUEs= +redis-errors@^1.0.0, redis-errors@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/redis-errors/-/redis-errors-1.2.0.tgz#eb62d2adb15e4eaf4610c04afe1529384250abad" + integrity sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w== -redis@^2.8.0: - version "2.8.0" - resolved "https://registry.yarnpkg.com/redis/-/redis-2.8.0.tgz#202288e3f58c49f6079d97af7a10e1303ae14b02" - integrity sha512-M1OkonEQwtRmZv4tEWF2VgpG0JWJ8Fv1PhlgT5+B+uNq2cA3Rt1Yt/ryoR+vQNOQcIEgdCdfH0jr3bDpihAw1A== +redis-parser@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/redis-parser/-/redis-parser-3.0.0.tgz#b66d828cdcafe6b4b8a428a7def4c6bcac31c8b4" + integrity sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A== + dependencies: + redis-errors "^1.0.0" + +redis@^3.1.1: + version "3.1.2" + resolved "https://registry.yarnpkg.com/redis/-/redis-3.1.2.tgz#766851117e80653d23e0ed536254677ab647638c" + integrity sha512-grn5KoZLr/qrRQVwoSkmzdbw6pwF+/rwODtrOr6vuBRiR/f3rjSTGupbF90Zpqm2oenix8Do6RV7pYEkGwlKkw== dependencies: - double-ended-queue "^2.1.0-0" - redis-commands "^1.2.0" - redis-parser "^2.6.0" + denque "^1.5.0" + redis-commands "^1.7.0" + redis-errors "^1.2.0" + redis-parser "^3.0.0" regenerator-runtime@^0.13.7: - version "0.13.9" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" - integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA== + version "0.13.11" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" + integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== regexp-clone@1.0.0, regexp-clone@^1.0.0: version "1.0.0" @@ -2078,7 +2180,7 @@ require-at@^1.0.6: require-directory@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" - integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I= + integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q== require-from-string@^2.0.2: version "2.0.2" @@ -2091,18 +2193,18 @@ resolve-from@^4.0.0: integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== resolve@^1.0.0: - version "1.22.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" - integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw== + version "1.22.10" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39" + integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w== dependencies: - is-core-module "^2.8.1" + is-core-module "^2.16.0" path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" reusify@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" - integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== + version "1.1.0" + resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.1.0.tgz#0fe13b9522e1473f51b558ee796e08f11f9b489f" + integrity sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw== rimraf@^2.6.1, rimraf@^2.7.1: version "2.7.1" @@ -2130,7 +2232,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== -safe-buffer@5.2.1, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0: +safe-buffer@5.2.1, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.1, safe-buffer@~5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== @@ -2148,26 +2250,24 @@ saslprep@^1.0.0: sparse-bitfield "^3.0.3" semver@^5.5.0: - version "5.7.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" - integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== + version "5.7.2" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" + integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== semver@^6.0.0: - version "6.3.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== + version "6.3.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== semver@^7.2.1, semver@^7.3.5: - version "7.3.7" - resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f" - integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g== - dependencies: - lru-cache "^6.0.0" + version "7.7.2" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58" + integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA== -send@0.18.0: - version "0.18.0" - resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be" - integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg== +send@0.19.0: + version "0.19.0" + resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8" + integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw== dependencies: debug "2.6.9" depd "2.0.0" @@ -2183,20 +2283,20 @@ send@0.18.0: range-parser "~1.2.1" statuses "2.0.1" -serve-static@1.15.0: - version "1.15.0" - resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540" - integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g== +serve-static@1.16.2: + version "1.16.2" + resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296" + integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw== dependencies: - encodeurl "~1.0.2" + encodeurl "~2.0.0" escape-html "~1.0.3" parseurl "~1.3.3" - send "0.18.0" + send "0.19.0" set-blocking@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" - integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= + integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw== setprototypeof@1.2.0: version "1.2.0" @@ -2206,7 +2306,7 @@ setprototypeof@1.2.0: shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" - integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo= + integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg== dependencies: shebang-regex "^1.0.0" @@ -2220,21 +2320,52 @@ shebang-command@^2.0.0: shebang-regex@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3" - integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM= + integrity sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ== shebang-regex@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172" integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== -side-channel@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf" - integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw== +side-channel-list@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad" + integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA== + dependencies: + es-errors "^1.3.0" + object-inspect "^1.13.3" + +side-channel-map@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42" + integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA== dependencies: - call-bind "^1.0.0" - get-intrinsic "^1.0.2" - object-inspect "^1.9.0" + call-bound "^1.0.2" + es-errors "^1.3.0" + get-intrinsic "^1.2.5" + object-inspect "^1.13.3" + +side-channel-weakmap@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea" + integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A== + dependencies: + call-bound "^1.0.2" + es-errors "^1.3.0" + get-intrinsic "^1.2.5" + object-inspect "^1.13.3" + side-channel-map "^1.0.1" + +side-channel@^1.0.6, side-channel@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9" + integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw== + dependencies: + es-errors "^1.3.0" + object-inspect "^1.13.3" + side-channel-list "^1.0.0" + side-channel-map "^1.0.1" + side-channel-weakmap "^1.0.2" sift@13.5.2: version "13.5.2" @@ -2263,7 +2394,7 @@ slice-ansi@^4.0.0: sliced@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/sliced/-/sliced-1.0.1.tgz#0b3a662b5d04c3177b1926bea82b03f837a2ef41" - integrity sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E= + integrity sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA== source-map-support@^0.5.12, source-map-support@^0.5.17: version "0.5.21" @@ -2281,14 +2412,14 @@ source-map@^0.6.0: sparse-bitfield@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz#ff4ae6e68656056ba4b3e792ab3334d38273ca11" - integrity sha1-/0rm5oZWBWuks+eSqzM004JzyhE= + integrity sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ== dependencies: memory-pager "^1.0.2" sprintf-js@~1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" - integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= + integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g== statuses@2.0.1: version "2.0.1" @@ -2314,7 +2445,7 @@ string_decoder@^1.1.1: string_decoder@~0.10.x: version "0.10.31" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" - integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ= + integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ== string_decoder@~1.1.1: version "1.1.1" @@ -2333,17 +2464,17 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1: strip-bom@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3" - integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM= + integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA== strip-eof@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" - integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8= + integrity sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q== strip-json-comments@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" - integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= + integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ== strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: version "3.1.1" @@ -2386,9 +2517,9 @@ supports-preserve-symlinks-flag@^1.0.0: integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== table@^6.0.9: - version "6.8.0" - resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca" - integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA== + version "6.9.0" + resolved "https://registry.yarnpkg.com/table/-/table-6.9.0.tgz#50040afa6264141c7566b3b81d4d82c47a8668f5" + integrity sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A== dependencies: ajv "^8.0.1" lodash.truncate "^4.4.2" @@ -2397,13 +2528,13 @@ table@^6.0.9: strip-ansi "^6.0.1" tar@^6.1.11: - version "6.1.11" - resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621" - integrity sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA== + version "6.2.1" + resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a" + integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A== dependencies: chownr "^2.0.0" fs-minipass "^2.0.0" - minipass "^3.0.0" + minipass "^5.0.0" minizlib "^2.1.1" mkdirp "^1.0.3" yallist "^4.0.0" @@ -2411,7 +2542,7 @@ tar@^6.1.11: text-table@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" - integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= + integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== through2@^2.0.1: version "2.0.5" @@ -2436,7 +2567,7 @@ toidentifier@1.0.1: tr46@~0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" - integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o= + integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== tree-kill@^1.2.2: version "1.2.2" @@ -2498,9 +2629,9 @@ tslib@^1.8.1: integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== tslib@^2.1.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" - integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + version "2.8.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" + integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== tsutils@^3.21.0: version "3.21.0" @@ -2530,14 +2661,19 @@ type-is@~1.6.18: mime-types "~2.1.24" typescript@^4.8.2: - version "4.8.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.2.tgz#e3b33d5ccfb5914e4eeab6699cf208adee3fd790" - integrity sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw== + version "4.9.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" + integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== + +undici-types@~7.8.0: + version "7.8.0" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.8.0.tgz#de00b85b710c54122e44fbfd911f8d70174cd294" + integrity sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw== unpipe@1.0.0, unpipe@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" - integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw= + integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ== untildify@^4.0.0: version "4.0.0" @@ -2554,19 +2690,12 @@ uri-js@^4.2.2: util-deprecate@^1.0.1, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" - integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= - -util@^0.10.3: - version "0.10.4" - resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901" - integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A== - dependencies: - inherits "2.0.3" + integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== utils-merge@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" - integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM= + integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA== uuid@^11.1.0: version "11.1.0" @@ -2574,24 +2703,24 @@ uuid@^11.1.0: integrity sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A== v8-compile-cache@^2.0.3: - version "2.3.0" - resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee" - integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA== + version "2.4.0" + resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128" + integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw== vary@^1, vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" - integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= + integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== webidl-conversions@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" - integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE= + integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ== whatwg-url@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" - integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0= + integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw== dependencies: tr46 "~0.0.3" webidl-conversions "^3.0.0" @@ -2617,10 +2746,10 @@ wide-align@^1.1.2: dependencies: string-width "^1.0.2 || 2 || 3 || 4" -word-wrap@^1.2.3: - version "1.2.3" - resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" - integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== +word-wrap@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" + integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== wrap-ansi@^7.0.0: version "7.0.0" @@ -2634,12 +2763,12 @@ wrap-ansi@^7.0.0: wrappy@1: version "1.0.2" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" - integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= + integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== ws@^7.4.5: - version "7.5.8" - resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.8.tgz#ac2729881ab9e7cbaf8787fe3469a48c5c7f636a" - integrity sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw== + version "7.5.10" + resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9" + integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ== xtend@^4.0.0, xtend@~4.0.1: version "4.0.2" From e5cdd02f37744cc43647e5b43ff680c4fda04aa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 1 Jul 2025 13:53:13 +0900 Subject: [PATCH 10/11] fix conflict --- CLAUDE.md | 48 +- client/src/App.tsx | 83 +- client/src/components/MeetingRoomChat.tsx | 20 +- client/src/components/RoomSelectionDialog.tsx | 3 +- client/src/events/EventCenter.ts | 3 + client/src/hooks/useGameContent.ts | 17 + client/src/scenes/Game.ts | 17 +- client/src/scenes/MeetingRoom.ts | 391 ++--- client/src/services/Network.ts | 1288 +++++------------ client/src/stores/MeetingRoomStore.ts | 30 + client/src/stores/index.ts | 6 - client/src/web/ShareScreenManager.ts | 2 +- client/src/web/WebRTC.ts | 11 + docs/README.md | 101 ++ docs/features/meeting-room-chat.md | 309 ++++ .../2025-07-01_dialog-positioning-fix.md | 157 ++ .../2025-07-01_meeting-room-chat-rendering.md | 120 ++ .../troubleshooting/css-positioning-issues.md | 262 ++++ server/rooms/SkyOffice.ts | 97 +- server/rooms/schema/OfficeState.ts | 53 +- types/IOfficeState.ts | 39 +- types/Messages.ts | 36 +- 22 files changed, 1672 insertions(+), 1421 deletions(-) create mode 100644 docs/README.md create mode 100644 docs/features/meeting-room-chat.md create mode 100644 docs/fixes/2025-07-01_dialog-positioning-fix.md create mode 100644 docs/fixes/2025-07-01_meeting-room-chat-rendering.md create mode 100644 docs/troubleshooting/css-positioning-issues.md diff --git a/CLAUDE.md b/CLAUDE.md index 1fa6c2d7..35dd0732 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -333,5 +333,51 @@ import type { WorkStatus } from '../types' - **重要なログタグ**: `[MeetingRoomChat]`, `[Network]`, `[ChatStore]`, `[Server]` - **コンソール確認**: 送受信プロセスの詳細ログが出力される +## 📚 **ドキュメント体系** 🆕 + +### **新しいドキュメント管理システム** +- **場所**: `/docs/` ディレクトリ +- **開始日**: 2025-07-01 +- **目的**: 修正履歴、機能仕様、トラブルシューティングの体系的管理 + +### **ドキュメント構造** +``` +docs/ +├── README.md # ドキュメント体系の説明 +├── fixes/ # バグ修正・技術的問題 +│ ├── 2025-07-01_meeting-room-chat-rendering.md +│ └── 2025-07-01_dialog-positioning-fix.md +├── features/ # 機能実装ガイド +│ └── meeting-room-chat.md +├── troubleshooting/ # 共通問題と解決法 +│ └── css-positioning-issues.md +└── [future directories...] +``` + +### **命名規則** +- **修正履歴**: `YYYY-MM-DD_short-description.md` +- **機能仕様**: `feature-name.md` +- **トラブル**: `problem-category.md` + +### **最新の重要修正** 🆕 +1. **会議室チャットレンダリング問題** (2025-07-01) + - 原因: `position: absolute` → `position: fixed` + - 影響: React UI とPhaser Canvasの重なり問題 + +2. **ダイアログ位置ずれ問題** (2025-07-01) + - 原因: 同じCSS positioning問題 + - 解決: 全ダイアログの統一的修正 + +### **ベストプラクティス確立** 🆕 +- **ゲーム上のReact UI**: `position: fixed` + `z-index: 9999+` +- **修正の即座記録**: 問題解決と同時にドキュメント化 +- **パターン認識**: 共通問題のトラブルシューティングガイド作成 + +### **会議室チャット機能 - 完全実装済み** ✅ +- **状態**: 完全動作・本番利用可能 +- **主要修正**: CSS positioning問題解決 +- **機能**: リアルタイムチャット、権限管理、履歴、UI統合 +- **ドキュメント**: 完全仕様書作成済み (`docs/features/meeting-room-chat.md`) + --- -**最終更新**: 2025-06-23 - アーキテクチャ・リファクタリングガイド追加 \ No newline at end of file +**最終更新**: 2025-07-01 - ドキュメント体系導入・会議室チャット完全実装・CSS positioning問題解決 \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx index 14b5f155..344038cd 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,16 +1,12 @@ -mport React from 'react' +import React from 'react' import styled from 'styled-components' -<<<<<<< Updated upstream -import { useAppSelector } from './hooks' -======= -import { useAppDispatch } from './hooks' +import { useAppSelector, useAppDispatch } from './hooks' import { useAppNavigation } from './hooks/useAppNavigation' import { useModalManager } from './hooks/useModalManager' import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts' import { useGameContent } from './hooks/useGameContent' import { toggleDevMode } from './stores/DevModeStore' ->>>>>>> Stashed changes import RoomSelectionDialog from './components/RoomSelectionDialog' import LoginDialog from './components/LoginDialog' @@ -21,13 +17,10 @@ import Chat from './components/Chat' import HelperButtonGroup from './components/HelperButtonGroup' import MobileVirtualJoystick from './components/MobileVirtualJoystick' import MeetingRoomManager from './components/MeetingRoomManager' -<<<<<<< Updated upstream -======= import MeetingRoomChat from './components/MeetingRoomChat' import WorkStatusPanel from './components/WorkStatusPanel' import PlayerStatusModal from './components/PlayerStatusModal' import DevModePanel from './components/DevModePanel' ->>>>>>> Stashed changes const Backdrop = styled.div` position: absolute; @@ -35,61 +28,17 @@ const Backdrop = styled.div` width: 100%; ` -<<<<<<< Updated upstream -function App() { - const loggedIn = useAppSelector((state) => state.user.loggedIn) - const computerDialogOpen = useAppSelector((state) => state.computer.computerDialogOpen) - const whiteboardDialogOpen = useAppSelector((state) => state.whiteboard.whiteboardDialogOpen) - const videoConnected = useAppSelector((state) => state.user.videoConnected) - const roomJoined = useAppSelector((state) => state.room.roomJoined) - - let ui: JSX.Element - if (loggedIn) { - if (computerDialogOpen) { - /* Render ComputerDialog if user is using a computer. */ - ui = - } else if (whiteboardDialogOpen) { - /* Render WhiteboardDialog if user is using a whiteboard. */ - ui = - } else { - ui = ( - /* Render Chat or VideoConnectionDialog if no dialogs are opened. */ - <> - - {/* Render VideoConnectionDialog if user is not connected to a webcam. */} - {!videoConnected && } - - - - ) - } - } else if (roomJoined) { - /* Render LoginDialog if not logged in but selected a room. */ - ui = - } else { - /* Render RoomSelectionDialog if yet selected a room. */ - ui = -======= -/** - * リファクタリング後のApp.tsx - * 関心分離により各機能がカスタムフックに分離されている - */ function App() { const dispatch = useAppDispatch() - // ナビゲーション状態管理 const { currentView, shouldShowVideoDialog, shouldShowHelperButtons } = useAppNavigation() - - // モーダル状態管理 const { modals, playerStatus } = useModalManager() - // キーボードショートカット useKeyboardShortcuts({ onToggleDevMode: () => dispatch(toggleDevMode()), onOpenPlayerStatus: () => playerStatus.open() }) - // UI条件分岐の簡素化 const renderMainContent = () => { switch (currentView) { case 'room-selection': @@ -104,7 +53,6 @@ function App() { default: return } ->>>>>>> Stashed changes } return ( @@ -134,12 +82,39 @@ function App() { const MainGameContent = () => { const { isDevMode, currentMeetingRoomId, currentRoom, userCanSendMessages } = useGameContent() + // Force render debug info + console.log('🔄 [MainGameContent] Render check:', { + currentMeetingRoomId, + hasCurrentRoom: !!currentRoom, + currentRoomName: currentRoom?.name, + shouldShowChat: !!(currentMeetingRoomId && currentRoom), + userCanSendMessages + }) + return ( <> + {/* Debug visualization */} + {currentMeetingRoomId && ( +
+ Room ID: {currentMeetingRoomId}
+ Room Found: {currentRoom ? 'Yes' : 'No'}
+ Room Name: {currentRoom?.name || 'N/A'} +
+ )} {currentMeetingRoomId && currentRoom && ( = ({ useEffect(() => { if (meetingRoomId) { + console.log('🏠 [MeetingRoomChat] Entering room, making chat visible:', meetingRoomId) setIsVisible(true) // Request chat history when entering a room const game = phaserGame.scene.keys.game as Game if (game?.network) { + console.log('📜 [MeetingRoomChat] Requesting chat history for room:', meetingRoomId) game.network.getMeetingRoomChatHistory(meetingRoomId) } } else { + console.log('🚪 [MeetingRoomChat] No room ID, hiding chat') setIsVisible(false) } }, [meetingRoomId]) @@ -148,15 +151,27 @@ const MeetingRoomChat: React.FC = ({ } } + console.log('🔍 [MeetingRoomChat] Render check:', { + isVisible, + meetingRoomId, + roomName, + canSendMessages, + messageCount: meetingRoomChatMessages.length, + shouldRender: isVisible && meetingRoomId + }) + if (!isVisible || !meetingRoomId) { + console.log('❌ [MeetingRoomChat] Not rendering - isVisible:', isVisible, 'meetingRoomId:', meetingRoomId) return null } + console.log('✅ [MeetingRoomChat] Rendering chat component') + return ( = ({ backgroundColor: 'rgba(255, 255, 255, 0.95)', backdropFilter: 'blur(10px)', border: '1px solid rgba(0, 0, 0, 0.1)', - zIndex: 1000, + zIndex: 9999, + boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)', }} > {/* Header */} diff --git a/client/src/components/RoomSelectionDialog.tsx b/client/src/components/RoomSelectionDialog.tsx index 839a0970..6b72e5fe 100644 --- a/client/src/components/RoomSelectionDialog.tsx +++ b/client/src/components/RoomSelectionDialog.tsx @@ -18,7 +18,7 @@ import phaserGame from '../PhaserGame' import Bootstrap from '../scenes/Bootstrap' const Backdrop = styled.div` - position: absolute; + position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -26,6 +26,7 @@ const Backdrop = styled.div` flex-direction: column; gap: 60px; align-items: center; + z-index: 1000; ` const Wrapper = styled.div` diff --git a/client/src/events/EventCenter.ts b/client/src/events/EventCenter.ts index 0029477f..b003b174 100644 --- a/client/src/events/EventCenter.ts +++ b/client/src/events/EventCenter.ts @@ -14,4 +14,7 @@ export enum Event { ITEM_USER_ADDED = 'item-user-added', ITEM_USER_REMOVED = 'item-user-removed', UPDATE_DIALOG_BUBBLE = 'update-dialog-bubble', + ITEM_ADDED = 'item-added', + ITEM_REMOVED = 'item-removed', + JOINED_ROOM = 'joined-room', } diff --git a/client/src/hooks/useGameContent.ts b/client/src/hooks/useGameContent.ts index 1bc41842..f333155d 100644 --- a/client/src/hooks/useGameContent.ts +++ b/client/src/hooks/useGameContent.ts @@ -19,6 +19,23 @@ export const useGameContent = () => { ? canSendMessages(sessionId, currentRoom) : false + // Enhanced Debug logging + console.log('🐛 [useGameContent] Full state debug:', { + currentMeetingRoomId, + meetingRoomsCount: meetingRooms.length, + meetingRoomsArray: meetingRooms.map(r => ({ id: r.id, name: r.name, mode: r.mode })), + currentRoom: currentRoom ? { id: currentRoom.id, name: currentRoom.name } : null, + userCanSendMessages, + sessionId, + shouldShowChat: !!(currentMeetingRoomId && currentRoom) + }) + + // Log every time meeting room ID changes + if (currentMeetingRoomId) { + console.log('🏠 [useGameContent] Meeting room ID detected:', currentMeetingRoomId) + console.log('🔍 [useGameContent] Looking for room in:', meetingRooms.map(r => r.id)) + } + return { isDevMode, currentMeetingRoomId, diff --git a/client/src/scenes/Game.ts b/client/src/scenes/Game.ts index 182a6ba1..4031aae0 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -14,6 +14,7 @@ import MyPlayer from '../characters/MyPlayer' import OtherPlayer from '../characters/OtherPlayer' import PlayerSelector from '../characters/PlayerSelector' import Network from '../services/Network' +import { phaserEvents, Event } from '../events/EventCenter' import { IPlayer } from '../../../types/IOfficeState' import { PlayerBehavior } from '../../../types/PlayerBehavior' import { ItemType } from '../../../types/Items' @@ -217,14 +218,14 @@ export default class Game extends Phaser.Scene { //********************** // register network event listeners - this.network.onPlayerJoined(this.handlePlayerJoined, this) - this.network.onPlayerLeft(this.handlePlayerLeft, this) - this.network.onMyPlayerReady(this.handleMyPlayerReady, this) - this.network.onMyPlayerVideoConnected(this.handleMyVideoConnected, this) - this.network.onPlayerUpdated(this.handlePlayerUpdated, this) - this.network.onItemUserAdded(this.handleItemUserAdded, this) - this.network.onItemUserRemoved(this.handleItemUserRemoved, this) - this.network.onChatMessageAdded(this.handleChatMessageAdded, this) + phaserEvents.on(Event.PLAYER_JOINED, this.handlePlayerJoined, this) + phaserEvents.on(Event.PLAYER_LEFT, this.handlePlayerLeft, this) + phaserEvents.on(Event.MY_PLAYER_READY, this.handleMyPlayerReady, this) + phaserEvents.on(Event.MY_PLAYER_VIDEO_CONNECTED, this.handleMyVideoConnected, this) + phaserEvents.on(Event.PLAYER_UPDATED, this.handlePlayerUpdated, this) + phaserEvents.on(Event.ITEM_USER_ADDED, this.handleItemUserAdded, this) + phaserEvents.on(Event.ITEM_USER_REMOVED, this.handleItemUserRemoved, this) + phaserEvents.on('chat-message-added', this.handleChatMessageAdded, this) // CRITICAL: Ensure input is properly enabled console.log('🔧 [Game] Enabling input systems explicitly...') diff --git a/client/src/scenes/MeetingRoom.ts b/client/src/scenes/MeetingRoom.ts index 70e3c0dd..67390c03 100644 --- a/client/src/scenes/MeetingRoom.ts +++ b/client/src/scenes/MeetingRoom.ts @@ -5,25 +5,14 @@ import { MeetingRoom, MeetingRoomArea } from '../stores/MeetingRoomStore' import { setCurrentMeetingRoomId, pushMeetingRoomUserJoinedMessage, pushMeetingRoomUserLeftMessage } from '../stores/ChatStore' export class MeetingRoomManager { -<<<<<<< Updated upstream private scene: Phaser.Scene private myPlayer: MyPlayer - // meeting rooms and areas private rooms: MeetingRoom[] = [] + private canAccess: boolean = true private meetingRoomAreas: MeetingRoomArea[] = [] private meetingRoomZones: Phaser.GameObjects.Zone[] = [] private prevRooms: MeetingRoom[] = [] -======= - private scene: Phaser.Scene - private myPlayer: MyPlayer - // Meeting rooms and areas - private rooms: MeetingRoom[] = [] - private canAccess: boolean = true - private meetingRoomAreas: MeetingRoomArea[] = [] - private meetingRoomZones: Phaser.GameObjects.Zone[] = [] - private prevRooms: MeetingRoom[] = [] - private prevAreas: MeetingRoomArea[] = [] // Store previous areas for comparison ->>>>>>> Stashed changes + private prevAreas: MeetingRoomArea[] = [] //graphics for meeting room MeetingRoomAreas private meetAreaGraphics!: Phaser.GameObjects.Graphics @@ -34,25 +23,46 @@ export class MeetingRoomManager { this.scene = scene this.myPlayer = myPlayer this.initializeGraphics() - this.seupStoreSubscription() + this.setupStoreSubscription() } + private initializeGraphics() { this.meetAreaGraphics = this.scene.add.graphics() this.meetAreaOverlay = this.scene.add.graphics() } -<<<<<<< Updated upstream - private seupStoreSubscription() { + private setupStoreSubscription() { this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas + this.rooms = store.getState().meetingRoom.meetingRooms ?? [] + + console.log('🏗️ [MeetingRoomManager] Initial setup:', { + areasCount: this.meetingRoomAreas.length, + roomsCount: this.rooms.length, + areas: this.meetingRoomAreas.map(a => ({ id: a.meetingRoomId, x: a.x, y: a.y, w: a.width, h: a.height })), + rooms: this.rooms.map(r => ({ id: r.id, name: r.name, mode: r.mode })) + }) + + this.drawMeetingRoomAreas() + this.createMeetingRoomZones() + this.updatePrevStates() + store.subscribe(() => { - this.rooms = store.getState().meetingRoom.meetingRooms ?? [] - console.log('MeetingRoomManager: Rooms updated', this.rooms) - this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas ?? [] - this.drawMeetingRoomAreas() - this.createMeetingRoomZones() - - this.handleRoomUpdates() - this.updatePrevRooms() + const newRooms = store.getState().meetingRoom.meetingRooms ?? [] + const newAreas = store.getState().meetingRoom.meetingRoomAreas ?? [] + + if (this.hasAreasChanged(newAreas)) { + this.meetingRoomAreas = newAreas + this.drawMeetingRoomAreas() + this.createMeetingRoomZones() + } + + if (this.hasRoomsChanged(newRooms)) { + this.rooms = newRooms + this.handleRoomUpdates() + this.drawMeetingRoomAreas() + } + + this.updatePrevStates() }) } @@ -64,80 +74,69 @@ export class MeetingRoomManager { const nextId = area ? area.meetingRoomId : null if (nextId !== this.myPlayer.currentMeetingRoomId) { this.handleMeetingRoomTransition(nextId) -======= ->>>>>>> Stashed changes } } -<<<<<<< Updated upstream private handleMeetingRoomTransition(nextId: string | null): void { + console.log('🚪 [MeetingRoomManager] Room transition:', { + nextId, + availableRooms: this.rooms.map(r => ({ id: r.id, name: r.name })), + currentRoomId: this.myPlayer.currentMeetingRoomId, + playerPosition: { x: this.myPlayer.x, y: this.myPlayer.y }, + roomAreas: this.meetingRoomAreas.map(a => ({ + id: a.meetingRoomId, + area: `(${a.x}-${a.x + a.width}, ${a.y}-${a.y + a.height})` + })) + }) + if (nextId) { const room = this.rooms.find((r) => r.id === nextId) if (room) { -======= - private initializeGraphics() { - this.meetAreaGraphics = this.scene.add.graphics() - this.meetAreaOverlay = this.scene.add.graphics() + console.log('✅ [MeetingRoomManager] Entering room:', { id: room.id, name: room.name }) + this.myPlayer.currentMeetingRoomId = nextId + store.dispatch(setCurrentMeetingRoomId(nextId)) + this.scene.events.emit('enter-meeting-room', nextId) + } else { + console.warn('❌ [MeetingRoomManager] Room not found:', nextId) + } + } else { + const previousRoomId = this.myPlayer.currentMeetingRoomId + if (previousRoomId) { + console.log('🚪 [MeetingRoomManager] Leaving room:', previousRoomId) + this.myPlayer.currentMeetingRoomId = null + store.dispatch(setCurrentMeetingRoomId(null)) + this.scene.events.emit('leave-meeting-room', previousRoomId) + } } + } - private setupStoreSubscription() { - this.meetingRoomAreas = store.getState().meetingRoom.meetingRoomAreas - this.rooms = store.getState().meetingRoom.meetingRooms ?? [] - - // Initial rendering - this.drawMeetingRoomAreas() - this.createMeetingRoomZones() - this.updatePrevStates() - - store.subscribe(() => { - const newRooms = store.getState().meetingRoom.meetingRooms ?? [] - const newAreas = store.getState().meetingRoom.meetingRoomAreas ?? [] - - // Recreate areas and zones only when areas have changed - if (this.hasAreasChanged(newAreas)) { - this.meetingRoomAreas = newAreas - this.drawMeetingRoomAreas() - this.createMeetingRoomZones() - } - - // Update room processing only when rooms have changed - if (this.hasRoomsChanged(newRooms)) { - this.rooms = newRooms - this.handleRoomUpdates() // Handle room state changes and update signals - this.drawMeetingRoomAreas() // Redraw if access permissions have changed - } - - this.updatePrevStates() - }) + // Check if areas have changed + private hasAreasChanged(newAreas: MeetingRoomArea[]): boolean { + if (this.prevAreas.length !== newAreas.length) { + return true } - // Check if areas have changed - private hasAreasChanged(newAreas: MeetingRoomArea[]): boolean { - if (this.prevAreas.length !== newAreas.length) { - return true - } - - for (let i = 0; i < newAreas.length; i++) { - const newArea = newAreas[i] - const prevArea = this.prevAreas[i] - - if ( - !prevArea || - newArea.meetingRoomId !== prevArea.meetingRoomId || - newArea.x !== prevArea.x || - newArea.y !== prevArea.y || - newArea.width !== prevArea.width || - newArea.height !== prevArea.height - ) { - return true - } - } - - return false + for (let i = 0; i < newAreas.length; i++) { + const newArea = newAreas[i] + const prevArea = this.prevAreas[i] + + if ( + !prevArea || + newArea.meetingRoomId !== prevArea.meetingRoomId || + newArea.x !== prevArea.x || + newArea.y !== prevArea.y || + newArea.width !== prevArea.width || + newArea.height !== prevArea.height + ) { + return true + } } - // Check if rooms have changed - private hasRoomsChanged(newRooms: MeetingRoom[]): boolean { + return false + } + + // Check if rooms have changed + private hasRoomsChanged(newRooms: MeetingRoom[]): boolean { if (this.prevRooms.length !== newRooms.length) { return true } @@ -197,84 +196,7 @@ export class MeetingRoomManager { } } - checkPlayerInMeetingRoom(x: number, y: number): void { - const area = this.meetingRoomAreas.find( - (a) => x >= a.x && x <= a.x + a.width && y >= a.y && y <= a.y + a.height - ) - - const nextId = area ? area.meetingRoomId : null - if (nextId !== this.myPlayer.currentMeetingRoomId) { - this.handleMeetingRoomTransition(nextId) - this.updateCanAccessState() // Update state on room transition - } - } - - private handleMeetingRoomTransition(nextId: string | null): void { - if (nextId) { - const room = this.rooms.find((r) => r.id === nextId) - if (room) { - const myUserId = this.myPlayer.playerId - - if (room.mode === 'private') { - if ( - (room.hostUserId !== myUserId && !Array.isArray(room.invitedUsers)) || - !room.invitedUsers.includes(myUserId) - ) { - console.log('[MeetingRoomManager] You are not invited to this private room') - return - } else { - console.log('[MeetingRoomManager] You are entering a private room') - this.myPlayer.currentMeetingRoomId = nextId - } - } else if (room.mode === 'secret') { - if (room.hostUserId !== myUserId) { - console.log('[MeetingRoomManager] You are not allowed to enter this secret room') - return - } else { - console.log('[MeetingRoomManager] You are entering a secret room') - this.myPlayer.currentMeetingRoomId = nextId - } - } else { - console.log('[MeetingRoomManager] You are entering an open room') - this.myPlayer.currentMeetingRoomId = nextId - } - - // Update chat store with current meeting room - store.dispatch(setCurrentMeetingRoomId(nextId)) - - // Add user joined message to meeting room chat - store.dispatch(pushMeetingRoomUserJoinedMessage({ - meetingRoomId: nextId, - userName: this.myPlayer.name || this.myPlayer.playerId - })) - - // Trigger meeting room enter event - this.scene.events.emit('enter-meeting-room', nextId, room) - } - } else { - console.log('[MeetingRoomManager] You are leaving the meeting room') - const previousRoomId = this.myPlayer.currentMeetingRoomId - - if (previousRoomId) { - // Add user left message to meeting room chat - store.dispatch(pushMeetingRoomUserLeftMessage({ - meetingRoomId: previousRoomId, - userName: this.myPlayer.name || this.myPlayer.playerId - })) - } - - this.myPlayer.currentMeetingRoomId = null - - // Update chat store - no longer in a meeting room - store.dispatch(setCurrentMeetingRoomId(null)) - - // Trigger meeting room leave event - this.scene.events.emit('leave-meeting-room', previousRoomId) - } - } - private canAccessMeetingRoom(room: MeetingRoom): boolean { ->>>>>>> Stashed changes const myUserId = this.myPlayer.playerId if (room.mode === 'private') { @@ -282,52 +204,16 @@ export class MeetingRoomManager { (room.hostUserId !== myUserId && !Array.isArray(room.invitedUsers)) || !room.invitedUsers.includes(myUserId) ) { - console.log('[MeetingRoomManager] You are not invited to this private room') - return - } else { - console.log('[MeetingRoomManager] You are entering a private room') - this.myPlayer.currentMeetingRoomId = nextId + return false } } else if (room.mode === 'secret') { if (room.hostUserId !== myUserId) { - console.log('[MeetingRoomManager] You are not allowed to enter this secret room') - return - } else { - console.log('[MeetingRoomManager] You are entering a secret room') - this.myPlayer.currentMeetingRoomId = nextId + return false } - } else { - console.log('[MeetingRoomManager] You are entering an open room') - this.myPlayer.currentMeetingRoomId = nextId } - - // trigger meeting room enter event - this.scene.events.emit('enter-meeting-room', nextId, room) - } - } else { - console.log('[MeetingRoomManager] You are leaving the meeting room') - const previousRoomId = this.myPlayer.currentMeetingRoomId - this.myPlayer.currentMeetingRoomId = null - - // trigger meeting room leave event - this.scene.events.emit('leave-meeting-room', previousRoomId) - } - } - - private canAccessMeetingRoom(room: MeetingRoom): boolean { - const myUserId = this.myPlayer.playerId - - if (room.mode === 'private') { - return ( - room.hostUserId === myUserId || - (Array.isArray(room.invitedUsers) && room.invitedUsers.includes(myUserId)) - ) - } else if (room.mode === 'secret') { - return room.hostUserId === myUserId - } else { - return true // open room + + return true } - } private createMeetingRoomZones(): void { // delete existing colliders and zones @@ -365,47 +251,8 @@ export class MeetingRoomManager { console.log('[MeetingRoomManager] Created zones:', this.meetingRoomZones.length) } - private drawMeetingRoomAreas(): void { - this.meetAreaGraphics.clear() - this.meetAreaOverlay.clear() - - this.meetAreaGraphics.setDepth(1000) - this.meetAreaOverlay.setDepth(1001) - - for (const area of this.meetingRoomAreas) { - const room = this.rooms.find((r) => r.id === area.meetingRoomId) - - if (room) { - const canAccess = this.canAccessMeetingRoom(room) - - if (canAccess) { - // can access green border - this.meetAreaGraphics.lineStyle(3, 0x00ff00, 1) - this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) - } else { - // cannot access - red border - this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) - this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) - - this.meetAreaOverlay.fillStyle(0x808080, 0.6) - this.meetAreaOverlay.fillRect(area.x, area.y, area.width, area.height) - - this.showRestrictedText(area) - } -<<<<<<< Updated upstream - } else { - // If room not found, draw a red border - this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) -======= - this.meetingRoomColliders.clear() - - for (const zone of this.meetingRoomZones) { - zone.destroy() - } - this.meetingRoomZones = [] - } - private drawMeetingRoomAreas(): void { + private drawMeetingRoomAreas(): void { // Don't draw if in visual edit mode if (this.isVisualEditMode) { console.log('🎯 [MeetingRoomManager] Skipping drawing - in visual edit mode') @@ -425,6 +272,8 @@ export class MeetingRoomManager { this.drawMeetingRoomArea(area) } } + + console.log('[MeetingRoomManager] Drew room areas:', this.meetingRoomAreas.length) } // Methods to hide/show room areas for visual editing mode @@ -442,7 +291,6 @@ export class MeetingRoomManager { this.isVisualEditMode = false this.meetAreaGraphics.setVisible(true) this.meetAreaOverlay.setVisible(true) - // Redraw after exiting visual edit mode this.drawMeetingRoomAreas() } @@ -453,21 +301,14 @@ export class MeetingRoomManager { const canAccess = this.canAccessMeetingRoom(room) if (canAccess) { - // 緑の枠線（アクセス可能） this.meetAreaGraphics.lineStyle(3, 0x00ff00, 1) } else { - // 赤の枠線（アクセス不可） this.meetAreaGraphics.lineStyle(3, 0xff0000, 1) this.showRestrictedText(area) } - ->>>>>>> Stashed changes this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) - } } - console.log('[MeetingRoomManager] Drew room areas:', this.meetingRoomAreas.length) - } private showRestrictedText(area: MeetingRoomArea): void { const centerX = area.x + area.width / 2 const centerY = area.y + area.height / 2 @@ -531,55 +372,19 @@ export class MeetingRoomManager { update(): void {} + private updatePrevStates(): void { + this.prevRooms = JSON.parse(JSON.stringify(this.rooms)) + this.prevAreas = JSON.parse(JSON.stringify(this.meetingRoomAreas)) + } + destroy(): void { for (const collider of this.meetingRoomColliders.values()) { collider.destroy() } -<<<<<<< Updated upstream this.meetingRoomColliders.clear() for (const zone of this.meetingRoomZones) { zone.destroy() -======= - private handleRoomUpdates(): void { - console.log('[MeetingRoomManager] handleRoomUpdates called') - - // Process each room for access permission changes - for (const room of this.rooms) { - const prevRoom = this.prevRooms.find((r) => r.id === room.id) - if (!prevRoom) continue // If the room is new, skip - - // Check if access permission has changed - const prevCanAccess = this.canAccessMeetingRoom(prevRoom) - const nowCanAccess = this.canAccessMeetingRoom(room) - - if (prevCanAccess !== nowCanAccess) { - console.log( - `[MeetingRoomManager] Access permission changed for room ${room.id}: ${prevCanAccess} → ${nowCanAccess}` - ) - - // Update state when room permission changes - this.canAccess = nowCanAccess - this.scene.events.emit('meeting-room-access-changed', { - roomId: room.id, - canAccess: nowCanAccess - }) - - this.onMeetingRoomPermissionChanged(room.id, nowCanAccess) - } - - // Check mode change from private/secret to open - if ((prevRoom.mode === 'private' || prevRoom.mode === 'secret') && room.mode === 'open') { - console.log(`[MeetingRoomManager] Room ${room.id} changed to open mode`) - this.canAccess = true - this.scene.events.emit('meeting-room-access-changed', { - roomId: room.id, - canAccess: true - }) - this.onMeetingRoomPermissionChanged(room.id, true) - } - } ->>>>>>> Stashed changes } this.meetingRoomZones = [] @@ -587,7 +392,3 @@ export class MeetingRoomManager { this.meetAreaOverlay?.destroy() } } -<<<<<<< Updated upstream -======= - ->>>>>>> Stashed changes diff --git a/client/src/services/Network.ts b/client/src/services/Network.ts index 8712a28d..e35bad4f 100644 --- a/client/src/services/Network.ts +++ b/client/src/services/Network.ts @@ -15,43 +15,29 @@ import { removeAvailableRooms, } from '../stores/RoomStore' import { -<<<<<<< Updated upstream pushChatMessage, pushPlayerJoinedMessage, pushPlayerLeftMessage, + pushMeetingRoomChatMessage, + setMeetingRoomChatHistory, } from '../stores/ChatStore' import { setWhiteboardUrls } from '../stores/WhiteboardStore' +import { updateOtherPlayerWorkStatus } from '../stores/WorkStore' +import { + addMeetingRoomFromServer, + removeMeetingRoomFromServer, + addMeetingRoomAreaFromServer, + removeMeetingRoomAreaFromServer +} from '../stores/MeetingRoomStore' +import { IMeetingRoomChatMessage } from '../../../types/IOfficeState' + export default class Network { private client: Client private room?: Room private lobby!: Room + private chatListenerAttached = false webRTC?: WebRTC -======= - pushChatMessage, - pushPlayerJoinedMessage, - pushPlayerLeftMessage, - pushMeetingRoomChatMessage, - setMeetingRoomChatHistory, -} from '../stores/ChatStore' -import { setWhiteboardUrls } from '../stores/WhiteboardStore' - -import { - addMeetingRoomFromServer, - removeMeetingRoomFromServer, - addMeetingRoomAreaFromServer, - removeMeetingRoomAreaFromServer, -} from '../stores/MeetingRoomStore' -import { updateOtherPlayerWorkStatus } from '../stores/WorkStore' -import { IMeetingRoomChatMessage } from '../../../types/IOfficeState' - -export default class Network { - private client: Client - private room?: Room - private lobby!: Room - private chatListenerAttached = false - webRTC?: WebRTC ->>>>>>> Stashed changes mySessionId!: string @@ -115,7 +101,7 @@ export default class Network { this.initialize() } - // set up all network listeners before the game starts + // Set up all network listeners before the game starts initialize() { if (!this.room) return @@ -124,621 +110,227 @@ export default class Network { store.dispatch(setSessionId(this.room.sessionId)) this.webRTC = new WebRTC(this.mySessionId, this) - // new instance added to the players MapSchema + // New instance added to the players MapSchema this.room.state.players.onAdd = (player: IPlayer, key: string) => { if (key === this.mySessionId) return - // track changes on every child object inside the players MapSchema - player.onChange = (changes) => { - changes.forEach((change) => { - const { field, value } = change - phaserEvents.emit(Event.PLAYER_UPDATED, field, value, key) - - // when a new player finished setting up player name - if (field === 'name' && value !== '') { - phaserEvents.emit(Event.PLAYER_JOINED, player, key) - store.dispatch(setPlayerNameMap({ id: key, name: value })) - store.dispatch(pushPlayerJoinedMessage(value)) - } + // Sync existing player work status (if name is already set) + if (player.name) { + const workStatus = (player as any).workStatus || 'off-duty' + console.log('👥 [Network] Adding existing player work status (onAdd):', { + playerId: key, + playerName: player.name, + workStatus: workStatus }) -<<<<<<< Updated upstream + store.dispatch(updateOtherPlayerWorkStatus({ + playerId: key, + playerName: player.name, + workStatus: workStatus + })) } -======= - phaserEvents.on(Event.MY_PLAYER_NAME_CHANGE, this.updatePlayerName, this) - phaserEvents.on(Event.MY_PLAYER_TEXTURE_CHANGE, this.updatePlayer, this) - phaserEvents.on(Event.PLAYER_DISCONNECTED, this.playerStreamDisconnect, this) + // track jointed player name + store.dispatch(setPlayerNameMap({ id: key, name: player.name })) + + phaserEvents.emit(Event.PLAYER_JOINED, key, player) + + player.onChange = () => { + phaserEvents.emit(Event.PLAYER_UPDATED, key, player) - // Make globally accessible for DevMode - if (typeof window !== 'undefined') { - (window as any).network = this + // Check for work status changes and update Redux + if (player.name) { + const currentWorkStatus = (player as any).workStatus + if (currentWorkStatus) { + console.log('👤 [Network] Player work status changed (onChange):', { + playerId: key, + playerName: player.name, + workStatus: currentWorkStatus + }) + store.dispatch(updateOtherPlayerWorkStatus({ + playerId: key, + playerName: player.name, + workStatus: currentWorkStatus + })) + } } ->>>>>>> Stashed changes + } } - // an instance removed from the players MapSchema + // when a player leaves the room this.room.state.players.onRemove = (player: IPlayer, key: string) => { - phaserEvents.emit(Event.PLAYER_LEFT, key) - this.webRTC?.deleteVideoStream(key) - this.webRTC?.deleteOnCalledVideoStream(key) - store.dispatch(pushPlayerLeftMessage(player.name)) + phaserEvents.emit(Event.PLAYER_LEFT, key, player) store.dispatch(removePlayerNameMap(key)) } - // new instance added to the computers MapSchema + // when a computer is added to the room this.room.state.computers.onAdd = (computer: IComputer, key: string) => { - // track changes on every child object's connectedUser - computer.connectedUser.onAdd = (item, index) => { - phaserEvents.emit(Event.ITEM_USER_ADDED, item, key, ItemType.COMPUTER) - } - computer.connectedUser.onRemove = (item, index) => { - phaserEvents.emit(Event.ITEM_USER_REMOVED, item, key, ItemType.COMPUTER) - } + phaserEvents.emit(Event.ITEM_ADDED, computer, key, ItemType.COMPUTER) } - // new instance added to the whiteboards MapSchema + // when a computer is removed from the room + this.room.state.computers.onRemove = (computer: IComputer, key: string) => { + phaserEvents.emit(Event.ITEM_REMOVED, key, ItemType.COMPUTER) + } + + // when a whiteboard is added to the room this.room.state.whiteboards.onAdd = (whiteboard: IWhiteboard, key: string) => { - store.dispatch( - setWhiteboardUrls({ - whiteboardId: key, - roomId: whiteboard.roomId, - }) - ) - // track changes on every child object's connectedUser - whiteboard.connectedUser.onAdd = (item, index) => { - phaserEvents.emit(Event.ITEM_USER_ADDED, item, key, ItemType.WHITEBOARD) - } - whiteboard.connectedUser.onRemove = (item, index) => { - phaserEvents.emit(Event.ITEM_USER_REMOVED, item, key, ItemType.WHITEBOARD) - } + phaserEvents.emit(Event.ITEM_ADDED, whiteboard, key, ItemType.WHITEBOARD) } - // new instance added to the chatMessages ArraySchema - this.room.state.chatMessages.onAdd = (item, index) => { - store.dispatch(pushChatMessage(item)) + // when a whiteboard is removed from the room + this.room.state.whiteboards.onRemove = (whiteboard: IWhiteboard, key: string) => { + phaserEvents.emit(Event.ITEM_REMOVED, key, ItemType.WHITEBOARD) } -<<<<<<< Updated upstream - // when the server sends room data - this.room.onMessage(Message.SEND_ROOM_DATA, (content) => { - store.dispatch(setJoinedRoomData(content)) - }) + // when an item is added to the room + this.room.state.chatMessages.onAdd = (item: any, key: number) => { + store.dispatch(pushChatMessage(item)) + phaserEvents.emit('chat-message-added', item, key) + } - // when a user sends a message - this.room.onMessage(Message.ADD_CHAT_MESSAGE, ({ clientId, content }) => { - phaserEvents.emit(Event.UPDATE_DIALOG_BUBBLE, clientId, content) - }) + // when an item is removed from the room + this.room.state.chatMessages.onRemove = (item: any, key: number) => { + console.log('message removed') + } - // when a peer disconnects with myPeer - this.room.onMessage(Message.DISCONNECT_STREAM, (clientId: string) => { - this.webRTC?.deleteOnCalledVideoStream(clientId) + // when whiteboard urls are set (using string type instead of enum) + this.room.onMessage('UPDATE_WHITEBOARD_URLS', (message: { whiteboardId: string; whiteboardUrls: string[] }) => { + store.dispatch(setWhiteboardUrls(message)) }) - // when a computer user stops sharing screen - this.room.onMessage(Message.STOP_SCREEN_SHARE, (clientId: string) => { - const computerState = store.getState().computer - computerState.shareScreenManager?.onUserLeft(clientId) + phaserEvents.emit(Event.JOINED_ROOM) + + // Set up meeting room chat message listeners first (before state listeners) + this.setupMeetingRoomChatListeners() + + // Set up meeting room listeners with safety checks + this.setupMeetingRoomListeners() + + // Also setup chat listeners when state changes + this.room.onStateChange(() => { + if (!this.chatListenerAttached && this.room?.state?.meetingRoomState?.meetingRoomChatMessages) { + console.log('🔄 [Network] State changed, setting up chat listeners') + this.setupMeetingRoomChatMessageListener() + } }) } - // method to register event listener and call back function when a item user added - onChatMessageAdded(callback: (playerId: string, content: string) => void, context?: any) { - phaserEvents.on(Event.UPDATE_DIALOG_BUBBLE, callback, context) - } - - // method to register event listener and call back function when a item user added - onItemUserAdded( - callback: (playerId: string, key: string, itemType: ItemType) => void, - context?: any - ) { - phaserEvents.on(Event.ITEM_USER_ADDED, callback, context) - } - - // method to register event listener and call back function when a item user removed - onItemUserRemoved( - callback: (playerId: string, key: string, itemType: ItemType) => void, - context?: any - ) { - phaserEvents.on(Event.ITEM_USER_REMOVED, callback, context) - } - - // method to register event listener and call back function when a player joined - onPlayerJoined(callback: (Player: IPlayer, key: string) => void, context?: any) { - phaserEvents.on(Event.PLAYER_JOINED, callback, context) - } - - // method to register event listener and call back function when a player left - onPlayerLeft(callback: (key: string) => void, context?: any) { - phaserEvents.on(Event.PLAYER_LEFT, callback, context) - } - - // method to register event listener and call back function when myPlayer is ready to connect - onMyPlayerReady(callback: (key: string) => void, context?: any) { - phaserEvents.on(Event.MY_PLAYER_READY, callback, context) - } - - // method to register event listener and call back function when my video is connected - onMyPlayerVideoConnected(callback: (key: string) => void, context?: any) { - phaserEvents.on(Event.MY_PLAYER_VIDEO_CONNECTED, callback, context) - } - - // method to register event listener and call back function when a player updated - onPlayerUpdated( - callback: (field: string, value: number | string, key: string) => void, - context?: any - ) { - phaserEvents.on(Event.PLAYER_UPDATED, callback, context) - } - - // method to send player updates to Colyseus server - updatePlayer(currentX: number, currentY: number, currentAnim: string) { - this.room?.send(Message.UPDATE_PLAYER, { x: currentX, y: currentY, anim: currentAnim }) - } - - // method to send player name to Colyseus server - updatePlayerName(currentName: string) { - this.room?.send(Message.UPDATE_PLAYER_NAME, { name: currentName }) - } - - // method to send ready-to-connect signal to Colyseus server - readyToConnect() { - this.room?.send(Message.READY_TO_CONNECT) - phaserEvents.emit(Event.MY_PLAYER_READY) - } - - // method to send ready-to-connect signal to Colyseus server - videoConnected() { - this.room?.send(Message.VIDEO_CONNECTED) - phaserEvents.emit(Event.MY_PLAYER_VIDEO_CONNECTED) - } - - // method to send stream-disconnection signal to Colyseus server - playerStreamDisconnect(id: string) { - this.room?.send(Message.DISCONNECT_STREAM, { clientId: id }) - this.webRTC?.deleteVideoStream(id) - } - - connectToComputer(id: string) { - this.room?.send(Message.CONNECT_TO_COMPUTER, { computerId: id }) - } - - disconnectFromComputer(id: string) { - this.room?.send(Message.DISCONNECT_FROM_COMPUTER, { computerId: id }) - } - - connectToWhiteboard(id: string) { - this.room?.send(Message.CONNECT_TO_WHITEBOARD, { whiteboardId: id }) - } - - disconnectFromWhiteboard(id: string) { - this.room?.send(Message.DISCONNECT_FROM_WHITEBOARD, { whiteboardId: id }) - } - - onStopScreenShare(id: string) { - this.room?.send(Message.STOP_SCREEN_SHARE, { computerId: id }) - } - - addChatMessage(content: string) { - this.room?.send(Message.ADD_CHAT_MESSAGE, { content: content }) - } -======= - // Method to join a custom room - async joinCustomById(roomId: string, password: string | null) { - this.room = await this.client.joinById(roomId, { password }) - this.initialize() - } - - // Method to create a custom room - async createCustom(roomData: IRoomData) { - const { name, description, password, autoDispose } = roomData - this.room = await this.client.create(RoomType.CUSTOM, { - name, - description, - password, - autoDispose, - }) - this.initialize() + // Safely set up meeting room listeners + private setupMeetingRoomListeners() { + // Check if meeting room state is immediately available + if ( + this.room?.state?.meetingRoomState?.meetingRooms && + this.room?.state?.meetingRoomState?.meetingRoomAreas + ) { + this.attachMeetingRoomListeners() + return } - // Set up all network listeners before the game starts - initialize() { - if (!this.room) return - - this.lobby.leave() - this.mySessionId = this.room.sessionId - store.dispatch(setSessionId(this.room.sessionId)) - this.webRTC = new WebRTC(this.mySessionId, this) - - // New instance added to the players MapSchema - this.room.state.players.onAdd = (player: IPlayer, key: string) => { - if (key === this.mySessionId) return - - // Sync existing player work status (if name is already set) - if (player.name) { - const workStatus = (player as any).workStatus || 'off-duty' - console.log('👥 [Network] Adding existing player work status (onAdd):', { - playerId: key, - playerName: player.name, - workStatus: workStatus - }) - store.dispatch(updateOtherPlayerWorkStatus({ - playerId: key, - playerName: player.name, - workStatus: workStatus - })) - } - - // Track changes on every child object inside the players MapSchema - player.onChange = (changes) => { - changes.forEach((change) => { - const { field, value } = change - phaserEvents.emit(Event.PLAYER_UPDATED, field, value, key) - - // When a new player finished setting up player name - if (field === 'name' && value !== '') { - phaserEvents.emit(Event.PLAYER_JOINED, player, key) - store.dispatch(setPlayerNameMap({ id: key, name: value })) - store.dispatch(pushPlayerJoinedMessage(value)) - - // Add initial work status for other players to store - const currentState = store.getState() - if (key !== currentState.user.sessionId) { - const workStatus = (player as any).workStatus || 'off-duty' - console.log('👥 [Network] Adding new player work status:', { - playerId: key, - playerName: value, - workStatus: workStatus - }) - store.dispatch(updateOtherPlayerWorkStatus({ - playerId: key, - playerName: value, - workStatus: workStatus - })) - } - } - }) - } - } - - // An instance removed from the players MapSchema - this.room.state.players.onRemove = (player: IPlayer, key: string) => { - phaserEvents.emit(Event.PLAYER_LEFT, key) - this.webRTC?.deleteVideoStream(key) - this.webRTC?.deleteOnCalledVideoStream(key) - store.dispatch(pushPlayerLeftMessage(player.name)) - store.dispatch(removePlayerNameMap(key)) - } - - // New instance added to the computers MapSchema - this.room.state.computers.onAdd = (computer: IComputer, key: string) => { - // Track changes on every child object's connectedUser (with safety check) - if (computer.connectedUser) { - computer.connectedUser.onAdd = (item, index) => { - phaserEvents.emit(Event.ITEM_USER_ADDED, item, key, ItemType.COMPUTER) - } - computer.connectedUser.onRemove = (item, index) => { - phaserEvents.emit(Event.ITEM_USER_REMOVED, item, key, ItemType.COMPUTER) - } - } + // Wait for meeting room state to be ready + this.room?.onStateChange((state) => { + if (state.meetingRoomState?.meetingRooms && state.meetingRoomState?.meetingRoomAreas) { + this.attachMeetingRoomListeners() } + }) + } - // New instance added to the whiteboards MapSchema - this.room.state.whiteboards.onAdd = (whiteboard: IWhiteboard, key: string) => { - store.dispatch( - setWhiteboardUrls({ - whiteboardId: key, - roomId: whiteboard.roomId, - }) - ) - // Track changes on every child object's connectedUser (with safety check) - if (whiteboard.connectedUser) { - whiteboard.connectedUser.onAdd = (item, index) => { - phaserEvents.emit(Event.ITEM_USER_ADDED, item, key, ItemType.WHITEBOARD) - } - whiteboard.connectedUser.onRemove = (item, index) => { - phaserEvents.emit(Event.ITEM_USER_REMOVED, item, key, ItemType.WHITEBOARD) + // 修正されたattachMeetingRoomListenersメソッド + private attachMeetingRoomListeners() { + if (!this.room?.state?.meetingRoomState) { + console.error('Cannot attach meeting room listeners: meetingRoomState not available') + return + } + + const meetingRooms = this.room.state.meetingRoomState.meetingRooms + const meetingRoomAreas = this.room.state.meetingRoomState.meetingRoomAreas + + // 既存の meeting rooms を処理 + if (meetingRooms) { + meetingRooms.forEach((room, key) => { + if ( + typeof key === 'string' && + !key.startsWith('$') && + key !== 'onAdd' && + key !== 'onRemove' + ) { + if ( + room && + typeof room === 'object' && + !Array.isArray(room) && + typeof room !== 'function' + ) { + this.handleMeetingRoomAdded(room, key) } } - } - - // New instance added to the chatMessages ArraySchema - this.room.state.chatMessages.onAdd = (item, index) => { - store.dispatch(pushChatMessage(item)) - } - - // When the server sends room data - this.room.onMessage(Message.SEND_ROOM_DATA, (content) => { - store.dispatch(setJoinedRoomData(content)) - }) - - // When a user sends a message - this.room.onMessage(Message.ADD_CHAT_MESSAGE, ({ clientId, content }) => { - phaserEvents.emit(Event.UPDATE_DIALOG_BUBBLE, clientId, content) - }) - - // When a peer disconnects with myPeer - this.room.onMessage(Message.DISCONNECT_STREAM, (clientId: string) => { - this.webRTC?.deleteOnCalledVideoStream(clientId) - }) - - // When a computer user stops sharing screen - this.room.onMessage(Message.STOP_SCREEN_SHARE, (clientId: string) => { - const computerState = store.getState().computer - computerState.shareScreenManager?.onUserLeft(clientId) - }) - - // Meeting room chat message listeners - this.room.onMessage('meeting-room-chat-history', (data: { - meetingRoomId: string - messages: IMeetingRoomChatMessage[] - }) => { - console.log('📚 [Network] Received chat history via onMessage:', { - meetingRoomId: data.meetingRoomId, - messageCount: data.messages.length - }) - store.dispatch(setMeetingRoomChatHistory({ - meetingRoomId: data.meetingRoomId, - messages: data.messages - })) - }) - - this.room.onMessage('new-meeting-room-chat-message', (data: IMeetingRoomChatMessage) => { - console.log('🆕 [Network] Received new meeting room message via onMessage:', { - messageId: data.messageId, - author: data.author, - content: data.content, - meetingRoomId: data.meetingRoomId, - timestamp: new Date(data.createdAt).toLocaleTimeString() - }) - store.dispatch(pushMeetingRoomChatMessage({ - meetingRoomId: data.meetingRoomId, - message: data - })) }) - // Monitor all messages (detailed log only in DevMode) - this.room.onMessage('*', (type, data) => { - if (store.getState().devMode?.isDevMode) { - console.log('📨 [Network] Received message:', type, data) - } - - // Special log for work status related messages - if (typeof type === 'string' && (type.includes('work') || type.includes('status'))) { - console.log('💼 [Network] Work-related message:', { type, data, timestamp: new Date().toISOString() }) - } - }) - - // Receive initial state when player joins - this.room.onMessage('player-joined', (data: { - playerId: string, - playerName: string, - workStatus?: string - }) => { - console.log('👋 [Network] Player joined:', data) - - // Add initial work status for other players to store - if (data.playerId && data.playerName) { - store.dispatch(updateOtherPlayerWorkStatus({ - playerId: data.playerId, - playerName: data.playerName, - workStatus: (data.workStatus || 'off-duty') as any - })) - } - }) - - // Receive work status change notifications - this.room.onMessage('work-status-changed', (data: { - playerId: string, - workStatus: string, - playerName: string - }) => { - console.log('💼 [Network] Work status changed (received):', { - playerId: data.playerId, - workStatus: data.workStatus, - playerName: data.playerName, - timestamp: new Date().toISOString(), - isDevMode: store.getState().devMode?.isDevMode - }) - - // Notify WorkStore of status change - store.dispatch(updateOtherPlayerWorkStatus({ - playerId: data.playerId, - playerName: data.playerName, - workStatus: data.workStatus as any - })) - - // Also emit Phaser event (for avatar appearance change) - phaserEvents.emit('WORK_STATUS_CHANGED', data) - - // Detailed log in DevMode - if (store.getState().devMode?.isDevMode) { - console.log('🐛 [Network] Updated other players work status. Current state:', { - totalOtherPlayers: Object.keys(store.getState().work.otherPlayersWorkStatus).length, - allPlayers: store.getState().work.otherPlayersWorkStatus - }) - } - }) - - this.room.onMessage('MEETING_ROOM_MANUAL_UPDATE', (data: any) => { - // Log state before update - const currentState = store.getState().meetingRoom - // Update meeting room - if (data.room) { - store.dispatch(addMeetingRoomFromServer(data.room)) - } - - // Update meeting room area - if (data.area) { - store.dispatch(addMeetingRoomAreaFromServer(data.area)) - } - - // Log state after update - setTimeout(() => { - const updatedState = store.getState().meetingRoom - }, 100) - }) - - // Set up meeting room chat message listeners first (before state listeners) - this.setupMeetingRoomChatListeners() - - // Set up meeting room listeners with safety checks - this.setupMeetingRoomListeners() - - // Also setup chat listeners when state changes - this.room.onStateChange(() => { - if (!this.chatListenerAttached && this.room?.state?.meetingRoomState?.meetingRoomChatMessages) { - console.log('🔄 [Network] State changed, setting up chat listeners') - this.setupMeetingRoomChatMessageListener() - } - }) - } - - // Safely set up meeting room listeners - private setupMeetingRoomListeners() { - // Check if meeting room state is immediately available - if ( - this.room?.state?.meetingRoomState?.meetingRooms && - this.room?.state?.meetingRoomState?.meetingRoomAreas - ) { - this.attachMeetingRoomListeners() - return + // 新しい meeting room の追加を監視 + meetingRooms.onAdd = (meetingRoom: any, key: string) => { + this.handleMeetingRoomAdded(meetingRoom, key) } - // Wait for meeting room state to be ready - this.room?.onStateChange((state) => { - if (state.meetingRoomState?.meetingRooms && state.meetingRoomState?.meetingRoomAreas) { - this.attachMeetingRoomListeners() - } - }) - } - - // 修正されたattachMeetingRoomListenersメソッド - private attachMeetingRoomListeners() { - if (!this.room?.state?.meetingRoomState) { - console.error('Cannot attach meeting room listeners: meetingRoomState not available') - return + meetingRooms.onRemove = (meetingRoom: any, key: string) => { + store.dispatch(removeMeetingRoomFromServer(key)) } + } - const meetingRooms = this.room.state.meetingRoomState.meetingRooms - const meetingRoomAreas = this.room.state.meetingRoomState.meetingRoomAreas - - // 既存の meeting rooms を処理 - if (meetingRooms) { - meetingRooms.forEach((room, key) => { + // 既存の meeting room areas を処理 + if (meetingRoomAreas) { + meetingRoomAreas.forEach((area, key) => { + if ( + typeof key === 'string' && + !key.startsWith('$') && + key !== 'onAdd' && + key !== 'onRemove' + ) { if ( - typeof key === 'string' && - !key.startsWith('$') && - key !== 'onAdd' && - key !== 'onRemove' + area && + typeof area === 'object' && + !Array.isArray(area) && + typeof area !== 'function' ) { - if ( - room && - typeof room === 'object' && - !Array.isArray(room) && - typeof room !== 'function' - ) { - this.handleMeetingRoomAdded(room, key) - } + this.handleMeetingRoomAreaAdded(area, key) } - }) - - // 新しい meeting room の追加を監視 - meetingRooms.onAdd = (meetingRoom: any, key: string) => { - this.handleMeetingRoomAdded(meetingRoom, key) } + }) - meetingRooms.onRemove = (meetingRoom: any, key: string) => { - store.dispatch(removeMeetingRoomFromServer(key)) - } + // 新しい meeting room area の追加を監視 + meetingRoomAreas.onAdd = (area: any, key: string) => { + this.handleMeetingRoomAreaAdded(area, key) } - // 既存の meeting room areas を処理 - if (meetingRoomAreas) { - meetingRoomAreas.forEach((area, key) => { - if ( - typeof key === 'string' && - !key.startsWith('$') && - key !== 'onAdd' && - key !== 'onRemove' - ) { - if ( - area && - typeof area === 'object' && - !Array.isArray(area) && - typeof area !== 'function' - ) { - this.handleMeetingRoomAreaAdded(area, key) - } - } - }) - - // 新しい meeting room area の追加を監視 - meetingRoomAreas.onAdd = (area: any, key: string) => { - this.handleMeetingRoomAreaAdded(area, key) - } - - meetingRoomAreas.onRemove = (area: any, key: string) => { - store.dispatch(removeMeetingRoomAreaFromServer(key)) - } + meetingRoomAreas.onRemove = (area: any, key: string) => { + store.dispatch(removeMeetingRoomAreaFromServer(key)) } } + } - private handleMeetingRoomAdded(meetingRoom: any, key: string) { - if (!meetingRoom || typeof meetingRoom !== 'object') { - console.error('Invalid meeting room object:', meetingRoom) - return - } - + // Handle meeting room added safely + private handleMeetingRoomAdded(meetingRoom: any, key: string) { + try { const roomData = { - id: key, - name: meetingRoom.name || '', + id: meetingRoom.id || key, + name: meetingRoom.name || 'Unnamed Room', mode: meetingRoom.mode || 'open', hostUserId: meetingRoom.hostUserId || '', - invitedUsers: meetingRoom.invitedUsers - ? (Array.from(meetingRoom.invitedUsers) as string[]) + invitedUsers: Array.isArray(meetingRoom.invitedUsers) + ? meetingRoom.invitedUsers.slice() : [], - participants: meetingRoom.participants - ? (Array.from(meetingRoom.participants) as string[]) + participants: Array.isArray(meetingRoom.participants) + ? meetingRoom.participants.slice() : [], } - try { - store.dispatch(addMeetingRoomFromServer(roomData)) - - if (typeof meetingRoom.onChange === 'function' && !meetingRoom._changeListenerAttached) { - meetingRoom.onChange = (changes: any[]) => { - changes.forEach((change) => { }) - - const updatedRoomData = { - id: key, - name: meetingRoom.name || '', - mode: meetingRoom.mode || 'open', - hostUserId: meetingRoom.hostUserId || '', - invitedUsers: meetingRoom.invitedUsers - ? (Array.from(meetingRoom.invitedUsers) as string[]) - : [], - participants: meetingRoom.participants - ? (Array.from(meetingRoom.participants) as string[]) - : [], - } - - store.dispatch(addMeetingRoomFromServer(updatedRoomData)) - } - - meetingRoom._changeListenerAttached = true - } else if (meetingRoom._changeListenerAttached) { - } - } catch (e) { - console.error('Failed to dispatch addMeetingRoomFromServer:', e) - } + store.dispatch(addMeetingRoomFromServer(roomData)) + console.log('✅ [Network] Meeting room added:', roomData.id) + } catch (error) { + console.error('❌ [Network] Error handling meeting room added:', error) } + } - private handleMeetingRoomAreaAdded(area: any, key: string) { - if (!area || typeof area !== 'object') { - console.error('Invalid area object:', area) - return - } - + // Handle meeting room area added safely + private handleMeetingRoomAreaAdded(area: any, key: string) { + try { const areaData = { meetingRoomId: area.meetingRoomId || key, x: area.x || 0, @@ -747,381 +339,213 @@ export default class Network { height: area.height || 100, } - - try { - store.dispatch(addMeetingRoomAreaFromServer(areaData)) - - if (typeof area.onChange === 'function' && !area._changeListenerAttached) { - - area.onChange = (changes: any[]) => { - - // 変更された値を詳細にログ出力 - changes.forEach((change) => { - }) - - const updatedAreaData = { - meetingRoomId: area.meetingRoomId || key, - x: area.x || 0, - y: area.y || 0, - width: area.width || 100, - height: area.height || 100, - } - - store.dispatch(addMeetingRoomAreaFromServer(updatedAreaData)) - } - - area._changeListenerAttached = true - } else if (area._changeListenerAttached) { - } - } catch (e) { - console.error('Failed to dispatch addMeetingRoomAreaFromServer:', e) - } - } - - // 定期的な状態同期チェック（オプション） - private setupPeriodicSync() { - setInterval(() => { - if (this.room?.state?.meetingRoomState) { - const serverRooms = this.room.state.meetingRoomState.meetingRooms - const serverAreas = this.room.state.meetingRoomState.meetingRoomAreas - const clientState = store.getState().meetingRoom - if (serverRooms && serverAreas) { - serverRooms.forEach((room, key) => { - if (!clientState.meetingRooms[key]) { - this.handleMeetingRoomAdded(room, key) - } - }) - - serverAreas.forEach((area, key) => { - if (!clientState.meetingRoomAreas[key]) { - this.handleMeetingRoomAreaAdded(area, key) - } - }) - } - } - }, 5000) // 5秒ごとにチェック - } - - // Method to update meeting room mode - updateMeetingRoomMode(roomId: string, newMode: 'open' | 'private' | 'secret') { - - const currentState = store.getState().meetingRoom - const currentRoom = currentState.meetingRooms[roomId] - - if (!currentRoom) { - console.error(`Cannot update room mode ${roomId}: not found`) - return - } - - const updatedRoomData = { - id: roomId, - name: currentRoom.name, - mode: newMode, - hostUserId: currentRoom.hostUserId, - invitedUsers: currentRoom.invitedUsers, - } - - this.room?.send(Message.UPDATE_MEETING_ROOM, updatedRoomData) - } - - // Method to update meeting room area - updateMeetingRoomArea( - roomId: string, - areaUpdates: { - x?: number - y?: number - width?: number - height?: number - } - ) { - - const currentState = store.getState().meetingRoom - const currentRoom = currentState.meetingRooms[roomId] - const currentArea = currentState.meetingRoomAreas.find(area => area.meetingRoomId === roomId) - - if (!currentRoom || !currentArea) { - console.error(`Cannot update room area ${roomId}: not found`, { - roomExists: !!currentRoom, - areaExists: !!currentArea, - availableRooms: Object.keys(currentState.meetingRooms), - availableAreas: currentState.meetingRoomAreas.map(a => a.meetingRoomId) - }) - return - } - - const updatedRoomData = { - id: roomId, - name: currentRoom.name, - mode: currentRoom.mode, - hostUserId: currentRoom.hostUserId, - invitedUsers: currentRoom.invitedUsers, - area: { - x: areaUpdates.x !== undefined ? areaUpdates.x : currentArea.x, - y: areaUpdates.y !== undefined ? areaUpdates.y : currentArea.y, - width: areaUpdates.width !== undefined ? areaUpdates.width : currentArea.width, - height: areaUpdates.height !== undefined ? areaUpdates.height : currentArea.height, - }, - } - - this.room?.send(Message.UPDATE_MEETING_ROOM, updatedRoomData) - } - - // Method to register event listener and call back function when a item user added - onChatMessageAdded(callback: (playerId: string, content: string) => void, context?: any) { - phaserEvents.on(Event.UPDATE_DIALOG_BUBBLE, callback, context) - } - - // Method to register event listener and call back function when a item user added - onItemUserAdded( - callback: (playerId: string, key: string, itemType: ItemType) => void, - context?: any - ) { - phaserEvents.on(Event.ITEM_USER_ADDED, callback, context) - } - - // Method to register event listener and call back function when a item user removed - onItemUserRemoved( - callback: (playerId: string, key: string, itemType: ItemType) => void, - context?: any - ) { - phaserEvents.on(Event.ITEM_USER_REMOVED, callback, context) - } - - // Method to register event listener and call back function when a player joined - onPlayerJoined(callback: (Player: IPlayer, key: string) => void, context?: any) { - phaserEvents.on(Event.PLAYER_JOINED, callback, context) - } - - // Method to register event listener and call back function when a player left - onPlayerLeft(callback: (key: string) => void, context?: any) { - phaserEvents.on(Event.PLAYER_LEFT, callback, context) - } - - // Method to register event listener and call back function when myPlayer is ready to connect - onMyPlayerReady(callback: (key: string) => void, context?: any) { - phaserEvents.on(Event.MY_PLAYER_READY, callback, context) - } - - // Method to register event listener and call back function when my video is connected - onMyPlayerVideoConnected(callback: (key: string) => void, context?: any) { - phaserEvents.on(Event.MY_PLAYER_VIDEO_CONNECTED, callback, context) - } - - // Method to register event listener and call back function when a player updated - onPlayerUpdated( - callback: (field: string, value: number | string, key: string) => void, - context?: any - ) { - phaserEvents.on(Event.PLAYER_UPDATED, callback, context) - } - - // Method to send player updates to Colyseus server - updatePlayer(currentX: number, currentY: number, currentAnim: string) { - this.room?.send(Message.UPDATE_PLAYER, { x: currentX, y: currentY, anim: currentAnim }) + store.dispatch(addMeetingRoomAreaFromServer(areaData)) + console.log('✅ [Network] Meeting room area added:', areaData.meetingRoomId) + } catch (error) { + console.error('❌ [Network] Error handling meeting room area added:', error) } + } - // Method to send player name to Colyseus server - updatePlayerName(currentName: string) { - this.room?.send(Message.UPDATE_PLAYER_NAME, { name: currentName }) - } + // Setup meeting room chat listeners + private setupMeetingRoomChatListeners() { + console.log('📞 [Network] Setting up meeting room chat listeners') + + // Listener for chat history + this.room?.onMessage('meeting-room-chat-history', (message: { + meetingRoomId: string + messages: IMeetingRoomChatMessage[] + }) => { + console.log('📜 [Network] Received chat history:', { + roomId: message.meetingRoomId, + messageCount: message.messages.length + }) + + store.dispatch(setMeetingRoomChatHistory({ + meetingRoomId: message.meetingRoomId, + messages: message.messages + })) + }) - // Method to send ready-to-connect signal to Colyseus server - readyToConnect() { - this.room?.send(Message.READY_TO_CONNECT) - phaserEvents.emit(Event.MY_PLAYER_READY) - } + // Listener for new chat messages + this.room?.onMessage('new-meeting-room-chat-message', (message: IMeetingRoomChatMessage) => { + console.log('💬 [Network] Received new chat message:', { + messageId: message.messageId, + author: message.author, + content: message.content, + meetingRoomId: message.meetingRoomId, + timestamp: new Date(message.createdAt).toLocaleTimeString() + }) + + store.dispatch(pushMeetingRoomChatMessage({ + meetingRoomId: message.meetingRoomId, + message: message + })) + }) + } - // Method to send ready-to-connect signal to Colyseus server - videoConnected() { - this.room?.send(Message.VIDEO_CONNECTED) - phaserEvents.emit(Event.MY_PLAYER_VIDEO_CONNECTED) - } + // Setup meeting room chat message listener (for real-time updates) + private setupMeetingRoomChatMessageListener() { + if (!this.room?.state?.meetingRoomState?.meetingRoomChatMessages || this.chatListenerAttached) { + return + } + + console.log('🎧 [Network] Setting up meeting room chat message listener') + + this.room.state.meetingRoomState.meetingRoomChatMessages.onAdd = (message: any, index: number) => { + console.log('💭 [Network] New meeting room chat message added to state:', { + index, + messageId: message.messageId, + author: message.author, + content: message.content, + meetingRoomId: message.meetingRoomId, + timestamp: new Date(message.createdAt).toLocaleTimeString() + }) + + // Dispatch to Redux store + store.dispatch(pushMeetingRoomChatMessage({ + meetingRoomId: message.meetingRoomId, + message: message as any + })) + } + + this.chatListenerAttached = true + } - // Method to send stream-disconnection signal to Colyseus server - playerStreamDisconnect(id: string) { - this.room?.send(Message.DISCONNECT_STREAM, { clientId: id }) - this.webRTC?.deleteVideoStream(id) + // Get meeting room chat history + getMeetingRoomChatHistory(meetingRoomId: string) { + if (!this.room) { + console.error('❌ [Network] Cannot get chat history: Room not connected') + return } + + console.log('📂 [Network] Requesting meeting room chat history:', meetingRoomId) + this.room.send(Message.GET_MEETING_ROOM_CHAT_HISTORY, { meetingRoomId }) + } - connectToComputer(id: string) { - this.room?.send(Message.CONNECT_TO_COMPUTER, { computerId: id }) - } + // Send meeting room chat message + sendMeetingRoomChatMessage(meetingRoomId: string, content: string) { + if (!this.room) { + console.error('❌ [Network] Cannot send message: Room not connected') + return + } + + console.log('📤 [Network] Sending meeting room chat message:', { + meetingRoomId, + content: content.substring(0, 50) + (content.length > 50 ? '...' : ''), + timestamp: new Date().toLocaleTimeString() + }) + + this.room.send(Message.ADD_MEETING_ROOM_CHAT_MESSAGE, { + meetingRoomId, + content + }) + } - disconnectFromComputer(id: string) { - this.room?.send(Message.DISCONNECT_FROM_COMPUTER, { computerId: id }) - } + // method to connect to webRTC + connectToPlayer(userId: string, stream: MediaStream) { + this.webRTC?.connectToPlayer(userId, stream) + } - connectToWhiteboard(id: string) { - this.room?.send(Message.CONNECT_TO_WHITEBOARD, { whiteboardId: id }) - } + // method to disconnect from webRTC + disconnectFromPlayer(userId: string) { + this.webRTC?.disconnectFromPlayer(userId) + } - disconnectFromWhiteboard(id: string) { - this.room?.send(Message.DISCONNECT_FROM_WHITEBOARD, { whiteboardId: id }) - } + // Update player name + updatePlayerName(name: string) { + this.room?.send(Message.UPDATE_PLAYER_NAME, { name: name }) + } - onStopScreenShare(id: string) { - this.room?.send(Message.STOP_SCREEN_SHARE, { computerId: id }) + // Update player + updatePlayer(currentPlayer: IPlayer): void + updatePlayer(x: number, y: number, anim: string): void + updatePlayer(currentPlayerOrX: IPlayer | number, y?: number, anim?: string) { + if (typeof currentPlayerOrX === 'object') { + // Called with IPlayer object + this.room?.send(Message.UPDATE_PLAYER, currentPlayerOrX) + } else { + // Called with x, y, anim parameters + this.room?.send(Message.UPDATE_PLAYER, { x: currentPlayerOrX, y: y!, anim: anim! }) } + } - addChatMessage(content: string) { - this.room?.send(Message.ADD_CHAT_MESSAGE, { content: content }) - } + // Update player position and animation + updatePlayerNameMapCallback(username: string) { + this.room?.send(Message.UPDATE_PLAYER_NAME, { name: username }) + } - createMeetingRoom(roomData: { - id: string - name: string - mode: 'open' | 'private' | 'secret' - hostUserId: string - invitedUsers: string[] - area: { x: number; y: number; width: number; height: number } - }) { - this.room?.send(Message.CREATE_MEETING_ROOM, roomData) - } + // ready to connect handler + readyToConnect() { + this.room?.send(Message.READY_TO_CONNECT) + } - // Update meeting room - updateMeetingRoom(roomData: { - id: string - name: string - mode: 'open' | 'private' | 'secret' - hostUserId: string - invitedUsers: string[] - area?: { x: number; y: number; width: number; height: number } - }) { - this.room?.send(Message.UPDATE_MEETING_ROOM, roomData) - } + // video connected handler + videoConnected() { + this.room?.send(Message.VIDEO_CONNECTED) + } - // Delete meeting room - deleteMeetingRoom(roomId: string) { - this.room?.send(Message.DELETE_MEETING_ROOM, { id: roomId }) - } + // Update player position and animation + connectToComputer(computerId: string) { + this.room?.send(Message.CONNECT_TO_COMPUTER, { computerId: computerId }) + } - // Register event listener for meeting room area added - onMeetingRoomAdded(callback: (meetingRoom: any, key: string) => void, context?: any) { - phaserEvents.on(Event.MEETING_ROOM_ADDED, callback, context) - } + // stop screen share + disconnectFromComputer(computerId: string) { + this.room?.send(Message.DISCONNECT_FROM_COMPUTER, { computerId: computerId }) + } - // Register event listener for meeting room area added - onMeetingRoomRemoved(callback: (key: string) => void, context?: any) { - phaserEvents.on(Event.MEETING_ROOM_REMOVED, callback, context) - } + // stop screen share + stopScreenShare(computerId: string) { + this.room?.send(Message.STOP_SCREEN_SHARE, { computerId: computerId }) + } - // Meeting room chat methods - sendMeetingRoomChatMessage(meetingRoomId: string, content: string) { - console.log('🚀 [Network] Sending meeting room chat message to server:', { - meetingRoomId, - content, - timestamp: new Date().toLocaleTimeString() - }) - this.room?.send(Message.ADD_MEETING_ROOM_CHAT_MESSAGE, { - meetingRoomId, - content - }) - } + // connect to whiteboard + connectToWhiteboard(whiteboardId: string) { + this.room?.send(Message.CONNECT_TO_WHITEBOARD, { whiteboardId: whiteboardId }) + } - getMeetingRoomChatHistory(meetingRoomId: string) { - this.room?.send(Message.GET_MEETING_ROOM_CHAT_HISTORY, { - meetingRoomId - }) - } + // disconnect from whiteboard + disconnectFromWhiteboard(whiteboardId: string) { + this.room?.send(Message.DISCONNECT_FROM_WHITEBOARD, { whiteboardId: whiteboardId }) + } - // Work status related methods - startWork() { - console.log('🏢 [Network] Sending START_WORK', { - connected: !!this.room, - timestamp: new Date().toISOString() - }) - this.room?.send(Message.START_WORK) - } + // send chat message + addChatMessage(content: string) { + this.room?.send(Message.ADD_CHAT_MESSAGE, { content: content }) + } - endWork() { - console.log('🏠 [Network] Sending END_WORK', { - connected: !!this.room, - timestamp: new Date().toISOString() - }) - this.room?.send(Message.END_WORK) - } + // send disconnect to stream + disconnectStream(clientId: string) { + this.room?.send(Message.DISCONNECT_STREAM, { clientId: clientId }) + } - startBreak() { - console.log('☕ [Network] Sending START_BREAK', { - connected: !!this.room, - timestamp: new Date().toISOString() - }) - this.room?.send(Message.START_BREAK) - } + // Listener for player joining + playerStreamDisconnect(userId: string) { + this.webRTC?.disconnectFromPlayer(userId) + } - endBreak() { - console.log('💼 [Network] Sending END_BREAK', { - connected: !!this.room, - timestamp: new Date().toISOString() - }) - this.room?.send(Message.END_BREAK) - } + // 勤務ステータス関連のメッセージ送信メソッド + startWork() { + this.room?.send(Message.START_WORK) + } - updateWorkStatus(workStatus: string, clothing?: string, accessory?: string) { - console.log('🔄 [Network] Sending UPDATE_WORK_STATUS:', { workStatus, clothing, accessory }) - this.room?.send(Message.UPDATE_WORK_STATUS, { - workStatus, - clothing, - accessory - }) - } + endWork() { + this.room?.send(Message.END_WORK) + } - private setupMeetingRoomChatListeners() { - console.log('🎧 [Network] Setting up meeting room chat listeners') - if (!this.room) { - console.error('❌ [Network] Cannot setup chat listeners: room is null') - return - } + startBreak() { + this.room?.send(Message.START_BREAK) + } - // Message listeners are now set up in the main joinOrCreateRoom method - console.log('✅ [Network] Meeting room chat listeners are already registered') - - // Wait for meeting room state to be available (fallback for ArraySchema) - this.setupMeetingRoomChatMessageListener() - } + endBreak() { + this.room?.send(Message.END_BREAK) + } - private setupMeetingRoomChatMessageListener() { - console.log('🔗 [Network] Attempting to setup chat message listener') - - if (this.room?.state?.meetingRoomState?.meetingRoomChatMessages) { - console.log('✅ [Network] Meeting room chat messages array found, setting up listener') - - // Check if it's an ArraySchema and has onAdd method - if (this.room.state.meetingRoomState.meetingRoomChatMessages.onAdd !== undefined) { - this.room.state.meetingRoomState.meetingRoomChatMessages.onAdd = (message: IMeetingRoomChatMessage, index: number) => { - console.log('🆕 [Network] New meeting room message received via ArraySchema.onAdd:', { - messageId: message.messageId, - author: message.author, - content: message.content, - meetingRoomId: message.meetingRoomId, - timestamp: new Date(message.createdAt).toLocaleTimeString() - }) - store.dispatch(pushMeetingRoomChatMessage({ - meetingRoomId: message.meetingRoomId, - message - })) - } - this.chatListenerAttached = true - } else { - console.log('ℹ️ [Network] Using message-based approach for meeting room chat (onAdd not available)') - // The chat messages are handled via onMessage listeners instead - this.chatListenerAttached = true - } - } else { - console.warn('⚠️ [Network] Meeting room chat messages not available yet, will retry') - // Retry after state is available - if (this.room && !this.chatListenerAttached) { - const stateChangeHandler = () => { - if (this.room?.state?.meetingRoomState?.meetingRoomChatMessages && !this.chatListenerAttached) { - console.log('🔄 [Network] Retrying chat message listener setup after state change') - this.setupMeetingRoomChatMessageListener() - // Remove this handler after successful setup - // this.room.removeAllListeners('statechange') - } - } - this.room.onStateChange(stateChangeHandler) - } - } - } ->>>>>>> Stashed changes -} + updateWorkStatus(workStatus: string, clothing?: string, accessory?: string) { + this.room?.send(Message.UPDATE_WORK_STATUS, { + workStatus, + clothing, + accessory + }) + } +} \ No newline at end of file diff --git a/client/src/stores/MeetingRoomStore.ts b/client/src/stores/MeetingRoomStore.ts index 8a034138..90042fa2 100644 --- a/client/src/stores/MeetingRoomStore.ts +++ b/client/src/stores/MeetingRoomStore.ts @@ -67,6 +67,32 @@ export const meetingRoomSlice = createSlice({ state.meetingRoomAreas = state.meetingRoomAreas.filter(area => area.meetingRoomId !== action.payload); }, + // Server-specific actions for network sync + addMeetingRoomFromServer: (state, action: PayloadAction) => { + // Check if room already exists to avoid duplicates + const exists = state.meetingRooms.find(room => room.id === action.payload.id); + if (!exists) { + state.meetingRooms.push(action.payload); + console.log('📥 [MeetingRoomStore] Added room from server:', action.payload.id); + } + }, + removeMeetingRoomFromServer: (state, action: PayloadAction) => { + state.meetingRooms = state.meetingRooms.filter(room => room.id !== action.payload); + console.log('📤 [MeetingRoomStore] Removed room from server:', action.payload); + }, + addMeetingRoomAreaFromServer: (state, action: PayloadAction) => { + // Check if area already exists to avoid duplicates + const exists = state.meetingRoomAreas.find(area => area.meetingRoomId === action.payload.meetingRoomId); + if (!exists) { + state.meetingRoomAreas.push(action.payload); + console.log('📥 [MeetingRoomStore] Added area from server:', action.payload.meetingRoomId); + } + }, + removeMeetingRoomAreaFromServer: (state, action: PayloadAction) => { + state.meetingRoomAreas = state.meetingRoomAreas.filter(area => area.meetingRoomId !== action.payload); + console.log('📤 [MeetingRoomStore] Removed area from server:', action.payload); + }, + } }); @@ -79,6 +105,10 @@ export const { addMeetingRoomArea, updateMeetingRoomArea, removeMeetingRoomArea, + addMeetingRoomFromServer, + removeMeetingRoomFromServer, + addMeetingRoomAreaFromServer, + removeMeetingRoomAreaFromServer, } = meetingRoomSlice.actions; export default meetingRoomSlice.reducer; diff --git a/client/src/stores/index.ts b/client/src/stores/index.ts index 05e7e025..985a9563 100644 --- a/client/src/stores/index.ts +++ b/client/src/stores/index.ts @@ -6,11 +6,8 @@ import whiteboardReducer from './WhiteboardStore' import chatReducer from './ChatStore' import roomReducer from './RoomStore' import meetingRoomReducer from './MeetingRoomStore' -<<<<<<< Updated upstream -======= import devModeReducer from './DevModeStore' import workReducer from './WorkStore' ->>>>>>> Stashed changes enableMapSet() @@ -22,11 +19,8 @@ const store = configureStore({ whiteboard: whiteboardReducer, chat: chatReducer, room: roomReducer, -<<<<<<< Updated upstream -======= devMode: devModeReducer, work: workReducer, ->>>>>>> Stashed changes }, // Temporary disable serialize check for redux as we store MediaStream in ComputerStore. // https://stackoverflow.com/a/63244831 diff --git a/client/src/web/ShareScreenManager.ts b/client/src/web/ShareScreenManager.ts index 6820c3a4..8a32a52f 100644 --- a/client/src/web/ShareScreenManager.ts +++ b/client/src/web/ShareScreenManager.ts @@ -85,7 +85,7 @@ export default class ShareScreenManager { store.dispatch(setMyStream(null)) // Manually let all other existing users know screen sharing is stopped const game = phaserGame.scene.keys.game as Game - game.network.onStopScreenShare(store.getState().computer.computerId!) + game.network.stopScreenShare(store.getState().computer.computerId!) } } diff --git a/client/src/web/WebRTC.ts b/client/src/web/WebRTC.ts index 35963c4a..0675ac15 100644 --- a/client/src/web/WebRTC.ts +++ b/client/src/web/WebRTC.ts @@ -163,4 +163,15 @@ export default class WebRTC { this.buttonGrid?.append(audioButton) this.buttonGrid?.append(videoButton) } + + // Methods for Network compatibility + connectToPlayer(userId: string, stream: MediaStream) { + this.myStream = stream + this.connectToNewUser(userId) + } + + disconnectFromPlayer(userId: string) { + this.deleteVideoStream(userId) + this.deleteOnCalledVideoStream(userId) + } } diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..390e750d --- /dev/null +++ b/docs/README.md @@ -0,0 +1,101 @@ +# Voffice Documentation + +## 📂 Directory Structure + +``` +docs/ +├── README.md # This file - documentation overview +├── fixes/ # Bug fixes and technical issues +│ ├── 2025-07-01_meeting-room-chat-rendering.md +│ └── 2025-07-01_dialog-positioning.md +├── features/ # Feature implementation guides +│ ├── meeting-room-chat.md +│ └── work-status-system.md +├── architecture/ # System architecture and design +│ ├── network-layer.md +│ └── redux-state-management.md +├── troubleshooting/ # Common issues and solutions +│ ├── compilation-errors.md +│ └── css-positioning-issues.md +└── development/ # Development processes and guidelines + ├── coding-standards.md + └── debugging-techniques.md +``` + +## 📋 **File Naming Convention** + +### Fixes Directory +- **Format**: `YYYY-MM-DD_short-description.md` +- **Examples**: + - `2025-07-01_meeting-room-chat-rendering.md` + - `2025-07-01_dialog-positioning-fix.md` + - `2025-06-28_network-sync-issues.md` + +### Features Directory +- **Format**: `feature-name.md` +- **Examples**: + - `meeting-room-chat.md` + - `work-status-system.md` + - `video-integration.md` + +### Architecture Directory +- **Format**: `component-or-layer.md` +- **Examples**: + - `network-layer.md` + - `redux-state-management.md` + - `phaser-react-integration.md` + +## 🎯 **Documentation Standards** + +### Fix Documentation Template +```markdown +# Fix: [Problem Description] + +**Date**: YYYY-MM-DD +**Type**: Bug Fix / Enhancement / Refactor +**Priority**: High / Medium / Low +**Status**: Completed / In Progress / Pending + +## 🐛 Problem Description +Brief description of the issue + +## 🔍 Root Cause Analysis +Detailed analysis of what caused the problem + +## 🛠️ Solution Implemented +Step-by-step description of the fix + +## 📁 Files Modified +- `path/to/file1.ts` - Description of changes +- `path/to/file2.tsx` - Description of changes + +## 🧪 Testing +How the fix was verified + +## 📚 Lessons Learned +Key takeaways and best practices + +## 🔗 Related Issues +Links to related fixes or features +``` + +## 📝 **Usage Guidelines** + +1. **Create fix documentation immediately** after resolving an issue +2. **Use clear, descriptive titles** that make issues easy to find +3. **Include code snippets** for important changes +4. **Add cross-references** between related documents +5. **Update existing docs** when making related changes +6. **Review and update** documentation quarterly + +## 🔍 **Search and Navigation** + +- Use descriptive filenames for easy searching +- Include relevant tags and keywords +- Maintain a master index of all fixes by date +- Cross-reference related issues and features + +--- + +**Last Updated**: 2025-07-01 +**Maintained By**: Development Team \ No newline at end of file diff --git a/docs/features/meeting-room-chat.md b/docs/features/meeting-room-chat.md new file mode 100644 index 00000000..aa04b6a0 --- /dev/null +++ b/docs/features/meeting-room-chat.md @@ -0,0 +1,309 @@ +# Feature: Meeting Room Chat System + +**Feature Status**: ✅ Completed and Deployed +**Version**: 1.0 +**Last Updated**: 2025-07-01 +**Developer**: Claude AI Assistant + +## 🎯 Overview + +A real-time chat system that activates when users enter designated meeting room areas within the virtual office environment. The system provides location-based chat functionality with permission management and persistent message history. + +## ✨ Features + +### Core Functionality +- ✅ **Location-Based Activation**: Chat automatically appears when entering meeting room areas +- ✅ **Real-Time Messaging**: Instant message delivery using WebSocket (Colyseus) +- ✅ **Permission Management**: Access control based on room modes (open/private/secret) +- ✅ **Message History**: Persistent chat history with automatic loading +- ✅ **User Notifications**: Join/leave notifications for room participants +- ✅ **Optimistic Updates**: Immediate UI feedback for sent messages + +### UI/UX Features +- ✅ **Modern Chat Interface**: Material-UI based design with gradient styling +- ✅ **Fixed Positioning**: Always visible in top-right corner, unaffected by game camera +- ✅ **Focus Management**: Automatically disables game controls during chat input +- ✅ **Message Types**: Visual distinction for system messages vs user messages +- ✅ **Timestamp Display**: Formatted timestamps for all messages +- ✅ **Close/Minimize**: Users can close chat while remaining in meeting room + +## 🏗️ Technical Architecture + +### System Components + +``` +┌─────────────────────────────────────────────────────┐ +│ Client Side │ +├─────────────────────────────────────────────────────┤ +│ App.tsx │ +│ ├── MainGameContent │ +│ │ ├── MeetingRoomChat (conditionally rendered) │ +│ │ └── Debug visualization │ +│ └── useGameContent hook │ +├─────────────────────────────────────────────────────┤ +│ MeetingRoomChat.tsx │ +│ ├── Real-time message display │ +│ ├── Message input with permission checks │ +│ ├── Chat history loading │ +│ └── Focus management for game integration │ +├─────────────────────────────────────────────────────┤ +│ Redux Store │ +│ ├── ChatStore.ts (meeting room chat state) │ +│ ├── MeetingRoomStore.ts (room definitions) │ +│ └── UserStore.ts (session and permissions) │ +├─────────────────────────────────────────────────────┤ +│ Phaser Game Integration │ +│ ├── MeetingRoom.ts (area detection) │ +│ ├── Game.ts (event handling) │ +│ └── MyPlayer.ts (position tracking) │ +├─────────────────────────────────────────────────────┤ +│ Network Layer │ +│ ├── Network.ts (WebSocket messaging) │ +│ ├── Message listeners │ +│ └── State synchronization │ +└─────────────────────────────────────────────────────┘ + +┌─────────────────────────────────────────────────────┐ +│ Server Side │ +├─────────────────────────────────────────────────────┤ +│ SkyOffice.ts (Colyseus Room) │ +│ ├── Meeting room state management │ +│ ├── Chat message handlers │ +│ ├── Permission validation │ +│ └── Message broadcasting │ +├─────────────────────────────────────────────────────┤ +│ Schema Definitions │ +│ ├── MeetingRoomState.ts │ +│ ├── MeetingRoom.ts │ +│ └── MeetingRoomChatMessage.ts │ +└─────────────────────────────────────────────────────┘ +``` + +### Data Flow + +1. **Room Entry Detection** + ``` + Player Movement → MeetingRoom.checkPlayerInMeetingRoom() → + handleMeetingRoomTransition() → Redux.setCurrentMeetingRoomId() + ``` + +2. **Chat Activation** + ``` + Redux State Change → useGameContent() → App.tsx Conditional Render → + MeetingRoomChat Component Mount + ``` + +3. **Message Sending** + ``` + User Input → MeetingRoomChat.handleSendMessage() → + Network.sendMeetingRoomChatMessage() → Server Processing → + Broadcast to All Clients + ``` + +4. **Message Receiving** + ``` + Server Broadcast → Network Listener → Redux Store Update → + Component Re-render → UI Update + ``` + +## 🗺️ Meeting Room Configuration + +### Test Meeting Room +- **ID**: `room-001` +- **Name**: `Test Meeting Room` +- **Mode**: `open` (publicly accessible) +- **Coordinates**: `(400, 200)` to `(600, 350)` +- **Size**: 200×150 pixels +- **Host**: `system` + +### Room Modes +- **Open**: Anyone can enter and chat +- **Private**: Only invited users and host can access +- **Secret**: Only host can access + +## 💻 Implementation Details + +### Key Files and Responsibilities + +#### Frontend Components +```typescript +// client/src/components/MeetingRoomChat.tsx +- Main chat component with Material-UI styling +- Real-time message display and input +- Permission-based UI state management +- Focus control for game integration + +// client/src/hooks/useGameContent.ts +- State aggregation for chat rendering conditions +- Meeting room lookup and permission checking +- Session management integration + +// client/src/scenes/MeetingRoom.ts +- Player position monitoring +- Meeting room area collision detection +- State transitions and event emission +``` + +#### State Management +```typescript +// client/src/stores/ChatStore.ts +- Meeting room chat message storage +- Current room ID tracking +- Focus state for input management +- Message type definitions + +// client/src/stores/MeetingRoomStore.ts +- Meeting room definitions and areas +- Server synchronization actions +- Room state management +``` + +#### Network Layer +```typescript +// client/src/services/Network.ts +- WebSocket message handlers +- Chat history requests +- Real-time message broadcasting +- Server state synchronization + +// server/rooms/SkyOffice.ts +- Chat message validation and storage +- Permission checking +- Message broadcasting to clients +- Room state management +``` + +### Message Types +```typescript +enum MeetingRoomMessageType { + REGULAR_MESSAGE = 'regular', + USER_JOINED = 'user_joined', + USER_LEFT = 'user_left', + PERMISSION_CHANGED = 'permission_changed' +} +``` + +### Database Schema +```typescript +interface IMeetingRoomChatMessage { + messageId: string; // UUID for message identification + author: string; // Player name who sent message + content: string; // Message text content + meetingRoomId: string; // Room where message was sent + createdAt: number; // Unix timestamp +} +``` + +## 🎨 UI/UX Specifications + +### Visual Design +- **Container**: 350×400px fixed-position panel +- **Position**: Top-right corner (20px from edges) +- **Background**: Semi-transparent white with blur effect +- **Border**: Subtle shadow and border +- **Z-Index**: 9999 (above game content) + +### Color Scheme +```css +/* Header */ +background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) + +/* Message Types */ +regular: #1565c0 (blue) +user_joined: #2e7d32 (green) +user_left: #d32f2f (red) +permission_changed: #f57c00 (orange) + +/* Input */ +background: linear-gradient(180deg, #f8fbff 0%, #e3f2fd 100%) +``` + +### Responsive Behavior +- **Fixed Dimensions**: Maintains 350×400px size +- **Scroll Management**: Auto-scroll to latest message +- **Overflow Handling**: Vertical scroll for message history +- **Input Focus**: Game controls disabled during typing + +## 🧪 Testing & Quality Assurance + +### Test Scenarios +1. **Room Entry/Exit**: Verify chat appears/disappears correctly +2. **Message Sending**: Test real-time message delivery +3. **Permission Checking**: Validate access control for different room modes +4. **History Loading**: Ensure previous messages load on room entry +5. **Multi-User**: Test with multiple users in same room +6. **Network Resilience**: Handle connection interruptions gracefully + +### Performance Metrics +- **Message Latency**: <100ms for local network +- **UI Responsiveness**: <16ms render time for smooth 60fps +- **Memory Usage**: Efficient message cleanup for long chat sessions +- **Network Efficiency**: Minimal bandwidth for chat operations + +## 🔧 Configuration & Customization + +### Environment Variables +```env +# Server Configuration +VITE_SERVER_URL=ws://localhost:2567 + +# Chat Settings +MAX_MESSAGE_LENGTH=500 +MESSAGE_HISTORY_LIMIT=100 +CHAT_REFRESH_INTERVAL=1000 +``` + +### Customizable Features +- **Room Coordinates**: Configurable meeting room areas +- **Message Limits**: Adjustable character and history limits +- **UI Styling**: Theming support via Material-UI +- **Permission Modes**: Extensible room access control + +## 🐛 Known Issues & Limitations + +### Current Limitations +- **Single Room**: Player can only be in one meeting room at a time +- **Message Persistence**: Messages stored in server memory (not database) +- **File Sharing**: No support for file attachments currently +- **Emoji Support**: Basic emoji support via text input + +### Future Enhancements +- [ ] **Database Integration**: Persistent message storage +- [ ] **File Sharing**: Image and document sharing capabilities +- [ ] **Advanced Permissions**: Role-based access control +- [ ] **Chat Commands**: Slash commands for room management +- [ ] **Mobile Optimization**: Touch-friendly interface +- [ ] **Voice Chat Integration**: WebRTC voice communication + +## 📋 Maintenance & Support + +### Monitoring Points +- **WebSocket Connection**: Monitor connection stability +- **Message Delivery**: Track message success rates +- **User Engagement**: Monitor chat usage patterns +- **Performance Metrics**: Track rendering and network performance + +### Debug Tools +- **Console Logging**: Comprehensive debug output +- **Redux DevTools**: State inspection and time travel +- **Network Inspector**: WebSocket message monitoring +- **Visual Debug**: Optional overlay for position debugging + +### Troubleshooting +- **Chat Not Visible**: Check CSS positioning and z-index +- **Messages Not Sending**: Verify WebSocket connection and permissions +- **History Not Loading**: Check server message handling and client listeners +- **Position Detection**: Verify meeting room area coordinates + +## 🔗 Related Documentation + +- [CSS Positioning Issues Troubleshooting](../troubleshooting/css-positioning-issues.md) +- [Meeting Room Chat Rendering Fix](../fixes/2025-07-01_meeting-room-chat-rendering.md) +- [Network Layer Architecture](../architecture/network-layer.md) +- [Redux State Management](../architecture/redux-state-management.md) + +--- + +**Feature Owner**: Development Team +**Technical Lead**: Claude AI Assistant +**Next Review**: 2025-10-01 \ No newline at end of file diff --git a/docs/fixes/2025-07-01_dialog-positioning-fix.md b/docs/fixes/2025-07-01_dialog-positioning-fix.md new file mode 100644 index 00000000..8a8968a2 --- /dev/null +++ b/docs/fixes/2025-07-01_dialog-positioning-fix.md @@ -0,0 +1,157 @@ +# Fix: Home Screen Dialog Positioning + +**Date**: 2025-07-01 +**Type**: Bug Fix +**Priority**: Medium +**Status**: Completed + +## 🐛 Problem Description + +The home screen (RoomSelectionDialog) was appearing in the top-right corner instead of being centered on the screen. This affected the user experience during the initial room selection process. + +## 🔍 Root Cause Analysis + +### Primary Cause: CSS Positioning Inheritance +- **Problem**: `position: absolute` in RoomSelectionDialog component +- **Effect**: Dialog positioned relative to Phaser game canvas container +- **Result**: Dialog offset from intended center position + +### Component Analysis +```typescript +// BEFORE (problematic) +const Backdrop = styled.div` + position: absolute; // ❌ Relative to parent container + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +` +``` + +### Why It Failed +1. **Parent Container**: Phaser game canvas acts as positioned parent +2. **Relative Positioning**: `absolute` calculates 50% from canvas, not viewport +3. **Canvas Offset**: Game canvas may have margins/padding affecting calculation +4. **Transform Origin**: Center calculation based on incorrect reference point + +## 🛠️ Solution Implemented + +### Position Fix +```diff +// RoomSelectionDialog.tsx +const Backdrop = styled.div` +- position: absolute; ++ position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + gap: 60px; + align-items: center; ++ z-index: 1000; +` +``` + +### Solution Benefits +- **Viewport Reference**: `position: fixed` uses browser viewport as reference +- **True Centering**: 50% calculations now based on screen dimensions +- **Independence**: Unaffected by parent container positioning or transforms +- **Layering**: Added z-index ensures dialog appears above game content + +## 📁 Files Modified + +- `client/src/components/RoomSelectionDialog.tsx` + - Changed Backdrop positioning from `absolute` to `fixed` + - Added z-index property for proper layering + - Maintained existing centering transform logic + +## 🧪 Testing + +### Verification Process +1. **Visual Inspection**: Confirmed dialog appears in screen center +2. **Responsive Test**: Verified centering at different screen sizes +3. **Cross-Component Check**: Ensured other dialogs unaffected +4. **Layering Test**: Confirmed dialog appears above game content + +### Test Results +✅ Home screen dialog now properly centered +✅ Centering maintained across different viewport sizes +✅ No regression in other dialog components +✅ Proper z-index layering maintained + +## 📚 Lessons Learned + +### Component Audit Results +After investigating the positioning issue, audited all dialog components: + +#### ✅ Already Correct (using `position: fixed`) +- **LoginDialog**: `position: fixed` - ✅ Working correctly +- **ComputerDialog**: `position: fixed` - ✅ Working correctly +- **WhiteboardDialog**: `position: fixed` - ✅ Working correctly +- **Chat**: `position: fixed` - ✅ Working correctly +- **HelperButtonGroup**: `position: fixed` - ✅ Working correctly + +#### ❌ Fixed (was using `position: absolute`) +- **RoomSelectionDialog**: Changed to `position: fixed` - ✅ Now working +- **MeetingRoomChat**: Changed to `position: fixed` - ✅ Now working + +### Pattern Recognition +The issue affected exactly 2 components, both using the same problematic pattern. This suggests: +1. **Inconsistent Implementation**: Some components followed correct pattern, others didn't +2. **Template Reuse**: Likely copied from an older/incorrect template +3. **Testing Gap**: These components weren't tested thoroughly in Phaser context + +## 🎯 Best Practices Established + +### Dialog Positioning Standards +```css +/* ✅ Standard pattern for all overlay dialogs */ +.dialog-container { + position: fixed; /* Always use fixed for overlays */ + z-index: 1000+; /* Ensure above game content */ + top: 50%; /* Center vertically */ + left: 50%; /* Center horizontally */ + transform: translate(-50%, -50%); /* True centering */ +} + +/* ❌ Avoid for overlay dialogs */ +.dialog-container { + position: absolute; /* Relative to parent - problematic */ + z-index: low-value; /* May render behind game */ +} +``` + +### Implementation Checklist +- [ ] Use `position: fixed` for all overlay dialogs +- [ ] Include `z-index >= 1000` for proper layering +- [ ] Test centering at multiple viewport sizes +- [ ] Verify dialog appears above game content +- [ ] Document positioning pattern in component guidelines + +## 🔗 Related Issues + +- **Meeting Room Chat Rendering**: Same root cause, same solution pattern +- **Future Dialog Components**: Apply this pattern consistently +- **Phaser Integration Guidelines**: Document React overlay best practices + +## 🎯 Prevention Strategy + +### Code Review Checklist +When reviewing React components that overlay Phaser games: +1. **Position Property**: Must be `fixed`, not `absolute` +2. **Z-Index Value**: Must be sufficiently high (>=1000) +3. **Centering Logic**: Test with `transform: translate(-50%, -50%)` +4. **Game Integration**: Test component within actual game context + +### Template Components +Create standardized templates for common overlay patterns: +- Centered dialogs +- Corner-positioned panels +- Full-screen overlays +- Notification popups + +--- + +**Verified By**: Development Team +**Review Date**: 2025-07-01 +**Related Fix**: meeting-room-chat-rendering.md \ No newline at end of file diff --git a/docs/fixes/2025-07-01_meeting-room-chat-rendering.md b/docs/fixes/2025-07-01_meeting-room-chat-rendering.md new file mode 100644 index 00000000..9f47fac1 --- /dev/null +++ b/docs/fixes/2025-07-01_meeting-room-chat-rendering.md @@ -0,0 +1,120 @@ +# Fix: Meeting Room Chat Not Rendering + +**Date**: 2025-07-01 +**Type**: Bug Fix +**Priority**: High +**Status**: Completed + +## 🐛 Problem Description + +Meeting room chat component was not visible to users when entering meeting room areas, despite all backend logic working correctly. Users reported "nothing happens when entering meeting rooms" and React chat was not displayed. + +## 🔍 Root Cause Analysis + +### Primary Cause: CSS Positioning Issues +- **Problem**: `position: absolute` in MeetingRoomChat component +- **Effect**: Chat window positioned relative to Phaser game canvas instead of viewport +- **Result**: Chat rendered off-screen or behind game elements + +### Secondary Cause: Z-Index Competition +- **Problem**: `z-index: 1000` insufficient for Phaser game overlay +- **Effect**: Chat window rendered behind Phaser canvas elements +- **Result**: Chat invisible even when positioned correctly + +### Investigation Process +1. **Logic Verification**: All Redux state management and event handling working correctly +2. **Component Analysis**: MeetingRoomChat component rendering but not visible +3. **CSS Debug**: Added ultra-visible debug styles to confirm rendering +4. **Positioning Test**: Changed to `position: fixed` revealed the issue + +## 🛠️ Solution Implemented + +### CSS Position Fix +```diff +// MeetingRoomChat.tsx +sx={{ +- position: 'absolute', ++ position: 'fixed', + top: 20, + right: 20, + width: 350, + height: 400, +- zIndex: 1000, ++ zIndex: 9999, +}} +``` + +### Why This Works +- **`position: fixed`**: Positions relative to viewport, not parent elements +- **Higher z-index**: Ensures chat appears above Phaser canvas +- **Viewport independence**: Unaffected by game camera movements or transforms + +## 📁 Files Modified + +- `client/src/components/MeetingRoomChat.tsx` + - Changed container positioning from `absolute` to `fixed` + - Increased z-index from 1000 to 9999 + - Added temporary debug visualization for testing + +## 🧪 Testing + +### Verification Steps +1. **Debug Visualization**: Added full-screen red overlay with "CHAT IS RENDERING!" message +2. **Position Test**: Confirmed chat appears in correct location (top-right corner) +3. **Functionality Test**: Verified chat input, message sending, and history loading +4. **Cross-browser Test**: Confirmed fix works across different browsers + +### Test Results +✅ Chat window now visible when entering meeting room areas +✅ Chat positioned correctly in top-right corner +✅ All chat functionality working as expected +✅ No interference with game rendering + +## 📚 Lessons Learned + +### Key Takeaways +1. **Phaser + React Integration**: Always use `position: fixed` for React UI overlays on Phaser games +2. **Z-Index Management**: Game canvases typically use high z-index values (>1000) +3. **Debug Visualization**: Extreme visual debugging helps identify invisible element issues +4. **CSS Positioning**: `absolute` vs `fixed` behavior differs significantly with game engines + +### Best Practices Established +- **Game UI Components**: Always use `position: fixed` with `z-index >= 9999` +- **Debug Strategy**: Use ultra-visible styles to confirm element rendering +- **Testing Approach**: Verify both logic and visual presentation separately + +### React + Phaser Guidelines +```css +/* ✅ Recommended for game UI overlays */ +position: fixed; +z-index: 9999; + +/* ❌ Avoid for game UI overlays */ +position: absolute; +z-index: < 5000; +``` + +## 🔗 Related Issues + +- **Dialog Positioning Fix**: Same root cause affected multiple UI components +- **Future UI Components**: Apply same positioning strategy for consistency +- **Phaser Integration**: Document pattern for all future React-over-Phaser components + +## 🎯 Implementation Details + +### Meeting Room Chat Specifications +- **Trigger**: Player enters coordinates (400-600, 200-350) +- **Display**: Fixed position top-right corner (20px from edges) +- **Size**: 350px × 400px +- **Features**: Real-time messaging, chat history, user permissions +- **Permissions**: Based on room mode (open/private/secret) + +### Architecture Flow +``` +Player Movement → MeetingRoomManager → Redux State → useGameContent Hook → MeetingRoomChat Component +``` + +--- + +**Verified By**: Development Team +**Review Date**: 2025-07-01 \ No newline at end of file diff --git a/docs/troubleshooting/css-positioning-issues.md b/docs/troubleshooting/css-positioning-issues.md new file mode 100644 index 00000000..3c163d82 --- /dev/null +++ b/docs/troubleshooting/css-positioning-issues.md @@ -0,0 +1,262 @@ +# Troubleshooting: CSS Positioning Issues in Phaser-React Integration + +**Last Updated**: 2025-07-01 +**Category**: Frontend / CSS / Game Integration + +## 🎯 Overview + +This guide covers common CSS positioning issues when integrating React UI components with Phaser games, specifically addressing invisible or mispositioned elements. + +## 🚨 Common Symptoms + +### 1. Invisible Components +- ✅ Component logic working correctly +- ✅ Redux state updates properly +- ✅ Console logs show component rendering +- ❌ Component not visible on screen + +### 2. Mispositioned Dialogs +- ❌ Dialogs appearing in wrong screen location +- ❌ Centering not working as expected +- ❌ Components offset from intended position + +### 3. Z-Index Issues +- ❌ Components appearing behind game content +- ❌ Interactions blocked by invisible overlays +- ❌ Components flickering or partially visible + +## 🔍 Diagnostic Steps + +### Step 1: Verify Component Rendering +```javascript +// Add temporary debug styles to confirm rendering +sx={{ + border: '5px solid red', + backgroundColor: 'rgba(255, 0, 0, 0.5)', + zIndex: 99999, +}} +``` + +### Step 2: Check Position Property +```typescript +// Problem indicators +position: 'absolute' // ❌ Usually problematic with Phaser +position: 'relative' // ❌ May be affected by parent transforms + +// Preferred solutions +position: 'fixed' // ✅ Independent of parent positioning +position: 'static' // ✅ For components within normal document flow +``` + +### Step 3: Inspect Z-Index Values +```css +/* Check for z-index conflicts */ +z-index: 1; /* ❌ Too low for game overlays */ +z-index: 100; /* ❌ Still might be insufficient */ +z-index: 1000; /* ✅ Sufficient for most cases */ +z-index: 9999; /* ✅ Guaranteed top layer */ +``` + +## 🛠️ Standard Solutions + +### Solution 1: Invisible React Components Over Phaser + +**Problem**: Component renders but not visible + +**Root Cause**: Positioning relative to Phaser canvas + +**Fix**: +```typescript +// BEFORE (problematic) +sx={{ + position: 'absolute', + top: 20, + right: 20, + zIndex: 1000, +}} + +// AFTER (working) +sx={{ + position: 'fixed', // Fixed to viewport + top: 20, + right: 20, + zIndex: 9999, // Above game content +}} +``` + +### Solution 2: Miscentered Dialogs + +**Problem**: Dialog appears offset from center + +**Root Cause**: Center calculation relative to wrong parent + +**Fix**: +```typescript +// BEFORE (problematic) +const Dialog = styled.div` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +`; + +// AFTER (working) +const Dialog = styled.div` + position: fixed; // Viewport reference + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1000; // Above game +`; +``` + +### Solution 3: Z-Index Competition + +**Problem**: Component behind game content + +**Root Cause**: Phaser canvas uses high z-index values + +**Fix**: +```typescript +// Progressive z-index strategy +const Z_INDEX = { + GAME_BACKGROUND: 0, + GAME_CONTENT: 1000, + UI_BACKGROUND: 5000, + UI_DIALOGS: 9000, + UI_TOOLTIPS: 9500, + UI_DEBUG: 9999, +}; +``` + +## 📋 Quick Reference Patterns + +### ✅ Correct Patterns + +#### Overlay Dialogs (Centered) +```typescript +const CenteredDialog = styled.div` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 9000; + background: rgba(255, 255, 255, 0.95); + border-radius: 8px; + padding: 20px; +`; +``` + +#### Corner Panels (Fixed Position) +```typescript +const CornerPanel = styled.div` + position: fixed; + top: 20px; + right: 20px; + z-index: 9000; + width: 300px; + height: 400px; +`; +``` + +#### Full Screen Overlays +```typescript +const FullScreenOverlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 8000; + background: rgba(0, 0, 0, 0.8); +`; +``` + +### ❌ Problematic Patterns + +#### Absolute Positioning (Avoid) +```typescript +// ❌ Don't use with Phaser games +const ProblematicDialog = styled.div` + position: absolute; // Relative to parent + top: 50%; + left: 50%; + z-index: 100; // Too low +`; +``` + +#### Low Z-Index (Avoid) +```typescript +// ❌ Will render behind game +sx={{ + zIndex: 1, // Too low + zIndex: 100, // Still too low + zIndex: 500, // Risky +}} +``` + +## 🧪 Testing Checklist + +### Pre-Deployment Testing +- [ ] Component visible at all supported screen sizes +- [ ] Correct positioning maintained during game camera movement +- [ ] No interference with game input/controls +- [ ] Z-index conflicts resolved +- [ ] Cross-browser compatibility verified + +### Debug Testing +- [ ] Add temporary ultra-visible styles +- [ ] Test with different viewport sizes +- [ ] Verify in fullscreen game mode +- [ ] Check with dev tools element inspector + +## 🎯 Prevention Guidelines + +### Code Review Checklist +When reviewing React components for Phaser integration: +1. **Position Property**: Never `absolute` for game overlays +2. **Z-Index Value**: Always >= 1000 for UI components +3. **Viewport Units**: Use `vw/vh` for full-screen elements +4. **Transform Origin**: Verify centering calculations +5. **Game Context**: Test within actual game environment + +### Component Guidelines +```typescript +// Template for game overlay components +interface GameOverlayProps { + position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; + zIndex?: number; + children: React.ReactNode; +} + +const GameOverlay: React.FC = ({ + position = 'center', + zIndex = 9000, + children +}) => { + const getPositionStyles = () => { + const base = { position: 'fixed', zIndex }; + + switch (position) { + case 'center': + return { ...base, top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }; + case 'top-right': + return { ...base, top: 20, right: 20 }; + // ... other positions + } + }; + + return
{children}
; +}; +``` + +## 🔗 Related Documentation + +- [Meeting Room Chat Rendering Fix](../fixes/2025-07-01_meeting-room-chat-rendering.md) +- [Dialog Positioning Fix](../fixes/2025-07-01_dialog-positioning-fix.md) +- [Phaser-React Integration Guide](../architecture/phaser-react-integration.md) + +--- + +**Maintained By**: Frontend Team +**Next Review**: 2025-10-01 \ No newline at end of file diff --git a/server/rooms/SkyOffice.ts b/server/rooms/SkyOffice.ts index 387bb6ae..88fdfaec 100644 --- a/server/rooms/SkyOffice.ts +++ b/server/rooms/SkyOffice.ts @@ -5,10 +5,7 @@ import { Player, OfficeState, Computer, Whiteboard } from './schema/OfficeState' import { Message } from '../../types/Messages' import { IRoomData } from '../../types/Rooms' import { whiteboardRoomIds } from './schema/OfficeState' -<<<<<<< Updated upstream -======= import { MeetingRoom, MeetingRoomArea, MeetingRoomChatMessage } from './schema/MeetingRoomState' ->>>>>>> Stashed changes import PlayerUpdateCommand from './commands/PlayerUpdateCommand' import PlayerUpdateNameCommand from './commands/PlayerUpdateNameCommand' import { @@ -44,21 +41,16 @@ export class SkyOffice extends Room { this.setState(new OfficeState()) -<<<<<<< Updated upstream + // Debug: Check meetingRoomState initialization + console.log('OfficeState set, checking meetingRoomState...') + console.log('meetingRoomState initialized:', !!this.state.meetingRoomState) + console.log('meetingRooms exists:', !!this.state.meetingRoomState?.meetingRooms) + console.log('meetingRoomAreas exists:', !!this.state.meetingRoomState?.meetingRoomAreas) + // HARD-CODED: Add 5 computers in a room for (let i = 0; i < 5; i++) { this.state.computers.set(String(i), new Computer()) -======= - // Debug: Check meetingRoomState initialization - console.log('OfficeState set, checking meetingRoomState...') - console.log('meetingRoomState initialized:', !!this.state.meetingRoomState) - console.log('meetingRooms exists:', !!this.state.meetingRoomState?.meetingRooms) - console.log('meetingRoomAreas exists:', !!this.state.meetingRoomState?.meetingRoomAreas) - - // HARD-CODED: Add 5 computers in a room - for (let i = 0; i < 5; i++) { - this.state.computers.set(String(i), new Computer()) - } + } // HARD-CODED: Add 3 whiteboards in a room for (let i = 0; i < 3; i++) { @@ -566,25 +558,6 @@ export class SkyOffice extends Room { }) } }) - } - - // Helper method to check meeting room access permission - private canAccessMeetingRoom(userId: string, meetingRoom: MeetingRoom): boolean { - if (meetingRoom.mode === 'open') { - return true - } else if (meetingRoom.mode === 'private') { - return meetingRoom.hostUserId === userId || meetingRoom.invitedUsers.includes(userId) - } else if (meetingRoom.mode === 'secret') { - return meetingRoom.hostUserId === userId - } - return false ->>>>>>> Stashed changes - } - - // HARD-CODED: Add 3 whiteboards in a room - for (let i = 0; i < 3; i++) { - this.state.whiteboards.set(String(i), new Whiteboard()) - } // when a player connect to a computer, add to the computer connectedUser array this.onMessage(Message.CONNECT_TO_COMPUTER, (client, message: { computerId: string }) => { @@ -735,4 +708,60 @@ export class SkyOffice extends Room { console.log('room', this.roomId, 'disposing...') this.dispatcher.stop() } + + // Helper method to check meeting room access permission + private canAccessMeetingRoom(userId: string, meetingRoom: MeetingRoom): boolean { + if (meetingRoom.mode === 'open') { + return true + } else if (meetingRoom.mode === 'private') { + return meetingRoom.hostUserId === userId || meetingRoom.invitedUsers.includes(userId) + } else if (meetingRoom.mode === 'secret') { + return meetingRoom.hostUserId === userId + } + return false + } + + private initializeDefaultMeetingRoom() { + console.log('🏢 [SkyOffice] Initializing default meeting room...') + + if (!this.state.meetingRoomState) { + console.error('❌ [SkyOffice] meetingRoomState is not initialized!') + return + } + + // Create a test meeting room + const testRoom = new MeetingRoom() + testRoom.id = 'room-001' + testRoom.name = 'Test Meeting Room' + testRoom.mode = 'open' + testRoom.hostUserId = 'system' + testRoom.invitedUsers = [] + testRoom.participants = [] + + this.state.meetingRoomState.meetingRooms.set('room-001', testRoom) + console.log('✅ [SkyOffice] Created test meeting room:', { + id: testRoom.id, + name: testRoom.name, + mode: testRoom.mode, + totalRooms: this.state.meetingRoomState.meetingRooms.size + }) + + // Create a test meeting room area + const testArea = new MeetingRoomArea() + testArea.meetingRoomId = 'room-001' + testArea.x = 400 + testArea.y = 200 + testArea.width = 200 + testArea.height = 150 + + this.state.meetingRoomState.meetingRoomAreas.set('area-001', testArea) + console.log('✅ [SkyOffice] Created test meeting room area:', { + id: testArea.meetingRoomId, + coordinates: `${testArea.x},${testArea.y} to ${testArea.x + testArea.width},${testArea.y + testArea.height}`, + totalAreas: this.state.meetingRoomState.meetingRoomAreas.size + }) + + // Force broadcast the state change + console.log('📡 [SkyOffice] Broadcasting meeting room state to all clients...') + } } diff --git a/server/rooms/schema/OfficeState.ts b/server/rooms/schema/OfficeState.ts index 9af16f73..5f23dcdb 100644 --- a/server/rooms/schema/OfficeState.ts +++ b/server/rooms/schema/OfficeState.ts @@ -1,13 +1,23 @@ import { Schema, ArraySchema, SetSchema, MapSchema, type } from '@colyseus/schema' import { -<<<<<<< Updated upstream IPlayer, IOfficeState, IComputer, IWhiteboard, IChatMessage, + IPlayerAppearance, + WorkStatus, + ClothingType, + AccessoryType, } from '../../../types/IOfficeState' +import { MeetingRoomState } from './MeetingRoomState' + +export class PlayerAppearance extends Schema implements IPlayerAppearance { + @type('string') clothing: ClothingType = 'business' + @type('string') accessory: AccessoryType = 'none' +} + export class Player extends Schema implements IPlayer { @type('string') name = '' @type('number') x = 705 @@ -15,39 +25,11 @@ export class Player extends Schema implements IPlayer { @type('string') anim = 'adam_idle_down' @type('boolean') readyToConnect = false @type('boolean') videoConnected = false -======= - IPlayer, - IOfficeState, - IComputer, - IWhiteboard, - IChatMessage, - IPlayerAppearance, - WorkStatus, - ClothingType, - AccessoryType, -} from '../../../types/IOfficeState' - -import { MeetingRoomState } from './MeetingRoomState' - -export class PlayerAppearance extends Schema implements IPlayerAppearance { - @type('string') clothing: ClothingType = 'business' - @type('string') accessory: AccessoryType = 'none' -} - -export class Player extends Schema implements IPlayer { - @type('string') name = '' - @type('number') x = 705 - @type('number') y = 500 - @type('string') anim = 'adam_idle_down' - @type('boolean') readyToConnect = false - @type('boolean') videoConnected = false - // 勤務関連の新しいフィールド - @type('string') workStatus: WorkStatus = 'off-duty' - @type('number') workStartTime = 0 - @type('number') lastBreakTime = 0 - @type('number') fatigueLevel = 0 - @type(PlayerAppearance) appearance = new PlayerAppearance() ->>>>>>> Stashed changes + @type('string') workStatus: WorkStatus = 'off-duty' + @type('number') workStartTime = 0 + @type('number') lastBreakTime = 0 + @type('number') fatigueLevel = 0 + @type(PlayerAppearance) appearance = new PlayerAppearance() } export class Computer extends Schema implements IComputer { @@ -77,6 +59,9 @@ export class OfficeState extends Schema implements IOfficeState { @type([ChatMessage]) chatMessages = new ArraySchema() + + @type(MeetingRoomState) + meetingRoomState = new MeetingRoomState() } export const whiteboardRoomIds = new Set() diff --git a/types/IOfficeState.ts b/types/IOfficeState.ts index 442bfcb4..2b7c92da 100644 --- a/types/IOfficeState.ts +++ b/types/IOfficeState.ts @@ -13,27 +13,17 @@ export interface IPlayerAppearance { } export interface IPlayer extends Schema { -<<<<<<< Updated upstream name: string x: number y: number anim: string readyToConnect: boolean videoConnected: boolean -======= - name: string - x: number - y: number - anim: string - readyToConnect: boolean - videoConnected: boolean - // 勤務関連の新しいフィールド - workStatus: WorkStatus - workStartTime: number - lastBreakTime: number - fatigueLevel: number // 0-100 - appearance: IPlayerAppearance ->>>>>>> Stashed changes + workStatus: WorkStatus + workStartTime: number + lastBreakTime: number + fatigueLevel: number + appearance: IPlayerAppearance } export interface IComputer extends Schema { @@ -46,22 +36,17 @@ export interface IWhiteboard extends Schema { } export interface IChatMessage extends Schema { -<<<<<<< Updated upstream author: string createdAt: number content: string -======= - author: string - createdAt: number - content: string } export interface IMeetingRoomChatMessage extends Schema { - author: string - createdAt: number - content: string - meetingRoomId: string - messageId: string + author: string + createdAt: number + content: string + meetingRoomId: string + messageId: string } export interface IMeetingRoom { id: string @@ -83,8 +68,7 @@ export interface IMeetingRoomArea { export interface IMeetingRoomState { meetingRooms: MapSchema meetingRoomAreas: MapSchema - meetingRoomChatMessages: ArraySchema ->>>>>>> Stashed changes + meetingRoomChatMessages: ArraySchema } export interface IOfficeState extends Schema { @@ -92,4 +76,5 @@ export interface IOfficeState extends Schema { computers: MapSchema whiteboards: MapSchema chatMessages: ArraySchema + meetingRoomState: IMeetingRoomState } diff --git a/types/Messages.ts b/types/Messages.ts index 815cf045..d738d8d4 100644 --- a/types/Messages.ts +++ b/types/Messages.ts @@ -1,5 +1,4 @@ export enum Message { -<<<<<<< Updated upstream UPDATE_PLAYER, UPDATE_PLAYER_NAME, READY_TO_CONNECT, @@ -12,29 +11,14 @@ export enum Message { VIDEO_CONNECTED, ADD_CHAT_MESSAGE, SEND_ROOM_DATA, -======= - UPDATE_PLAYER, - UPDATE_PLAYER_NAME, - READY_TO_CONNECT, - DISCONNECT_STREAM, - CONNECT_TO_COMPUTER, - DISCONNECT_FROM_COMPUTER, - STOP_SCREEN_SHARE, - CONNECT_TO_WHITEBOARD, - DISCONNECT_FROM_WHITEBOARD, - VIDEO_CONNECTED, - ADD_CHAT_MESSAGE, - SEND_ROOM_DATA, - CREATE_MEETING_ROOM, - UPDATE_MEETING_ROOM, - DELETE_MEETING_ROOM, - ADD_MEETING_ROOM_CHAT_MESSAGE, - GET_MEETING_ROOM_CHAT_HISTORY, - // 勤務ステータス関連 - UPDATE_WORK_STATUS, - START_WORK, - END_WORK, - START_BREAK, - END_BREAK, ->>>>>>> Stashed changes + CREATE_MEETING_ROOM, + UPDATE_MEETING_ROOM, + DELETE_MEETING_ROOM, + ADD_MEETING_ROOM_CHAT_MESSAGE, + GET_MEETING_ROOM_CHAT_HISTORY, + UPDATE_WORK_STATUS, + START_WORK, + END_WORK, + START_BREAK, + END_BREAK, } From 696dd5ee8f999925fbfd1a9605e81dd50adac13a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=20=E6=81=92=E5=BF=97?= Date: Tue, 1 Jul 2025 23:02:46 +0900 Subject: [PATCH 11/11] fix server sync --- CLAUDE.md | 15 +- client/src/components/DevModePanel.tsx | 360 +++++- client/src/components/MeetingRoomChat.tsx | 4 +- client/src/components/MeetingRoomManager.tsx | 6 +- client/src/hooks/useGameContent.ts | 8 +- client/src/scenes/Game.ts | 81 +- client/src/scenes/MeetingRoom.ts | 8 +- client/src/services/Network.ts | 1038 +++++++++-------- client/src/stores/MeetingRoomStore.ts | 48 +- client/src/web/ShareScreenManager.ts | 2 +- client/src/web/WebRTC.ts | 11 - data/meeting_rooms.json | 5 + debug-player-visibility.js | 50 + debug-video-calls.js | 122 ++ debug-video-reconnection.js | 142 +++ .../2025-07-01_invitation-dropdown-fix.md | 194 +++ .../2025-07-01_meeting-room-deletion-fix.md | 245 ++++ ...2025-07-01_meeting-room-persistence-fix.md | 306 +++++ docs/fixes/2025-07-01_room-mode-update-fix.md | 193 +++ docs/fixes/2025-07-01_video-call-fix.md | 200 ++++ .../2025-07-01_visual-edit-persistence-fix.md | 229 ++++ emergency-video-fix.js | 141 +++ server/rooms/SkyOffice.ts | 735 +++++------- 23 files changed, 3092 insertions(+), 1051 deletions(-) create mode 100644 data/meeting_rooms.json create mode 100644 debug-player-visibility.js create mode 100644 debug-video-calls.js create mode 100644 debug-video-reconnection.js create mode 100644 docs/fixes/2025-07-01_invitation-dropdown-fix.md create mode 100644 docs/fixes/2025-07-01_meeting-room-deletion-fix.md create mode 100644 docs/fixes/2025-07-01_meeting-room-persistence-fix.md create mode 100644 docs/fixes/2025-07-01_room-mode-update-fix.md create mode 100644 docs/fixes/2025-07-01_video-call-fix.md create mode 100644 docs/fixes/2025-07-01_visual-edit-persistence-fix.md create mode 100644 emergency-video-fix.js diff --git a/CLAUDE.md b/CLAUDE.md index 35dd0732..f83da19a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -379,5 +379,18 @@ docs/ - **機能**: リアルタイムチャット、権限管理、履歴、UI統合 - **ドキュメント**: 完全仕様書作成済み (`docs/features/meeting-room-chat.md`) +## 🐛 最新の修正履歴 + +### **ビデオ通話機能修正 (2025-07-01)** +- **問題**: プレイヤー間ビデオ通話が開始されない (`otherVideoConnected: false` 状態継続) +- **原因**: 参考実装との微細な差異によるイベント処理システムの不整合 + - `Network.ts` のイベント登録メソッド欠落 + - `player.onChange` の処理順序の違い + - `readyToConnect`/`videoConnected` イベント発火不備 +- **解決方法**: 参考実装からの完全ファイル置き換え +- **修正ファイル**: `Network.ts`, `OtherPlayer.ts`, `WebRTC.ts`, `Game.ts`, `SkyOffice.ts` +- **結果**: ✅ プレイヤー間ビデオ通話が正常動作 +- **詳細**: [修正レポート](./docs/fixes/2025-07-01_video-call-fix.md) + --- -**最終更新**: 2025-07-01 - ドキュメント体系導入・会議室チャット完全実装・CSS positioning問題解決 \ No newline at end of file +**最終更新**: 2025-07-01 - ビデオ通話機能修正完了 \ No newline at end of file diff --git a/client/src/components/DevModePanel.tsx b/client/src/components/DevModePanel.tsx index e253f01c..7366528c 100644 --- a/client/src/components/DevModePanel.tsx +++ b/client/src/components/DevModePanel.tsx @@ -1,4 +1,6 @@ import React, { useState, useEffect } from 'react' +import phaserGame from '../PhaserGame' +import Game from '../scenes/Game' import { Box, Paper, @@ -18,22 +20,26 @@ import { Grid, Switch, FormControlLabel, - Divider + Divider, + IconButton, + Autocomplete } from '@mui/material' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' +import DeleteIcon from '@mui/icons-material/Delete' +import AddIcon from '@mui/icons-material/Add' import { useAppSelector, useAppDispatch } from '../hooks' import { useDevMode } from '../hooks/useDevMode' import { LogLevel, LogEntry } from '../utils/logger' import { BackgroundMode } from '../../../types/BackgroundMode' import { BaseAvatarType } from '../types/AvatarTypes' import { startWork, endWork, startBreak, endBreak, setWorkStartTime, setFatigueLevel, updateWorkStatus, updateOtherPlayerWorkStatus, setBaseAvatar } from '../stores/WorkStore' -import { toggleBackgroundMode, setVideoConnected, setLoggedIn, setShowJoystick } from '../stores/UserStore' +import { toggleBackgroundMode, setVideoConnected, setLoggedIn, setShowJoystick, setPlayerNameMap } from '../stores/UserStore' import { setDevmode } from '../stores/DevModeStore' import { setLobbyJoined, setRoomJoined, setJoinedRoomData } from '../stores/RoomStore' import { setShowChat, setFocused, pushChatMessage, setCurrentMeetingRoomId } from '../stores/ChatStore' import { openComputerDialog, closeComputerDialog } from '../stores/ComputerStore' import { openWhiteboardDialog, closeWhiteboardDialog } from '../stores/WhiteboardStore' -import { addMeetingRoom, updateMeetingRoom, removeMeetingRoom, setCurrentMeetingRoomId as setMeetingRoomId, MeetingRoomMode } from '../stores/MeetingRoomStore' +import { addMeetingRoom, updateMeetingRoom, removeMeetingRoom, addMeetingRoomArea, updateMeetingRoomArea, removeMeetingRoomArea, setCurrentMeetingRoomId as setMeetingRoomId, MeetingRoomMode } from '../stores/MeetingRoomStore' interface TabPanelProps { children?: React.ReactNode @@ -52,6 +58,31 @@ const DevModePanel: React.FC = () => { const { isDevMode, logManager, setLogLevel } = useDevMode() const dispatch = useAppDispatch() + // Helper function to get network connection + const getNetwork = () => { + try { + console.log('🔍 [DevMode] Getting network connection...') + console.log('🔍 [DevMode] phaserGame:', phaserGame) + console.log('🔍 [DevMode] phaserGame.scene:', phaserGame?.scene) + console.log('🔍 [DevMode] phaserGame.scene.keys:', phaserGame?.scene?.keys) + + const game = phaserGame.scene.keys.game as Game + console.log('🔍 [DevMode] game object:', game) + console.log('🔍 [DevMode] game.network:', game?.network) + + if (game?.network) { + console.log('✅ [DevMode] Network connection found') + return game.network + } else { + console.warn('❌ [DevMode] Network connection not found') + return null + } + } catch (error) { + console.error('🌐 [DevMode] Failed to get network connection:', error) + return null + } + } + // Get Redux state - ALWAYS call these hooks const workState = useAppSelector((state) => state.work) const userState = useAppSelector((state) => state.user) @@ -61,6 +92,28 @@ const DevModePanel: React.FC = () => { const whiteboardState = useAppSelector((state) => state.whiteboard) const meetingRoomState = useAppSelector((state) => state.meetingRoom) + // Get online players from playerNameMap + const onlinePlayers = React.useMemo(() => { + const players: { id: string, name: string }[] = [] + console.log('🎮 [DevMode] playerNameMap:', userState.playerNameMap) + console.log('🎮 [DevMode] playerNameMap size:', userState.playerNameMap.size) + console.log('🎮 [DevMode] sessionId:', userState.sessionId) + + // Iterate over Map entries + for (const [id, name] of userState.playerNameMap.entries()) { + console.log('🎮 [DevMode] Processing player:', { id, name, isMe: id === userState.sessionId }) + if (id !== userState.sessionId) { // Exclude self + players.push({ id, name }) + console.log('🎮 [DevMode] Added to onlinePlayers:', { id, name }) + } else { + console.log('🎮 [DevMode] Skipped self:', { id, name }) + } + } + + console.log('🎮 [DevMode] Final onlinePlayers:', players) + return players.sort((a, b) => a.name.localeCompare(b.name)) + }, [userState.playerNameMap, userState.sessionId]) + // Panel state - ALWAYS call these hooks const [tabValue, setTabValue] = useState(0) const [logs, setLogs] = useState([]) @@ -83,7 +136,7 @@ const DevModePanel: React.FC = () => { const [editingRooms, setEditingRooms] = useState<{ [roomId: string]: { name: string area: { x: number, y: number, width: number, height: number } - invitedUsers: string + invitedUsers: string[] } }>({}) // Visual editing mode - ALWAYS call this hook @@ -102,29 +155,41 @@ const DevModePanel: React.FC = () => { // Expose visual edit functions globally for game scene access useEffect(() => { const updateRoomAreaFromVisual = (roomId: string, area: { x: number, y: number, width: number, height: number }) => { + console.log(`🎨 [DevMode] updateRoomAreaFromVisual called:`, { roomId, area }) + // Update Redux store - const room = meetingRoomState.meetingRooms.find(r => r.id === roomId) - if (!room) return + const room = meetingRoomState.meetingRooms[roomId] + if (!room) { + console.error(`🎨 [DevMode] Room not found:`, roomId) + return + } + + const currentArea = meetingRoomState.meetingRoomAreas[roomId] + console.log(`🎨 [DevMode] Current area:`, currentArea) const updatedArea = { meetingRoomId: roomId, ...area } - dispatch(updateMeetingRoom({ room, area: updatedArea })) + console.log(`🎨 [DevMode] Dispatching updateMeetingRoomArea with:`, updatedArea) + dispatch(updateMeetingRoomArea(updatedArea)) // Send to network - const network = (window as any).network + const network = getNetwork() if (network) { - network.updateMeetingRoomArea({ roomId, area: updatedArea }) + console.log(`🎨 [DevMode] Sending to network:`, { roomId, areaUpdates: area }) + network.updateMeetingRoomArea(roomId, area) + } else { + console.warn(`🎨 [DevMode] Network not available`) } - console.log(`🎨 [DevMode] Updated room area visually:`, { roomId, area }) + console.log(`🎨 [DevMode] Updated room area visually completed:`, { roomId, area }) } - (window as any).devModeUpdateRoomArea = updateRoomAreaFromVisual + // Global function no longer needed - Game.ts uses direct Redux/Network access return () => { - delete (window as any).devModeUpdateRoomArea + // Cleanup if needed } }, [meetingRoomState, dispatch]) @@ -177,6 +242,12 @@ const DevModePanel: React.FC = () => { const statuses = ['working', 'break', 'meeting', 'off-duty'] as const const randomStatus = statuses[Math.floor(Math.random() * statuses.length)] + console.log('🤖 [DevMode] Adding mock player to playerNameMap:', { id: mockPlayerId, name: mockPlayerName }) + + // Add to playerNameMap for invitation testing + dispatch(setPlayerNameMap({ id: mockPlayerId, name: mockPlayerName })) + + // Add to work status for testing dispatch(updateOtherPlayerWorkStatus({ playerId: mockPlayerId, playerName: mockPlayerName, @@ -188,7 +259,7 @@ const DevModePanel: React.FC = () => { const testNetworkSync = () => { console.log('🔄 [DevMode] Testing network sync...') console.log('Current other players:', workState.otherPlayersWorkStatus) - console.log('Network connection:', (window as any).network ? 'Connected' : 'Disconnected') + console.log('Network connection:', getNetwork() ? 'Connected' : 'Disconnected') console.log('User state:', { sessionId: userState.sessionId, loggedIn: userState.loggedIn, @@ -205,7 +276,7 @@ const DevModePanel: React.FC = () => { // Test work status message reception from network console.log('📡 [DevMode] Checking for work-status message listeners...') - const network = (window as any).network + const network = getNetwork() if (network && network.room) { console.log('✅ Network room is available') console.log('🎧 Message listeners count:', Object.keys(network.room._messageHandlers || {}).length) @@ -252,7 +323,7 @@ const DevModePanel: React.FC = () => { // Change own work status and test network transmission const testSendWorkStatus = () => { - const network = (window as any).network + const network = getNetwork() if (!network) { console.error('❌ Network not available') return @@ -431,10 +502,11 @@ const DevModePanel: React.FC = () => { ...newRoomArea } - dispatch(addMeetingRoom({ room, area })) + dispatch(addMeetingRoom(room)) + dispatch(addMeetingRoomArea(area)) // Send to network if available - const network = (window as any).network + const network = getNetwork() if (network) { network.createMeetingRoom({ id: roomId, @@ -453,28 +525,71 @@ const DevModePanel: React.FC = () => { } const deleteMeetingRoom = (roomId: string) => { + console.log('🗑️ [DevMode] ===== DELETE MEETING ROOM START =====') + console.log('🗑️ [DevMode] Room ID to delete:', roomId) + + // Check if room exists before deletion + const roomExists = meetingRoomState.meetingRooms[roomId] + const areaExists = meetingRoomState.meetingRoomAreas[roomId] + console.log('🗑️ [DevMode] Room exists in state:', !!roomExists) + console.log('🗑️ [DevMode] Area exists in state:', !!areaExists) + + // Remove from local Redux state + console.log('🗑️ [DevMode] Step 1: Removing from Redux state...') dispatch(removeMeetingRoom(roomId)) + dispatch(removeMeetingRoomArea(roomId)) + console.log('🗑️ [DevMode] Redux state update dispatched') // Send to network if available - const network = (window as any).network + console.log('🗑️ [DevMode] Step 2: Getting network connection...') + const network = getNetwork() if (network) { - network.deleteMeetingRoom(roomId) + console.log('🗑️ [DevMode] Step 3: Sending delete request to server...') + console.log('🗑️ [DevMode] Network object methods:', Object.getOwnPropertyNames(network)) + console.log('🗑️ [DevMode] Has deleteMeetingRoom method:', typeof network.deleteMeetingRoom) + + try { + network.deleteMeetingRoom(roomId) + console.log('🗑️ [DevMode] Delete request sent successfully') + } catch (error) { + console.error('🗑️ [DevMode] Error sending delete request:', error) + } + } else { + console.warn('🗑️ [DevMode] Network not available for room deletion') } + + console.log('🗑️ [DevMode] ===== DELETE MEETING ROOM END =====') } const updateRoomMode = (roomId: string, newMode: MeetingRoomMode) => { - const room = meetingRoomState.meetingRooms.find(r => r.id === roomId) - if (!room) return + console.log('🏢 [DevMode] updateRoomMode called:', { roomId, newMode }) + const room = meetingRoomState.meetingRooms[roomId] + if (!room) { + console.error('🏢 [DevMode] Room not found:', roomId) + return + } + + console.log('🏢 [DevMode] Current room:', room) const updatedRoom = { ...room, mode: newMode } - const area = meetingRoomState.meetingRoomAreas.find(a => a.meetingRoomId === roomId) + console.log('🏢 [DevMode] Updated room:', updatedRoom) + + const area = meetingRoomState.meetingRoomAreas[roomId] if (area) { - dispatch(updateMeetingRoom({ room: updatedRoom, area })) + console.log('🏢 [DevMode] Dispatching updateMeetingRoom to Redux') + dispatch(updateMeetingRoom(updatedRoom)) // Send to network if available - const network = (window as any).network + const network = getNetwork() if (network) { + console.log('🏢 [DevMode] Sending to network:', { + id: roomId, + name: room.name, + mode: newMode, + hostUserId: room.hostUserId, + invitedUsers: room.invitedUsers + }) network.updateMeetingRoom({ id: roomId, name: room.name, @@ -482,7 +597,11 @@ const DevModePanel: React.FC = () => { hostUserId: room.hostUserId, invitedUsers: room.invitedUsers }) + } else { + console.warn('🏢 [DevMode] Network not available on window object') } + } else { + console.error('🏢 [DevMode] Area not found for room:', roomId) } } @@ -498,7 +617,7 @@ const DevModePanel: React.FC = () => { width: area?.width || 100, height: area?.height || 100 }, - invitedUsers: room.invitedUsers.join(', ') + invitedUsers: room.invitedUsers || [] } })) } @@ -507,13 +626,13 @@ const DevModePanel: React.FC = () => { const editing = editingRooms[roomId] if (!editing) return - const room = meetingRoomState.meetingRooms.find(r => r.id === roomId) + const room = meetingRoomState.meetingRooms[roomId] if (!room) return const updatedRoom = { ...room, name: editing.name, - invitedUsers: editing.invitedUsers.split(',').map(u => u.trim()).filter(u => u) + invitedUsers: editing.invitedUsers } const updatedArea = { @@ -521,10 +640,11 @@ const DevModePanel: React.FC = () => { ...editing.area } - dispatch(updateMeetingRoom({ room: updatedRoom, area: updatedArea })) + dispatch(updateMeetingRoom(updatedRoom)) + dispatch(updateMeetingRoomArea(updatedArea)) // Send to network - const network = (window as any).network + const network = getNetwork() if (network) { network.updateMeetingRoom({ id: roomId, @@ -573,10 +693,31 @@ const DevModePanel: React.FC = () => { })) } + const addInvitedUser = (roomId: string, userId: string) => { + setEditingRooms(prev => ({ + ...prev, + [roomId]: { + ...prev[roomId], + invitedUsers: [...prev[roomId].invitedUsers, userId] + } + })) + } + + const removeInvitedUser = (roomId: string, userId: string) => { + setEditingRooms(prev => ({ + ...prev, + [roomId]: { + ...prev[roomId], + invitedUsers: prev[roomId].invitedUsers.filter(id => id !== userId) + } + })) + } + // Visual editing mode functions const toggleVisualEditMode = () => { console.log('🎯 [DevMode] toggleVisualEditMode called, current state:', visualEditMode) - setVisualEditMode(!visualEditMode) + const newEditMode = !visualEditMode + setVisualEditMode(newEditMode) // Send visual edit mode to game scene const game = (window as any).game @@ -614,14 +755,14 @@ const DevModePanel: React.FC = () => { console.log('🎯 [DevMode] Game scene keys:', Object.keys(gameScene || {})) if (gameScene && (gameScene as any).toggleMeetingRoomEditMode) { - console.log('🎯 [DevMode] Calling toggleMeetingRoomEditMode with:', !visualEditMode) - ;(gameScene as any).toggleMeetingRoomEditMode(!visualEditMode) + console.log('🎯 [DevMode] Calling toggleMeetingRoomEditMode with:', newEditMode) + ;(gameScene as any).toggleMeetingRoomEditMode(newEditMode) } else { console.warn('🎯 [DevMode] toggleMeetingRoomEditMode not found on game scene') console.warn('🎯 [DevMode] Available methods on scene:', Object.keys(gameScene || {})) } - console.log(`🎨 [DevMode] Visual edit mode: ${!visualEditMode ? 'ENABLED' : 'DISABLED'}`) + console.log(`🎨 [DevMode] Visual edit mode: ${newEditMode ? 'ENABLED' : 'DISABLED'}`) } @@ -971,6 +1112,62 @@ const DevModePanel: React.FC = () => { )} + {/* Network Debug Section */} + + + 🔧 Network Debug Tests + + + + + {Object.keys(meetingRoomState.meetingRooms).length > 1 && ( + + )} + + + {/* Create New Meeting Room */} Create New Room @@ -1053,15 +1250,15 @@ const DevModePanel: React.FC = () => { {/* Existing Meeting Rooms */} - Existing Rooms ({meetingRoomState.meetingRooms.length}) + Existing Rooms ({Object.keys(meetingRoomState.meetingRooms).length}) - {meetingRoomState.meetingRooms.length === 0 ? ( + {Object.keys(meetingRoomState.meetingRooms).length === 0 ? ( No meeting rooms created yet ) : ( - meetingRoomState.meetingRooms.map((room) => { - const area = meetingRoomState.meetingRoomAreas.find(a => a.meetingRoomId === room.id) + Object.values(meetingRoomState.meetingRooms).map((room) => { + const area = meetingRoomState.meetingRoomAreas[room.id] const isExpanded = expandedRoom === room.id const isEditing = editingRooms[room.id] @@ -1116,16 +1313,66 @@ const DevModePanel: React.FC = () => { {/* Invited Users */} - - Invites: - + + Invited Users ({isEditing.invitedUsers.length}) + + + {/* Current invited users */} + + {isEditing.invitedUsers.map((userId) => { + const player = onlinePlayers.find(p => p.id === userId) + const displayName = player ? player.name : userId + return ( + removeInvitedUser(room.id, userId)} + sx={{ fontSize: '9px', height: '20px' }} + /> + ) + })} + {isEditing.invitedUsers.length === 0 && ( + + No users invited + + )} + + + {/* Add new user dropdown */} + updateRoomEdit(room.id, 'invitedUsers', e.target.value)} - placeholder="user1, user2, user3" - sx={{ fontSize: '10px', flex: 1 }} - helperText="Comma-separated user IDs" + options={onlinePlayers.filter(p => !isEditing.invitedUsers.includes(p.id))} + getOptionLabel={(option) => `${option.name} (${option.id})`} + onChange={(event, newValue) => { + if (newValue) { + addInvitedUser(room.id, newValue.id) + } + }} + renderInput={(params) => ( + + )} + value={null} + sx={{ fontSize: '10px' }} /> + + + {onlinePlayers.length} users online in lobby + {onlinePlayers.length === 0 && ( + (No online players found in playerNameMap) + )} + + + {/* Debug info */} + + Debug: playerNameMap size: {userState.playerNameMap.size}, + sessionId: {userState.sessionId || 'null'} + {/* Area Settings */} @@ -1236,7 +1483,12 @@ const DevModePanel: React.FC = () => { Participants: {room.participants.length > 0 ? room.participants.join(', ') : 'None'} - Invited: {room.invitedUsers.length > 0 ? room.invitedUsers.join(', ') : 'None'} + Invited: {room.invitedUsers.length > 0 ? + room.invitedUsers.map((userId: string) => { + const player = onlinePlayers.find(p => p.id === userId) + return player ? player.name : userId + }).join(', ') + : 'None'} {area && ( @@ -1407,7 +1659,8 @@ const DevModePanel: React.FC = () => { width: 100, height: 100 } - dispatch(addMeetingRoom({ room: testRoom, area: testArea })) + dispatch(addMeetingRoom(testRoom)) + dispatch(addMeetingRoomArea(testArea)) }} fullWidth > @@ -1518,6 +1771,19 @@ const DevModePanel: React.FC = () => { > Add Random Player +