ads on death screen (#1223)

## Description:
Show the gutter ads only when the win/lose modal is active.

Describe the PR.
<img width="1899" alt="Screenshot 2025-06-18 at 1 14 36 PM"
src="https://github.com/user-attachments/assets/86b20d48-6b07-4058-8dff-8447cf565e02"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

DISCORD_USERNAME
evan

src/client/Main.ts

@@ -11,7 +11,6 @@ import "./FlagInput";
 import { FlagInput } from "./FlagInput";
 import { GameStartingModal } from "./GameStartingModal";
 import "./GoogleAdElement";
-import { GutterAdModal } from "./GutterAdModal";
 import { HelpModal } from "./HelpModal";
 import { HostLobbyModal as HostPrivateLobbyModal } from "./HostLobbyModal";
 import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal";
@@ -74,7 +73,6 @@ class Client {
   private joinModal: JoinPrivateLobbyModal;
   private publicLobby: PublicLobby;
   private userSettings: UserSettings = new UserSettings();
-  private gutterAdModal: GutterAdModal;
 
   constructor() {}
 
@@ -166,12 +164,6 @@ class Client {
       }
     });
 
-    this.gutterAdModal = document.querySelector(
-      "gutter-ad-modal",
-    ) as GutterAdModal;
-    this.gutterAdModal instanceof GutterAdModal;
-    this.gutterAdModal.show();
-
     // const ctModal = document.querySelector("chat-modal") as ChatModal;
     // ctModal instanceof ChatModal;
     // document.getElementById("chat-button").addEventListener("click", () => {
@@ -373,7 +365,6 @@ class Client {
       () => {
         this.joinModal.close();
         this.publicLobby.stop();
-        this.gutterAdModal.hide();
 
         try {
           window.PageOS.session.newPageView();

src/client/graphics/GameRenderer.ts

@@ -12,6 +12,7 @@ import { EmojiTable } from "./layers/EmojiTable";
 import { EventsDisplay } from "./layers/EventsDisplay";
 import { FxLayer } from "./layers/FxLayer";
 import { GameLeftSidebar } from "./layers/GameLeftSidebar";
+import { GutterAdModal } from "./layers/GutterAdModal";
 import { HeadsUpMessage } from "./layers/HeadsUpMessage";
 import { Layer } from "./layers/Layer";
 import { Leaderboard } from "./layers/Leaderboard";
@@ -205,6 +206,14 @@ export function createRenderer(
   }
   leftInGameAd.g = game;
 
+  const gutterAdModal = document.querySelector(
+    "gutter-ad-modal",
+  ) as GutterAdModal;
+  if (!(gutterAdModal instanceof GutterAdModal)) {
+    console.error("gutter ad modal not found");
+  }
+  gutterAdModal.eventBus = eventBus;
+
   const layers: Layer[] = [
     new TerrainLayer(game, transformHandler),
     new TerritoryLayer(game, eventBus, transformHandler),
@@ -241,6 +250,7 @@ export function createRenderer(
     unitInfoModal,
     multiTabModal,
     leftInGameAd,
+    gutterAdModal,
   ];
 
   return new GameRenderer(

src/client/graphics/layers/GutterAdModal.ts

@@ -1,8 +1,16 @@
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { EventBus, GameEvent } from "../../../core/EventBus";
+import { Layer } from "./Layer";
+
+export class GutterAdModalEvent implements GameEvent {
+  constructor(public readonly isVisible: boolean) {}
+}
 
 @customElement("gutter-ad-modal")
-export class GutterAdModal extends LitElement {
+export class GutterAdModal extends LitElement implements Layer {
+  public eventBus: EventBus;
+
   @state()
   private isVisible: boolean = false;
 
@@ -20,6 +28,18 @@ export class GutterAdModal extends LitElement {
     return this;
   }
 
+  init() {
+    this.eventBus.on(GutterAdModalEvent, (event) => {
+      if (event.isVisible) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    });
+  }
+
+  tick() {}
+
   static styles = css``;
 
   // Called after the component's DOM is first rendered
@@ -29,6 +49,7 @@ export class GutterAdModal extends LitElement {
   }
 
   public show(): void {
+    console.log("showing GutterAdModal");
     this.isVisible = true;
     this.requestUpdate();
 
@@ -39,6 +60,7 @@ export class GutterAdModal extends LitElement {
   }
 
   public hide(): void {
+    console.log("hiding GutterAdModal");
     this.isVisible = false;
     this.destroyAds();
     this.adLoaded = false;

src/client/graphics/layers/WinModal.ts

@@ -5,6 +5,7 @@ import { EventBus } from "../../../core/EventBus";
 import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { GameView } from "../../../core/game/GameView";
 import { SendWinnerEvent } from "../../Transport";
+import { GutterAdModalEvent } from "./GutterAdModal";
 import { Layer } from "./Layer";
 
 @customElement("win-modal")
@@ -171,11 +172,13 @@ export class WinModal extends LitElement implements Layer {
   show() {
     this.isVisible = true;
     this.requestUpdate();
+    this.eventBus.emit(new GutterAdModalEvent(true));
   }
 
   hide() {
     this.isVisible = false;
     this.requestUpdate();
+    this.eventBus.emit(new GutterAdModalEvent(false));
   }
 
   private _handleExit() {