inventori

src/scenes/GameScene.js

@@ -342,12 +342,13 @@ class GameScene extends Phaser.Scene {
         console.log('🌾 Solo farming mode - no NPCs');
 
         // FPS Monitor (Performance)
-        console.log('📊 Initializing FPS Monitor...');
-        this.fpsMonitor = new FPSMonitor(this);
+        // FPS Monitor - DISABLED (Using UnifiedStatsPanel instead)
+        // console.log('📊 Initializing FPS Monitor...');
+        // this.fpsMonitor = new FPSMonitor(this);
 
-        // Performance Monitor (Advanced)
-        console.log('⚡ Initializing Performance Monitor...');
-        this.performanceMonitor = new PerformanceMonitor(this);
+        // Unified Stats Panel (Performance + Debug in one)
+        console.log('📊 Initializing Unified Stats Panel...');
+        this.unifiedStatsPanel = new UnifiedStatsPanel(this);
 
         // NPC Spawner
         console.log('🧟 Initializing NPC Spawner...');
@@ -454,6 +455,10 @@ class GameScene extends Phaser.Scene {
 
         // Tutorial System (shows keyboard shortcuts)
         this.tutorialSystem = new TutorialSystem(this);
+
+        // Full Inventory UI (24 slots, I key to open)
+        this.fullInventoryUI = new FullInventoryUI(this);
+
         this.legacySystem = new LegacySystem(this);
 
         // Initialize Sound Manager
@@ -605,9 +610,9 @@ class GameScene extends Phaser.Scene {
         // Auto-load if available (DISABLED in SaveSystem!)
         this.saveSystem.loadGame(); // Vrne false - ne naloži save-a!
 
-        // Debug Text
-        this.add.text(10, 10, 'NovaFarma Alpha v0.6', { font: '16px monospace', fill: '#ffffff' })
-            .setScrollFactor(0).setDepth(10000);
+        // Debug Text - REMOVED (Version shown in UnifiedStatsPanel)
+        // this.add.text(10, 10, 'NovaFarma Alpha v0.6', { font: '16px monospace', fill: '#ffffff' })
+        //     .setScrollFactor(0).setDepth(10000);
 
         console.log('✅ GameScene ready - FAZA 20 (Full Features)!');
 
@@ -1007,24 +1012,14 @@ class GameScene extends Phaser.Scene {
             if (npc.update) npc.update(delta);
         }
 
-        // Debug Info
-        if (this.player) {
-            const playerPos = this.player.getPosition();
-            const uiScene = this.scene.get('UIScene');
-            if (uiScene && uiScene.debugText) {
-                const activeCrops = this.terrainSystem && this.terrainSystem.cropsMap ? this.terrainSystem.cropsMap.size : 0;
-                const dropsCount = this.lootSystem ? this.lootSystem.drops.length : 0;
-                const conn = this.multiplayerSystem && this.multiplayerSystem.isConnected ? '🟢 Online' : '🔴 Offline';
+        // Update Unified Stats Panel
+        if (this.unifiedStatsPanel) {
+            this.unifiedStatsPanel.update(delta);
+        }
 
-                uiScene.debugText.setText(
-                    `NovaFarma v0.6 [${conn}]\n` +
-                    `[F5] Save | [F9] Load | [K] Boss\n` +
-                    `Time: ${this.timeSystem ? this.timeSystem.gameTime.toFixed(1) : '?'}h\n` +
-                    `Active Crops: ${activeCrops}\n` +
-                    `Loot Drops: ${dropsCount}\n` +
-                    `Player: (${playerPos.x}, ${playerPos.y})`
-                );
-            }
+        // Update Full Inventory UI
+        if (this.fullInventoryUI) {
+            this.fullInventoryUI.update();
         }
 
         // Run Antigravity Engine Update

src/scenes/UIScene.js

@@ -9,6 +9,9 @@ class UIScene extends Phaser.Scene {
         // Pridobi reference na GameScene podatke (ko bodo na voljo)
         this.gameScene = this.scene.get('GameScene');
 
+        // Track selected inventory slot (for tools)
+        this.selectedSlot = 0;
+
         // Setup UI Container
         // Shared Overlay (DayNight + Weather)
         // Rendered here to be screen-space (HUD) and ignore zoom
@@ -22,7 +25,12 @@ class UIScene extends Phaser.Scene {
         this.createVirtualJoystick();
         this.createClock();
         this.createMinimap(); // NEW: Mini mapa
-        // this.createDebugInfo();
+        // this.createDebugInfo(); // REMOVED - Using UnifiedStatsPanel
+
+        // Hide old debug panel if it exists
+        if (this.debugText) this.debugText.setVisible(false);
+        if (this.debugBg) this.debugBg.setVisible(false);
+
         this.createSettingsButton();
 
         // ESC Pause Menu
@@ -343,7 +351,7 @@ class UIScene extends Phaser.Scene {
         this.createTimeControlPanel();
         this.createInventoryBar();
         this.createInventoryBar();
-        this.createDebugInfo();
+        // this.createDebugInfo(); // REMOVED - Using UnifiedStatsPanel
         this.createSettingsButton();
 
         // Refresh data
@@ -739,28 +747,7 @@ class UIScene extends Phaser.Scene {
         this.goldText.setText(`GOLD: ${amount}`);
     }
 
-    createDebugInfo() {
-        if (this.debugText) this.debugText.destroy();
-        if (this.debugBg) this.debugBg.destroy();
-
-        const x = this.scale.width - 170;
-        const y = 120; // Below Gold and Clock area
-
-        // Background
-        this.debugBg = this.add.graphics();
-        this.debugBg.fillStyle(0x000000, 0.7);
-        this.debugBg.fillRect(x, y, 160, 70);
-        this.debugBg.setDepth(2999);
-
-        this.debugText = this.add.text(x + 10, y + 10, 'Waiting for stats...', {
-            fontSize: '12px',
-            fontFamily: 'monospace',
-            fill: '#ffffff',
-            stroke: '#000000',
-            strokeThickness: 2
-        });
-        this.debugText.setDepth(3000);
-    }
+    // DEBUG INFO REMOVED - Now using UnifiedStatsPanel (TAB/F3)
 
     update() {
         if (!this.gameScene) return;
@@ -814,6 +801,9 @@ class UIScene extends Phaser.Scene {
             this.updateResourceDisplay('iron', inv.getItemCount('iron'));
         }
 
+        // Update Equipment Preview
+        this.updateEquipmentPreview();
+
         // Update Minimap
         this.updateMinimap();
     }
@@ -2489,8 +2479,9 @@ class UIScene extends Phaser.Scene {
 
     // Equipment Preview
     createEquipmentPreview() {
-        const previewX = 20;
-        const previewY = 400; // MOVED LOWER (was 150)
+        // Position next to inventory bar (bottom right)
+        const previewX = this.scale.width - 80; // Right side
+        const previewY = this.scale.height - 80; // Bottom
 
         // Background - SMALLER
         this.equipmentBg = this.add.graphics();
@@ -2500,6 +2491,7 @@ class UIScene extends Phaser.Scene {
         this.equipmentBg.strokeRoundedRect(previewX, previewY, 60, 60, 8);
         this.equipmentBg.setScrollFactor(0);
         this.equipmentBg.setDepth(1000);
+        this.equipmentBg.setVisible(true); // VISIBLE
 
         // Label - SMALLER
         this.equipmentLabel = this.add.text(
@@ -2514,17 +2506,19 @@ class UIScene extends Phaser.Scene {
         this.equipmentLabel.setOrigin(0.5, 1);
         this.equipmentLabel.setScrollFactor(0);
         this.equipmentLabel.setDepth(1001);
+        this.equipmentLabel.setVisible(true); // VISIBLE
 
         // Icon sprite placeholder - SMALLER
         this.equipmentIcon = this.add.rectangle(previewX + 30, previewY + 30, 24, 24, 0x888888);
         this.equipmentIcon.setScrollFactor(0);
         this.equipmentIcon.setDepth(1001);
+        this.equipmentIcon.setVisible(true); // VISIBLE
 
-        // Tool name - HIDDEN (too much text)
+        // Tool name
         this.equipmentName = this.add.text(
             previewX + 30,
             previewY + 50,
-            '',
+            'None',
             {
                 font: 'bold 8px Arial',
                 fill: '#ffffff'
@@ -2533,28 +2527,57 @@ class UIScene extends Phaser.Scene {
         this.equipmentName.setOrigin(0.5, 0);
         this.equipmentName.setScrollFactor(0);
         this.equipmentName.setDepth(1001);
-        this.equipmentName.setVisible(false); // HIDDEN
+        this.equipmentName.setVisible(true); // VISIBLE
 
-        console.log('🎮 Equipment preview created!');
+        console.log('🎮 Equipment preview created and VISIBLE!');
     }
 
     updateEquipmentPreview() {
         if (!this.gameScene || !this.gameScene.inventorySystem) return;
-        if (!this.equipmentName) return;
+        if (!this.equipmentIcon) return;
 
         const inv = this.gameScene.inventorySystem;
-        const selectedItem = inv.items[inv.selectedSlot];
 
-        if (selectedItem) {
-            // Update name
-            this.equipmentName.setText(selectedItem.name || selectedItem.id);
-            this.equipmentIcon.setVisible(true);
-            this.equipmentName.setVisible(true);
-        } else {
-            // Hide if no item
-            this.equipmentName.setText('None');
-            this.equipmentIcon.setVisible(false);
+        // Since inv.selectedSlot is undefined, use slot 0 for now
+        const slotIndex = 0;
+
+        if (this.equipmentLabel) {
+            this.equipmentLabel.setText(`SLOT ${slotIndex + 1}`);
         }
+
+        const selectedSlot = inv.slots ? inv.slots[slotIndex] : null;
+
+        if (selectedSlot && selectedSlot.item) {
+            // Has item - show color
+            if (selectedSlot.item.id === 'axe') {
+                this.equipmentIcon.setFillStyle(0x8B4513);
+            } else if (selectedSlot.item.id === 'hoe') {
+                this.equipmentIcon.setFillStyle(0x654321);
+            } else {
+                this.equipmentIcon.setFillStyle(0x00ff00);
+            }
+
+            if (this.equipmentName) {
+                this.equipmentName.setText(selectedSlot.item.id);
+                this.equipmentName.setVisible(true);
+            }
+        } else {
+            this.equipmentIcon.setFillStyle(0x444444);
+
+            if (this.equipmentName) {
+                this.equipmentName.setText('Empty');
+                this.equipmentName.setVisible(true);
+            }
+        }
+
+        this.equipmentIcon.setVisible(true);
+    }
+
+    // Select inventory slot (called from GameScene keyboard input)
+    selectSlot(slotIndex) {
+        this.selectedSlot = slotIndex;
+        // Update equipment preview immediately
+        this.updateEquipmentPreview();
     }
 
     /**

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();
+        }
+    }
+}

src/utils/PerformanceMonitor.js

@@ -6,7 +6,7 @@
 class PerformanceMonitor {
     constructor(scene) {
         this.scene = scene;
-        this.enabled = true; // Toggle with F3
+        this.enabled = false; // Toggle with F3 (DISABLED by default)
 
         // FPS tracking
         this.fps = 60;