# 🏗️ BUILDING PREVIEW CONTROLS - IMPLEMENTATION PLAN

**Datum:** 12. December 2025  
**Čas:** 10:38  
**Estimated Time:** 30 minut

---

## 🎯 **CILJI:**

1. ✅ R key za rotacijo stavbe
2. ✅ E key za potrditev postavitve
3. ✅ ESC za preklic
4. ✅ Building inventory (seznam odklenenih stavb)

---

## 📋 **IMPLEMENTATION:**

### **1. Rotation Control (R Key)** (10 min)

**Datoteka:** `src/systems/BuildSystem.js`

```javascript
// Dodaj v constructor():
this.rotation = 0; // 0, 90, 180, 270

// Dodaj metodo:
rotatePreview() {
    this.rotation = (this.rotation + 90) % 360;
    
    if (this.previewSprite) {
        this.previewSprite.setAngle(this.rotation);
    }
    
    // Sound effect
    if (this.scene.soundManager) {
        this.scene.soundManager.beepUIClick();
    }
    
    console.log(`🔄 Building rotated: ${this.rotation}°`);
}
```

**Dodaj v GameScene.js setupCamera():**
```javascript
// R key za rotation
this.input.keyboard.on('keydown-R', () => {
    if (this.buildSystem && this.buildSystem.buildMode) {
        this.buildSystem.rotatePreview();
    }
});
```

---

### **2. Placement Confirmation (E Key)** (5 min)

**Datoteka:** `src/systems/BuildSystem.js`

```javascript
// Dodaj metodo:
confirmPlacement() {
    if (!this.buildMode || !this.previewSprite) return;
    
    const gridPos = this.scene.iso.toGrid(
        this.previewSprite.x,
        this.previewSprite.y
    );
    
    // Try to place building
    const success = this.placeBuilding(gridPos.x, gridPos.y);
    
    if (success) {
        console.log('✅ Building placed!');
        
        // Keep build mode active for multiple placements
        this.createPreview();
    }
}
```

**Dodaj v GameScene.js setupCamera():**
```javascript
// E key za confirm placement
this.input.keyboard.on('keydown-E', () => {
    if (this.buildSystem && this.buildSystem.buildMode) {
        this.buildSystem.confirmPlacement();
    }
});
```

---

### **3. Cancel Placement (ESC)** (5 min)

**Datoteka:** `src/systems/BuildSystem.js`

```javascript
// Dodaj metodo:
cancelPlacement() {
    if (!this.buildMode) return;
    
    this.toggleBuildMode(); // Exit build mode
    
    console.log('❌ Build mode cancelled');
}
```

**Dodaj v GameScene.js setupCamera():**
```javascript
// ESC key za cancel (že obstaja, samo dodaj build check)
this.input.keyboard.on('keydown-ESC', () => {
    if (this.buildSystem && this.buildSystem.buildMode) {
        this.buildSystem.cancelPlacement();
    }
});
```

---

### **4. Building Inventory UI** (10 min)

**Datoteka:** `src/systems/BuildSystem.js`

```javascript
showBuildUI() {
    const uiScene = this.scene.scene.get('UIScene');
    if (!uiScene) return;
    
    // Create building inventory panel
    const panelX = 20;
    const panelY = 250;
    const panelWidth = 200;
    
    // Background
    this.buildPanel = uiScene.add.graphics();
    this.buildPanel.fillStyle(0x000000, 0.8);
    this.buildPanel.fillRoundedRect(panelX, panelY, panelWidth, 400, 8);
    this.buildPanel.setScrollFactor(0);
    this.buildPanel.setDepth(1000);
    
    // Title
    this.buildTitle = uiScene.add.text(
        panelX + panelWidth / 2,
        panelY + 10,
        '🏗️ BUILDINGS',
        {
            fontSize: '16px',
            fontStyle: 'bold',
            color: '#ffff00'
        }
    );
    this.buildTitle.setOrigin(0.5, 0);
    this.buildTitle.setScrollFactor(0);
    this.buildTitle.setDepth(1001);
    
    // Building list
    this.buildingButtons = [];
    let yOffset = 40;
    
    Object.entries(this.buildings).forEach(([id, building]) => {
        // Check if unlocked (simplified - all unlocked for now)
        const isUnlocked = true;
        
        if (isUnlocked) {
            // Button background
            const btn = uiScene.add.rectangle(
                panelX + panelWidth / 2,
                panelY + yOffset,
                panelWidth - 20,
                40,
                this.selectedBuilding === id ? 0x00ff00 : 0x333333
            );
            btn.setInteractive({ useHandCursor: true });
            btn.setScrollFactor(0);
            btn.setDepth(1001);
            
            // Building name
            const name = uiScene.add.text(
                panelX + 15,
                panelY + yOffset - 15,
                building.name,
                {
                    fontSize: '14px',
                    color: '#ffffff'
                }
            );
            name.setScrollFactor(0);
            name.setDepth(1002);
            
            // Cost
            const costText = Object.entries(building.cost)
                .map(([res, amt]) => `${amt} ${res}`)
                .join(', ');
            
            const cost = uiScene.add.text(
                panelX + 15,
                panelY + yOffset + 5,
                costText,
                {
                    fontSize: '10px',
                    color: '#aaaaaa'
                }
            );
            cost.setScrollFactor(0);
            cost.setDepth(1002);
            
            // Click handler
            btn.on('pointerdown', () => {
                this.selectBuilding(id);
                this.hideBuildUI();
                this.showBuildUI(); // Refresh
            });
            
            this.buildingButtons.push({ btn, name, cost });
            yOffset += 50;
        }
    });
    
    // Instructions
    this.buildInstructions = uiScene.add.text(
        panelX + panelWidth / 2,
        panelY + 380,
        'R: Rotate\nE: Place\nESC: Cancel',
        {
            fontSize: '12px',
            color: '#ffff00',
            align: 'center'
        }
    );
    this.buildInstructions.setOrigin(0.5, 0);
    this.buildInstructions.setScrollFactor(0);
    this.buildInstructions.setDepth(1001);
    
    console.log('🏗️ Build UI shown');
}

hideBuildUI() {
    if (this.buildPanel) {
        this.buildPanel.destroy();
        this.buildPanel = null;
    }
    
    if (this.buildTitle) {
        this.buildTitle.destroy();
        this.buildTitle = null;
    }
    
    if (this.buildInstructions) {
        this.buildInstructions.destroy();
        this.buildInstructions = null;
    }
    
    if (this.buildingButtons) {
        this.buildingButtons.forEach(({ btn, name, cost }) => {
            btn.destroy();
            name.destroy();
            cost.destroy();
        });
        this.buildingButtons = [];
    }
}
```

---

## 📝 **IMPLEMENTATION STEPS:**

1. **Dodaj rotation v BuildSystem.js** (10 min)
   - `this.rotation` property
   - `rotatePreview()` metoda
   - R key listener v GameScene

2. **Dodaj confirmation v BuildSystem.js** (5 min)
   - `confirmPlacement()` metoda
   - E key listener v GameScene

3. **Dodaj cancel v BuildSystem.js** (5 min)
   - `cancelPlacement()` metoda
   - ESC key handler update

4. **Dodaj Building Inventory UI** (10 min)
   - `showBuildUI()` metoda
   - `hideBuildUI()` metoda
   - Building list rendering
   - Cost display
   - Instructions

5. **Testing** (5 min)
   - Test rotation
   - Test placement
   - Test cancel
   - Test UI

**Total:** 35 minut

---

## 🔧 **DATOTEKE:**

**Posodobljene:**
- `src/systems/BuildSystem.js` (+150 vrstic)
- `src/scenes/GameScene.js` (+15 vrstic)

---

## 🎮 **TESTIRANJE:**

1. Pritisni **B** za build mode
2. Vidiš building inventory (levo)
3. Izberi stavbo
4. Pritisni **R** za rotacijo
5. Pritisni **E** za postavitev
6. Pritisni **ESC** za preklic

---

**Status:** ⏳ **PLAN PRIPRAVLJEN**

**Estimated time:** 35 minut

Želite implementacijo zdaj ali kasneje? 🏗️