novafarma/docs/design/BUILDING_CONTROLS_PLAN.md

🏗️ 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

// 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():

// 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

// 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():

// 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

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

Dodaj v GameScene.js setupCamera():

// 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

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? 🏗️