novafarma/docs/DEMO_INTEGRATION_GUIDE.md

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

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:

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

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:

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:

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

V update() dodaj:

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!

# 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

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:

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?

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

• All assets loaded
• UI visible on screen
• Player stats connected
• No console errors
• 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! 🎉