shrani
This commit is contained in:
323
docs/design/BUILDING_CONTROLS_PLAN.md
Normal file
323
docs/design/BUILDING_CONTROLS_PLAN.md
Normal file
@@ -0,0 +1,323 @@
|
||||
# 🏗️ 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? 🏗️
|
||||
Reference in New Issue
Block a user