docs: Faza 1 & 2 Production Plan - 1,152 sprites ready

2026-01-04 22:10:51 +01:00
parent bdb57588ed
commit 98fc9fdce9
4 changed files with 2201 additions and 1030 deletions
--- a/docs/DEMO_INTEGRATION_GUIDE.md
+++ b/docs/DEMO_INTEGRATION_GUIDE.md
@@ -0,0 +1,307 @@
+# 🎮 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! 🎉