🐛 fix stockpile opacity, popText overlap, ESC menu padding (Issue #20)

- Stockpile panel: use uiOpacity instead of hardcoded 0.72
- updateStaticPanelOpacity() replaces updateDebugPanelBackground() and also
  updates stockpilePanel.setAlpha() when opacity changes in Settings
- Stockpile panel height 187→210; popText y 167→192 (8px gap after carrot row)
- ESC menu menuH formula: 16+…+8 → 32+…+8 so last button has 16px bottom
  padding instead of 0px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-23 10:48:04 +00:00
parent 174db14c7a
commit a5c37f20f6

View File

@@ -127,14 +127,16 @@ export class UIScene extends Phaser.Scene {
/** Creates the stockpile panel in the top-right corner with item rows and population count. */ /** Creates the stockpile panel in the top-right corner with item rows and population count. */
private createStockpilePanel(): void { private createStockpilePanel(): void {
const x = this.scale.width - 178, y = 10 const x = this.scale.width - 178, y = 10
this.stockpilePanel = this.add.rectangle(x, y, 168, 187, 0x000000, 0.72).setOrigin(0, 0).setScrollFactor(0).setDepth(100) // 7 items × 22px + 26px header + 12px gap + 18px popText row + 10px bottom = 210px
this.stockpilePanel = this.add.rectangle(x, y, 168, 210, 0x000000, this.uiOpacity).setOrigin(0, 0).setScrollFactor(0).setDepth(100)
this.stockpileTitleText = this.add.text(x + 10, y + 7, '⚡ STOCKPILE', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101) this.stockpileTitleText = this.add.text(x + 10, y + 7, '⚡ STOCKPILE', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
const items = ['wood','stone','wheat_seed','carrot_seed','tree_seed','wheat','carrot'] as const const items = ['wood','stone','wheat_seed','carrot_seed','tree_seed','wheat','carrot'] as const
items.forEach((item, i) => { items.forEach((item, i) => {
const t = this.add.text(x + 10, y + 26 + i * 22, `${ITEM_ICONS[item]} ${item}: 0`, { fontSize: '13px', color: '#88dd88', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101) const t = this.add.text(x + 10, y + 26 + i * 22, `${ITEM_ICONS[item]} ${item}: 0`, { fontSize: '13px', color: '#88dd88', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
this.stockpileTexts.set(item, t) this.stockpileTexts.set(item, t)
}) })
this.popText = this.add.text(x + 10, y + 167, '👥 Nisse: 0 / 0', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101) // last item (i=6) bottom edge ≈ y+190 → popText starts at y+192 with 8px gap
this.popText = this.add.text(x + 10, y + 192, '👥 Nisse: 0 / 0', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
} }
/** Refreshes all item quantities and colors in the stockpile panel. */ /** Refreshes all item quantities and colors in the stockpile panel. */
@@ -570,7 +572,8 @@ export class UIScene extends Phaser.Scene {
{ label: '⚙️ Settings', action: () => this.doSettings() }, { label: '⚙️ Settings', action: () => this.doSettings() },
{ label: '🆕 New Game', action: () => this.doNewGame() }, { label: '🆕 New Game', action: () => this.doNewGame() },
] ]
const menuH = 16 + entries.length * (btnH + 8) + 8 // 32px header + entries × (btnH + 8px gap) + 8px bottom padding
const menuH = 32 + entries.length * (btnH + 8) + 8
const mx = this.scale.width / 2 - menuW / 2 const mx = this.scale.width / 2 - menuW / 2
const my = this.scale.height / 2 - menuH / 2 const my = this.scale.height / 2 - menuH / 2
@@ -677,7 +680,7 @@ export class UIScene extends Phaser.Scene {
minusBtn.on('pointerdown', () => { minusBtn.on('pointerdown', () => {
this.uiOpacity = Math.max(0.4, Math.round((this.uiOpacity - 0.1) * 10) / 10) this.uiOpacity = Math.max(0.4, Math.round((this.uiOpacity - 0.1) * 10) / 10)
this.saveUISettings() this.saveUISettings()
this.updateDebugPanelBackground() this.updateStaticPanelOpacity()
this.buildSettings() this.buildSettings()
}) })
this.settingsGroup.add(minusBtn) this.settingsGroup.add(minusBtn)
@@ -702,7 +705,7 @@ export class UIScene extends Phaser.Scene {
plusBtn.on('pointerdown', () => { plusBtn.on('pointerdown', () => {
this.uiOpacity = Math.min(1.0, Math.round((this.uiOpacity + 0.1) * 10) / 10) this.uiOpacity = Math.min(1.0, Math.round((this.uiOpacity + 0.1) * 10) / 10)
this.saveUISettings() this.saveUISettings()
this.updateDebugPanelBackground() this.updateStaticPanelOpacity()
this.buildSettings() this.buildSettings()
}) })
this.settingsGroup.add(plusBtn) this.settingsGroup.add(plusBtn)
@@ -753,10 +756,12 @@ export class UIScene extends Phaser.Scene {
} }
/** /**
* Applies the current uiOpacity to the debug panel text background. * Applies the current uiOpacity to all static UI elements that are not
* Called whenever uiOpacity changes so the debug panel stays in sync. * rebuilt on open (stockpile panel, debug panel background).
* Called whenever uiOpacity changes.
*/ */
private updateDebugPanelBackground(): void { private updateStaticPanelOpacity(): void {
this.stockpilePanel.setAlpha(this.uiOpacity)
const hexAlpha = Math.round(this.uiOpacity * 255).toString(16).padStart(2, '0') const hexAlpha = Math.round(this.uiOpacity * 255).toString(16).padStart(2, '0')
this.debugPanelText.setStyle({ backgroundColor: `#000000${hexAlpha}` }) this.debugPanelText.setStyle({ backgroundColor: `#000000${hexAlpha}` })
} }