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/GameRenderer.ts

@@ -6,7 +6,6 @@ import { RefreshGraphicsEvent as RedrawGraphicsEvent } from "../InputHandler";
 import { FrameProfiler } from "./FrameProfiler";
 import { TransformHandler } from "./TransformHandler";
 import { UIState } from "./UIState";
-import { AdTimer } from "./layers/AdTimer";
 import { AlertFrame } from "./layers/AlertFrame";
 import { BuildMenu } from "./layers/BuildMenu";
 import { ChatDisplay } from "./layers/ChatDisplay";
@@ -20,6 +19,7 @@ import { GameLeftSidebar } from "./layers/GameLeftSidebar";
 import { GameRightSidebar } from "./layers/GameRightSidebar";
 import { HeadsUpMessage } from "./layers/HeadsUpMessage";
 import { ImmunityTimer } from "./layers/ImmunityTimer";
+import { InGameHeaderAd } from "./layers/InGameHeaderAd";
 import { Layer } from "./layers/Layer";
 import { Leaderboard } from "./layers/Leaderboard";
 import { MainRadialMenu } from "./layers/MainRadialMenu";
@@ -244,6 +244,14 @@ export function createRenderer(
   }
   immunityTimer.game = game;
 
+  const inGameHeaderAd = document.querySelector(
+    "in-game-header-ad",
+  ) as InGameHeaderAd;
+  if (!(inGameHeaderAd instanceof InGameHeaderAd)) {
+    console.error("in-game header ad not found");
+  }
+  inGameHeaderAd.game = game;
+
   // When updating these layers please be mindful of the order.
   // Try to group layers by the return value of shouldTransform.
   // Not grouping the layers may cause excessive calls to context.save() and context.restore().
@@ -287,7 +295,7 @@ export function createRenderer(
     playerPanel,
     headsUpMessage,
     multiTabModal,
-    new AdTimer(game),
+    inGameHeaderAd,
     alertFrame,
     performanceOverlay,
   ];

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>
+    `;
+  }
+}