# 🎮 DEMO INTEGRATION GUIDE
**Step-by-step za playable demo**  
**Datum**: 2026-01-04 21:55

---

## ✅ ASSETS READY - KAJ ZDAJ?

Demo ima vse assets (444 total).  
Zdaj jih moramo integrirati v game!

---

## 📋 INTEGRATION STEPS:

### **STEP 1: Verify Asset Manifest** ✅
```bash
python3 scripts/generate_asset_manifest.py
```
**Result**: `tools/asset_manifest.json` updated!

---

### **STEP 2: Load Assets v Game Scene**

Odpri: `src/scenes/GameScene.js`

V `preload()` metodi dodaj:
```javascript
preload() {
    // UI Assets
    this.load.image('health_bar_frame', 'assets/slike 🟢/vmesnik/vrstice/vmesnik_vrstice_health_bar_frame_style32.png');
    this.load.image('health_bar_fill', 'assets/slike 🟢/vmesnik/vrstice/vmesnik_vrstice_health_bar_fill_style32.png');
    this.load.image('energy_bar_fill', 'assets/slike 🟢/vmesnik/vrstice/vmesnik_vrstice_energy_bar_fill_style32.png');
    
    this.load.image('dialogue_box', 'assets/slike 🟢/vmesnik/okna/vmesnik_okna_dialogue_box_style32.png');
    this.load.image('panel_window', 'assets/slike 🟢/vmesnik/okna/vmesnik_okna_panel_window_style32.png');
    
    this.load.image('inventory_slot', 'assets/slike 🟢/ostalo/inventory_slot_style32.png');
    
    // Item Icons
    this.load.image('wood_icon', 'assets/slike 🟢/vmesnik/ikone/wood_log_icon_style32.png');
    this.load.image('stone_icon', 'assets/slike 🟢/vmesnik/ikone/stone_icon_style32.png');
    this.load.image('bread_icon', 'assets/slike 🟢/vmesnik/ikone/bread_icon_style32.png');
    this.load.image('coin_icon', 'assets/slike 🟢/vmesnik/ikone/vmesnik_ikone_coin_icon_style32.png');
    
    // Buildings
    this.load.image('shack', 'assets/slike 🟢/ostalo/shack_basic_style32.png');
    this.load.image('campfire', 'assets/slike 🟢/ostalo/campfire_basic_style32.png');
    this.load.image('chest', 'assets/slike 🟢/objekti/shranjevanje/objekti_shranjevanje_storage_chest_style32.png');
}
```

---

### **STEP 3: Create UI Scene**

Kreiraj: `src/scenes/UIScene.js`

```javascript
export default class UIScene extends Phaser.Scene {
    constructor() {
        super({ key: 'UIScene', active: true });
    }

    create() {
        const { width, height } = this.cameras.main;

        // Health Bar
        this.healthBarFrame = this.add.image(20, 20, 'health_bar_frame').setOrigin(0, 0);
        this.healthBarFill = this.add.image(22, 22, 'health_bar_fill').setOrigin(0, 0);
        
        // Energy Bar (below health)
        this.energyBarFill = this.add.image(22, 52, 'energy_bar_fill').setOrigin(0, 0);

        // Coin display
        this.coinIcon = this.add.image(20, 100, 'coin_icon').setOrigin(0, 0).setScale(0.5);
        this.coinText = this.add.text(60, 110, '0', {
            fontSize: '24px',
            fill: '#FFD700',
            fontFamily: 'Arial'
        }).setOrigin(0, 0.5);

        console.log('✅ UI Scene loaded!');
    }

    updateHealth(current, max) {
        const percentage = current / max;
        this.healthBarFill.setScale(percentage, 1);
    }

    updateEnergy(current, max) {
        const percentage = current / max;
        this.energyBarFill.setScale(percentage, 1);
    }

    updateCoins(amount) {
        this.coinText.setText(amount);
    }
}
```

---

### **STEP 4: Register UI Scene**

Odpri: `src/main.js`

Najdi `scene:` array in dodaj:
```javascript
import UIScene from './scenes/UIScene.js';

const config = {
    // ...
    scene: [
        BootScene,
        GameScene,
        UIScene  // ← DODAJ TO!
    ]
};
```

---

### **STEP 5: Connect Player Stats to UI**

Odpri: `src/scenes/GameScene.js`

V `create()` dodaj:
```javascript
create() {
    // ... existing code ...
    
    // Reference to UI scene
    this.uiScene = this.scene.get('UIScene');
}
```

V `update()` dodaj:
```javascript
update(time, delta) {
    // ... existing code ...
    
    // Update UI
    if (this.player && this.uiScene) {
        this.uiScene.updateHealth(this.player.health, this.player.maxHealth);
        this.uiScene.updateEnergy(this.player.energy, this.player.maxEnergy);
        this.uiScene.updateCoins(this.player.gold || 0);
    }
}
```

---

### **STEP 6: Test Run!**

```bash
# Start game server (če še ni)
python3 -m http.server 8000

# Open browser
open http://localhost:8000
```

**Expected:**
- ✅ Health bar visible (top left)
- ✅ Energy bar visible (below health)
- ✅ Coin counter visible
- ✅ Player can move
- ✅ UI updates with player stats

---

### **STEP 7: Add Inventory (Optional Enhancement)**

Kreiraj: `src/scenes/InventoryScene.js`

```javascript
export default class InventoryScene extends Phaser.Scene {
    constructor() {
        super({ key: 'InventoryScene' });
        this.visible = false;
    }

    create() {
        const { width, height } = this.cameras.main;

        // Inventory panel (centered)
        this.panel = this.add.image(width / 2, height / 2, 'panel_window').setVisible(false);
        
        // 9 inventory slots (3x3)
        this.slots = [];
        const startX = width / 2 - 96;
        const startY = height / 2 - 96;
        
        for (let row = 0; row < 3; row++) {
            for (let col = 0; col < 3; col++) {
                const x = startX + (col * 64);
                const y = startY + (row * 64);
                
                const slot = this.add.image(x, y, 'inventory_slot')
                    .setVisible(false)
                    .setInteractive();
                
                this.slots.push(slot);
            }
        }

        // Toggle with 'I' key
        this.input.keyboard.on('keydown-I', () => {
            this.toggleInventory();
        });
    }

    toggleInventory() {
        this.visible = !this.visible;
        this.panel.setVisible(this.visible);
        this.slots.forEach(slot => slot.setVisible(this.visible));
    }
}
```

Dodaj v `main.js`:
```javascript
import InventoryScene from './scenes/InventoryScene.js';

scene: [
    BootScene,
    GameScene,
    UIScene,
    InventoryScene  // ← DODAJ
]
```

---

## 🧪 TESTING CHECKLIST:

### **Basic Functionality:**
- [ ] Game loads without errors
- [ ] Player character visible
- [ ] Player can move (WASD/Arrow keys)
- [ ] Health bar displays
- [ ] Energy bar displays
- [ ] Coin counter displays

### **UI Functionality:**
- [ ] Health bar decreases when damaged
- [ ] Energy bar decreases when running
- [ ] Coin counter updates when collecting
- [ ] Inventory opens with 'I' key

### **Gameplay:**
- [ ] Can interact with NPCs
- [ ] Can plant crops
- [ ] Can harvest crops
- [ ] Can build structures
- [ ] Can save/load game

---

## 🐛 TROUBLESHOOTING:

### **Assets not loading?**
```bash
# Check asset paths
ls -la "assets/slike 🟢/vmesnik/"

# Regenerate manifest
python3 scripts/generate_asset_manifest.py
```

### **UI not showing?**
- Check browser console (F12)
- Verify UIScene is in scene array
- Check asset keys match filenames

### **Player stats not updating?**
- Verify `this.uiScene` reference exists
- Check `update()` method calls UI updates
- Ensure player has health/energy properties

---

## ✅ INTEGRATION COMPLETE WHEN:

- [x] All assets loaded
- [x] UI visible on screen
- [x] Player stats connected
- [x] No console errors
- [x] Gameplay loop works

---

## 🎮 NEXT STEPS:

1. **Test basic demo** (5 min)
2. **Fix any issues** (10-20 min)
3. **Add polish** (sound, particles)
4. **Record demo video** 📹
5. **Prepare for Kickstarter!** 🚀

---

**Integration time**: ~1 hour  
**Testing time**: ~30 min  
**Total**: ~1.5 hours do playable demo! 🎉