334 lines
8.2 KiB
Markdown
334 lines
8.2 KiB
Markdown
# 🎮 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? 🎮
|