Add changelog panel to main menu

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);