add spawn ads (#1228)

## Description:

Adds a bottom rail add during the spawn phase if player has played over
5 games.
Also only show the death screen ad if player has played a couple of
games.

This keeps the experience ad-free for the first few games.
<img width="1003" alt="74fb6676-273d-4b58-9fcb-50ec438c4e27"
src="https://github.com/user-attachments/assets/fedca20f-7b31-4a06-be57-bde5bd0118f0"
/>

## 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:
evan

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/client/graphics/layers/GutterAdModal.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { EventBus, GameEvent } from "../../../core/EventBus";
+import { getGamesPlayed } from "../../Utils";
 import { Layer } from "./Layer";
 
 export class GutterAdModalEvent implements GameEvent {
@@ -29,13 +30,15 @@ export class GutterAdModal extends LitElement implements Layer {
   }
 
   init() {
-    this.eventBus.on(GutterAdModalEvent, (event) => {
-      if (event.isVisible) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    });
+    if (getGamesPlayed() > 1) {
+      this.eventBus.on(GutterAdModalEvent, (event) => {
+        if (event.isVisible) {
+          this.show();
+        } else {
+          this.hide();
+        }
+      });
+    }
   }
 
   tick() {}

src/client/graphics/layers/SpawnAd.ts

@@ -1,18 +1,14 @@
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { GameView } from "../../../core/game/GameView";
+import { getGamesPlayed } from "../../Utils";
 import { Layer } from "./Layer";
 
-const BREAKPOINT = {
-  width: 1000,
-  height: 800,
-};
+const AD_TYPE = "bottom_rail";
+const AD_CONTAINER_ID = "bottom-rail-ad-container";
 
-const AD_TYPE = "standard_iab_modl2"; // 320x50/320x100 - better for bottom positioning
-const AD_CONTAINER_ID = "bottom-left-ad-container";
-
-@customElement("left-in-game-ad")
-export class LeftInGameAd extends LitElement implements Layer {
+@customElement("spawn-ad")
+export class SpawnAd extends LitElement implements Layer {
   public g: GameView;
 
   @state()
@@ -21,6 +17,8 @@ export class LeftInGameAd extends LitElement implements Layer {
   @state()
   private adLoaded: boolean = false;
 
+  private gamesPlayed: number = 0;
+
   // Override createRenderRoot to disable shadow DOM
   createRenderRoot() {
     return this;
@@ -32,39 +30,40 @@ export class LeftInGameAd extends LitElement implements Layer {
     super();
   }
 
+  init() {
+    this.gamesPlayed = getGamesPlayed();
+  }
+
   public show(): void {
     this.isVisible = true;
+    this.loadAd();
     this.requestUpdate();
-    // Load the ad when showing (with small delay to ensure DOM is ready)
-    setTimeout(() => this.loadAd(), 100);
   }
 
   public hide(): void {
+    // Destroy the ad when hiding
+    this.destroyAd();
     this.isVisible = false;
     this.adLoaded = false;
     this.requestUpdate();
-    // Destroy the ad when hiding
-    this.destroyAd();
   }
 
   public async tick() {
-    if (!this.isVisible && !this.g.inSpawnPhase() && this.screenLargeEnough()) {
+    if (
+      !this.isVisible &&
+      this.g.inSpawnPhase() &&
+      this.g.ticks() > 10 &&
+      this.gamesPlayed > 5
+    ) {
       console.log("showing bottom left ad");
       this.show();
     }
-    if (this.isVisible && !this.screenLargeEnough()) {
+    if (this.isVisible && !this.g.inSpawnPhase()) {
       console.log("hiding bottom left ad");
       this.hide();
     }
   }
 
-  private screenLargeEnough(): boolean {
-    return (
-      window.innerWidth > BREAKPOINT.width &&
-      window.innerHeight > BREAKPOINT.height
-    );
-  }
-
   private loadAd(): void {
     if (!window.ramp) {
       console.warn("Playwire RAMP not available");
@@ -96,8 +95,8 @@ export class LeftInGameAd extends LitElement implements Layer {
     }
     try {
       window.ramp.que.push(() => {
-        window.ramp.destroyUnits(AD_TYPE);
-        console.log("Playwire ad destroyed:", AD_TYPE);
+        window.ramp.destroyUnits("all");
+        console.log("Playwire spawn ad destroyed");
       });
     } catch (error) {
       console.error("Failed to destroy Playwire ad:", error);
@@ -117,7 +116,7 @@ export class LeftInGameAd extends LitElement implements Layer {
 
     return html`
       <div
-        class="w-[320px] min-h-[100px] bg-gray-900 border border-gray-600 flex items-center justify-center"
+        class="fixed bottom-0 left-0 w-full min-h-[100px] bg-gray-900 border border-gray-600 flex items-center justify-center z-50"
       >
         <div
           id="${AD_CONTAINER_ID}"