phase 12 koncxana

src/scenes/UIScene.js

@@ -24,6 +24,11 @@ class UIScene extends Phaser.Scene {
         // this.createDebugInfo();
         this.createSettingsButton();
 
+        // Listeners for Age
+        if (this.gameScene) {
+            this.gameScene.events.on('update-age-ui', (data) => this.updateAge(data.gen, data.age));
+        }
+
         // Resize event
         this.scale.on('resize', this.resize, this);
 
@@ -58,6 +63,10 @@ class UIScene extends Phaser.Scene {
         this.craftingRecipes = [
             { id: 'axe', name: 'Stone Axe', req: { 'wood': 3, 'stone': 3 }, output: 1, type: 'tool', desc: 'Used for chopping trees.' },
             { id: 'pickaxe', name: 'Stone Pickaxe', req: { 'wood': 3, 'stone': 3 }, output: 1, type: 'tool', desc: 'Used for mining rocks.' },
+            { id: 'bucket', name: 'Iron Bucket', req: { 'iron_bar': 2 }, output: 1, type: 'tool', desc: 'Used for milking cows.' },
+            { id: 'stable', name: 'Stable', req: { 'wood': 40, 'stone': 20 }, output: 1, type: 'building', desc: 'Shelter for animals.', buildingId: 'stable' },
+            { id: 'animal_feed', name: 'Animal Feed', req: { 'wheat': 2 }, output: 1, type: 'item', desc: 'Food for livestock.' },
+            { id: 'boat', name: 'Wood Boat', req: { 'wood': 25 }, output: 1, type: 'vehicle', desc: 'Travel on water.' },
             { id: 'hoe', name: 'Stone Hoe', req: { 'wood': 2, 'stone': 2 }, output: 1, type: 'tool', desc: 'Prepares soil for planting.' },
             { id: 'sword', name: 'Stone Sword', req: { 'wood': 5, 'stone': 2 }, output: 1, type: 'weapon', desc: 'Deals damage to zombies.' },
             { id: 'fence', name: 'Wood Fence', req: { 'wood': 2 }, output: 1, type: 'building', desc: 'Simple barrier.' },
@@ -66,6 +75,16 @@ class UIScene extends Phaser.Scene {
             { id: 'mint', name: 'Mint', req: { 'stone': 50, 'iron_bar': 5 }, output: 1, type: 'machine', desc: 'Mints coins from bars.' },
             { id: 'grave', name: 'Grave', req: { 'stone': 10 }, output: 1, type: 'furniture', desc: 'Resting place for zombies.' }
         ];
+
+        // OXYGEN EVENTS
+        if (this.gameScene) {
+            this.gameScene.events.on('update-inventory', () => this.updateInventoryUI());
+            this.gameScene.events.on('show-floating-text', (data) => this.showFloatingText(data));
+            this.gameScene.events.on('update-oxygen', (data) => this.updateOxygen(data));
+            this.gameScene.events.on('hide-oxygen', () => this.hideOxygen());
+        }
+
+        this.createOxygenBar();
     }
 
     // ... (rest of class) ...
@@ -563,6 +582,7 @@ class UIScene extends Phaser.Scene {
         bg.fillStyle(0xDAA520, 0.2); // Goldish bg
         bg.fillRect(x, y, 130, 30);
         bg.lineStyle(2, 0xFFD700, 0.8);
+        bg.lineStyle(2, 0xFFD700, 0.8);
         bg.strokeRect(x, y, 130, 30);
 
         this.goldBg = bg; // Save ref
@@ -574,6 +594,16 @@ class UIScene extends Phaser.Scene {
             fontStyle: 'bold'
         });
         this.goldText.setOrigin(0.5, 0.5);
+
+        // GENERATION / AGE UI (Below Gold)
+        if (this.genText) this.genText.destroy();
+        this.genText = this.add.text(x + 65, y + 40, 'Gen: 1 | Age: 18', {
+            fontSize: '12px', color: '#AAAAAA'
+        }).setOrigin(0.5);
+    }
+
+    updateAge(gen, age) {
+        if (this.genText) this.genText.setText(`Gen: ${gen} | Age: ${age}`);
     }
 
     updateGold(amount) {
@@ -1445,4 +1475,43 @@ class UIScene extends Phaser.Scene {
             });
         }
     }
+
+    // --- OXYGEN BAR ---
+    createOxygenBar() {
+        this.oxygenContainer = this.add.container(this.scale.width / 2, this.scale.height - 100);
+        this.oxygenContainer.setDepth(2000);
+
+        // Bg
+        const bg = this.add.rectangle(0, 0, 204, 24, 0x000000);
+        bg.setStrokeStyle(2, 0xffffff);
+        this.oxygenContainer.add(bg);
+
+        // Bar
+        this.oxygenBar = this.add.rectangle(-100, 0, 200, 20, 0x00FFFF);
+        this.oxygenBar.setOrigin(0, 0.5);
+        this.oxygenContainer.add(this.oxygenBar);
+
+        // Text
+        const text = this.add.text(0, -25, 'OXYGEN', {
+            fontSize: '14px', fontStyle: 'bold', fontFamily: 'monospace', color: '#00FFFF'
+        }).setOrigin(0.5);
+        this.oxygenContainer.add(text);
+
+        this.oxygenContainer.setVisible(false);
+    }
+
+    updateOxygen(data) {
+        if (!this.oxygenContainer) return;
+        this.oxygenContainer.setVisible(true);
+        const percent = Math.max(0, data.current / data.max);
+        this.oxygenBar.width = 200 * percent;
+
+        // Color warning
+        if (percent < 0.3) this.oxygenBar.fillColor = 0xFF0000;
+        else this.oxygenBar.fillColor = 0x00FFFF;
+    }
+
+    hideOxygen() {
+        if (this.oxygenContainer) this.oxygenContainer.setVisible(false);
+    }
 }