# 🎮 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? 🎮