diff --git a/CHANGELOG.md b/CHANGELOG.md index 86a7b03..ca2999b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] +### Fixed +- **Stockpile-Overlay Transparenz** (Issue #39): `updateStaticPanelOpacity()` verwendete `setAlpha()` statt `setFillStyle()` — dadurch wurde die Opacity quadratisch statt linear angewendet; bei 100 % blieb das Panel sichtbar transparent +- **Action Bar Transparenz** (Issue #40): Action Bar ignorierte `uiOpacity` komplett — Hintergrund war hardcoded auf 0.92; wird jetzt korrekt mit `uiOpacity` erstellt und per `updateStaticPanelOpacity()` live aktualisiert + ### Performance - **Event-queue timers** (Issue #36): crops, tree seedlings, and tile-recovery events now use a sorted priority queue with absolute `gameTime` timestamps instead of per-frame countdown iteration — O(due items) per tick instead of O(total items); `WorldState.gameTime` tracks the in-game clock; save migrated from v5 to v6 diff --git a/src/scenes/UIScene.ts b/src/scenes/UIScene.ts index 770bf89..d1c37e9 100644 --- a/src/scenes/UIScene.ts +++ b/src/scenes/UIScene.ts @@ -783,11 +783,13 @@ export class UIScene extends Phaser.Scene { /** * Applies the current uiOpacity to all static UI elements that are not - * rebuilt on open (stockpile panel, debug panel background). + * rebuilt on open (stockpile panel, action bar, debug panel background). * Called whenever uiOpacity changes. */ private updateStaticPanelOpacity(): void { - this.stockpilePanel.setAlpha(this.uiOpacity) + this.stockpilePanel.setFillStyle(0x000000, this.uiOpacity) + this.actionBarBg.setFillStyle(0x080808, this.uiOpacity) + this.updateCategoryHighlights() const hexAlpha = Math.round(this.uiOpacity * 255).toString(16).padStart(2, '0') this.debugPanelText.setStyle({ backgroundColor: `#000000${hexAlpha}` }) } @@ -1169,16 +1171,16 @@ export class UIScene extends Phaser.Scene { const { width, height } = this.scale const barY = height - UIScene.BAR_H - this.actionBarBg = this.add.rectangle(0, barY, width, UIScene.BAR_H, 0x080808, 0.92) + this.actionBarBg = this.add.rectangle(0, barY, width, UIScene.BAR_H, 0x080808, this.uiOpacity) .setOrigin(0, 0).setScrollFactor(0).setDepth(300) - this.actionBuildBtn = this.add.rectangle(8, barY + 8, 88, 32, 0x1a3a1a, 0.9) + this.actionBuildBtn = this.add.rectangle(8, barY + 8, 88, 32, 0x1a3a1a, this.uiOpacity) .setOrigin(0, 0).setScrollFactor(0).setDepth(301).setInteractive() this.actionBuildBtn.on('pointerover', () => { - if (this.activeCategory !== 'build') this.actionBuildBtn.setFillStyle(0x2a5a2a, 0.9) + if (this.activeCategory !== 'build') this.actionBuildBtn.setFillStyle(0x2a5a2a, this.uiOpacity) }) this.actionBuildBtn.on('pointerout', () => { - if (this.activeCategory !== 'build') this.actionBuildBtn.setFillStyle(0x1a3a1a, 0.9) + if (this.activeCategory !== 'build') this.actionBuildBtn.setFillStyle(0x1a3a1a, this.uiOpacity) }) this.actionBuildBtn.on('pointerdown', () => this.toggleCategory('build')) @@ -1186,13 +1188,13 @@ export class UIScene extends Phaser.Scene { fontSize: '12px', color: '#cccccc', fontFamily: 'monospace', }).setOrigin(0.5, 0.5).setScrollFactor(0).setDepth(302) - this.actionNisseBtn = this.add.rectangle(104, barY + 8, 88, 32, 0x1a1a3a, 0.9) + this.actionNisseBtn = this.add.rectangle(104, barY + 8, 88, 32, 0x1a1a3a, this.uiOpacity) .setOrigin(0, 0).setScrollFactor(0).setDepth(301).setInteractive() this.actionNisseBtn.on('pointerover', () => { - if (this.activeCategory !== 'nisse') this.actionNisseBtn.setFillStyle(0x2a2a5a, 0.9) + if (this.activeCategory !== 'nisse') this.actionNisseBtn.setFillStyle(0x2a2a5a, this.uiOpacity) }) this.actionNisseBtn.on('pointerout', () => { - if (this.activeCategory !== 'nisse') this.actionNisseBtn.setFillStyle(0x1a1a3a, 0.9) + if (this.activeCategory !== 'nisse') this.actionNisseBtn.setFillStyle(0x1a1a3a, this.uiOpacity) }) this.actionNisseBtn.on('pointerdown', () => this.toggleCategory('nisse')) @@ -1240,8 +1242,8 @@ export class UIScene extends Phaser.Scene { * to reflect the current active category. */ private updateCategoryHighlights(): void { - this.actionBuildBtn.setFillStyle(this.activeCategory === 'build' ? 0x3d7a3d : 0x1a3a1a, 0.9) - this.actionNisseBtn.setFillStyle(this.activeCategory === 'nisse' ? 0x3d3d7a : 0x1a1a3a, 0.9) + this.actionBuildBtn.setFillStyle(this.activeCategory === 'build' ? 0x3d7a3d : 0x1a3a1a, this.uiOpacity) + this.actionNisseBtn.setFillStyle(this.activeCategory === 'nisse' ? 0x3d3d7a : 0x1a1a3a, this.uiOpacity) } /** @@ -1253,12 +1255,13 @@ export class UIScene extends Phaser.Scene { this.actionTrayVisible = true this.actionTrayGroup.destroy(true) this.actionTrayGroup = this.add.group() + this.actionBarBg.setAlpha(0) const { width, height } = this.scale const trayY = height - UIScene.BAR_H - UIScene.TRAY_H - const bg = this.add.rectangle(0, trayY, width, UIScene.TRAY_H, 0x0d0d0d, 0.88) - .setOrigin(0, 0).setScrollFactor(0).setDepth(300) + const bg = this.add.rectangle(0, trayY, width, UIScene.TRAY_H + UIScene.BAR_H, 0x080808, this.uiOpacity) + .setOrigin(0, 0).setScrollFactor(0).setDepth(299) this.actionTrayGroup.add(bg) const buildings: { kind: BuildingType; emoji: string; label: string }[] = [ @@ -1273,10 +1276,10 @@ export class UIScene extends Phaser.Scene { const itemW = 84 buildings.forEach((b, i) => { const bx = 8 + i * (itemW + 4) - const btn = this.add.rectangle(bx, trayY + 4, itemW, UIScene.TRAY_H - 8, 0x1a2a1a, 0.9) + const btn = this.add.rectangle(bx, trayY + 4, itemW, UIScene.TRAY_H - 8, 0x1a2a1a, this.uiOpacity) .setOrigin(0, 0).setScrollFactor(0).setDepth(301).setInteractive() - btn.on('pointerover', () => btn.setFillStyle(0x2d4a2d, 0.9)) - btn.on('pointerout', () => btn.setFillStyle(0x1a2a1a, 0.9)) + btn.on('pointerover', () => btn.setFillStyle(0x2d4a2d, this.uiOpacity)) + btn.on('pointerout', () => btn.setFillStyle(0x1a2a1a, this.uiOpacity)) btn.on('pointerdown', () => { this.closeActionTray() this.deactivateCategory() @@ -1303,6 +1306,7 @@ export class UIScene extends Phaser.Scene { this.actionTrayVisible = false this.actionTrayGroup.destroy(true) this.actionTrayGroup = this.add.group() + this.actionBarBg.setAlpha(1) } // ─── Resize ───────────────────────────────────────────────────────────────