inventori

src/systems/FullInventoryUI.js

@@ -0,0 +1,240 @@
+/**
+ * FULL INVENTORY SYSTEM
+ * 24 slots total: 9 hotbar + 15 backpack
+ * Press I to open/close
+ */
+class FullInventoryUI {
+    constructor(scene) {
+        this.scene = scene;
+        this.isOpen = false;
+
+        // Create inventory panel (hidden by default)
+        this.createInventoryPanel();
+
+        // Keyboard toggle (I key)
+        scene.input.keyboard.on('keydown-I', () => {
+            this.toggle();
+        });
+
+        console.log('🎒 Full Inventory UI created (Press I to open)');
+    }
+
+    createInventoryPanel() {
+        const uiScene = this.scene.scene.get('UIScene');
+        if (!uiScene) return;
+
+        const centerX = uiScene.scale.width / 2;
+        const centerY = uiScene.scale.height / 2;
+
+        // Container
+        this.container = uiScene.add.container(centerX, centerY);
+        this.container.setDepth(50000); // Above everything
+        this.container.setScrollFactor(0);
+        this.container.setVisible(false);
+
+        // Semi-transparent background overlay
+        const overlay = uiScene.add.rectangle(0, 0,
+            uiScene.scale.width * 2,
+            uiScene.scale.height * 2,
+            0x000000, 0.7);
+        overlay.setInteractive(); // Block clicks
+        this.container.add(overlay);
+
+        // Main panel background
+        const panelWidth = 400;
+        const panelHeight = 500;
+
+        const bg = uiScene.add.graphics();
+        bg.fillStyle(0x2a4a2a, 0.95); // Dark green
+        bg.fillRoundedRect(-panelWidth / 2, -panelHeight / 2, panelWidth, panelHeight, 16);
+        bg.lineStyle(4, 0x90EE90, 1); // Light green border
+        bg.strokeRoundedRect(-panelWidth / 2, -panelHeight / 2, panelWidth, panelHeight, 16);
+        this.container.add(bg);
+
+        // Title
+        const title = uiScene.add.text(0, -panelHeight / 2 + 20, '🎒 INVENTORY', {
+            fontSize: '28px',
+            fontFamily: 'Arial',
+            fill: '#FFD700',
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+        this.container.add(title);
+
+        // Subtitle
+        const subtitle = uiScene.add.text(0, -panelHeight / 2 + 50, '24 Slots Total', {
+            fontSize: '14px',
+            fill: '#aaaaaa'
+        }).setOrigin(0.5);
+        this.container.add(subtitle);
+
+        // Hotbar section (6 slots)
+        const hotbarLabel = uiScene.add.text(-panelWidth / 2 + 20, -panelHeight / 2 + 80,
+            'HOTBAR (1-6):', {
+            fontSize: '16px',
+            fill: '#FFD700',
+            fontStyle: 'bold'
+        });
+        this.container.add(hotbarLabel);
+
+        // Draw hotbar slots
+        this.hotbarSlots = [];
+        const slotSize = 50;
+        const slotSpacing = 10;
+        const startX = -panelWidth / 2 + 20;
+        const hotbarY = -panelHeight / 2 + 110;
+
+        for (let i = 0; i < 6; i++) {
+            const x = startX + (i % 6) * (slotSize + slotSpacing);
+            const slot = this.createSlot(uiScene, x, hotbarY, slotSize, i);
+            this.hotbarSlots.push(slot);
+            this.container.add(slot.bg);
+            this.container.add(slot.text);
+        }
+
+        // Backpack section (15 slots in 3 rows of 5)
+        const backpackLabel = uiScene.add.text(-panelWidth / 2 + 20, hotbarY + 80,
+            'BACKPACK:', {
+            fontSize: '16px',
+            fill: '#FFD700',
+            fontStyle: 'bold'
+        });
+        this.container.add(backpackLabel);
+
+        this.backpackSlots = [];
+        const backpackStartY = hotbarY + 110;
+
+        for (let i = 0; i < 18; i++) {
+            const row = Math.floor(i / 6);
+            const col = i % 6;
+            const x = startX + col * (slotSize + slotSpacing);
+            const y = backpackStartY + row * (slotSize + slotSpacing);
+            const slot = this.createSlot(uiScene, x, y, slotSize, i + 6);
+            this.backpackSlots.push(slot);
+            this.container.add(slot.bg);
+            this.container.add(slot.text);
+        }
+
+        // Close button
+        const closeBtn = uiScene.add.text(0, panelHeight / 2 - 40, '[ CLOSE (I) ]', {
+            fontSize: '18px',
+            color: '#00ff00',
+            backgroundColor: '#003300',
+            padding: { x: 20, y: 10 },
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+
+        closeBtn.setInteractive({ useHandCursor: true });
+        closeBtn.on('pointerover', () => closeBtn.setScale(1.1));
+        closeBtn.on('pointerout', () => closeBtn.setScale(1.0));
+        closeBtn.on('pointerdown', () => this.toggle());
+        this.container.add(closeBtn);
+
+        // Instructions
+        const instructions = uiScene.add.text(0, panelHeight / 2 - 80,
+            'Click slot to select • Press I to close', {
+            fontSize: '12px',
+            fill: '#888888'
+        }).setOrigin(0.5);
+        this.container.add(instructions);
+    }
+
+    createSlot(scene, x, y, size, index) {
+        // Background
+        const bg = scene.add.graphics();
+        bg.fillStyle(0x4a3520, 0.8); // Brown
+        bg.fillRoundedRect(x, y, size, size, 4);
+        bg.lineStyle(2, 0x8B4513, 1);
+        bg.strokeRoundedRect(x, y, size, size, 4);
+
+        // Slot number
+        const text = scene.add.text(x + size / 2, y + size / 2, `${index + 1}`, {
+            fontSize: '12px',
+            fill: '#ffffff'
+        }).setOrigin(0.5);
+
+        // Make interactive
+        const hitArea = new Phaser.Geom.Rectangle(x, y, size, size);
+        bg.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains);
+        bg.on('pointerdown', () => {
+            this.selectSlot(index);
+        });
+        bg.on('pointerover', () => {
+            bg.clear();
+            bg.fillStyle(0x6a5520, 0.9); // Lighter brown
+            bg.fillRoundedRect(x, y, size, size, 4);
+            bg.lineStyle(2, 0xFFD700, 1); // Gold border
+            bg.strokeRoundedRect(x, y, size, size, 4);
+        });
+        bg.on('pointerout', () => {
+            bg.clear();
+            bg.fillStyle(0x4a3520, 0.8);
+            bg.fillRoundedRect(x, y, size, size, 4);
+            bg.lineStyle(2, 0x8B4513, 1);
+            bg.strokeRoundedRect(x, y, size, size, 4);
+        });
+
+        return { bg, text, index };
+    }
+
+    selectSlot(index) {
+        console.log(`📦 Selected slot ${index + 1}`);
+
+        // Update UIScene selected slot
+        const uiScene = this.scene.scene.get('UIScene');
+        if (uiScene && uiScene.selectSlot) {
+            uiScene.selectSlot(index);
+        }
+
+        // Close inventory if hotbar slot (0-5)
+        if (index < 6) {
+            this.toggle();
+        }
+    }
+
+    toggle() {
+        this.isOpen = !this.isOpen;
+
+        if (this.container) {
+            this.container.setVisible(this.isOpen);
+        }
+
+        console.log(`🎒 Inventory: ${this.isOpen ? 'OPEN' : 'CLOSED'}`);
+
+        // Pause game when open
+        if (this.scene.physics) {
+            this.scene.physics.world.isPaused = this.isOpen;
+        }
+    }
+
+    update() {
+        if (!this.isOpen) return;
+
+        // Update slot contents from inventory system
+        const inv = this.scene.inventorySystem;
+        if (!inv || !inv.slots) return;
+
+        // Update hotbar slots (0-5)
+        this.hotbarSlots.forEach((slot, i) => {
+            const invSlot = inv.slots[i];
+            if (invSlot && invSlot.item) {
+                slot.text.setText(`${invSlot.item.id}\n×${invSlot.quantity || 1}`);
+                slot.text.setFontSize('10px');
+            } else {
+                slot.text.setText(`${i + 1}`);
+                slot.text.setFontSize('12px');
+            }
+        });
+
+        // Update backpack slots (6-23)
+        this.backpackSlots.forEach((slot, i) => {
+            const invSlot = inv.slots[i + 6];
+            if (invSlot && invSlot.item) {
+                slot.text.setText(`${invSlot.item.id}\n×${invSlot.quantity || 1}`);
+                slot.text.setFontSize('10px');
+            } else {
+                slot.text.setText(`${i + 10}`);
+                slot.text.setFontSize('12px');
+            }
+        });
+    }
+}

src/systems/UnifiedStatsPanel.js

@@ -0,0 +1,276 @@
+/**
+ * UNIFIED STATS PANEL
+ * Combines Performance Monitor + Debug Info into one popup
+ * Toggle with TAB, auto-hides after 3 seconds
+ */
+class UnifiedStatsPanel {
+    constructor(scene) {
+        this.scene = scene;
+        this.visible = false;
+        this.autoHideTimer = null;
+
+        // FPS tracking
+        this.fps = 60;
+        this.fpsHistory = [];
+        this.maxHistoryLength = 60;
+
+        // Stats
+        this.stats = {
+            avgFPS: 60,
+            minFPS: 60,
+            maxFPS: 60,
+            frameTime: 16.67,
+            activeSprites: 0,
+            memoryMB: 0
+        };
+
+        this.createUI();
+        this.setupKeyboard();
+
+        console.log('📊 Unified Stats Panel initialized (TAB to toggle)');
+    }
+
+    createUI() {
+        const uiScene = this.scene.scene.get('UIScene');
+        if (!uiScene) return;
+
+        const x = 10;
+        const y = 10;
+        const width = 280;
+        const height = 180;
+
+        // Container
+        this.container = uiScene.add.container(x, y);
+        this.container.setDepth(100000);
+        this.container.setScrollFactor(0);
+        this.container.setVisible(false);
+
+        // Background
+        const bg = uiScene.add.graphics();
+        bg.fillStyle(0x000000, 0.85);
+        bg.fillRoundedRect(0, 0, width, height, 8);
+        bg.lineStyle(3, 0x00ff00, 0.8);
+        bg.strokeRoundedRect(0, 0, width, height, 8);
+        this.container.add(bg);
+
+        // Title
+        const title = uiScene.add.text(width / 2, 12, '📊 STATS PANEL', {
+            fontSize: '14px',
+            fontFamily: 'Arial',
+            fill: '#00ff00',
+            fontStyle: 'bold'
+        }).setOrigin(0.5, 0);
+        this.container.add(title);
+
+        // Separator
+        const separator = uiScene.add.graphics();
+        separator.lineStyle(1, 0x00ff00, 0.5);
+        separator.lineBetween(10, 30, width - 10, 30);
+        this.container.add(separator);
+
+        // Performance section
+        this.perfText = uiScene.add.text(15, 38, '', {
+            fontSize: '11px',
+            fontFamily: 'Courier New',
+            fill: '#00ff00',
+            stroke: '#000000',
+            strokeThickness: 2
+        });
+        this.container.add(this.perfText);
+
+        // Debug section
+        this.debugText = uiScene.add.text(15, 105, '', {
+            fontSize: '11px',
+            fontFamily: 'Courier New',
+            fill: '#ffff00',
+            stroke: '#000000',
+            strokeThickness: 2
+        });
+        this.container.add(this.debugText);
+
+        // FPS Graph
+        this.graph = uiScene.add.graphics();
+        this.container.add(this.graph);
+
+        // Auto-hide hint
+        this.hintText = uiScene.add.text(width / 2, height - 8, 'Auto-hides in 3s', {
+            fontSize: '9px',
+            fill: '#888888'
+        }).setOrigin(0.5, 1);
+        this.container.add(this.hintText);
+    }
+
+    setupKeyboard() {
+        const uiScene = this.scene.scene.get('UIScene');
+        if (!uiScene || !uiScene.input) return;
+
+        // TAB key
+        uiScene.input.keyboard.on('keydown-TAB', (event) => {
+            event.preventDefault();
+            this.toggle();
+        });
+
+        // F3 key (alternative)
+        uiScene.input.keyboard.on('keydown-F3', () => {
+            this.toggle();
+        });
+    }
+
+    toggle() {
+        this.visible = !this.visible;
+
+        if (this.container) {
+            this.container.setVisible(this.visible);
+        }
+
+        console.log(`Stats Panel: ${this.visible ? 'ON' : 'OFF'}`);
+
+        // Auto-hide after 3 seconds
+        if (this.visible) {
+            this.startAutoHideTimer();
+        } else {
+            this.cancelAutoHideTimer();
+        }
+    }
+
+    startAutoHideTimer() {
+        this.cancelAutoHideTimer();
+
+        const uiScene = this.scene.scene.get('UIScene');
+        if (!uiScene) return;
+
+        this.autoHideTimer = uiScene.time.delayedCall(3000, () => {
+            this.visible = false;
+            if (this.container) {
+                this.container.setVisible(false);
+            }
+            console.log('Stats Panel auto-hidden');
+        });
+    }
+
+    cancelAutoHideTimer() {
+        if (this.autoHideTimer) {
+            this.autoHideTimer.remove();
+            this.autoHideTimer = null;
+        }
+    }
+
+    update(delta) {
+        if (!this.visible) return;
+
+        // Calculate FPS
+        this.fps = 1000 / delta;
+        this.fpsHistory.push(this.fps);
+        if (this.fpsHistory.length > this.maxHistoryLength) {
+            this.fpsHistory.shift();
+        }
+
+        // Calculate stats
+        this.stats.avgFPS = this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length;
+        this.stats.minFPS = Math.min(...this.fpsHistory);
+        this.stats.maxFPS = Math.max(...this.fpsHistory);
+        this.stats.frameTime = delta;
+        this.stats.activeSprites = this.countActiveSprites();
+
+        // Memory
+        if (performance.memory) {
+            this.stats.memoryMB = (performance.memory.usedJSHeapSize / 1048576).toFixed(1);
+        }
+
+        // Update UI every 5 frames
+        if (this.scene.game.loop.frame % 5 === 0) {
+            this.updateUI();
+        }
+    }
+
+    countActiveSprites() {
+        if (!this.scene.children) return 0;
+        return this.scene.children.list.filter(child =>
+            child.active && child.visible
+        ).length;
+    }
+
+    updateUI() {
+        // Performance section
+        if (this.perfText) {
+            const perfLines = [
+                `PERFORMANCE:`,
+                `FPS: ${this.fps.toFixed(1)} (Avg: ${this.stats.avgFPS.toFixed(1)})`,
+                `Min: ${this.stats.minFPS.toFixed(1)} | Max: ${this.stats.maxFPS.toFixed(1)}`,
+                `Frame: ${this.stats.frameTime.toFixed(2)}ms`,
+                `Memory: ${this.stats.memoryMB} MB`
+            ];
+            this.perfText.setText(perfLines.join('\n'));
+        }
+
+        // Debug section
+        if (this.debugText) {
+            const player = this.scene.player;
+            const playerPos = player ? player.getPosition() : { x: 0, y: 0 };
+            const activeCrops = this.scene.terrainSystem?.cropsMap?.size || 0;
+            const dropsCount = this.scene.lootSystem?.drops?.length || 0;
+            const gameTime = this.scene.timeSystem?.gameTime?.toFixed(1) || '?';
+            const conn = this.scene.multiplayerSystem?.isConnected ? '🟢' : '🔴';
+
+            const debugLines = [
+                `GAME INFO: ${conn}`,
+                `Time: ${gameTime}h | Crops: ${activeCrops}`,
+                `Loot: ${dropsCount} | Sprites: ${this.stats.activeSprites}`,
+                `Player: (${playerPos.x}, ${playerPos.y})`
+            ];
+            this.debugText.setText(debugLines.join('\n'));
+        }
+
+        // Draw FPS graph
+        this.drawGraph();
+    }
+
+    drawGraph() {
+        if (!this.graph) return;
+
+        this.graph.clear();
+
+        const graphX = 15;
+        const graphY = 155;
+        const graphWidth = 250;
+        const graphHeight = 15;
+        const maxFPS = 60;
+
+        // Background
+        this.graph.fillStyle(0x222222, 0.5);
+        this.graph.fillRect(graphX, graphY, graphWidth, graphHeight);
+
+        // FPS bars
+        const barWidth = graphWidth / this.maxHistoryLength;
+        this.fpsHistory.forEach((fps, i) => {
+            const barHeight = (fps / maxFPS) * graphHeight;
+            const x = graphX + (i * barWidth);
+            const y = graphY + graphHeight - barHeight;
+
+            // Color based on FPS
+            if (fps < 30) {
+                this.graph.fillStyle(0xff0000, 0.8); // Red
+            } else if (fps < 50) {
+                this.graph.fillStyle(0xffaa00, 0.8); // Orange
+            } else {
+                this.graph.fillStyle(0x00ff00, 0.8); // Green
+            }
+
+            this.graph.fillRect(x, y, barWidth, barHeight);
+        });
+
+        // 60 FPS line
+        this.graph.lineStyle(1, 0xffffff, 0.5);
+        this.graph.beginPath();
+        this.graph.moveTo(graphX, graphY);
+        this.graph.lineTo(graphX + graphWidth, graphY);
+        this.graph.strokePath();
+    }
+
+    destroy() {
+        this.cancelAutoHideTimer();
+        if (this.container) {
+            this.container.destroy();
+        }
+    }
+}