novafarma/docs/design/UI_IMPROVEMENTS_PLAN.md

🎮 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():

// Q/E za tool swap
this.input.keyboard.on('keydown-Q', () => {
    this.swapToolPrevious();
});

this.input.keyboard.on('keydown-E', () => {
    this.swapToolNext();
});

Nove metode:

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:

// 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:

// 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:

// 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:

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():

this.createEquipmentPreview();

Dodaj v update():

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