posodobitve

UI_IMPROVEMENTS_PLAN.md

@@ -0,0 +1,333 @@
+# 🎮 UI IMPROVEMENTS - IMPLEMENTATION PLAN
+
+**Datum:** 12. December 2025  
+**Čas:** 10:17  
+**Prioriteta:** HIGH
+
+---
+
+## 🎯 **CILJI:**
+
+1. ✅ Q/E keys za quick tool swap
+2. ✅ Tool durability display
+3. ✅ Seed count v hotbar
+4. ✅ Equipment preview icon
+
+---
+
+## 📋 **IMPLEMENTATION PLAN:**
+
+### **1. Q/E Keys za Tool Swap** (10 min)
+
+**Lokacija:** `src/scenes/UIScene.js`
+
+**Dodaj v create():**
+```javascript
+// Q/E za tool swap
+this.input.keyboard.on('keydown-Q', () => {
+    this.swapToolPrevious();
+});
+
+this.input.keyboard.on('keydown-E', () => {
+    this.swapToolNext();
+});
+```
+
+**Nove metode:**
+```javascript
+swapToolPrevious() {
+    if (!this.gameScene || !this.gameScene.inventorySystem) return;
+    const inv = this.gameScene.inventorySystem;
+    
+    // Find previous tool in inventory
+    const tools = ['hoe', 'axe', 'pickaxe', 'sword'];
+    const currentTool = inv.selectedSlot;
+    
+    // Cycle backwards
+    let newSlot = currentTool - 1;
+    if (newSlot < 0) newSlot = 8;
+    
+    this.selectSlot(newSlot);
+    
+    // Sound effect
+    if (this.gameScene.soundManager) {
+        this.gameScene.soundManager.beepUIClick();
+    }
+}
+
+swapToolNext() {
+    if (!this.gameScene || !this.gameScene.inventorySystem) return;
+    const inv = this.gameScene.inventorySystem;
+    
+    // Cycle forwards
+    let newSlot = inv.selectedSlot + 1;
+    if (newSlot > 8) newSlot = 0;
+    
+    this.selectSlot(newSlot);
+    
+    // Sound effect
+    if (this.gameScene.soundManager) {
+        this.gameScene.soundManager.beepUIClick();
+    }
+}
+```
+
+---
+
+### **2. Tool Durability Display** (15 min)
+
+**Lokacija:** `src/scenes/UIScene.js` - `createInventoryBar()`
+
+**Dodaj durability bar pod vsak tool:**
+```javascript
+// V createInventoryBar() - za vsak slot:
+if (item && item.durability !== undefined) {
+    // Durability bar
+    const durabilityBar = this.add.graphics();
+    const barWidth = 60;
+    const barHeight = 4;
+    const barX = slotX + 5;
+    const barY = slotY + 60;
+    
+    // Background (dark gray)
+    durabilityBar.fillStyle(0x333333);
+    durabilityBar.fillRect(barX, barY, barWidth, barHeight);
+    
+    // Durability fill (green → yellow → red)
+    const durabilityPercent = item.durability / item.maxDurability;
+    let color = 0x00ff00; // Green
+    if (durabilityPercent < 0.5) color = 0xffff00; // Yellow
+    if (durabilityPercent < 0.25) color = 0xff0000; // Red
+    
+    durabilityBar.fillStyle(color);
+    durabilityBar.fillRect(barX, barY, barWidth * durabilityPercent, barHeight);
+    
+    // Store reference for updates
+    this.inventorySlots[i].durabilityBar = durabilityBar;
+}
+```
+
+**Dodaj v InventorySystem:**
+```javascript
+// src/systems/InventorySystem.js
+class InventorySystem {
+    constructor(scene) {
+        // ...
+        this.itemDurability = {
+            'hoe': { current: 100, max: 100 },
+            'axe': { current: 100, max: 100 },
+            'pickaxe': { current: 100, max: 100 },
+            'sword': { current: 50, max: 50 }
+        };
+    }
+    
+    useTool(toolName) {
+        if (this.itemDurability[toolName]) {
+            this.itemDurability[toolName].current -= 1;
+            
+            // Break tool if durability = 0
+            if (this.itemDurability[toolName].current <= 0) {
+                this.removeItem(toolName, 1);
+                console.log(`🔨 ${toolName} broke!`);
+                
+                // Show notification
+                if (this.scene.events) {
+                    this.scene.events.emit('show-floating-text', {
+                        x: this.scene.player.sprite.x,
+                        y: this.scene.player.sprite.y - 50,
+                        text: `${toolName} broke!`,
+                        color: '#ff0000'
+                    });
+                }
+            }
+            
+            // Emit update event
+            this.scene.events.emit('update-inventory');
+        }
+    }
+}
+```
+
+---
+
+### **3. Seed Count v Hotbar** (5 min)
+
+**Lokacija:** `src/scenes/UIScene.js` - `updateInventoryUI()`
+
+**Dodaj seed count text:**
+```javascript
+// V updateInventoryUI() - za vsak slot:
+if (item && (item.id === 'seeds' || item.id === 'carrot_seeds' || item.id === 'wheat_seeds')) {
+    // Seed count text
+    const seedCount = inv.getItemCount(item.id);
+    const seedText = this.add.text(
+        slotX + 55,
+        slotY + 50,
+        `${seedCount}`,
+        {
+            font: 'bold 14px Arial',
+            fill: '#ffffff',
+            stroke: '#000000',
+            strokeThickness: 3
+        }
+    );
+    seedText.setOrigin(1, 1);
+    seedText.setDepth(1001);
+    
+    // Store reference
+    this.inventorySlots[i].seedCountText = seedText;
+}
+```
+
+---
+
+### **4. Equipment Preview Icon** (10 min)
+
+**Lokacija:** `src/scenes/UIScene.js` - nova metoda
+
+**Dodaj equipment preview:**
+```javascript
+createEquipmentPreview() {
+    const width = this.cameras.main.width;
+    const height = this.cameras.main.height;
+    
+    // Equipment preview (top-left, below HP bar)
+    const previewX = 20;
+    const previewY = 150;
+    
+    // Background
+    this.equipmentBg = this.add.graphics();
+    this.equipmentBg.fillStyle(0x000000, 0.6);
+    this.equipmentBg.fillRoundedRect(previewX, previewY, 80, 80, 8);
+    this.equipmentBg.setScrollFactor(0);
+    this.equipmentBg.setDepth(1000);
+    
+    // Label
+    this.equipmentLabel = this.add.text(
+        previewX + 40,
+        previewY - 5,
+        'EQUIPPED',
+        {
+            font: 'bold 10px Arial',
+            fill: '#ffff00'
+        }
+    );
+    this.equipmentLabel.setOrigin(0.5, 1);
+    this.equipmentLabel.setScrollFactor(0);
+    this.equipmentLabel.setDepth(1001);
+    
+    // Icon sprite
+    this.equipmentIcon = this.add.sprite(previewX + 40, previewY + 40, 'hoe');
+    this.equipmentIcon.setScale(2);
+    this.equipmentIcon.setScrollFactor(0);
+    this.equipmentIcon.setDepth(1001);
+    
+    // Tool name
+    this.equipmentName = this.add.text(
+        previewX + 40,
+        previewY + 75,
+        'Stone Hoe',
+        {
+            font: 'bold 12px Arial',
+            fill: '#ffffff'
+        }
+    );
+    this.equipmentName.setOrigin(0.5, 0);
+    this.equipmentName.setScrollFactor(0);
+    this.equipmentName.setDepth(1001);
+}
+
+updateEquipmentPreview() {
+    if (!this.gameScene || !this.gameScene.inventorySystem) return;
+    
+    const inv = this.gameScene.inventorySystem;
+    const selectedItem = inv.items[inv.selectedSlot];
+    
+    if (selectedItem) {
+        // Update icon
+        if (this.textures.exists(selectedItem.id)) {
+            this.equipmentIcon.setTexture(selectedItem.id);
+        }
+        
+        // Update name
+        this.equipmentName.setText(selectedItem.name || selectedItem.id);
+        
+        // Show
+        this.equipmentIcon.setVisible(true);
+        this.equipmentName.setVisible(true);
+    } else {
+        // Hide if no item
+        this.equipmentIcon.setVisible(false);
+        this.equipmentName.setVisible(false);
+    }
+}
+```
+
+**Dodaj v create():**
+```javascript
+this.createEquipmentPreview();
+```
+
+**Dodaj v update():**
+```javascript
+this.updateEquipmentPreview();
+```
+
+---
+
+## 📝 **TESTING CHECKLIST:**
+
+### **Q/E Tool Swap:**
+- [ ] Pritisni Q - prejšnji tool
+- [ ] Pritisni E - naslednji tool
+- [ ] Sound effect deluje
+- [ ] Slot se spremeni
+
+### **Tool Durability:**
+- [ ] Durability bar viden
+- [ ] Barva se spreminja (green → yellow → red)
+- [ ] Tool se zlomi pri 0 durability
+- [ ] Notification prikazana
+
+### **Seed Count:**
+- [ ] Število seeds vidno
+- [ ] Posodobi se po uporabi
+- [ ] Pravilno število
+
+### **Equipment Preview:**
+- [ ] Ikona vidna (top-left)
+- [ ] Ime orodja vidno
+- [ ] Posodobi se ob spremembi
+- [ ] Skrije se, če ni itema
+
+---
+
+## 🔧 **IMPLEMENTATION STEPS:**
+
+1. **Odpri** `src/scenes/UIScene.js`
+2. **Dodaj** Q/E key listeners v `create()`
+3. **Dodaj** `swapToolPrevious()` in `swapToolNext()` metode
+4. **Dodaj** durability bar v `createInventoryBar()`
+5. **Dodaj** seed count text v `updateInventoryUI()`
+6. **Dodaj** `createEquipmentPreview()` metodo
+7. **Dodaj** `updateEquipmentPreview()` v `update()`
+8. **Rebuild** aplikacijo
+9. **Testiraj** vse funkcionalnosti
+
+---
+
+## ⏱️ **ESTIMATED TIME:**
+
+- Q/E Keys: 10 min
+- Tool Durability: 15 min
+- Seed Count: 5 min
+- Equipment Preview: 10 min
+- Testing: 10 min
+
+**Total:** ~50 minut
+
+---
+
+**Status:** ⏳ **READY FOR IMPLEMENTATION**
+
+Želite, da implementiram te izboljšave? 🎮