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..f83da19a --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,396 @@ +# 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]` +- **コンソール確認**: 送受信プロセスの詳細ログが出力される + +## 📚 **ドキュメント体系** 🆕 + +### **新しいドキュメント管理システム** +- **場所**: `/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-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 - ビデオ通話機能修正完了 \ 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 38316812..344038cd 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,7 +1,12 @@ import React from 'react' import styled from 'styled-components' -import { useAppSelector } 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' import RoomSelectionDialog from './components/RoomSelectionDialog' import LoginDialog from './components/LoginDialog' @@ -11,54 +16,115 @@ 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%; + 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 dispatch = useAppDispatch() + + const { currentView, shouldShowVideoDialog, shouldShowHelperButtons } = useAppNavigation() + const { modals, playerStatus } = useModalManager() + + useKeyboardShortcuts({ + onToggleDevMode: () => dispatch(toggleDevMode()), + onOpenPlayerStatus: () => playerStatus.open() + }) - 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 && } - - - ) + const renderMainContent = () => { + switch (currentView) { + case 'room-selection': + return + case 'login': + return + case 'computer': + return + case 'whiteboard': + return + case 'main': + default: + return + } } - } 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 ( + + {renderMainContent()} + + {/* 条件付きコンポーネント */} + {shouldShowVideoDialog && } + {shouldShowHelperButtons && } + + {/* モーダル */} + + + {/* DevMode Panel */} + + + ) +} + +/** + * メインゲームコンテンツを分離 + */ +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 && ( + + )} + + ) } 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 cf51bbe8..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' @@ -20,6 +22,9 @@ export default class MyPlayer extends Player { private playContainerBody: Phaser.Physics.Arcade.Body 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, @@ -30,6 +35,57 @@ 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) { @@ -44,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..7366528c --- /dev/null +++ b/client/src/components/DevModePanel.tsx @@ -0,0 +1,2015 @@ +import React, { useState, useEffect } from 'react' +import phaserGame from '../PhaserGame' +import Game from '../scenes/Game' +import { + Box, + Paper, + Typography, + Button, + Tabs, + Tab, + Accordion, + AccordionSummary, + AccordionDetails, + TextField, + Select, + MenuItem, + FormControl, + InputLabel, + Chip, + Grid, + Switch, + FormControlLabel, + 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, 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, addMeetingRoomArea, updateMeetingRoomArea, removeMeetingRoomArea, 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() + + // 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) + 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) + + // 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([]) + 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 }) => { + console.log(`🎨 [DevMode] updateRoomAreaFromVisual called:`, { roomId, area }) + + // Update Redux store + 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 + } + + console.log(`🎨 [DevMode] Dispatching updateMeetingRoomArea with:`, updatedArea) + dispatch(updateMeetingRoomArea(updatedArea)) + + // Send to network + const network = getNetwork() + if (network) { + 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 completed:`, { roomId, area }) + } + + // Global function no longer needed - Game.ts uses direct Redux/Network access + return () => { + // Cleanup if needed + } + }, [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)] + + 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, + workStatus: randomStatus + })) + } + + // Network sync test + const testNetworkSync = () => { + console.log('🔄 [DevMode] Testing network sync...') + console.log('Current other players:', workState.otherPlayersWorkStatus) + console.log('Network connection:', getNetwork() ? '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 = getNetwork() + 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 = getNetwork() + 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)) + dispatch(addMeetingRoomArea(area)) + + // Send to network if available + const network = getNetwork() + 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) => { + 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 + console.log('🗑️ [DevMode] Step 2: Getting network connection...') + const network = getNetwork() + if (network) { + 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) => { + 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 } + console.log('🏢 [DevMode] Updated room:', updatedRoom) + + const area = meetingRoomState.meetingRoomAreas[roomId] + + if (area) { + console.log('🏢 [DevMode] Dispatching updateMeetingRoom to Redux') + dispatch(updateMeetingRoom(updatedRoom)) + + // Send to network if available + 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, + mode: newMode, + 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) + } + } + + // 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 || [] + } + })) + } + + const saveRoomEdit = (roomId: string) => { + const editing = editingRooms[roomId] + if (!editing) return + + const room = meetingRoomState.meetingRooms[roomId] + if (!room) return + + const updatedRoom = { + ...room, + name: editing.name, + invitedUsers: editing.invitedUsers + } + + const updatedArea = { + meetingRoomId: roomId, + ...editing.area + } + + dispatch(updateMeetingRoom(updatedRoom)) + dispatch(updateMeetingRoomArea(updatedArea)) + + // Send to network + const network = getNetwork() + 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 + } + } + })) + } + + 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) + const newEditMode = !visualEditMode + setVisualEditMode(newEditMode) + + // 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:', 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: ${newEditMode ? '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 + + + )} + + {/* Network Debug Section */} + + + 🔧 Network Debug Tests + + + + + {Object.keys(meetingRoomState.meetingRooms).length > 1 && ( + + )} + + + + {/* 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 ({Object.keys(meetingRoomState.meetingRooms).length}) + + {Object.keys(meetingRoomState.meetingRooms).length === 0 ? ( + + No meeting rooms created yet + + ) : ( + Object.values(meetingRoomState.meetingRooms).map((room) => { + const area = meetingRoomState.meetingRoomAreas[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 */} + + + 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 */} + !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 */} + 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.map((userId: string) => { + const player = onlinePlayers.find(p => p.id === userId) + return player ? player.name : userId + }).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..f7202eb6 --- /dev/null +++ b/client/src/components/MeetingRoomChat.tsx @@ -0,0 +1,388 @@ +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) { + 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]) + + 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 + } + } + + 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 ( + + {/* 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/MeetingRoomManager.tsx b/client/src/components/MeetingRoomManager.tsx new file mode 100644 index 00000000..297ea706 --- /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 (Object.keys(rooms).length === 0) return
会議室がありません
; + + return ( +
+

MeetingRoomEditor

+ {Object.values(rooms).map(room => ( + + ))} +
+ ); +}; + +export default MeetingRoomManager; 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/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/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/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/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..964ce8bd --- /dev/null +++ b/client/src/hooks/useGameContent.ts @@ -0,0 +1,45 @@ +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[currentMeetingRoomId] + : null + + const userCanSendMessages = currentRoom + ? canSendMessages(sessionId, currentRoom) + : false + + // Enhanced Debug logging + console.log('🐛 [useGameContent] Full state debug:', { + currentMeetingRoomId, + meetingRoomsCount: Object.keys(meetingRooms).length, + meetingRoomsArray: Object.values(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:', Object.keys(meetingRooms)) + } + + 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 c797f36b..32e5936a 100644 --- a/client/src/scenes/Game.ts +++ b/client/src/scenes/Game.ts @@ -14,14 +14,17 @@ 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' import store from '../stores' import { setFocused, setShowChat } from '../stores/ChatStore' +import { updateMeetingRoomArea } from '../stores/MeetingRoomStore' import { NavKeys, Keyboard } from '../../../types/KeyboardState' - +import { MeetingRoomManager } from './MeetingRoom' +import { createMeetingRoomWithArea } from '../utils/mRoom' export default class Game extends Phaser.Scene { network!: Network private cursors!: NavKeys @@ -34,7 +37,31 @@ export default class Game extends Phaser.Scene { private otherPlayerMap = new Map() 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') } @@ -71,9 +98,27 @@ export default class Game extends Phaser.Scene { throw new Error('server instance missing') } else { this.network = data.network + console.log('🚀 [Game] Initialized with network connection') } createCharacterAnims(this.anims) + + // Make game instance globally available for DevMode + if (typeof window !== 'undefined') { + (window as any).game = this + console.log('🌐 [Game] Global game instance available for debugging') + } + + // 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') @@ -159,8 +204,24 @@ export default class Game extends Phaser.Scene { undefined, this ) + // ********************** + + const { room, area } = createMeetingRoomWithArea( + 'Meeting Room', + 'open', + 'hostUserId', + 192, + 482, + 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 + console.log('📡 [Game] Registering network event listeners...') this.network.onPlayerJoined(this.handlePlayerJoined, this) this.network.onPlayerLeft(this.handlePlayerLeft, this) this.network.onMyPlayerReady(this.handleMyPlayerReady, this) @@ -169,6 +230,29 @@ 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) + console.log('✅ [Game] Network event listeners registered successfully') + + // 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) { @@ -223,9 +307,11 @@ export default class Game extends Phaser.Scene { // function to add new player to the otherPlayer group private handlePlayerJoined(newPlayer: IPlayer, id: string) { + console.log(`🎮 [Game] Creating other player: ${id}, name: ${newPlayer.name}, position: (${newPlayer.x}, ${newPlayer.y})`) const otherPlayer = this.add.otherPlayer(newPlayer.x, newPlayer.y, 'adam', id, newPlayer.name) this.otherPlayers.add(otherPlayer) this.otherPlayerMap.set(id, otherPlayer) + console.log(`✅ [Game] Other player added successfully: ${id}, total other players: ${this.otherPlayerMap.size}`) } // function to remove the player who left from the otherPlayer group @@ -233,6 +319,7 @@ export default class Game extends Phaser.Scene { if (this.otherPlayerMap.has(id)) { const otherPlayer = this.otherPlayerMap.get(id) if (!otherPlayer) return + console.log(`👋 [Game] Removing player: ${id}, remaining players: ${this.otherPlayerMap.size - 1}`) this.otherPlayers.remove(otherPlayer, true, true) this.otherPlayerMap.delete(id) } @@ -246,7 +333,6 @@ export default class Game extends Phaser.Scene { this.myPlayer.videoConnected = true } - // function to update target position upon receiving player updates private handlePlayerUpdated(field: string, value: number | string, id: string) { const otherPlayer = this.otherPlayerMap.get(id) otherPlayer?.updateOtherPlayer(field, value) @@ -275,16 +361,641 @@ 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) } + // プレイヤーステータスモーダルを開くイベントを発火 + 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) + } + handleLeaveMeetingRoom(roomId: string): void { + console.log('handleLeaveMeetingRoom', roomId) + } 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.meetingRoomManager.checkPlayerInMeetingRoom(this.myPlayer.x, this.myPlayer.y) + 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 = Object.values(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 = Object.values(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 the saveRoomAreaChanges method for consistency + this.saveRoomAreaChanges(roomId, newX, newY, area.width, area.height) + } 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 (Object.keys(meetingRoomState.meetingRoomAreas).length === 0) { + console.warn('🎯 [Game] No meeting room areas found in state!') + } + + Object.values(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 = Object.values(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) + + // Save changes to Redux and server + this.saveRoomAreaChanges(roomId, finalX, finalY, finalWidth, finalHeight) + } + } + }) + + this.editableRoomAreas.set(`${roomId}_handle_${handle.key}`, handleGraphics) + }) + } + + private saveRoomAreaChanges(roomId: string, x: number, y: number, width: number, height: number) { + console.log('💾 [Game] Saving room area changes:', { roomId, x, y, width, height }) + + // Update Redux store + const updatedArea = { + meetingRoomId: roomId, + x: Math.round(x), + y: Math.round(y), + width: Math.round(width), + height: Math.round(height) + } + + store.dispatch(updateMeetingRoomArea(updatedArea)) + + // Send to server + if (this.network) { + console.log('📡 [Game] Sending area changes to server:', updatedArea) + this.network.updateMeetingRoomArea(roomId, { + x: updatedArea.x, + y: updatedArea.y, + width: updatedArea.width, + height: updatedArea.height + }) + } else { + console.warn('⚠️ [Game] Network not available for saving area changes') + } + } + + 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 new file mode 100644 index 00000000..93b92f7e --- /dev/null +++ b/client/src/scenes/MeetingRoom.ts @@ -0,0 +1,394 @@ +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 { + private scene: Phaser.Scene + private myPlayer: MyPlayer + private rooms: MeetingRoom[] = [] + private canAccess: boolean = true + private meetingRoomAreas: MeetingRoomArea[] = [] + private meetingRoomZones: Phaser.GameObjects.Zone[] = [] + private prevRooms: MeetingRoom[] = [] + private prevAreas: MeetingRoomArea[] = [] + + //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.setupStoreSubscription() + } + + private initializeGraphics() { + this.meetAreaGraphics = this.scene.add.graphics() + this.meetAreaOverlay = this.scene.add.graphics() + } + + private setupStoreSubscription() { + this.meetingRoomAreas = Object.values(store.getState().meetingRoom.meetingRoomAreas) + this.rooms = Object.values(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(() => { + const newRooms = Object.values(store.getState().meetingRoom.meetingRooms) ?? [] + const newAreas = Object.values(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() + }) + } + + 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 { + 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) { + 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) + } + } + } + + // 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 + }) + } + } + + private canAccessMeetingRoom(room: MeetingRoom): boolean { + const myUserId = this.myPlayer.playerId + + if (room.mode === 'private') { + if ( + (room.hostUserId !== myUserId && !Array.isArray(room.invitedUsers)) || + !room.invitedUsers.includes(myUserId) + ) { + return false + } + } else if (room.mode === 'secret') { + if (room.hostUserId !== myUserId) { + return false + } + } + + return true + } + + 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 { + // 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) + } + } + + console.log('[MeetingRoomManager] Drew room areas:', this.meetingRoomAreas.length) + } + + // 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) + 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) + } + this.meetAreaGraphics.strokeRect(area.x, area.y, area.width, area.height) + } + + 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 {} + + 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() + } + + this.meetingRoomColliders.clear() + for (const zone of this.meetingRoomZones) { + zone.destroy() + } + this.meetingRoomZones = [] + + this.meetAreaGraphics?.destroy() + this.meetAreaOverlay?.destroy() + } +} 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..43afd8c7 100644 --- a/client/src/services/Network.ts +++ b/client/src/services/Network.ts @@ -8,278 +8,624 @@ import { phaserEvents, Event } from '../events/EventCenter' import store from '../stores' import { setSessionId, setPlayerNameMap, removePlayerNameMap } from '../stores/UserStore' import { - setLobbyJoined, - setJoinedRoomData, - setAvailableRooms, - addAvailableRooms, - removeAvailableRooms, + setLobbyJoined, + setJoinedRoomData, + setAvailableRooms, + addAvailableRooms, + removeAvailableRooms, } from '../stores/RoomStore' import { - pushChatMessage, - pushPlayerJoinedMessage, - pushPlayerLeftMessage, + pushChatMessage, + pushPlayerJoinedMessage, + pushPlayerLeftMessage, } from '../stores/ChatStore' import { setWhiteboardUrls } from '../stores/WhiteboardStore' +import { + addMeetingRoomFromServer, + removeMeetingRoomFromServer, + addMeetingRoomAreaFromServer, + removeMeetingRoomAreaFromServer, +} from '../stores/MeetingRoomStore' + export default class Network { - private client: Client - private room?: Room - private lobby!: Room - webRTC?: WebRTC - - mySessionId!: string - - constructor() { - const protocol = window.location.protocol.replace('http', 'ws') - const endpoint = - process.env.NODE_ENV === 'production' - ? import.meta.env.VITE_SERVER_URL - : `${protocol}//${window.location.hostname}:2567` - this.client = new Client(endpoint) - this.joinLobbyRoom().then(() => { - store.dispatch(setLobbyJoined(true)) - }) - - 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) - } - - /** - * method to join Colyseus' built-in LobbyRoom, which automatically notifies - * connected clients whenever rooms with "realtime listing" have updates - */ - async joinLobbyRoom() { - this.lobby = await this.client.joinOrCreate(RoomType.LOBBY) - - this.lobby.onMessage('rooms', (rooms) => { - store.dispatch(setAvailableRooms(rooms)) - }) - - this.lobby.onMessage('+', ([roomId, room]) => { - store.dispatch(addAvailableRooms({ roomId, room })) - }) - - this.lobby.onMessage('-', (roomId) => { - store.dispatch(removeAvailableRooms(roomId)) - }) - } - - // method to join the public lobby - async joinOrCreatePublic() { - this.room = await this.client.joinOrCreate(RoomType.PUBLIC) - this.initialize() - } - - // 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 - - // 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)) - } + private client: Client + private room?: Room + private lobby!: Room + webRTC?: WebRTC + + mySessionId!: string + + constructor() { + const protocol = window.location.protocol.replace('http', 'ws') + const endpoint = + process.env.NODE_ENV === 'production' + ? import.meta.env.VITE_SERVER_URL + : `${protocol}//${window.location.hostname}:2567` + this.client = new Client(endpoint) + this.joinLobbyRoom().then(() => { + store.dispatch(setLobbyJoined(true)) }) - } - } - - // 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 - 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, + + 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) + } + + /** + * Method to join Colyseus' built-in LobbyRoom, which automatically notifies + * connected clients whenever rooms with "realtime listing" have updates + */ + async joinLobbyRoom() { + this.lobby = await this.client.joinOrCreate(RoomType.LOBBY) + + this.lobby.onMessage('rooms', (rooms) => { + store.dispatch(setAvailableRooms(rooms)) }) - ) - // 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) - } - } - - // 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) - }) - } - - // 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 }) - } + + this.lobby.onMessage('+', ([roomId, room]) => { + store.dispatch(addAvailableRooms({ roomId, room })) + }) + + this.lobby.onMessage('-', (roomId) => { + store.dispatch(removeAvailableRooms(roomId)) + }) + } + + // Method to join the public lobby + async joinOrCreatePublic() { + this.room = await this.client.joinOrCreate(RoomType.PUBLIC) + this.initialize() + } + + // 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) + + // Process existing players first + this.room.state.players.forEach((player: IPlayer, key: string) => { + if (player.name && player.name !== '') { + store.dispatch(setPlayerNameMap({ id: key, name: player.name })) + } + }) + + // New instance added to the players MapSchema + this.room.state.players.onAdd = (player: IPlayer, key: string) => { + // Track changes on every child object inside the players MapSchema + player.onChange = (changes) => { + changes.forEach((change) => { + const { field, value } = change + + // Only emit game events for other players, not myself + if (key !== this.mySessionId) { + phaserEvents.emit(Event.PLAYER_UPDATED, field, value, key) + } + + // When a player finished setting up player name (including myself) + if (field === 'name' && value !== '') { + // Add to playerNameMap for all players (including myself) + store.dispatch(setPlayerNameMap({ id: key, name: value })) + + // Only emit events and messages for other players + if (key !== this.mySessionId) { + phaserEvents.emit(Event.PLAYER_JOINED, player, key) + store.dispatch(pushPlayerJoinedMessage(value)) + } + } + }) + } + } + + // 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 + 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 + 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) + }) + + this.room.onMessage('MEETING_ROOM_MANUAL_UPDATE', (data: any) => { + // 更新前の状態をログ出力 + 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)) + } + + // 更新後の状態をログ出力 + setTimeout(() => { + const updatedState = store.getState().meetingRoom + }, 100) + }) + + // Set up meeting room listeners with safety checks + this.setupMeetingRoomListeners() + } + + // 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) => { + console.log('🗑️ [Network] Meeting room removed from server:', key) + 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) => { + console.log('🗑️ [Network] Meeting room area removed from server:', key) + 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[roomId] + + if (!currentRoom || !currentArea) { + console.error(`Cannot update room area ${roomId}: not found`) + 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 }) + // Also add my own name to the playerNameMap for UI purposes + if (this.mySessionId && currentName) { + store.dispatch(setPlayerNameMap({ id: this.mySessionId, 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 }) + } + } 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/MeetingRoomStore.ts b/client/src/stores/MeetingRoomStore.ts new file mode 100644 index 00000000..dd068712 --- /dev/null +++ b/client/src/stores/MeetingRoomStore.ts @@ -0,0 +1,107 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; + +export type MeetingRoomMode = 'open' | 'private' | 'secret'; + +export interface MeetingRoom { + id: string; + name: string; + mode: MeetingRoomMode; + hostUserId: string; + invitedUsers: string[]; + participants: string[]; +} + +export interface MeetingRoomArea{ + meetingRoomId: string; + x: number; + y: number; + width: number; + height: number; +} + +interface MeetingRoomState { + meetingRooms : Record; + currentMeetingRoomId: string | null; + meetingRoomAreas: Record; +} + +const initialState: MeetingRoomState = { + meetingRooms: {}, + currentMeetingRoomId: null, + meetingRoomAreas: {}, +}; + + +export const meetingRoomSlice = createSlice({ + name: 'meetingRoom', + initialState, + reducers: { + setMeetingRooms: (state, action: PayloadAction>) => { + state.meetingRooms = action.payload; + }, + addMeetingRoom: (state, action: PayloadAction) => { + state.meetingRooms[action.payload.id] = action.payload; + }, + + updateMeetingRoom: (state, action: PayloadAction) => { + if (state.meetingRooms[action.payload.id]) { + state.meetingRooms[action.payload.id] = action.payload; + } + }, + removeMeetingRoom: (state, action: PayloadAction) => { + delete state.meetingRooms[action.payload]; + }, + + setCurrentMeetingRoomId: (state, action: PayloadAction) => { + state.currentMeetingRoomId = action.payload; + }, + addMeetingRoomArea: (state, action: PayloadAction) => { + state.meetingRoomAreas[action.payload.meetingRoomId] = action.payload; + }, + updateMeetingRoomArea: (state, action: PayloadAction) => { + if (state.meetingRoomAreas[action.payload.meetingRoomId]) { + state.meetingRoomAreas[action.payload.meetingRoomId] = action.payload; + } + }, + removeMeetingRoomArea: (state, action: PayloadAction) => { + delete state.meetingRoomAreas[action.payload]; + }, + + // Server-specific actions for network sync + addMeetingRoomFromServer: (state, action: PayloadAction) => { + state.meetingRooms[action.payload.id] = action.payload; + console.log('📥 [MeetingRoomStore] Added room from server:', action.payload.id); + }, + removeMeetingRoomFromServer: (state, action: PayloadAction) => { + delete state.meetingRooms[action.payload]; + console.log('📤 [MeetingRoomStore] Removed room from server:', action.payload); + }, + addMeetingRoomAreaFromServer: (state, action: PayloadAction) => { + state.meetingRoomAreas[action.payload.meetingRoomId] = action.payload; + console.log('📥 [MeetingRoomStore] Added area from server:', action.payload.meetingRoomId); + }, + removeMeetingRoomAreaFromServer: (state, action: PayloadAction) => { + delete state.meetingRoomAreas[action.payload]; + console.log('📤 [MeetingRoomStore] Removed area from server:', action.payload); + }, + + } +}); + +export const { + setMeetingRooms, + addMeetingRoom, + updateMeetingRoom, + removeMeetingRoom, + setCurrentMeetingRoomId, + addMeetingRoomArea, + updateMeetingRoomArea, + removeMeetingRoomArea, + addMeetingRoomFromServer, + removeMeetingRoomFromServer, + addMeetingRoomAreaFromServer, + removeMeetingRoomAreaFromServer, +} = meetingRoomSlice.actions; + +export default meetingRoomSlice.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 020ab92b..985a9563 100644 --- a/client/src/stores/index.ts +++ b/client/src/stores/index.ts @@ -5,16 +5,22 @@ import computerReducer from './ComputerStore' import whiteboardReducer from './WhiteboardStore' import chatReducer from './ChatStore' import roomReducer from './RoomStore' +import meetingRoomReducer from './MeetingRoomStore' +import devModeReducer from './DevModeStore' +import workReducer from './WorkStore' enableMapSet() const store = configureStore({ reducer: { + meetingRoom: meetingRoomReducer, user: userReducer, computer: computerReducer, whiteboard: whiteboardReducer, chat: chatReducer, room: roomReducer, + devMode: devModeReducer, + work: workReducer, }, // 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/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/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/data/meeting_rooms.json b/data/meeting_rooms.json new file mode 100644 index 00000000..fcdfea2e --- /dev/null +++ b/data/meeting_rooms.json @@ -0,0 +1,5 @@ +{ + "rooms": {}, + "areas": {}, + "lastUpdated": "2025-07-01T14:00:54.438Z" +} \ No newline at end of file diff --git a/debug-player-visibility.js b/debug-player-visibility.js new file mode 100644 index 00000000..2ccd3107 --- /dev/null +++ b/debug-player-visibility.js @@ -0,0 +1,50 @@ +// Debug script for player visibility issues +// Run this in browser console when connected to the game + +console.log('🔍 Player Visibility Debug Script'); +console.log('================================'); + +// Check if game instance exists +if (typeof window.game !== 'undefined') { + const game = window.game; + + console.log('📊 Game State Information:'); + console.log(`- Other players in map: ${game.otherPlayerMap.size}`); + console.log(`- Other players in group: ${game.otherPlayers.children.size}`); + console.log(`- Network connected: ${game.network ? 'Yes' : 'No'}`); + + console.log('\n👥 Player Details:'); + game.otherPlayerMap.forEach((player, id) => { + console.log(`Player ${id}:`); + console.log(` - Name: ${player.playerName?.text || 'Unknown'}`); + console.log(` - Position: (${player.x}, ${player.y})`); + console.log(` - Visible: ${player.visible}`); + console.log(` - Active: ${player.active}`); + console.log(` - Texture: ${player.texture?.key || 'Unknown'}`); + }); + + console.log('\n🌐 Network Information:'); + if (game.network && game.network.room) { + const room = game.network.room; + console.log(`- Room ID: ${room.id}`); + console.log(`- Session ID: ${room.sessionId}`); + console.log(`- Players in room state: ${Object.keys(room.state.players).length}`); + + Object.keys(room.state.players).forEach(playerId => { + const player = room.state.players[playerId]; + console.log(` - Server Player ${playerId}: ${player.name} at (${player.x}, ${player.y})`); + }); + } + + console.log('\n🎮 Debug Commands:'); + console.log('1. To manually test player creation:'); + console.log(' game.handlePlayerJoined({x: 100, y: 100, name: "TestPlayer", anim: "adam_idle_down"}, "test123")'); + console.log('2. To check phaser events:'); + console.log(' Check console for logs with 🎮, 🔄, 🌐, 👋 prefixes'); + console.log('3. To force refresh players:'); + console.log(' location.reload()'); + +} else { + console.log('❌ Game instance not found'); + console.log('Make sure you are on the game screen and connected to a room'); +} \ No newline at end of file diff --git a/debug-video-calls.js b/debug-video-calls.js new file mode 100644 index 00000000..e1367359 --- /dev/null +++ b/debug-video-calls.js @@ -0,0 +1,122 @@ +// Debug script for video call functionality +// Run this in browser console when connected to the game + +console.log('🎥 Video Call Debug Script'); +console.log('=========================='); + +// Check camera permissions +async function checkCameraPermission() { + try { + const result = await navigator.permissions.query({ name: 'camera' }); + console.log('📷 Camera permission:', result.state); + return result.state; + } catch (error) { + console.log('📷 Permission API not supported, trying direct access...'); + return 'unknown'; + } +} + +// Test getUserMedia +async function testGetUserMedia() { + try { + const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); + console.log('✅ getUserMedia successful, stream tracks:', stream.getTracks().map(t => t.kind)); + stream.getTracks().forEach(track => track.stop()); // Clean up + return true; + } catch (error) { + console.error('❌ getUserMedia failed:', error); + return false; + } +} + +// Check WebRTC state +function checkWebRTCState() { + if (typeof window.game !== 'undefined' && window.game.network?.webRTC) { + const webRTC = window.game.network.webRTC; + console.log('🌐 WebRTC State:'); + console.log(' - Peer ID:', webRTC.myPeer.id); + console.log(' - Has stream:', !!webRTC.myStream); + console.log(' - Active peers:', webRTC.peers.size); + console.log(' - Called peers:', webRTC.onCalledPeers.size); + + if (webRTC.myStream) { + console.log(' - Stream tracks:', webRTC.myStream.getTracks().map(t => `${t.kind}: ${t.enabled}`)); + } + + return webRTC; + } else { + console.log('❌ WebRTC not found or not initialized'); + return null; + } +} + +// Check player states +function checkPlayerStates() { + if (typeof window.game !== 'undefined') { + const game = window.game; + console.log('👤 Player States:'); + console.log(' - My player ready:', game.myPlayer?.readyToConnect); + console.log(' - My player video connected:', game.myPlayer?.videoConnected); + console.log(' - My player ID:', game.myPlayer?.playerId); + + console.log(' - Other players:'); + game.otherPlayerMap.forEach((player, id) => { + console.log(` Player ${id}:`); + console.log(` - Ready: ${player.readyToConnect}`); + console.log(` - Video connected: ${player.videoConnected}`); + console.log(` - Connected: ${player.connected}`); + console.log(` - Buffer time: ${player.connectionBufferTime}`); + }); + } +} + +// Manual video call test +function testVideoCall(targetPlayerId) { + if (typeof window.game !== 'undefined' && window.game.network?.webRTC) { + console.log('🎥 Testing manual video call to:', targetPlayerId); + window.game.network.webRTC.connectToNewUser(targetPlayerId); + } else { + console.log('❌ Cannot test video call - WebRTC not available'); + } +} + +// Main debug function +async function runVideoDebug() { + console.log('🔍 Running comprehensive video debug...\n'); + + console.log('1. Checking camera permission...'); + await checkCameraPermission(); + + console.log('\n2. Testing getUserMedia...'); + await testGetUserMedia(); + + console.log('\n3. Checking WebRTC state...'); + checkWebRTCState(); + + console.log('\n4. Checking player states...'); + checkPlayerStates(); + + console.log('\n📋 Debug Commands:'); + console.log('- checkCameraPermission() - Check camera permissions'); + console.log('- testGetUserMedia() - Test media device access'); + console.log('- checkWebRTCState() - Check WebRTC connection'); + console.log('- checkPlayerStates() - Check all player states'); + console.log('- testVideoCall("playerId") - Manually initiate video call'); + + console.log('\n🎯 Look for these logs in console:'); + console.log('- 🎥 [WebRTC] Requesting user media access...'); + console.log('- 🎥 [Game] Players overlapping:'); + console.log('- 🎥 [OtherPlayer] makeCall conditions:'); + console.log('- 🎥 [WebRTC] Calling peer:'); +} + +// Make functions globally available +window.checkCameraPermission = checkCameraPermission; +window.testGetUserMedia = testGetUserMedia; +window.checkWebRTCState = checkWebRTCState; +window.checkPlayerStates = checkPlayerStates; +window.testVideoCall = testVideoCall; +window.runVideoDebug = runVideoDebug; + +// Auto-run debug +runVideoDebug(); \ No newline at end of file diff --git a/debug-video-reconnection.js b/debug-video-reconnection.js new file mode 100644 index 00000000..806f9296 --- /dev/null +++ b/debug-video-reconnection.js @@ -0,0 +1,142 @@ +// Debug script for video call reconnection functionality +// Run this in browser console when connected to the game + +console.log('🔄 Video Reconnection Debug Script'); +console.log('=================================='); + +// Check connection states +function checkConnectionStates() { + if (typeof window.game !== 'undefined') { + const game = window.game; + console.log('🔍 Connection States:'); + + game.otherPlayerMap.forEach((player, id) => { + const timeSinceOverlap = player.lastOverlapTime > 0 ? Date.now() - player.lastOverlapTime : 'Never'; + console.log(`Player ${id}:`); + console.log(` - Connected: ${player.connected}`); + console.log(` - Last overlap: ${timeSinceOverlap}ms ago`); + console.log(` - Buffer time: ${player.connectionBufferTime}ms`); + console.log(` - Position: (${Math.round(player.x)}, ${Math.round(player.y)})`); + }); + + if (game.network?.webRTC) { + console.log('\n🌐 WebRTC State:'); + console.log(` - Active peers: ${game.network.webRTC.peers.size}`); + console.log(` - Called peers: ${game.network.webRTC.onCalledPeers.size}`); + } + } +} + +// Force disconnect all video calls +function disconnectAllVideoCalls() { + if (typeof window.game !== 'undefined' && window.game.network?.webRTC) { + console.log('🔌 Forcing disconnect of all video calls...'); + + window.game.otherPlayerMap.forEach((player, id) => { + if (player.connected) { + console.log(`Disconnecting from ${id}...`); + player.disconnectCall(window.game.network.webRTC); + } + }); + } +} + +// Force reset all connection states +function resetAllConnectionStates() { + if (typeof window.game !== 'undefined') { + console.log('🔄 Resetting all connection states...'); + + window.game.otherPlayerMap.forEach((player, id) => { + player.connected = false; + player.connectionBufferTime = 0; + player.lastOverlapTime = 0; + console.log(`Reset state for player ${id}`); + }); + } +} + +// Test overlap timeout +function testOverlapTimeout(playerId, timeoutMs = 1000) { + if (typeof window.game !== 'undefined') { + const player = window.game.otherPlayerMap.get(playerId); + if (player) { + console.log(`🧪 Testing overlap timeout for ${playerId} in ${timeoutMs}ms...`); + player.lastOverlapTime = Date.now() - (3000 - timeoutMs); // Set to expire soon + player.connected = true; + } else { + console.log(`❌ Player ${playerId} not found`); + } + } +} + +// Monitor video elements in DOM +function monitorVideoElements() { + const videoGrid = document.querySelector('.video-grid'); + if (videoGrid) { + const videos = videoGrid.querySelectorAll('video'); + console.log(`📺 Video elements in DOM: ${videos.length}`); + videos.forEach((video, index) => { + console.log(` Video ${index}:`, { + srcObject: !!video.srcObject, + paused: video.paused, + muted: video.muted, + readyState: video.readyState + }); + }); + } else { + console.log('❌ Video grid not found'); + } +} + +// Real-time connection monitor +let connectionMonitorInterval; +function startConnectionMonitor() { + if (connectionMonitorInterval) { + clearInterval(connectionMonitorInterval); + } + + console.log('📊 Starting real-time connection monitor...'); + connectionMonitorInterval = setInterval(() => { + console.clear(); + console.log('🔄 Real-time Connection Monitor'); + console.log('==============================='); + checkConnectionStates(); + monitorVideoElements(); + console.log('\nPress stopConnectionMonitor() to stop monitoring'); + }, 2000); +} + +function stopConnectionMonitor() { + if (connectionMonitorInterval) { + clearInterval(connectionMonitorInterval); + connectionMonitorInterval = null; + console.log('⏹️ Connection monitor stopped'); + } +} + +// Make functions globally available +window.checkConnectionStates = checkConnectionStates; +window.disconnectAllVideoCalls = disconnectAllVideoCalls; +window.resetAllConnectionStates = resetAllConnectionStates; +window.testOverlapTimeout = testOverlapTimeout; +window.monitorVideoElements = monitorVideoElements; +window.startConnectionMonitor = startConnectionMonitor; +window.stopConnectionMonitor = stopConnectionMonitor; + +console.log('\n📋 Available Commands:'); +console.log('- checkConnectionStates() - Check current connection states'); +console.log('- disconnectAllVideoCalls() - Force disconnect all video calls'); +console.log('- resetAllConnectionStates() - Reset all connection flags'); +console.log('- testOverlapTimeout("playerId", 1000) - Test timeout mechanism'); +console.log('- monitorVideoElements() - Check video DOM elements'); +console.log('- startConnectionMonitor() - Start real-time monitoring'); +console.log('- stopConnectionMonitor() - Stop real-time monitoring'); + +console.log('\n🎯 Expected Behavior:'); +console.log('1. Players approach → Video call initiated'); +console.log('2. Players separate → 3-second timeout starts'); +console.log('3. After 3 seconds → Video call disconnected automatically'); +console.log('4. Players approach again → New video call initiated'); + +// Auto-run initial check +checkConnectionStates(); \ No newline at end of file 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_invitation-dropdown-fix.md b/docs/fixes/2025-07-01_invitation-dropdown-fix.md new file mode 100644 index 00000000..20388911 --- /dev/null +++ b/docs/fixes/2025-07-01_invitation-dropdown-fix.md @@ -0,0 +1,194 @@ +# 招待ドロップダウン修正レポート + +**日付:** 2025-07-01 +**対象機能:** 会議室招待システムのユーザー選択ドロップダウン +**修正結果:** ✅ 完全解決 + +## 📋 問題の概要 + +### **症状** +- DevModePanel の会議室編集で、招待ユーザー選択のドロップダウンが空表示 +- コンソールログ: "0 users online in lobby (No online players found in playerNameMap)" +- `playerNameMap.size: 0` でありながら、ユーザー自身は部屋にログイン済み + +### **エラー状況** +``` +Debug: playerNameMap size: 0, sessionId: dHLCDRr4n +``` + +## 🔍 根本原因分析 + +### **原因 1: Map の不適切な反復処理** + +**問題:** `userState.playerNameMap` は `Map` オブジェクトだが、通常のオブジェクトのように `forEach` メソッドで処理していた。 + +**修正前:** +```typescript +userState.playerNameMap.forEach((name, id) => { + // Map には forEach メソッドが存在しない +}) +``` + +**修正後:** +```typescript +for (const [id, name] of userState.playerNameMap.entries()) { + // Map の正しい反復方法 +} +``` + +### **原因 2: 自分のプレイヤー情報が playerNameMap に未登録** + +**問題:** `Network.ts` の `onAdd` で自分のセッションID (`key === this.mySessionId`) の場合は `return` して処理をスキップしていたため、自分の名前が `playerNameMap` に追加されなかった。 + +**修正前:** +```typescript +this.room.state.players.onAdd = (player: IPlayer, key: string) => { + if (key === this.mySessionId) return // 自分の情報をスキップ + + player.onChange = (changes) => { + if (field === 'name' && value !== '') { + store.dispatch(setPlayerNameMap({ id: key, name: value })) + } + } +} +``` + +**修正後:** +```typescript +this.room.state.players.onAdd = (player: IPlayer, key: string) => { + player.onChange = (changes) => { + if (field === 'name' && value !== '') { + // 自分を含む全プレイヤーの名前を登録 + store.dispatch(setPlayerNameMap({ id: key, name: value })) + + // ゲームイベントは他プレイヤーのみ + if (key !== this.mySessionId) { + phaserEvents.emit(Event.PLAYER_JOINED, player, key) + } + } + } +} +``` + +### **原因 3: 既存プレイヤーの未処理** + +**問題:** 部屋参加時点で既に存在するプレイヤー（自分を含む）の名前が `playerNameMap` に登録されていなかった。 + +**追加処理:** +```typescript +// 既存プレイヤーの処理を追加 +this.room.state.players.forEach((player: IPlayer, key: string) => { + if (player.name && player.name !== '') { + store.dispatch(setPlayerNameMap({ id: key, name: player.name })) + } +}) +``` + +## 🔧 実施した修正内容 + +### **修正 1: DevModePanel.tsx の Map 反復処理** + +**ファイル:** `client/src/components/DevModePanel.tsx` +**行数:** 69-85 + +```typescript +// 修正前 +userState.playerNameMap.forEach((name, id) => { ... }) + +// 修正後 +for (const [id, name] of userState.playerNameMap.entries()) { ... } +``` + +### **修正 2: Network.ts の自分プレイヤー情報登録** + +**ファイル:** `client/src/services/Network.ts` +**行数:** 108-140 + +1. **既存プレイヤー処理の追加** + ```typescript + this.room.state.players.forEach((player: IPlayer, key: string) => { + if (player.name && player.name !== '') { + store.dispatch(setPlayerNameMap({ id: key, name: player.name })) + } + }) + ``` + +2. **onAdd の修正** + - 自分のセッションIDでも `setPlayerNameMap` を実行 + - ゲームイベントは他プレイヤーのみに限定 + +### **修正 3: updatePlayerName メソッドの強化** + +**ファイル:** `client/src/services/Network.ts` +**行数:** 537-543 + +```typescript +updatePlayerName(currentName: string) { + this.room?.send(Message.UPDATE_PLAYER_NAME, { name: currentName }) + // 自分の名前もplayerNameMapに追加 + if (this.mySessionId && currentName) { + store.dispatch(setPlayerNameMap({ id: this.mySessionId, name: currentName })) + } +} +``` + +## 📊 修正結果 + +### **修正前の状態** +``` +playerNameMap size: 0 +sessionId: dHLCDRr4n +onlinePlayers: [] +→ ドロップダウンが空表示 +``` + +### **修正後の状態** +``` +playerNameMap size: 1+ (自分を含む) +sessionId: dHLCDRr4n +onlinePlayers: [{ id: "other_id", name: "Other Player" }] +→ ドロップダウンに他のプレイヤーが表示 +``` + +### **動作確認項目** +- ✅ 自分の情報が `playerNameMap` に正しく登録 +- ✅ 他プレイヤー参加時に選択肢として表示 +- ✅ 自分は選択肢から除外（`id !== userState.sessionId`） +- ✅ プレイヤー名の変更時にリアルタイム更新 + +## 🧠 学んだ教訓 + +### **1. TypeScript の型システムの重要性** + +Redux Toolkit で定義された `Map` 型は通常のオブジェクトと異なる反復方法が必要。TypeScript のコンパイルエラーを適切にチェックしていれば事前に発見できた。 + +### **2. プレイヤー状態管理の一貫性** + +マルチプレイヤーゲームでは「自分」と「他プレイヤー」の情報を一貫して管理する必要がある。UI表示のためには自分の情報も状態管理に含める必要がある。 + +### **3. Colyseus の初期化タイミング** + +`onAdd` は新規追加時のみ発火するため、既存プレイヤーの情報は別途処理が必要。セッション参加時に既存状態の初期化を忘れずに行う。 + +### **4. デバッグログの有効活用** + +`playerNameMap.size` と具体的なプレイヤー情報をログ出力することで、問題の根本原因を特定できた。 + +## 📚 関連ファイル + +### **修正対象ファイル** +- `client/src/components/DevModePanel.tsx` - Map 反復処理修正 +- `client/src/services/Network.ts` - プレイヤー情報登録修正 +- `client/src/stores/UserStore.ts` - playerNameMap 型定義確認 + +### **技術情報** +- **Redux Toolkit**: Map オブジェクトの状態管理 +- **Colyseus**: MapSchema の onAdd/onChange イベント処理 +- **Material-UI**: Autocomplete コンポーネントの options プロパティ + +--- + +**作成者:** Claude Code Assistant +**修正完了日:** 2025-07-01 +**修正時間:** 約30分 +**修正方針:** Map 反復処理の修正 + 自分プレイヤー情報の確実な登録 \ 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/fixes/2025-07-01_meeting-room-deletion-fix.md b/docs/fixes/2025-07-01_meeting-room-deletion-fix.md new file mode 100644 index 00000000..5970da2e --- /dev/null +++ b/docs/fixes/2025-07-01_meeting-room-deletion-fix.md @@ -0,0 +1,245 @@ +# 会議室削除機能修正レポート + +**日付:** 2025-07-01 +**対象機能:** 会議室削除後のクライアントリロード時復元問題 +**修正結果:** ✅ 修正完了（要テスト） + +## 📋 問題の概要 + +### **症状** +- DevModePanel で会議室を削除しても、クライアントリロード時に削除した会議室が復活する +- 削除操作がサーバーに正しく反映されない、または永続化されない + +### **期待される動作** +- 会議室削除後、サーバーとファイルから永続的に削除される +- クライアントリロード後も削除状態が維持される +- 他のクライアントでも削除が即座に反映される + +## 🔍 根本原因分析 + +### **問題 1: DevModePanel の削除処理が不完全** + +**問題:** DevModePanel の `deleteMeetingRoom` 関数では、会議室データのみを削除し、対応する**エリアデータの削除**が抜けていた。 + +**修正前:** +```typescript +const deleteMeetingRoom = (roomId: string) => { + dispatch(removeMeetingRoom(roomId)) // 会議室のみ削除 + + const network = (window as any).network + if (network) { + network.deleteMeetingRoom(roomId) + } +} +``` + +**修正後:** +```typescript +const deleteMeetingRoom = (roomId: string) => { + console.log('🗑️ [DevMode] Deleting meeting room:', roomId) + + // 会議室とエリアの両方を削除 + dispatch(removeMeetingRoom(roomId)) + dispatch(removeMeetingRoomArea(roomId)) + + const network = (window as any).network + if (network) { + console.log('🗑️ [DevMode] Sending delete request to server:', roomId) + network.deleteMeetingRoom(roomId) + } else { + console.warn('🗑️ [DevMode] Network not available for room deletion') + } +} +``` + +### **問題 2: Redux アクションのインポート不足** + +**問題:** `removeMeetingRoomArea` がインポートされていなかった。 + +**修正:** +```typescript +import { + addMeetingRoom, + updateMeetingRoom, + removeMeetingRoom, + addMeetingRoomArea, + updateMeetingRoomArea, + removeMeetingRoomArea, // ← 追加 + setCurrentMeetingRoomId as setMeetingRoomId, + MeetingRoomMode +} from '../stores/MeetingRoomStore' +``` + +### **問題 3: サーバー側ログの不足** + +**問題:** サーバー側で削除処理の詳細な追跡ができなかった。 + +**修正:** 詳細なデバッグログを追加 +```typescript +this.onMessage(Message.DELETE_MEETING_ROOM, (client, message: { id: string }) => { + console.log('=== DELETE_MEETING_ROOM received ===') + console.log('Client:', client.sessionId) + console.log('Room ID to delete:', message.id) + + const roomExists = this.state.meetingRoomState.meetingRooms.has(message.id) + const areaExists = this.state.meetingRoomState.meetingRoomAreas.has(message.id) + + console.log('Before deletion:', { + roomExists, + areaExists, + totalRooms: this.state.meetingRoomState.meetingRooms.size, + totalAreas: this.state.meetingRoomState.meetingRoomAreas.size + }) + + // 削除処理... + + console.log('After deletion:', { + totalRooms: this.state.meetingRoomState.meetingRooms.size, + totalAreas: this.state.meetingRoomState.meetingRoomAreas.size + }) + + this.saveMeetingRoomsToFile() + console.log('=== DELETE_MEETING_ROOM completed ===') +}) +``` + +### **問題 4: クライアント側の削除通知ログ不足** + +**修正:** Network.ts に削除通知のログを追加 +```typescript +meetingRooms.onRemove = (meetingRoom: any, key: string) => { + console.log('🗑️ [Network] Meeting room removed from server:', key) + store.dispatch(removeMeetingRoomFromServer(key)) +} + +meetingRoomAreas.onRemove = (area: any, key: string) => { + console.log('🗑️ [Network] Meeting room area removed from server:', key) + store.dispatch(removeMeetingRoomAreaFromServer(key)) +} +``` + +## 🔧 実施した修正内容 + +### **修正 1: DevModePanel.tsx の削除処理強化** + +**ファイル:** `client/src/components/DevModePanel.tsx` + +1. **エリア削除の追加** + ```typescript + dispatch(removeMeetingRoom(roomId)) + dispatch(removeMeetingRoomArea(roomId)) // 追加 + ``` + +2. **詳細なデバッグログ** + ```typescript + console.log('🗑️ [DevMode] Deleting meeting room:', roomId) + console.log('🗑️ [DevMode] Sending delete request to server:', roomId) + ``` + +3. **インポート追加** + ```typescript + import { ..., removeMeetingRoomArea, ... } + ``` + +### **修正 2: SkyOffice.ts の削除処理ログ強化** + +**ファイル:** `server/rooms/SkyOffice.ts` + +1. **削除前後の状態表示** +2. **存在チェックと詳細ログ** +3. **永続化確認ログ** + +### **修正 3: Network.ts の削除通知ログ追加** + +**ファイル:** `client/src/services/Network.ts` + +サーバーからの削除通知をクライアントが受信した際のログ追加。 + +## 📊 修正結果の検証手順 + +### **テスト 1: 基本削除機能** +1. DevModePanel で会議室を作成 +2. 作成した会議室を削除 +3. コンソールで以下のログを確認: + ``` + 🗑️ [DevMode] Deleting meeting room: room_xxxx + 🗑️ [DevMode] Sending delete request to server: room_xxxx + === DELETE_MEETING_ROOM received === + ✅ Meeting room deleted from server: room_xxxx + ✅ Meeting room area deleted from server: room_xxxx + 📁 Meeting rooms saved to file: .../meeting_rooms.json + 🗑️ [Network] Meeting room removed from server: room_xxxx + 🗑️ [Network] Meeting room area removed from server: room_xxxx + ``` + +### **テスト 2: 永続化確認** +1. 会議室を削除 +2. ブラウザをリロード +3. 削除した会議室が表示されないことを確認 +4. `server/data/meeting_rooms.json` で削除されていることを確認 + +### **テスト 3: 複数クライアント同期** +1. 複数ブラウザタブで同じ部屋に参加 +2. 一方で会議室を削除 +3. 他方でも即座に削除が反映されることを確認 + +### **テスト 4: デフォルト会議室の保護** +1. デフォルト会議室（default-meeting-room）の削除を試行 +2. 適切にエラーハンドリングされることを確認 + +## 🧠 学んだ教訓 + +### **1. 関連データの一貫性** + +会議室データと会議室エリアデータは密結合しており、片方のみの操作では整合性が失われる。CRUDの全操作で両方を考慮する必要がある。 + +### **2. クライアント・サーバー同期の複雑性** + +1. **ローカル更新**: UI の即座更新 +2. **サーバー送信**: 他クライアントへの同期 +3. **サーバー応答**: 削除成功の確認 +4. **永続化**: ファイルへの保存 + +この4段階全てが成功して初めて削除が完了する。 + +### **3. デバッグログの重要性** + +削除処理は「成功したように見えて実は失敗している」ケースが多い。各段階での詳細ログが問題特定に不可欠。 + +### **4. Redux の適切なアクション選択** + +- `removeMeetingRoom` vs `removeMeetingRoomFromServer` +- `updateMeetingRoom` vs `addMeetingRoomFromServer` + +目的に応じた適切なアクション選択が重要。 + +## 🎯 今後の改善点 + +### **短期的改善** +1. **トランザクション的削除**: 会議室とエリアの削除を原子的操作として実装 +2. **削除確認ダイアログ**: 誤削除防止のための確認UI +3. **削除権限チェック**: ホスト以外の削除制限 + +### **長期的改善** +1. **ソフト削除**: 物理削除ではなく論理削除による復元機能 +2. **削除履歴**: 削除ログとロールバック機能 +3. **バッチ削除**: 複数会議室の一括削除 + +## 📚 関連ファイル + +### **修正対象ファイル** +- `client/src/components/DevModePanel.tsx` - 削除処理の完全性向上 +- `server/rooms/SkyOffice.ts` - サーバー側削除ログ強化 +- `client/src/services/Network.ts` - クライアント側削除通知ログ + +### **検証ファイル** +- `server/data/meeting_rooms.json` - 永続化データの確認 + +--- + +**作成者:** Claude Code Assistant +**修正完了日:** 2025-07-01 +**修正時間:** 約30分 +**修正方針:** 削除処理の完全性確保とデバッグログによる追跡性向上 + +**⚠️ 注意:** この修正はサーバー再起動が必要です。修正後は必ずサーバーとクライアントの両方を再起動してテストしてください。 \ No newline at end of file diff --git a/docs/fixes/2025-07-01_meeting-room-persistence-fix.md b/docs/fixes/2025-07-01_meeting-room-persistence-fix.md new file mode 100644 index 00000000..7fc5c3e0 --- /dev/null +++ b/docs/fixes/2025-07-01_meeting-room-persistence-fix.md @@ -0,0 +1,306 @@ +# 会議室データ永続化修正レポート + +**日付:** 2025-07-01 +**対象機能:** 会議室データの永続化（モード変更の保存） +**修正結果:** ✅ 完全解決 + +## 📋 問題の概要 + +### **症状** +- DevModePanel で会議室のモード（open/private/secret）を変更しても、クライアントリロード時にリセットされる +- サーバー再起動時に全ての会議室設定が失われる +- 会議室の作成、編集、削除が一時的でセッション間で保持されない + +### **根本原因** +Colyseus フレームワークは**メモリ内でのリアルタイム状態管理**を提供するが、**データベースへの永続化は含まれていない**。そのため： + +1. **サーバー再起動時**: 全ての会議室データが失われる +2. **クライアントリロード時**: サーバーのメモリ内データは残っているが、クライアントが初期状態に戻る +3. **新規クライアント参加時**: 以前の設定変更が反映されない + +## 🔧 実施した修正内容 + +### **ファイルベース永続化システムの実装** + +**ファイル:** `server/rooms/SkyOffice.ts` + +### **修正 1: 依存関係の追加** + +```typescript +import * as fs from 'fs' +import * as path from 'path' +``` + +### **修正 2: 永続化設定の追加** + +```typescript +export class SkyOffice extends Room { + private dataDir = path.join(__dirname, '../../data') + private meetingRoomsFile = path.join(this.dataDir, 'meeting_rooms.json') +``` + +### **修正 3: 初期化時の復元処理** + +```typescript +// Initialize default meeting room +this.initializeDefaultMeetingRoom() + +// Load persisted meeting rooms +this.loadMeetingRoomsFromFile() +``` + +### **修正 4: 会議室操作時の自動保存** + +#### **CREATE_MEETING_ROOM** +```typescript +console.log(`Meeting room created: ${message.name} (${message.id})`) + +// Save to file after creation +this.saveMeetingRoomsToFile() +``` + +#### **UPDATE_MEETING_ROOM** +```typescript +console.log(`Meeting room updated successfully: ${message.name} (${message.id})`) + +// Save to file after successful update +this.saveMeetingRoomsToFile() +``` + +#### **DELETE_MEETING_ROOM** +```typescript +// Save to file after deletion +this.saveMeetingRoomsToFile() +``` + +### **修正 5: 永続化メソッドの実装** + +#### **saveMeetingRoomsToFile() メソッド** + +```typescript +private saveMeetingRoomsToFile() { + try { + // Create data directory if it doesn't exist + if (!fs.existsSync(this.dataDir)) { + fs.mkdirSync(this.dataDir, { recursive: true }) + } + + const roomsData = { + rooms: {}, + areas: {}, + lastUpdated: new Date().toISOString() + } + + // Convert Colyseus MapSchema to plain objects + if (this.state.meetingRoomState?.meetingRooms) { + this.state.meetingRoomState.meetingRooms.forEach((room, key) => { + roomsData.rooms[key] = { + id: room.id, + name: room.name, + mode: room.mode, + hostUserId: room.hostUserId, + invitedUsers: Array.from(room.invitedUsers), + participants: Array.from(room.participants) + } + }) + } + + // Areas も同様に保存 + + fs.writeFileSync(this.meetingRoomsFile, JSON.stringify(roomsData, null, 2)) + console.log('📁 Meeting rooms saved to file:', this.meetingRoomsFile) + } catch (error) { + console.error('❌ Error saving meeting rooms to file:', error) + } +} +``` + +#### **loadMeetingRoomsFromFile() メソッド** + +```typescript +private loadMeetingRoomsFromFile() { + try { + if (!fs.existsSync(this.meetingRoomsFile)) { + console.log('📁 No meeting rooms file found, using defaults only') + return + } + + const fileContent = fs.readFileSync(this.meetingRoomsFile, 'utf8') + const roomsData = JSON.parse(fileContent) + + // Load rooms and areas from file + // Skip default room since it's already created + // Don't restore participants - they'll rejoin when they reconnect + + console.log(`📁 Meeting rooms loaded from ${roomsData.lastUpdated}`) + } catch (error) { + console.error('❌ Error loading meeting rooms from file:', error) + } +} +``` + +### **修正 6: 終了時の保存** + +```typescript +onDispose() { + // Save meeting rooms before disposing + this.saveMeetingRoomsToFile() + + // ... rest of dispose logic +} +``` + +### **修正 7: データディレクトリの作成** + +```bash +mkdir -p /Users/k_yo/develop/js_work/Voffice/server/data +``` + +## 📊 修正結果 + +### **永続化される情報** + +1. **会議室データ**: + - `id`: 会議室ID + - `name`: 会議室名 + - `mode`: アクセスモード（open/private/secret） + - `hostUserId`: 主催者ID + - `invitedUsers`: 招待ユーザーリスト + +2. **エリアデータ**: + - `meetingRoomId`: 対応する会議室ID + - `x, y`: 位置座標 + - `width, height`: サイズ + +3. **メタデータ**: + - `lastUpdated`: 最終更新日時 + +### **永続化されない情報** + +- `participants`: 現在の参加者（再接続時に再構築） + +### **ファイル構造** + +``` +server/ +├── data/ +│ └── meeting_rooms.json # 永続化ファイル +└── rooms/ + └── SkyOffice.ts # 修正されたサーバーコード +``` + +### **meeting_rooms.json の例** + +```json +{ + "rooms": { + "default-meeting-room": { + "id": "default-meeting-room", + "name": "Meeting Room", + "mode": "open", + "hostUserId": "system", + "invitedUsers": [], + "participants": [] + }, + "room_1234567890": { + "id": "room_1234567890", + "name": "私有会議室", + "mode": "private", + "hostUserId": "user123", + "invitedUsers": ["user456", "user789"], + "participants": [] + } + }, + "areas": { + "default-meeting-room": { + "meetingRoomId": "default-meeting-room", + "x": 192, + "y": 482, + "width": 448, + "height": 296 + }, + "room_1234567890": { + "meetingRoomId": "room_1234567890", + "x": 100, + "y": 100, + "width": 200, + "height": 150 + } + }, + "lastUpdated": "2025-07-01T10:30:00.000Z" +} +``` + +## 🔄 動作フロー + +### **サーバー起動時** +1. デフォルト会議室を作成 +2. `meeting_rooms.json` から保存済みデータを読み込み +3. 会議室とエリアをメモリに復元 + +### **会議室操作時** +1. メモリ内状態を更新（Colyseus） +2. 変更を `meeting_rooms.json` に自動保存 +3. 他のクライアントにリアルタイム同期 + +### **クライアント接続時** +1. 現在のメモリ状態（永続化済み）を送信 +2. クライアントが最新の会議室情報を受信 + +### **サーバー終了時** +1. 最新状態を `meeting_rooms.json` に保存 +2. 次回起動時に復元される + +## 🧠 学んだ教訓 + +### **1. Colyseus の役割と限界** + +Colyseus は素晴らしいリアルタイム同期を提供するが、永続化は別途実装が必要。リアルタイム性と永続化を組み合わせる設計が重要。 + +### **2. ファイルベース vs データベース** + +今回はシンプルなファイルベース実装を選択したが、本格運用では： +- **SQLite**: 軽量でSQL使用可能 +- **MongoDB**: JSON形式で自然 +- **PostgreSQL**: 本格的なリレーショナルDB + +### **3. 状態復元の課題** + +- **participants は復元しない**: ユーザーは再接続時に参加状態を再構築 +- **デフォルト会議室の重複回避**: 既存チェックが重要 +- **エラーハンドリング**: ファイル破損時の対応 + +### **4. スケーラビリティ** + +複数サーバーインスタンス運用時はファイルベースでは限界があり、共有データベースが必要。 + +## 🎯 今後の改善点 + +### **短期的改善** +1. **バックアップ機能**: 定期的な自動バックアップ +2. **ファイルロック**: 同時書き込み防止 +3. **圧縮**: ファイルサイズ最適化 + +### **長期的改善** +1. **データベース移行**: PostgreSQL/MongoDB導入 +2. **分散対応**: 複数サーバー間でのデータ共有 +3. **履歴管理**: 変更履歴の保存 + +## 📚 関連ファイル + +### **修正対象ファイル** +- `server/rooms/SkyOffice.ts` - 永続化機能追加 +- `server/data/meeting_rooms.json` - 永続化データファイル + +### **関連技術** +- **Colyseus**: リアルタイム状態管理 +- **Node.js fs**: ファイルシステム操作 +- **JSON**: データ形式 +- **MapSchema**: Colyseus状態スキーマ + +--- + +**作成者:** Claude Code Assistant +**修正完了日:** 2025-07-01 +**修正時間:** 約45分 +**修正方針:** ファイルベース永続化によるデータ保持とリアルタイム同期の両立 \ No newline at end of file diff --git a/docs/fixes/2025-07-01_room-mode-update-fix.md b/docs/fixes/2025-07-01_room-mode-update-fix.md new file mode 100644 index 00000000..e67878ba --- /dev/null +++ b/docs/fixes/2025-07-01_room-mode-update-fix.md @@ -0,0 +1,193 @@ +# 会議室モード更新修正レポート + +**日付:** 2025-07-01 +**対象機能:** DevModePanel での会議室モード変更（open/private/secret） +**修正結果:** ✅ 完全解決 + +## 📋 問題の概要 + +### **症状** +- DevModePanel で会議室のモード（open/private/secret）を変更しても変更が反映されない +- Select ドロップダウンで値を変更しても、Redux状態や画面表示が更新されない + +### **期待される動作** +- モード選択時に即座にRedux状態が更新される +- ネットワーク経由でサーバーに変更が送信される +- UI上で新しいモードが反映される + +## 🔍 根本原因分析 + +### **主要原因: Redux アクションの引数不整合** + +**問題:** DevModePanel では `updateMeetingRoom` Redux アクションを呼ぶ際に、MeetingRoomStore が期待する形式と異なる引数を渡していた。 + +**MeetingRoomStore の期待形式:** +```typescript +updateMeetingRoom: (state, action: PayloadAction) => { + // MeetingRoom オブジェクトのみを期待 +} +``` + +**DevModePanel での誤った呼び出し:** +```typescript +dispatch(updateMeetingRoom({ room: updatedRoom, area })) +// ^^^^^^^^^^^^^^^^^^^^^^^^ +// オブジェクトを余分にラップしている +``` + +**正しい呼び出し:** +```typescript +dispatch(updateMeetingRoom(updatedRoom)) +// ^^^^^^^^^^^ +// MeetingRoomオブジェクトを直接渡す +``` + +### **副次的問題: addMeetingRoom でも同じ問題** + +同様に `addMeetingRoom` でも `{ room, area }` という形式で呼び出していたが、アクションは `MeetingRoom` のみを期待していた。 + +## 🔧 実施した修正内容 + +### **修正 1: updateRoomMode 関数の修正** + +**ファイル:** `client/src/components/DevModePanel.tsx` +**行数:** 500-542 + +```typescript +// 修正前 +dispatch(updateMeetingRoom({ room: updatedRoom, area })) + +// 修正後 +dispatch(updateMeetingRoom(updatedRoom)) +``` + +### **修正 2: saveRoomEdit 関数の修正** + +**ファイル:** `client/src/components/DevModePanel.tsx` +**行数:** 579-580 + +```typescript +// 修正前 +dispatch(updateMeetingRoom({ room: updatedRoom, area: updatedArea })) + +// 修正後 +dispatch(updateMeetingRoom(updatedRoom)) +dispatch(updateMeetingRoomArea(updatedArea)) +``` + +### **修正 3: createMeetingRoom 関数の修正** + +**ファイル:** `client/src/components/DevModePanel.tsx` +**行数:** 469-470 + +```typescript +// 修正前 +dispatch(addMeetingRoom({ room, area })) + +// 修正後 +dispatch(addMeetingRoom(room)) +dispatch(addMeetingRoomArea(area)) +``` + +### **修正 4: テスト用会議室作成の修正** + +**ファイル:** `client/src/components/DevModePanel.tsx` +**行数:** 1543-1544 + +```typescript +// 修正前 +dispatch(addMeetingRoom({ room: testRoom, area: testArea })) + +// 修正後 +dispatch(addMeetingRoom(testRoom)) +dispatch(addMeetingRoomArea(testArea)) +``` + +### **修正 5: インポートの追加** + +**ファイル:** `client/src/components/DevModePanel.tsx` +**行数:** 40 + +```typescript +// 修正前 +import { addMeetingRoom, updateMeetingRoom, removeMeetingRoom, updateMeetingRoomArea, ... } + +// 修正後 +import { addMeetingRoom, updateMeetingRoom, removeMeetingRoom, addMeetingRoomArea, updateMeetingRoomArea, ... } +``` + +### **修正 6: デバッグログの追加** + +`updateRoomMode` 関数に詳細なデバッグログを追加して、問題の追跡を容易にした。 + +```typescript +console.log('🏢 [DevMode] updateRoomMode called:', { roomId, newMode }) +console.log('🏢 [DevMode] Current room:', room) +console.log('🏢 [DevMode] Updated room:', updatedRoom) +console.log('🏢 [DevMode] Dispatching updateMeetingRoom to Redux') +``` + +## 📊 修正結果 + +### **修正前の状態** +``` +1. ユーザーがモードを "private" に変更 +2. updateRoomMode が呼ばれる +3. dispatch(updateMeetingRoom({ room: updatedRoom, area })) が実行 +4. Redux アクションが期待しない形式のため処理されない +5. 状態が更新されず、UIも変化しない +``` + +### **修正後の状態** +``` +1. ユーザーがモードを "private" に変更 +2. updateRoomMode が呼ばれる +3. dispatch(updateMeetingRoom(updatedRoom)) が実行 +4. Redux 状態が正しく更新される +5. UIが新しいモードを反映 +6. ネットワーク経由でサーバーに変更が送信される +``` + +### **動作確認項目** +- ✅ open → private モード変更 +- ✅ private → secret モード変更 +- ✅ secret → open モード変更 +- ✅ Redux DevTools で状態変更を確認 +- ✅ UI の色とラベルが即座に更新 +- ✅ ネットワーク通信がコンソールログで確認可能 + +## 🧠 学んだ教訓 + +### **1. Redux アクションの型安全性** + +Redux Toolkit の `PayloadAction` 型定義を正しく理解し、期待される引数の形式を守ることが重要。TypeScript のコンパイルエラーを注意深く確認していれば事前に発見できた。 + +### **2. デバッグログの重要性** + +複雑な状態管理では、各ステップでのデバッグログが問題の特定に不可欠。特にRedux アクションの dispatch 前後でのログ出力が有効。 + +### **3. アクション設計の一貫性** + +`room` と `area` を別々のアクションで管理する設計では、複合的な更新時に両方のアクションを呼ぶ必要がある。単一のアクションで両方を処理するか、現在の分離設計を維持するかの判断が重要。 + +### **4. UI と状態管理の分離** + +UIコンポーネント（DevModePanel）は Redux の内部実装を知らず、適切なアクションを適切な形式で呼ぶことに専念すべき。 + +## 📚 関連ファイル + +### **修正対象ファイル** +- `client/src/components/DevModePanel.tsx` - Redux アクション呼び出し修正 +- `client/src/stores/MeetingRoomStore.ts` - アクション型定義確認 + +### **関連技術** +- **Redux Toolkit**: PayloadAction 型定義とスライス設計 +- **TypeScript**: 型安全性とコンパイルエラー +- **Material-UI**: Select コンポーネントのイベントハンドリング + +--- + +**作成者:** Claude Code Assistant +**修正完了日:** 2025-07-01 +**修正時間:** 約20分 +**修正方針:** Redux アクションの型整合性確保と適切な引数形式での呼び出し \ No newline at end of file diff --git a/docs/fixes/2025-07-01_video-call-fix.md b/docs/fixes/2025-07-01_video-call-fix.md new file mode 100644 index 00000000..cbc5bbba --- /dev/null +++ b/docs/fixes/2025-07-01_video-call-fix.md @@ -0,0 +1,200 @@ +# ビデオ通話機能修正レポート + +**日付:** 2025-07-01 +**対象機能:** プレイヤー間ビデオ通話システム +**修正結果:** ✅ 完全解決 + +## 📋 問題の概要 + +### **症状** +- プレイヤー同士が近づいてもビデオ通話が開始されない +- `otherVideoConnected: false` の状態が続く +- `makeCall` 条件が満たされない + +### **エラーログ例** +``` +🎥 [OtherPlayer] makeCall conditions: { + connected: false, + bufferTime: 37494.35333363589, + myReadyToConnect: true, + otherReadyToConnect: true, + myVideoConnected: true, + otherVideoConnected: false ← 問題 +} +🎥 [OtherPlayer] Video call conditions not met +``` + +## 🔍 根本原因分析 + +### **主要原因 1: イベント処理システムの不整合** + +**問題:** 参考実装では `Network.ts` にイベント登録メソッド（`onMyPlayerReady`, `onMyPlayerVideoConnected` など）が存在するが、現在の実装では欠落していた。 + +**詳細:** +- 参考実装: `this.network.onPlayerJoined(this.handlePlayerJoined, this)` +- 現在の実装: `phaserEvents.on(Event.PLAYER_JOINED, this.handlePlayerJoined, this)` + +この違いにより、イベントの発火タイミングが異なっていた。 + +### **主要原因 2: player.onChange の処理順序** + +**問題:** プレイヤー作成とプレイヤー更新イベントの処理順序が参考実装と異なっていた。 + +**現在の実装（問題あり）:** +```typescript +// 先に nameChange をチェックして PLAYER_JOINED を発火 +const nameChange = changes.find(change => change.field === 'name' && change.value !== '') +if (nameChange) { + phaserEvents.emit(Event.PLAYER_JOINED, player, key) +} +// 後で全ての変更を処理 +changes.forEach((change) => { + phaserEvents.emit(Event.PLAYER_UPDATED, field, value, key) +}) +``` + +**参考実装（正しい）:** +```typescript +// 全ての変更を処理し、name の場合のみ追加で PLAYER_JOINED を発火 +changes.forEach((change) => { + const { field, value } = change + phaserEvents.emit(Event.PLAYER_UPDATED, field, value, key) + + if (field === 'name' && value !== '') { + phaserEvents.emit(Event.PLAYER_JOINED, player, key) + } +}) +``` + +### **主要原因 3: readyToConnect/videoConnected イベント発火** + +**問題:** `Network.readyToConnect()` と `Network.videoConnected()` でローカルイベントを発火していなかった。 + +**修正前:** +```typescript +readyToConnect() { + this.room?.send(Message.READY_TO_CONNECT) +} + +videoConnected() { + this.room?.send(Message.VIDEO_CONNECTED) +} +``` + +**修正後:** +```typescript +readyToConnect() { + this.room?.send(Message.READY_TO_CONNECT) + phaserEvents.emit(Event.MY_PLAYER_READY) // 追加 +} + +videoConnected() { + this.room?.send(Message.VIDEO_CONNECTED) + phaserEvents.emit(Event.MY_PLAYER_VIDEO_CONNECTED) // 追加 +} +``` + +## 🔧 実施した修正内容 + +### **修正 1: ファイル全体の置き換え** + +参考実装から以下のファイルを**完全コピー**: + +1. **`client/src/services/Network.ts`** + - イベント登録メソッドの追加 + - `player.onChange` 処理の修正 + - イベント発火タイミングの統一 + +2. **`client/src/characters/OtherPlayer.ts`** + - `makeCall` ロジックの統一 + - デバッグログの削除 + +3. **`client/src/web/WebRTC.ts`** + - PeerJS 処理の統一 + - カメラ初期化タイミングの統一 + +4. **`server/rooms/SkyOffice.ts`** + - サーバー側メッセージハンドリングの統一 + +### **修正 2: Game.ts のイベント登録方式変更** + +**修正前:** +```typescript +phaserEvents.on(Event.PLAYER_JOINED, this.handlePlayerJoined, this) +phaserEvents.on(Event.MY_PLAYER_READY, this.handleMyPlayerReady, this) +``` + +**修正後:** +```typescript +this.network.onPlayerJoined(this.handlePlayerJoined, this) +this.network.onMyPlayerReady(this.handleMyPlayerReady, this) +``` + +### **修正 3: デバッグログの削除** + +過剰なデバッグログを削除し、参考実装と同じシンプルな実装に統一。 + +## 📊 修正結果 + +### **修正前の状態** +``` +myVideoConnected: true +otherVideoConnected: false ← 常にfalse +→ ビデオ通話条件が満たされない +``` + +### **修正後の状態** +``` +myVideoConnected: true +otherVideoConnected: true ← 正常に同期 +→ ビデオ通話が正常に開始 +``` + +### **動作確認項目** +- ✅ プレイヤー同士が近づくとビデオ通話が自動開始 +- ✅ プレイヤーが離れるとビデオ通話が自動終了 +- ✅ 複数プレイヤー間での同時ビデオ通話 +- ✅ 音声・映像の双方向通信 + +## 🧠 学んだ教訓 + +### **1. 参考実装との完全一致の重要性** + +微細な実装差異でも、リアルタイム通信システムでは致命的な問題となる。特にイベント駆動システムでは、イベントの発火順序とタイミングが極めて重要。 + +### **2. Colyseus スキーマ同期の仕組み** + +Colyseus の `player.onChange` は自動的に他のクライアントに同期されるが、イベント処理の実装方法により同期タイミングが変わる。 + +### **3. デバッグログの弊害** + +過剰なデバッグログは実装の複雑化を招き、本来のロジックを見えにくくする。シンプルな実装ほど問題を特定しやすい。 + +### **4. WebRTC + Colyseus の統合パターン** + +- Colyseus: プレイヤー状態の同期（`readyToConnect`, `videoConnected`） +- WebRTC: 実際の音声・映像通信 +- Phaser Events: クライアント内部のイベント連携 + +この3つの技術の連携が正しく実装されて初めて、ビデオ通話機能が動作する。 + +## 📚 関連ファイル + +### **修正対象ファイル** +- `client/src/services/Network.ts` +- `client/src/characters/OtherPlayer.ts` +- `client/src/web/WebRTC.ts` +- `client/src/scenes/Game.ts` +- `server/rooms/SkyOffice.ts` + +### **参考リソース** +- 参考実装: `/Users/k_yo/develop/js_work/SkyOfficeContext/` +- Colyseus ドキュメント: https://docs.colyseus.io/ +- PeerJS ドキュメント: https://peerjs.com/docs.html + +--- + +**作成者:** Claude Code Assistant +**修正完了日:** 2025-07-01 +**修正時間:** 約2時間 +**修正方針:** 参考実装との完全一致を重視した全面的な置き換え diff --git a/docs/fixes/2025-07-01_visual-edit-persistence-fix.md b/docs/fixes/2025-07-01_visual-edit-persistence-fix.md new file mode 100644 index 00000000..624d7cdc --- /dev/null +++ b/docs/fixes/2025-07-01_visual-edit-persistence-fix.md @@ -0,0 +1,229 @@ +# ビジュアル編集モード永続化修正レポート + +**日付:** 2025-07-01 +**対象機能:** ビジュアル編集モードでのエリア変更の永続化 +**修正結果:** ✅ 完全解決 + +## 📋 問題の概要 + +### **症状** +- ビジュアル編集モードで会議室エリアをドラッグ移動・リサイズしても、ページリロード時に元の位置・サイズに戻る +- 会議室の削除ボタンを押しても「Network not available」エラーが出て削除されない +- DevModePanel での編集は永続化されるが、ビジュアル編集は永続化されない + +### **根本原因** +1. **ネットワークアクセス方法の誤り**: `(window as any).network` でアクセスしていたが、実際は `phaserGame.scene.keys.game.network` が正しい +2. **ビジュアル編集時の保存処理欠如**: ドラッグ・リサイズ時にReduxとサーバーへの保存処理が実装されていなかった +3. **不適切なグローバル関数依存**: Game.ts が `window.devModeUpdateRoomArea` グローバル関数に依存していた + +## 🔧 実施した修正内容 + +### **修正 1: DevModePanel.tsx のネットワークアクセス修正** + +**ファイル:** `client/src/components/DevModePanel.tsx` + +#### **正しいインポート追加** +```typescript +import phaserGame from '../PhaserGame' +import Game from '../scenes/Game' +``` + +#### **ネットワークアクセス関数の実装** +```typescript +// Helper function to get network connection +const getNetwork = () => { + try { + const game = phaserGame.scene.keys.game as Game + return game?.network || null + } catch (error) { + console.warn('🌐 [DevMode] Failed to get network connection:', error) + return null + } +} +``` + +#### **全ての誤ったネットワークアクセスを修正** +```typescript +// 修正前 (全箇所) +const network = (window as any).network + +// 修正後 (全箇所) +const network = getNetwork() +``` + +### **修正 2: Game.ts のビジュアル編集保存機能実装** + +**ファイル:** `client/src/scenes/Game.ts` + +#### **必要なインポート追加** +```typescript +import { updateMeetingRoomArea } from '../stores/MeetingRoomStore' +``` + +#### **保存処理メソッドの実装** +```typescript +private saveRoomAreaChanges(roomId: string, x: number, y: number, width: number, height: number) { + console.log('💾 [Game] Saving room area changes:', { roomId, x, y, width, height }) + + // Update Redux store + const updatedArea = { + meetingRoomId: roomId, + x: Math.round(x), + y: Math.round(y), + width: Math.round(width), + height: Math.round(height) + } + + store.dispatch(updateMeetingRoomArea(updatedArea)) + + // Send to server + if (this.network) { + console.log('📡 [Game] Sending area changes to server:', updatedArea) + this.network.updateMeetingRoomArea(roomId, { + x: updatedArea.x, + y: updatedArea.y, + width: updatedArea.width, + height: updatedArea.height + }) + } else { + console.warn('⚠️ [Game] Network not available for saving area changes') + } +} +``` + +#### **リサイズハンドル ドラッグ終了時の保存処理追加** +```typescript +// リサイズハンドルの dragend イベント内に追加 +console.log('🎯 [Game] Updated room area via resize to:', finalX, finalY, finalWidth, finalHeight) + +// Save changes to Redux and server +this.saveRoomAreaChanges(roomId, finalX, finalY, finalWidth, finalHeight) +``` + +#### **部屋移動の保存処理修正** +```typescript +// 修正前 (不適切なグローバル関数依存) +const updateFunction = (window as any).devModeUpdateRoomArea +if (updateFunction) { + updateFunction(roomId, { + x: newX, + y: newY, + width: area.width, + height: area.height + }) +} + +// 修正後 (直接的なRedux/Network使用) +this.saveRoomAreaChanges(roomId, newX, newY, area.width, area.height) +``` + +### **修正 3: 不要なグローバル関数依存の削除** + +**ファイル:** `client/src/components/DevModePanel.tsx` + +```typescript +// 修正前 (不要なグローバル関数定義) +(window as any).devModeUpdateRoomArea = updateRoomAreaFromVisual +return () => { + delete (window as any).devModeUpdateRoomArea +} + +// 修正後 (削除) +// Global function no longer needed - Game.ts uses direct Redux/Network access +return () => { + // Cleanup if needed +} +``` + +## 📊 修正結果 + +### **修正前の動作** +``` +1. ユーザーがビジュアル編集モードで部屋をドラッグ +2. 画面上では位置が変わるが、Reduxストアは更新されない +3. サーバーにも変更が送信されない +4. ページリロード時に元の位置に戻る +5. 削除ボタンは「Network not available」エラー +``` + +### **修正後の動作** +``` +1. ユーザーがビジュアル編集モードで部屋をドラッグ +2. ドラッグ終了時に saveRoomAreaChanges が呼ばれる +3. Reduxストアが即座に更新される +4. サーバーに変更が送信される +5. サーバーで meeting_rooms.json に永続化される +6. ページリロード後も新しい位置が維持される +7. 削除ボタンが正常に動作する +``` + +### **検証手順** +1. **ビジュアル編集モードをオン**: DevModePanel で "🎨 Start Edit" をクリック +2. **部屋をドラッグ移動**: 編集可能な部屋エリアをドラッグして移動 +3. **リサイズ操作**: 角のハンドルをドラッグして部屋サイズを変更 +4. **編集モードをオフ**: "🔧 Exit Edit" をクリック +5. **ページリロード**: ブラウザをリロード +6. **結果確認**: 変更が保持されていることを確認 + +### **ログ確認** +成功時に以下のログが表示される: +``` +💾 [Game] Saving room area changes: {roomId: "...", x: 100, y: 100, width: 200, height: 150} +📡 [Game] Sending area changes to server: {meetingRoomId: "...", x: 100, y: 100, width: 200, height: 150} +📁 Meeting rooms saved to file: .../meeting_rooms.json +``` + +## 🧠 学んだ教訓 + +### **1. ネットワークアクセスの一貫性** + +Phaser ゲーム内でのネットワークアクセスは `phaserGame.scene.keys.game.network` を使用し、`window` オブジェクトへの依存は避けるべき。 + +### **2. ビジュアル操作と状態管理の同期** + +ビジュアルな操作（ドラッグ・リサイズ）が発生した際は、必ず以下の流れで処理する: +1. **ビジュアル更新**: Phaser オブジェクトの位置・サイズ変更 +2. **状態更新**: Redux ストアの更新 +3. **サーバー同期**: ネットワーク経由での永続化 + +### **3. グローバル関数依存の問題** + +`window` オブジェクトを通じたグローバル関数による結合は、依存関係を不明確にし、デバッグを困難にする。直接的な import/export による依存関係を選ぶべき。 + +### **4. ドラッグ操作の完了タイミング** + +ドラッグ中は高頻度で更新が発生するため、保存処理は `dragend` イベントでのみ行い、パフォーマンスを考慮する。 + +## 🎯 今後の改善点 + +### **短期的改善** +1. **ドラッグ中のプレビュー**: ドラッグ中に他のユーザーにもリアルタイムでプレビューを表示 +2. **操作の取り消し**: Ctrl+Z での操作取り消し機能 +3. **グリッドスナップ**: 一定間隔でスナップする機能 + +### **長期的改善** +1. **コラボレーション編集**: 複数ユーザーでの同時編集 +2. **履歴管理**: 編集履歴の保存と復元 +3. **テンプレート機能**: 定型的なレイアウトのテンプレート化 + +## 📚 関連ファイル + +### **修正対象ファイル** +- `client/src/components/DevModePanel.tsx` - ネットワークアクセス修正、グローバル関数削除 +- `client/src/scenes/Game.ts` - ビジュアル編集時の保存処理実装 +- `server/data/meeting_rooms.json` - 永続化ファイル（自動生成） + +### **技術スタック** +- **Phaser.js**: ビジュアル編集インターフェース +- **Redux Toolkit**: クライアント状態管理 +- **Colyseus**: リアルタイムサーバー同期 +- **Node.js fs**: サーバー側ファイル永続化 + +--- + +**作成者:** Claude Code Assistant +**修正完了日:** 2025-07-01 +**修正時間:** 約60分 +**修正方針:** ネットワークアクセス統一とビジュアル操作の完全な永続化実装 + +**⚠️ テスト必須**: サーバー・クライアント再起動後、ビジュアル編集→リロード→変更保持の一連の流れをテストしてください。 \ 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/emergency-video-fix.js b/emergency-video-fix.js new file mode 100644 index 00000000..f58baff6 --- /dev/null +++ b/emergency-video-fix.js @@ -0,0 +1,141 @@ +// Emergency Video Call Fix - Run in browser console +console.log('🚨 Emergency Video Call Fix'); +console.log('==========================='); + +// Force reset all connections +function emergencyResetConnections() { + if (window.game) { + console.log('🔄 Force resetting all video connections...'); + + window.game.otherPlayerMap.forEach((player, id) => { + if (player.connected) { + console.log(`- Resetting connection for ${id}`); + player.connected = false; + player.connectionBufferTime = 0; + player.lastOverlapTime = 0; + + // Also try to clean up WebRTC + if (window.game.network?.webRTC) { + try { + window.game.network.webRTC.disconnectFromUser(id); + } catch (e) { + console.log(` - WebRTC cleanup failed for ${id}:`, e.message); + } + } + } + }); + + // Clean up video elements + const videoGrid = document.querySelector('.video-grid'); + if (videoGrid) { + const videos = videoGrid.querySelectorAll('video'); + videos.forEach((video, index) => { + if (video.srcObject) { + console.log(`- Removing video element ${index}`); + video.srcObject = null; + video.remove(); + } + }); + } + + console.log('✅ Emergency reset complete!'); + } else { + console.log('❌ Game instance not found'); + } +} + +// Force initiate video call (bypass all conditions) +function forceVideoCall(targetPlayerId) { + if (window.game?.network?.webRTC) { + console.log(`🎥 Force initiating video call to: ${targetPlayerId}`); + try { + window.game.network.webRTC.connectToNewUser(targetPlayerId); + + // Mark player as connected + const player = window.game.otherPlayerMap.get(targetPlayerId); + if (player) { + player.connected = true; + player.lastOverlapTime = Date.now(); + } + + console.log('✅ Force video call initiated'); + } catch (e) { + console.error('❌ Force video call failed:', e); + } + } +} + +// Monitor connection states in real-time +let emergencyMonitor; +function startEmergencyMonitor() { + stopEmergencyMonitor(); // Stop any existing monitor + + console.log('📊 Starting emergency connection monitor...'); + emergencyMonitor = setInterval(() => { + if (window.game) { + console.clear(); + console.log('🚨 Emergency Monitor - Connection States'); + console.log('====================================='); + + window.game.otherPlayerMap.forEach((player, id) => { + const timeSinceOverlap = player.lastOverlapTime > 0 ? Date.now() - player.lastOverlapTime : 'Never'; + console.log(`Player ${id}:`); + console.log(` 🔗 Connected: ${player.connected}`); + console.log(` ⏱️ Last overlap: ${timeSinceOverlap}ms ago`); + console.log(` 📍 Position: (${Math.round(player.x)}, ${Math.round(player.y)})`); + + // Check if they should be disconnected + if (player.connected && player.lastOverlapTime > 0) { + const shouldDisconnect = (Date.now() - player.lastOverlapTime) > 1000; + if (shouldDisconnect) { + console.log(` ⚠️ Should be disconnected! (${Math.round((Date.now() - player.lastOverlapTime) / 1000)}s ago)`); + } + } + }); + + // Video elements + const videoGrid = document.querySelector('.video-grid'); + if (videoGrid) { + const videos = videoGrid.querySelectorAll('video'); + console.log(`\n📺 Video elements: ${videos.length}`); + } + + console.log('\n📋 Commands: emergencyResetConnections(), forceVideoCall("playerId"), stopEmergencyMonitor()'); + } + }, 1000); +} + +function stopEmergencyMonitor() { + if (emergencyMonitor) { + clearInterval(emergencyMonitor); + emergencyMonitor = null; + console.log('⏹️ Emergency monitor stopped'); + } +} + +// Test overlap timeout manually +function testOverlapTimeout(playerId) { + const player = window.game?.otherPlayerMap.get(playerId); + if (player) { + console.log(`🧪 Testing overlap timeout for ${playerId}...`); + player.connected = true; + player.lastOverlapTime = Date.now() - 1500; // 1.5 seconds ago + console.log('Player should disconnect in ~500ms'); + } +} + +// Make functions globally available +window.emergencyResetConnections = emergencyResetConnections; +window.forceVideoCall = forceVideoCall; +window.startEmergencyMonitor = startEmergencyMonitor; +window.stopEmergencyMonitor = stopEmergencyMonitor; +window.testOverlapTimeout = testOverlapTimeout; + +console.log('\n📋 Emergency Commands Available:'); +console.log('- emergencyResetConnections() - Reset all connection states'); +console.log('- forceVideoCall("playerId") - Force initiate video call'); +console.log('- startEmergencyMonitor() - Monitor connections in real-time'); +console.log('- testOverlapTimeout("playerId") - Test timeout mechanism'); + +// Auto-run emergency reset +emergencyResetConnections(); \ 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/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/server/rooms/SkyOffice.ts b/server/rooms/SkyOffice.ts index 3946fe2e..abc871ed 100644 --- a/server/rooms/SkyOffice.ts +++ b/server/rooms/SkyOffice.ts @@ -5,197 +5,610 @@ import { Player, OfficeState, Computer, Whiteboard } from './schema/OfficeState' import { Message } from '../../types/Messages' import { IRoomData } from '../../types/Rooms' import { whiteboardRoomIds } from './schema/OfficeState' +import { MeetingRoom, MeetingRoomArea } from './schema/MeetingRoomState' +import * as fs from 'fs' +import * as path from 'path' import PlayerUpdateCommand from './commands/PlayerUpdateCommand' import PlayerUpdateNameCommand from './commands/PlayerUpdateNameCommand' import { - ComputerAddUserCommand, - ComputerRemoveUserCommand, + ComputerAddUserCommand, + ComputerRemoveUserCommand, } from './commands/ComputerUpdateArrayCommand' import { - WhiteboardAddUserCommand, - WhiteboardRemoveUserCommand, + WhiteboardAddUserCommand, + WhiteboardRemoveUserCommand, } from './commands/WhiteboardUpdateArrayCommand' import ChatMessageUpdateCommand from './commands/ChatMessageUpdateCommand' export class SkyOffice extends Room { - private dispatcher = new Dispatcher(this) - private name: string - private description: string - private password: string | null = null - - async onCreate(options: IRoomData) { - const { name, description, password, autoDispose } = options - this.name = name - this.description = description - this.autoDispose = autoDispose - - let hasPassword = false - if (password) { - const salt = await bcrypt.genSalt(10) - this.password = await bcrypt.hash(password, salt) - hasPassword = true - } - this.setMetadata({ name, description, hasPassword }) + private dispatcher = new Dispatcher(this) + private name: string + private description: string + private password: string | null = null + private dataDir = path.join(__dirname, '../../data') + private meetingRoomsFile = path.join(this.dataDir, 'meeting_rooms.json') + + async onCreate(options: IRoomData) { + const { name, description, password, autoDispose } = options + this.name = name + this.description = description + this.autoDispose = autoDispose + + let hasPassword = false + if (password) { + const salt = await bcrypt.genSalt(10) + this.password = await bcrypt.hash(password, salt) + hasPassword = true + } + this.setMetadata({ name, description, hasPassword }) + + // Debug: Log before state initialization + console.log('SkyOffice onCreate called') + this.setState(new OfficeState()) + + // 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() + + // Load persisted meeting rooms + this.loadMeetingRoomsFromFile() + + // 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 + console.log('🏗️ [SkyOffice] Setting up 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})`) + + // Save to file after creation + this.saveMeetingRoomsToFile() + } + ) + + 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) - this.setState(new OfficeState()) + // 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) + } - // HARD-CODED: Add 5 computers in a room - for (let i = 0; i < 5; i++) { - this.state.computers.set(String(i), new Computer()) + 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})`) + + // Save to file after successful update + this.saveMeetingRoomsToFile() + } 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}`) + }) + } + } + ) + console.log('🗑️ [SkyOffice] Setting up DELETE_MEETING_ROOM handler...') + this.onMessage(Message.DELETE_MEETING_ROOM, (client, message: { id: string }) => { + console.log('=== DELETE_MEETING_ROOM received ===') + console.log('Client:', client.sessionId) + console.log('Room ID to delete:', message.id) + + // Safety check + if (!this.state.meetingRoomState) { + console.error('meetingRoomState is not initialized!') + return + } + + const roomExists = this.state.meetingRoomState.meetingRooms.has(message.id) + const areaExists = this.state.meetingRoomState.meetingRoomAreas.has(message.id) + + console.log('Before deletion:', { + roomExists, + areaExists, + totalRooms: this.state.meetingRoomState.meetingRooms.size, + totalAreas: this.state.meetingRoomState.meetingRoomAreas.size + }) + + // Delete the meeting room from the state + if (roomExists) { + this.state.meetingRoomState.meetingRooms.delete(message.id) + console.log(`✅ Meeting room deleted from server: ${message.id}`) + } else { + console.warn(`❌ Meeting room not found for deletion: ${message.id}`) + } + + // Delete the meeting room area from the state + if (areaExists) { + this.state.meetingRoomState.meetingRoomAreas.delete(message.id) + console.log(`✅ Meeting room area deleted from server: ${message.id}`) + } else { + console.warn(`❌ Meeting room area not found for deletion: ${message.id}`) + } + + console.log('After deletion:', { + totalRooms: this.state.meetingRoomState.meetingRooms.size, + totalAreas: this.state.meetingRoomState.meetingRoomAreas.size + }) + + // Save to file after deletion + this.saveMeetingRoomsToFile() + console.log('=== DELETE_MEETING_ROOM completed ===') + }) } - // HARD-CODED: Add 3 whiteboards in a room - for (let i = 0; i < 3; i++) { - this.state.whiteboards.set(String(i), new Whiteboard()) + async onAuth(client: Client, options: { password: string | null }) { + if (this.password) { + const validPassword = await bcrypt.compare(options.password, this.password) + if (!validPassword) { + throw new ServerError(403, 'Password is incorrect!') + } + } + return true } - // 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) - } + onJoin(client: Client, options: any) { + console.log(`=== CLIENT JOINED ===`) + console.log(`Client ${client.sessionId} joined`) + console.log('Current meetingRooms count:', this.state.meetingRoomState?.meetingRooms?.size || 0) + console.log( + 'Current meetingRoomAreas count:', + this.state.meetingRoomState?.meetingRoomAreas?.size || 0 + ) + + // Log existing meeting rooms for new client + if (this.state.meetingRoomState?.meetingRooms) { + console.log('Existing meeting rooms for new client:') + this.state.meetingRoomState.meetingRooms.forEach((room, key) => { + console.log(` - ${key}: ${room.name} (mode: ${room.mode}, host: ${room.hostUserId})`) + }) + } + + if (this.state.meetingRoomState?.meetingRoomAreas) { + console.log('Existing meeting room areas for new client:') + this.state.meetingRoomState.meetingRoomAreas.forEach((area, key) => { + console.log(` - ${key}: x=${area.x}, y=${area.y}, w=${area.width}, h=${area.height}`) + }) + } + + console.log('=== END CLIENT JOINED ===') + + this.state.players.set(client.sessionId, new Player()) + client.send(Message.SEND_ROOM_DATA, { + id: this.roomId, + name: this.name, + description: this.description, }) - }) - }) - - // 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, + } + + onLeave(client: Client, consented: boolean) { + if (this.state.players.has(client.sessionId)) { + this.state.players.delete(client.sessionId) + } + this.state.computers.forEach((computer) => { + if (computer.connectedUser.has(client.sessionId)) { + computer.connectedUser.delete(client.sessionId) + } }) - } - ) - - // 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, + this.state.whiteboards.forEach((whiteboard) => { + if (whiteboard.connectedUser.has(client.sessionId)) { + whiteboard.connectedUser.delete(client.sessionId) + } }) - } - ) - - // 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) + + // Meeting room participant cleanup + if (this.state.meetingRoomState?.meetingRooms) { + this.state.meetingRoomState.meetingRooms.forEach((meetingRoom) => { + const participantIndex = meetingRoom.participants.findIndex((id) => id === client.sessionId) + if (participantIndex !== -1) { + meetingRoom.participants.deleteAt(participantIndex) + } + }) } - }) - }) - - // 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 } - ) - }) - } - - async onAuth(client: Client, options: { password: string | null }) { - if (this.password) { - const validPassword = await bcrypt.compare(options.password, this.password) - if (!validPassword) { - throw new ServerError(403, 'Password is incorrect!') - } } - return true - } - - onJoin(client: Client, options: any) { - this.state.players.set(client.sessionId, new Player()) - client.send(Message.SEND_ROOM_DATA, { - id: this.roomId, - name: this.name, - description: this.description, - }) - } - - onLeave(client: Client, consented: boolean) { - if (this.state.players.has(client.sessionId)) { - this.state.players.delete(client.sessionId) + + /** + * Initialize default meeting room when the office room is first created + * This runs only once per room instance, not per client connection + */ + private initializeDefaultMeetingRoom() { + console.log('Initializing default meeting room...') + if (!this.state.meetingRoomState) { + console.error('meetingRoomState is not initialized!') + return + } + + // Create default meeting room + const defaultMeetingRoom = new MeetingRoom() + defaultMeetingRoom.id = 'default-meeting-room' + defaultMeetingRoom.name = 'Meeting Room' + defaultMeetingRoom.mode = 'open' + defaultMeetingRoom.hostUserId = 'system' // System created room + // No invited users for default room - it's open to all + + this.state.meetingRoomState.meetingRooms.set('default-meeting-room', defaultMeetingRoom) + + // Create corresponding meeting room area + const defaultArea = new MeetingRoomArea() + defaultArea.meetingRoomId = 'default-meeting-room' + defaultArea.x = 192 + defaultArea.y = 482 + defaultArea.width = 448 + defaultArea.height = 296 + + this.state.meetingRoomState.meetingRoomAreas.set('default-meeting-room', defaultArea) + + console.log('Default meeting room initialized:', { + id: 'default-meeting-room', + name: 'Meeting Room', + area: { x: 192, y: 482, width: 448, height: 296 }, + }) + } + + /** + * Save meeting rooms to JSON file for persistence + */ + private saveMeetingRoomsToFile() { + try { + // Create data directory if it doesn't exist + if (!fs.existsSync(this.dataDir)) { + fs.mkdirSync(this.dataDir, { recursive: true }) + } + + const roomsData = { + rooms: {}, + areas: {}, + lastUpdated: new Date().toISOString() + } + + // Convert Colyseus MapSchema to plain objects + if (this.state.meetingRoomState?.meetingRooms) { + this.state.meetingRoomState.meetingRooms.forEach((room, key) => { + roomsData.rooms[key] = { + id: room.id, + name: room.name, + mode: room.mode, + hostUserId: room.hostUserId, + invitedUsers: Array.from(room.invitedUsers), + participants: Array.from(room.participants) + } + }) + } + + if (this.state.meetingRoomState?.meetingRoomAreas) { + this.state.meetingRoomState.meetingRoomAreas.forEach((area, key) => { + roomsData.areas[key] = { + meetingRoomId: area.meetingRoomId, + x: area.x, + y: area.y, + width: area.width, + height: area.height + } + }) + } + + fs.writeFileSync(this.meetingRoomsFile, JSON.stringify(roomsData, null, 2)) + console.log('📁 Meeting rooms saved to file:', this.meetingRoomsFile) + } catch (error) { + console.error('❌ Error saving meeting rooms to file:', error) + } + } + + /** + * Load meeting rooms from JSON file + */ + private loadMeetingRoomsFromFile() { + try { + if (!fs.existsSync(this.meetingRoomsFile)) { + console.log('📁 No meeting rooms file found, using defaults only') + return + } + + const fileContent = fs.readFileSync(this.meetingRoomsFile, 'utf8') + const roomsData = JSON.parse(fileContent) + + console.log('📁 Loading meeting rooms from file...') + + // Load rooms + if (roomsData.rooms) { + Object.entries(roomsData.rooms).forEach(([key, roomData]: [string, any]) => { + // Skip default room since it's already created + if (key === 'default-meeting-room') { + console.log('⏭️ Skipping default room, already exists') + return + } + + const meetingRoom = new MeetingRoom() + meetingRoom.id = roomData.id + meetingRoom.name = roomData.name + meetingRoom.mode = roomData.mode + meetingRoom.hostUserId = roomData.hostUserId + + // Restore invited users + if (roomData.invitedUsers) { + roomData.invitedUsers.forEach((userId: string) => { + meetingRoom.invitedUsers.push(userId) + }) + } + + // Don't restore participants - they'll rejoin when they reconnect + + this.state.meetingRoomState!.meetingRooms.set(key, meetingRoom) + console.log(`📥 Loaded room: ${roomData.name} (${roomData.mode})`) + }) + } + + // Load areas + if (roomsData.areas) { + Object.entries(roomsData.areas).forEach(([key, areaData]: [string, any]) => { + // Skip default area since it's already created + if (key === 'default-meeting-room') { + console.log('⏭️ Skipping default area, already exists') + return + } + + const area = new MeetingRoomArea() + area.meetingRoomId = areaData.meetingRoomId + area.x = areaData.x + area.y = areaData.y + area.width = areaData.width + area.height = areaData.height + + this.state.meetingRoomState!.meetingRoomAreas.set(key, area) + console.log(`📥 Loaded area: ${key} (${areaData.x},${areaData.y})`) + }) + } + + console.log(`📁 Meeting rooms loaded from ${roomsData.lastUpdated}`) + } catch (error) { + console.error('❌ Error loading meeting rooms from file:', error) + } + } + + onDispose() { + // Save meeting rooms before disposing + this.saveMeetingRoomsToFile() + + this.state.whiteboards.forEach((whiteboard) => { + if (whiteboardRoomIds.has(whiteboard.roomId)) whiteboardRoomIds.delete(whiteboard.roomId) + }) + + console.log('room', this.roomId, 'disposing...') + this.dispatcher.stop() } - this.state.computers.forEach((computer) => { - if (computer.connectedUser.has(client.sessionId)) { - computer.connectedUser.delete(client.sessionId) - } - }) - this.state.whiteboards.forEach((whiteboard) => { - if (whiteboard.connectedUser.has(client.sessionId)) { - whiteboard.connectedUser.delete(client.sessionId) - } - }) - } - - onDispose() { - this.state.whiteboards.forEach((whiteboard) => { - if (whiteboardRoomIds.has(whiteboard.roomId)) whiteboardRoomIds.delete(whiteboard.roomId) - }) - - console.log('room', this.roomId, 'disposing...') - this.dispatcher.stop() - } } 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..5f23dcdb 100644 --- a/server/rooms/schema/OfficeState.ts +++ b/server/rooms/schema/OfficeState.ts @@ -5,8 +5,19 @@ import { 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 @@ -14,6 +25,11 @@ export class Player extends Schema implements IPlayer { @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() } export class Computer extends Schema implements IComputer { @@ -43,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 9bcb6582..2b7c92da 100644 --- a/types/IOfficeState.ts +++ b/types/IOfficeState.ts @@ -1,5 +1,17 @@ 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 { name: string x: number @@ -7,6 +19,11 @@ export interface IPlayer extends Schema { anim: string readyToConnect: boolean videoConnected: boolean + workStatus: WorkStatus + workStartTime: number + lastBreakTime: number + fatigueLevel: number + appearance: IPlayerAppearance } export interface IComputer extends Schema { @@ -24,9 +41,40 @@ export interface IChatMessage extends Schema { 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 +} + export interface IOfficeState extends Schema { players: MapSchema computers: MapSchema whiteboards: MapSchema chatMessages: ArraySchema + meetingRoomState: IMeetingRoomState } diff --git a/types/Messages.ts b/types/Messages.ts index 25180f03..d738d8d4 100644 --- a/types/Messages.ts +++ b/types/Messages.ts @@ -11,4 +11,14 @@ export enum Message { 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, } diff --git a/yarn.lock b/yarn.lock index b3c1c71f..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" @@ -278,6 +304,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" @@ -396,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" @@ -430,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" @@ -487,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" @@ -518,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" @@ -568,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== @@ -612,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" @@ -681,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== @@ -698,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" @@ -719,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" @@ -771,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" @@ -782,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" @@ -805,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" @@ -841,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== @@ -857,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" @@ -880,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" @@ -907,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" @@ -1034,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" @@ -1067,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" @@ -1086,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" @@ -1133,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" @@ -1153,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" @@ -1167,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" @@ -1188,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" @@ -1237,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" @@ -1271,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" @@ -1307,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" @@ -1325,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" @@ -1335,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" @@ -1383,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" @@ -1424,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" @@ -1454,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" @@ -1516,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" @@ -1536,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" @@ -1554,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" @@ -1573,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" @@ -1583,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" @@ -1598,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: @@ -1611,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== @@ -1631,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" @@ -1655,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" @@ -1674,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" @@ -1719,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== @@ -1749,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" @@ -1813,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" @@ -1845,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" @@ -1893,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" @@ -1934,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" @@ -1953,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.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.6" -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.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.0.4" + side-channel "^1.1.0" queue-microtask@^1.2.2: version "1.2.3" @@ -1982,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" @@ -1993,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" @@ -2006,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" @@ -2017,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" @@ -2031,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-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@^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@^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" @@ -2073,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" @@ -2086,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" @@ -2125,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== @@ -2143,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" @@ -2178,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" @@ -2201,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" @@ -2215,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: - call-bind "^1.0.0" - get-intrinsic "^1.0.2" - object-inspect "^1.9.0" + 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-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" @@ -2258,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" @@ -2276,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" @@ -2309,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" @@ -2328,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" @@ -2381,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" @@ -2392,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" @@ -2406,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" @@ -2431,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" @@ -2493,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" @@ -2525,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" @@ -2549,39 +2690,37 @@ 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" + 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" - 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" @@ -2607,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" @@ -2624,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"