posodobitev

src/scenes/UIScene.js

@@ -91,6 +91,8 @@ class UIScene extends Phaser.Scene {
         }
 
         this.createOxygenBar();
+        this.createZombieStatsPanel();
+        this.createFarmStatsPanel();
     }
 
     // ... (rest of class) ...
@@ -318,6 +320,8 @@ class UIScene extends Phaser.Scene {
         // Re-create UI elements at new positions
         this.createClock();
         this.createGoldDisplay();
+        this.createResourcesDisplay();
+        this.createTimeControlPanel();
         this.createInventoryBar();
         this.createInventoryBar();
         this.createDebugInfo();
@@ -580,6 +584,62 @@ class UIScene extends Phaser.Scene {
         this.clockText.setOrigin(0.5, 0.5);
     }
 
+    createResourcesDisplay() {
+        const startX = this.scale.width - 160;
+        const startY = 110; // Below gold display
+        const spacing = 35;
+
+        // Container
+        this.resourcesContainer = this.add.container(0, 0);
+        this.resourcesContainer.setDepth(1000);
+
+        // Resources to display
+        const resources = [
+            { key: 'wood', label: '🪵', color: '#8B4513' },
+            { key: 'stone', label: '🪨', color: '#808080' },
+            { key: 'iron', label: '⚙️', color: '#C0C0C0' }
+        ];
+
+        this.resourceTexts = {};
+
+        resources.forEach((res, i) => {
+            const y = startY + (i * spacing);
+
+            // Background
+            const bg = this.add.graphics();
+            bg.fillStyle(0x1a1a1a, 0.7);
+            bg.fillRect(startX, y, 140, 28);
+            bg.lineStyle(2, parseInt(res.color.replace('#', '0x')), 0.6);
+            bg.strokeRect(startX, y, 140, 28);
+            this.resourcesContainer.add(bg);
+
+            // Icon/Label
+            const icon = this.add.text(startX + 10, y + 14, res.label, {
+                fontSize: '18px'
+            }).setOrigin(0, 0.5);
+            this.resourcesContainer.add(icon);
+
+            // Count text
+            const text = this.add.text(startX + 40, y + 14, `${res.key.toUpperCase()}: 0`, {
+                fontSize: '14px',
+                fontFamily: 'Courier New',
+                fill: res.color,
+                fontStyle: 'bold'
+            }).setOrigin(0, 0.5);
+            this.resourcesContainer.add(text);
+
+            this.resourceTexts[res.key] = text;
+        });
+    }
+
+    updateResourceDisplay(resource, amount) {
+        if (!this.resourceTexts) return;
+        const text = this.resourceTexts[resource];
+        if (text) {
+            text.setText(`${resource.toUpperCase()}: ${amount}`);
+        }
+    }
+
     createGoldDisplay() {
         if (this.goldBg) this.goldBg.destroy();
         if (this.goldText) this.goldText.destroy();
@@ -660,7 +720,141 @@ class UIScene extends Phaser.Scene {
             this.setBarValue(this.hungerBar, stats.hunger);
             this.setBarValue(this.thirstBar, stats.thirst);
         }
+
+        // Update Zombie Stats Panel (starter zombie worker)
+        if (this.gameScene.npcs && this.gameScene.npcs.length > 0) {
+            const zombieWorker = this.gameScene.npcs.find(npc => npc.type === 'zombie' && npc.isTamed);
+            if (zombieWorker) {
+                this.updateZombieStats(zombieWorker);
+            }
+        }
+
+        // Update Farm Stats Panel
+        if (this.gameScene.farmStats) {
+            this.updateFarmStats(this.gameScene.farmStats);
+        }
+
+        // Update Clock Display (HH:MM format)
+        if (this.clockText && this.gameScene.timeSystem) {
+            const ts = this.gameScene.timeSystem;
+            const hour = Math.floor(ts.hour);
+            const minute = Math.floor((ts.hour - hour) * 60);
+            const hourStr = hour.toString().padStart(2, '0');
+            const minStr = minute.toString().padStart(2, '0');
+
+            // Day/Night indicator
+            const isNight = hour < 6 || hour >= 18;
+            const period = isNight ? '🌙' : '☀️';
+
+            this.clockText.setText(`Day ${ts.day} - ${hourStr}:${minStr} ${period}`);
+        }
+
+        // Update Resources Display
+        if (this.resourceTexts && this.gameScene.inventorySystem) {
+            const inv = this.gameScene.inventorySystem;
+            this.updateResourceDisplay('wood', inv.getItemCount('wood'));
+            this.updateResourceDisplay('stone', inv.getItemCount('stone'));
+            this.updateResourceDisplay('iron', inv.getItemCount('iron'));
+        }
     }
+
+    createTimeControlPanel() {
+        const x = this.scale.width - 170;
+        const y = 250; // Below resources
+
+        this.timeControlContainer = this.add.container(x, y);
+        this.timeControlContainer.setDepth(1000);
+
+        // Background
+        const bg = this.add.graphics();
+        bg.fillStyle(0x1a1a2a, 0.8);
+        bg.fillRect(0, 0, 150, 100);
+        bg.lineStyle(2, 0x4a90e2, 0.8);
+        bg.strokeRect(0, 0, 150, 100);
+        this.timeControlContainer.add(bg);
+
+        // Title
+        const title = this.add.text(75, 15, 'TIME SPEED', {
+            fontSize: '12px',
+            fontFamily: 'Courier New',
+            fill: '#ffffff',
+            fontStyle: 'bold'
+        }).setOrigin(0.5, 0.5);
+        this.timeControlContainer.add(title);
+
+        // Speed buttons
+        const speeds = [
+            { label: '1x', value: 1.0, y: 40 },
+            { label: '2x', value: 2.0, y: 60 },
+            { label: '5x', value: 5.0, y: 80 }
+        ];
+
+        this.timeSpeedButtons = [];
+
+        speeds.forEach((speed, i) => {
+            const btn = this.add.text(75, speed.y, speed.label, {
+                fontSize: '14px',
+                fontFamily: 'Courier New',
+                fill: '#4a90e2',
+                fontStyle: 'bold',
+                backgroundColor: '#1a1a2a',
+                padding: { x: 20, y: 5 }
+            }).setOrigin(0.5, 0.5);
+
+            btn.setInteractive({ useHandCursor: true });
+            btn.on('pointerdown', () => {
+                this.setTimeSpeed(speed.value);
+                this.highlightSpeedButton(i);
+            });
+
+            this.timeControlContainer.add(btn);
+            this.timeSpeedButtons.push(btn);
+        });
+
+        this.highlightSpeedButton(0);
+
+        // Pause button
+        const pauseBtn = this.add.text(10, 15, '⏸️', { fontSize: '18px' }).setOrigin(0, 0.5);
+        pauseBtn.setInteractive({ useHandCursor: true });
+        pauseBtn.on('pointerdown', () => this.toggleTimePause());
+        this.timeControlContainer.add(pauseBtn);
+        this.pauseBtn = pauseBtn;
+    }
+
+    setTimeSpeed(speed) {
+        if (this.gameScene && this.gameScene.timeSystem) {
+            this.gameScene.timeSystem.timeScale = speed;
+            console.log(`⏱️ Time speed: ${speed}x`);
+        }
+    }
+
+    highlightSpeedButton(index) {
+        this.timeSpeedButtons.forEach((btn, i) => {
+            if (i === index) {
+                btn.setStyle({ fill: '#ffff00', backgroundColor: '#2a4a6a' });
+            } else {
+                btn.setStyle({ fill: '#4a90e2', backgroundColor: '#1a1a2a' });
+            }
+        });
+    }
+
+    toggleTimePause() {
+        if (!this.gameScene || !this.gameScene.timeSystem) return;
+
+        const ts = this.gameScene.timeSystem;
+
+        if (ts.timeScale === 0) {
+            ts.timeScale = this.lastTimeScale || 1.0;
+            this.pauseBtn.setText('▶️');
+            console.log('▶️ Time resumed');
+        } else {
+            this.lastTimeScale = ts.timeScale;
+            ts.timeScale = 0;
+            this.pauseBtn.setText('⏸️');
+            console.log('⏸️ Time paused');
+        }
+    }
+
     toggleBuildMenu(isVisible) {
         if (!this.buildMenuContainer) {
             this.createBuildMenuInfo();
@@ -1897,4 +2091,166 @@ class UIScene extends Phaser.Scene {
             this.scene.start('StoryScene');
         }
     }
+
+    // ========== NEW: ZOMBIE & FARM STATS PANELS ==========
+
+    createZombieStatsPanel() {
+        const panelWidth = 220;
+        const panelHeight = 140;
+        const x = 20;
+        const y = 120; // Below player stats
+
+        // Container
+        this.zombieStatsContainer = this.add.container(x, y);
+        this.zombieStatsContainer.setDepth(1000);
+
+        // Background
+        const bg = this.add.graphics();
+        bg.fillStyle(0x1a1a2e, 0.9);
+        bg.fillRect(0, 0, panelWidth, panelHeight);
+        bg.lineStyle(2, 0x8a2be2, 0.8); // Purple border
+        bg.strokeRect(0, 0, panelWidth, panelHeight);
+        this.zombieStatsContainer.add(bg);
+
+        // Title
+        const title = this.add.text(panelWidth / 2, 15, '🧟 ZOMBIE WORKER', {
+            fontSize: '14px',
+            fontFamily: 'Courier New',
+            fill: '#8a2be2',
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+        this.zombieStatsContainer.add(title);
+
+        // Stats Text
+        this.zombieNameText = this.add.text(10, 35, 'Name: Worker #1', {
+            fontSize: '12px',
+            fill: '#ffffff'
+        });
+        this.zombieStatsContainer.add(this.zombieNameText);
+
+        this.zombieTaskText = this.add.text(10, 55, 'Task: IDLE', {
+            fontSize: '12px',
+            fill: '#ffff00'
+        });
+        this.zombieStatsContainer.add(this.zombieTaskText);
+
+        this.zombieLevelText = this.add.text(10, 75, 'Level: 1 (0/100 XP)', {
+            fontSize: '12px',
+            fill: '#00ff00'
+        });
+        this.zombieStatsContainer.add(this.zombieLevelText);
+
+        // Energy Bar
+        const energyLabel = this.add.text(10, 95, 'ENERGY:', { fontSize: '11px', fill: '#aaaaaa' });
+        this.zombieStatsContainer.add(energyLabel);
+
+        this.zombieEnergyBar = this.drawMiniBar(10, 110, panelWidth - 20, 15, 0x00aaff, 100);
+        this.zombieStatsContainer.add(this.zombieEnergyBar.bg);
+        this.zombieStatsContainer.add(this.zombieEnergyBar.fill);
+
+        // Initially visible
+        this.zombieStatsContainer.setVisible(true);
+    }
+
+    createFarmStatsPanel() {
+        const panelWidth = 220;
+        const panelHeight = 120;
+        const x = 20;
+        const y = 280; // Below zombie stats
+
+        // Container
+        this.farmStatsContainer = this.add.container(x, y);
+        this.farmStatsContainer.setDepth(1000);
+
+        // Background
+        const bg = this.add.graphics();
+        bg.fillStyle(0x1a2e1a, 0.9);
+        bg.fillRect(0, 0, panelWidth, panelHeight);
+        bg.lineStyle(2, 0x00ff00, 0.8); // Green border
+        bg.strokeRect(0, 0, panelWidth, panelHeight);
+        this.farmStatsContainer.add(bg);
+
+        // Title
+        const title = this.add.text(panelWidth / 2, 15, '🌾 FARM STATS', {
+            fontSize: '14px',
+            fontFamily: 'Courier New',
+            fill: '#00ff00',
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+        this.farmStatsContainer.add(title);
+
+        // Stats
+        this.farmCropsPlantedText = this.add.text(10, 40, 'Crops Planted: 0', {
+            fontSize: '12px',
+            fill: '#ffffff'
+        });
+        this.farmStatsContainer.add(this.farmCropsPlantedText);
+
+        this.farmCropsHarvestedText = this.add.text(10, 60, 'Total Harvested: 0', {
+            fontSize: '12px',
+            fill: '#ffff00'
+        });
+        this.farmStatsContainer.add(this.farmCropsHarvestedText);
+
+        this.farmGoldEarnedText = this.add.text(10, 80, 'Gold Earned: 0g', {
+            fontSize: '12px',
+            fill: '#ffd700'
+        });
+        this.farmStatsContainer.add(this.farmGoldEarnedText);
+
+        this.farmDaysText = this.add.text(10, 100, 'Days Farmed: 0', {
+            fontSize: '12px',
+            fill: '#aaaaaa'
+        });
+        this.farmStatsContainer.add(this.farmDaysText);
+    }
+
+    drawMiniBar(x, y, width, height, color, initialPercent = 100) {
+        // Background
+        const bg = this.add.graphics();
+        bg.fillStyle(0x000000, 0.5);
+        bg.fillRect(x, y, width, height);
+        bg.lineStyle(1, 0xffffff, 0.3);
+        bg.strokeRect(x, y, width, height);
+
+        // Fill
+        const fill = this.add.graphics();
+        fill.fillStyle(color, 1);
+        const maxWidth = width - 4;
+        const currentWidth = (maxWidth * initialPercent) / 100;
+        fill.fillRect(x + 2, y + 2, currentWidth, height - 4);
+
+        return { bg, fill, x, y, width, height, color };
+    }
+
+    setMiniBarValue(bar, percent) {
+        percent = Phaser.Math.Clamp(percent, 0, 100);
+        bar.fill.clear();
+        bar.fill.fillStyle(bar.color, 1);
+        const maxWidth = bar.width - 4;
+        const currentWidth = (maxWidth * percent) / 100;
+        bar.fill.fillRect(bar.x + 2, bar.y + 2, currentWidth, bar.height - 4);
+    }
+
+    // Update methods (call from update())
+    updateZombieStats(zombie) {
+        if (!zombie || !this.zombieStatsContainer) return;
+
+        this.zombieStatsContainer.setVisible(true);
+        if (this.zombieNameText) this.zombieNameText.setText(`Name: ${zombie.name || 'Worker #1'}`);
+        if (this.zombieTaskText) this.zombieTaskText.setText(`Task: ${zombie.task || 'IDLE'}`);
+        if (this.zombieLevelText) this.zombieLevelText.setText(`Level: ${zombie.level || 1} (${zombie.xp || 0}/100 XP)`);
+
+        const energy = zombie.energy !== undefined ? zombie.energy : 100;
+        if (this.zombieEnergyBar) this.setMiniBarValue(this.zombieEnergyBar, energy);
+    }
+
+    updateFarmStats(stats) {
+        if (!stats || !this.farmStatsContainer) return;
+
+        if (this.farmCropsPlantedText) this.farmCropsPlantedText.setText(`Crops Planted: ${stats.cropsPlanted || 0}`);
+        if (this.farmCropsHarvestedText) this.farmCropsHarvestedText.setText(`Total Harvested: ${stats.totalHarvested || 0}`);
+        if (this.farmGoldEarnedText) this.farmGoldEarnedText.setText(`Gold Earned: ${stats.goldEarned || 0}g`);
+        if (this.farmDaysText) this.farmDaysText.setText(`Days Farmed: ${stats.daysFarmed || 0}`);
+    }
 }