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

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
 

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.actionBuildBtn.setFillStyle(this.activeCategory === 'build' ? 0x3d7a3d : 0x1a3a1a, this.uiOpacity)
-    this.actionNisseBtn.setFillStyle(this.activeCategory === 'nisse' ? 0x3d3d7a : 0x1a1a3a, 0.9)
+    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)
+    const bg = this.add.rectangle(0, trayY, width, UIScene.TRAY_H + UIScene.BAR_H, 0x080808, this.uiOpacity)
-      .setOrigin(0, 0).setScrollFactor(0).setDepth(300)
+      .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('pointerover', () => btn.setFillStyle(0x2d4a2d, this.uiOpacity))
-      btn.on('pointerout',  () => btn.setFillStyle(0x1a2a1a, 0.9))
+      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 ───────────────────────────────────────────────────────────────