From ae6c14d9a1ad75a98b688f6da9615d4de21ac890 Mon Sep 17 00:00:00 2001
From: tekki mariani <tekki.mariani@googlemail.com>
Date: Tue, 24 Mar 2026 17:16:17 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20reposition=20debug=20panel=20whe?=
 =?UTF-8?q?n=20Nisse=20info=20panel=20is=20open=20(#41)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Debug panel shifts below the Nisse info panel to avoid overlap.
repositionDebugPanel() is called on toggle, open, and close.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md          |  1 +
 src/scenes/UIScene.ts | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca2999b..c16b2da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [Unreleased]
 
 ### Fixed
+- **Debug-Panel überlagert Nisse-Info-Panel** (Issue #41): F3-Debug-Panel weicht dynamisch aus — wenn das Nisse-Info-Panel offen ist, erscheint das Debug-Panel unterhalb davon statt darüber
 - **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
 
diff --git a/src/scenes/UIScene.ts b/src/scenes/UIScene.ts
index d1c37e9..7078eff 100644
--- a/src/scenes/UIScene.ts
+++ b/src/scenes/UIScene.ts
@@ -405,7 +405,7 @@ export class UIScene extends Phaser.Scene {
   /** Creates the debug panel text object (initially hidden). */
   private createDebugPanel(): void {
     const hexAlpha = Math.round(this.uiOpacity * 255).toString(16).padStart(2, '0')
-    this.debugPanelText = this.add.text(10, 80, '', {
+    this.debugPanelText = this.add.text(10, 10, '', {
       fontSize: '12px',
       color: '#cccccc',
       backgroundColor: `#000000${hexAlpha}`,
@@ -419,9 +419,20 @@ export class UIScene extends Phaser.Scene {
   private toggleDebugPanel(): void {
     this.debugActive = !this.debugActive
     this.debugPanelText.setVisible(this.debugActive)
+    this.repositionDebugPanel()
     this.scene.get('Game').events.emit('debugToggle')
   }
 
+  /**
+   * Repositions the debug panel to avoid overlapping the Nisse info panel.
+   * When the Nisse info panel is open, the debug panel shifts below it.
+   */
+  private repositionDebugPanel(): void {
+    const NISSE_PANEL_H = 120 + 10 * 14 + 16  // matches buildNisseInfoPanel: 276px
+    const debugY = this.nisseInfoVisible ? 10 + NISSE_PANEL_H + 10 : 10
+    this.debugPanelText.setY(debugY)
+  }
+
   /**
    * Reads current debug data from DebugSystem and updates the panel text.
    * Called every frame while debug mode is active.
@@ -879,6 +890,7 @@ export class UIScene extends Phaser.Scene {
     this.nisseInfoId = villagerId
     this.nisseInfoVisible = true
     this.buildNisseInfoPanel()
+    this.repositionDebugPanel()
   }
 
   /** Closes and destroys the Nisse info panel. */
@@ -888,6 +900,7 @@ export class UIScene extends Phaser.Scene {
     this.nisseInfoId = null
     this.nisseInfoGroup.destroy(true)
     this.nisseInfoGroup = this.add.group()
+    this.repositionDebugPanel()
   }
 
   /**