Migrate from publift to playwire ads (#3039)

## Description:

Use playwire ad integration

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

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

evan

src/client/graphics/layers/AdTimer.ts

@@ -1,28 +0,0 @@
-import { GameView } from "../../../core/game/GameView";
-import { Layer } from "./Layer";
-
-const AD_SHOW_TICKS = 2 * 60 * 10; // 2 minute
-
-export class AdTimer implements Layer {
-  private isHidden: boolean = false;
-
-  constructor(private g: GameView) {}
-
-  init() {}
-
-  public async tick() {
-    if (this.isHidden) {
-      return;
-    }
-
-    const gameTicks = this.g.ticks() - this.g.config().numSpawnPhaseTurns();
-    if (gameTicks > AD_SHOW_TICKS) {
-      console.log("destroying sticky ads");
-      window.fusetag?.que?.push(() => {
-        window.fusetag?.destroySticky?.();
-      });
-      this.isHidden = true;
-      return;
-    }
-  }
-}

src/client/graphics/layers/InGameHeaderAd.ts

@@ -0,0 +1,112 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { GameView } from "../../../core/game/GameView";
+import { Layer } from "./Layer";
+
+const AD_SHOW_TICKS = 2 * 60 * 10; // 2 minutes
+const HEADER_AD_TYPE = "standard_iab_head1";
+const HEADER_AD_CONTAINER_ID = "header-ad-container";
+const TWO_XL_BREAKPOINT = 1536;
+
+@customElement("in-game-header-ad")
+export class InGameHeaderAd extends LitElement implements Layer {
+  public game: GameView;
+
+  private isHidden: boolean = false;
+  private adLoaded: boolean = false;
+  private shouldShow: boolean = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  init() {
+    this.showHeaderAd();
+  }
+
+  private showHeaderAd(): void {
+    // Don't show header ad on screens smaller than 2xl
+    if (window.innerWidth < TWO_XL_BREAKPOINT) {
+      return;
+    }
+    if (!window.adsEnabled) {
+      return;
+    }
+
+    this.shouldShow = true;
+    this.requestUpdate();
+
+    // Wait for the element to render before loading the ad
+    this.updateComplete.then(() => {
+      this.loadAd();
+    });
+  }
+
+  private loadAd(): void {
+    if (!window.ramp) {
+      console.warn("Playwire RAMP not available for header ad");
+      return;
+    }
+
+    try {
+      window.ramp.que.push(() => {
+        try {
+          window.ramp.spaAddAds([
+            {
+              type: HEADER_AD_TYPE,
+              selectorId: HEADER_AD_CONTAINER_ID,
+            },
+          ]);
+          this.adLoaded = true;
+          console.log("Header ad loaded:", HEADER_AD_TYPE);
+        } catch (e) {
+          console.error("Failed to add header ad:", e);
+        }
+      });
+    } catch (error) {
+      console.error("Failed to load header ad:", error);
+    }
+  }
+
+  private hideHeaderAd(): void {
+    this.shouldShow = false;
+    this.adLoaded = false;
+    this.requestUpdate();
+  }
+
+  public tick() {
+    if (this.isHidden) {
+      return;
+    }
+
+    const gameTicks =
+      this.game.ticks() - this.game.config().numSpawnPhaseTurns();
+    if (gameTicks > AD_SHOW_TICKS) {
+      console.log("destroying header ad and refreshing PageOS");
+      this.hideHeaderAd();
+      this.isHidden = true;
+
+      if (window.PageOS?.session?.newPageView) {
+        window.PageOS.session.newPageView();
+      }
+      return;
+    }
+  }
+
+  shouldTransform(): boolean {
+    return false;
+  }
+
+  render() {
+    if (!this.shouldShow) {
+      return html``;
+    }
+
+    return html`
+      <div
+        id="${HEADER_AD_CONTAINER_ID}"
+        class="hidden 2xl:flex fixed top-0 left-1/2 -translate-x-1/2 z-[100] justify-center items-center pointer-events-auto p-0 -mt-[20px]"
+      ></div>
+    `;
+  }
+}