Show overlay upon player death

src/ui/GameUI.ts

@@ -15,6 +15,11 @@ export default class GameUI extends Phaser.Scene {
   private menuButton!: Phaser.GameObjects.Container;
   private mapButton!: Phaser.GameObjects.Container;
 
+  // Death Screen
+  private deathContainer!: Phaser.GameObjects.Container;
+  private deathText!: Phaser.GameObjects.Text;
+  private restartButton!: Phaser.GameObjects.Container;
+
   constructor() {
     super({ key: "GameUI" });
   }
@@ -22,6 +27,7 @@ export default class GameUI extends Phaser.Scene {
   create() {
     this.createHud();
     this.createMenu();
+    this.createDeathScreen();
 
     // Listen for updates from GameScene
     const gameScene = this.scene.get("GameScene");
@@ -108,6 +114,78 @@ export default class GameUI extends Phaser.Scene {
     this.setMenuOpen(false);
   }
 
+  private createDeathScreen() {
+    const cam = this.cameras.main;
+    const panelW = GAME_CONFIG.ui.menuPanelWidth + 40;
+    const panelH = GAME_CONFIG.ui.menuPanelHeight + 60;
+
+    const bg = this.add
+      .rectangle(0, 0, cam.width, cam.height, 0x000000, 0.85)
+      .setOrigin(0)
+      .setInteractive();
+
+    const panel = this.add
+      .rectangle(cam.width / 2, cam.height / 2, panelW, panelH, 0x000000, 0.9)
+      .setStrokeStyle(2, 0xff3333, 1);
+
+    const title = this.add
+      .text(cam.width / 2, cam.height / 2 - panelH / 2 + 30, "YOU HAVE PERISHED", {
+        fontSize: "28px",
+        color: "#ff3333",
+        fontStyle: "bold"
+      })
+      .setOrigin(0.5);
+
+    this.deathText = this.add
+      .text(cam.width / 2, cam.height / 2 - 20, "", {
+        fontSize: "16px",
+        color: "#ffffff",
+        align: "center",
+        lineSpacing: 10
+      })
+      .setOrigin(0.5);
+
+    // Restart Button
+    const btnW = 160;
+    const btnH = 40;
+    const btnBg = this.add.rectangle(0, 0, btnW, btnH, 0x440000, 1).setStrokeStyle(2, 0xff3333, 1);
+    const btnLabel = this.add.text(0, 0, "NEW GAME", { fontSize: "18px", color: "#ffffff", fontStyle: "bold" }).setOrigin(0.5);
+    
+    this.restartButton = this.add.container(cam.width / 2, cam.height / 2 + panelH / 2 - 50, [btnBg, btnLabel]);
+    btnBg.setInteractive({ useHandCursor: true }).on("pointerdown", () => {
+        const gameScene = this.scene.get("GameScene");
+        gameScene.events.emit("restart-game");
+        this.hideDeathScreen();
+    });
+
+    this.deathContainer = this.add.container(0, 0, [bg, panel, title, this.deathText, this.restartButton]);
+    this.deathContainer.setDepth(2000);
+    this.deathContainer.setVisible(false);
+  }
+
+  showDeathScreen(data: { level: number; gold: number; stats: any }) {
+    const lines = [
+      `Dungeon Level: ${data.level}`,
+      `Gold Collected: ${data.gold}`,
+      "",
+      `Final HP: 0 / ${data.stats.maxHp}`,
+      `Attack: ${data.stats.attack}`,
+      `Defense: ${data.stats.defense}`
+    ];
+    this.deathText.setText(lines.join("\n"));
+    this.deathContainer.setVisible(true);
+    
+    // Disable other UI interactions
+    this.menuButton.setVisible(false);
+    this.mapButton.setVisible(false);
+  }
+
+  hideDeathScreen() {
+    this.deathContainer.setVisible(false);
+    this.menuButton.setVisible(true);
+    this.mapButton.setVisible(true);
+  }
+
   private toggleMenu() {
     this.setMenuOpen(!this.menuOpen);
     // Request UI update when menu is opened to populate the text