diff --git a/src/scenes/UIScene.ts b/src/scenes/UIScene.ts index 074710c..19bbed7 100644 --- a/src/scenes/UIScene.ts +++ b/src/scenes/UIScene.ts @@ -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. */ private createStockpilePanel(): void { 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) const items = ['wood','stone','wheat_seed','carrot_seed','tree_seed','wheat','carrot'] as const 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) 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. */ @@ -570,7 +572,8 @@ export class UIScene extends Phaser.Scene { { label: '⚙️ Settings', action: () => this.doSettings() }, { 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 my = this.scale.height / 2 - menuH / 2 @@ -677,7 +680,7 @@ export class UIScene extends Phaser.Scene { minusBtn.on('pointerdown', () => { this.uiOpacity = Math.max(0.4, Math.round((this.uiOpacity - 0.1) * 10) / 10) this.saveUISettings() - this.updateDebugPanelBackground() + this.updateStaticPanelOpacity() this.buildSettings() }) this.settingsGroup.add(minusBtn) @@ -702,7 +705,7 @@ export class UIScene extends Phaser.Scene { plusBtn.on('pointerdown', () => { this.uiOpacity = Math.min(1.0, Math.round((this.uiOpacity + 0.1) * 10) / 10) this.saveUISettings() - this.updateDebugPanelBackground() + this.updateStaticPanelOpacity() this.buildSettings() }) this.settingsGroup.add(plusBtn) @@ -753,10 +756,12 @@ export class UIScene extends Phaser.Scene { } /** - * Applies the current uiOpacity to the debug panel text background. - * Called whenever uiOpacity changes so the debug panel stays in sync. + * Applies the current uiOpacity to all static UI elements that are not + * 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') this.debugPanelText.setStyle({ backgroundColor: `#000000${hexAlpha}` }) }