Merge pull request 'Fix: uiOpacity auf Stockpile und Action Bar vereinheitlicht (#39, #40)' (#43) from fix/ui-opacity-panels into master

This commit is contained in:
2026-03-24 17:14:50 +00:00
2 changed files with 24 additions and 16 deletions

View File

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

View File

@@ -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 ───────────────────────────────────────────────────────────────