Add changelog panel to main menu

web/index.html

@@ -166,6 +166,28 @@
       color: rgba(255,255,255,0.5); font-size: 11px; font-family: monospace;
       text-align: center;
     }
+    #changelog-panel {
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 14px; background: rgba(0,0,0,0.85);
+      opacity: 0; pointer-events: none; visibility: hidden;
+      transition: opacity 0.2s ease; font-family: monospace;
+    }
+    #changelog-panel h2 {
+      color: #ffcc00; font-size: 34px; text-shadow: 3px 3px 6px #000;
+    }
+    #changelog-list {
+      width: 660px; max-width: 92vw; max-height: 55vh; overflow-y: auto;
+      background: rgba(20,20,30,0.9); border: 2px solid #888; padding: 14px 18px;
+      color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.6;
+      text-align: left;
+    }
+    .changelog-entry {
+      display: flex; gap: 12px; padding: 4px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+    }
+    .changelog-entry:last-child { border-bottom: none; }
+    .changelog-date { color: #ffcc00; white-space: nowrap; }
     #seed-input {
       background: rgba(0,0,0,0.7); border: 2px solid #555; color: #ffcc00;
       font-family: monospace; font-size: 16px; padding: 6px 10px; width: 180px;
@@ -372,6 +394,27 @@
         <div id="boss-mode-buttons" style="display:flex; flex-direction:column; gap:8px; align-items:center;"></div>
       </div>
       <button id="btn-start" class="menu-button">Start</button>
+      <button id="btn-changelog" class="menu-button">Changelog</button>
+    </div>
+
+    <div id="changelog-panel">
+      <h2>Changelog</h2>
+      <div id="changelog-list">
+        <div class="changelog-entry"><span class="changelog-date">19.08.</span><span>Minotaurus-Boss mit Frontpanzerung, Dash-Stun und überspringbarem Axthieb</span></div>
+        <div class="changelog-entry"><span class="changelog-date">19.08.</span><span>Boss-Treffer-Feedback mit Aufblitzen und schwebenden Schadenszahlen</span></div>
+        <div class="changelog-entry"><span class="changelog-date">19.08.</span><span>Krake-Boss mit Tinte, Zug-Markierungen und Sweep-Tentakeln plus Boss-Modus</span></div>
+        <div class="changelog-entry"><span class="changelog-date">19.08.</span><span>Golem-Boss in Welle 10, startet erst wenn die Arena geräumt ist</span></div>
+        <div class="changelog-entry"><span class="changelog-date">19.08.</span><span>Bumerang als dünne 120-Grad-Sichel neu designt</span></div>
+        <div class="changelog-entry"><span class="changelog-date">19.08.</span><span>Spieler-folgendes Licht, Dungeon-Umgebung abgedunkelt</span></div>
+        <div class="changelog-entry"><span class="changelog-date">19.08.</span><span>Aura-, Bumerang-, Fallen- und Gaswolken-Skills mit Hotbar und ESC-Pause</span></div>
+        <div class="changelog-entry"><span class="changelog-date">19.08.</span><span>Gegner-Blickrichtung korrigiert und Schadens-Feedback beim Spieler</span></div>
+        <div class="changelog-entry"><span class="changelog-date">18.08.</span><span>Rückenschild-Modell am Schild-Skill gekoppelt</span></div>
+        <div class="changelog-entry"><span class="changelog-date">18.08.</span><span>Skill-Icons auf den Level-up-Karten</span></div>
+        <div class="changelog-entry"><span class="changelog-date">17.08.</span><span>Skill-System, Level-Ups und neue Gegnertypen</span></div>
+        <div class="changelog-entry"><span class="changelog-date">17.08.</span><span>Hauptmenü, Geist-Gegner und Schwert-Schwung-Spur</span></div>
+        <div class="changelog-entry"><span class="changelog-date">17.08.</span><span>AGENTS.md mit Git-Regeln</span></div>
+      </div>
+      <button id="btn-changelog-close" class="menu-button">Schließen</button>
     </div>
 
     <div id="instructions">

web/src/Game.ts

@@ -116,6 +116,7 @@ export class Game {
   private uiSeedInput!: HTMLInputElement;
   private uiBossMode!: HTMLElement;
   private uiBossModeButtons!: HTMLElement;
+  private uiChangelogPanel!: HTMLElement;
   private cheatBuffer = '';
   private uiLevelLabel!: HTMLElement;
   private uiSeedLabel!: HTMLElement;
@@ -260,6 +261,9 @@ export class Game {
     }
 
     document.getElementById('btn-start')!.addEventListener('click', () => this.startGame());
+    document.getElementById('btn-changelog')!.addEventListener('click', () => this.showChangelog());
+    document.getElementById('btn-changelog-close')!.addEventListener('click', () => this.hideChangelog());
+    this.uiChangelogPanel = document.getElementById('changelog-panel')!;
     document.getElementById('btn-restart')!.addEventListener('click', () => this.restart());
     document.getElementById('btn-menu')!.addEventListener('click', () => this.showMenu());
     this.uiPauseOverlay = document.getElementById('pause-overlay')!;
@@ -298,6 +302,8 @@ export class Game {
           this.pause();
         } else if (this.state === 'gameover') {
           this.showMenu();
+        } else if (this.state === 'menu' && this.uiChangelogPanel.style.visibility === 'visible') {
+          this.hideChangelog();
         }
         e.preventDefault();
         return;
@@ -336,7 +342,9 @@ export class Game {
         return;
       }
       if (e.code === 'Enter' || e.code === 'Space') {
-        if (this.state === 'menu') this.startGame();
+        if (this.state === 'menu' && this.uiChangelogPanel.style.visibility !== 'visible') {
+          this.startGame();
+        }
         else if (
           this.state === 'gameover' &&
           performance.now() - this.gameOverAt > 1500
@@ -548,6 +556,7 @@ export class Game {
     this.uiMainMenu.style.opacity = '0';
     this.uiMainMenu.style.pointerEvents = 'none';
     this.uiMainMenu.style.visibility = 'hidden';
+    this.hideChangelog();
     this.uiGameOver.style.opacity = '0';
     this.uiGameOverPanel.style.transition = 'opacity 0.3s ease';
     this.uiGameOverPanel.style.opacity = '0';
@@ -576,6 +585,20 @@ export class Game {
     playSound('spawn', 0.7);
   }
 
+  private showChangelog() {
+    this.uiChangelogPanel.style.opacity = '1';
+    this.uiChangelogPanel.style.pointerEvents = 'auto';
+    this.uiChangelogPanel.style.visibility = 'visible';
+    this.blurFocus();
+  }
+
+  private hideChangelog() {
+    this.uiChangelogPanel.style.opacity = '0';
+    this.uiChangelogPanel.style.pointerEvents = 'none';
+    this.uiChangelogPanel.style.visibility = 'hidden';
+    this.blurFocus();
+  }
+
   startBossFight(wave: number) {
     if (this.state === 'playing' || this.state === 'levelup') return;
     this.seed = Math.floor(Math.random() * 1000000);