publift homepage ads (#2160)

## Description:

Put ads on the left and right gutters

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

@@ -16,7 +16,6 @@ import { FPSDisplay } from "./layers/FPSDisplay";
 import { FxLayer } from "./layers/FxLayer";
 import { GameLeftSidebar } from "./layers/GameLeftSidebar";
 import { GameRightSidebar } from "./layers/GameRightSidebar";
-import { GutterAdModal } from "./layers/GutterAdModal";
 import { HeadsUpMessage } from "./layers/HeadsUpMessage";
 import { Layer } from "./layers/Layer";
 import { Leaderboard } from "./layers/Leaderboard";
@@ -215,14 +214,6 @@ export function createRenderer(
   }
   spawnAd.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 alertFrame = document.querySelector("alert-frame") as AlertFrame;
   if (!(alertFrame instanceof AlertFrame)) {
     console.error("alert frame not found");
@@ -269,7 +260,6 @@ export function createRenderer(
     headsUpMessage,
     multiTabModal,
     spawnAd,
-    gutterAdModal,
     alertFrame,
     fpsDisplay,
   ];

src/client/graphics/layers/GutterAdModal.ts

@@ -1,160 +0,0 @@
-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 {
-  constructor(public readonly isVisible: boolean) {}
-}
-
-@customElement("gutter-ad-modal")
-export class GutterAdModal extends LitElement implements Layer {
-  public eventBus: EventBus;
-
-  @state()
-  private isVisible: boolean = false;
-
-  @state()
-  private adLoaded: boolean = false;
-
-  private leftAdType: string = "left_rail";
-  private rightAdType: string = "right_rail";
-  private leftContainerId: string = "gutter-ad-container-left";
-  private rightContainerId: string = "gutter-ad-container-right";
-  private margin: string = "10px";
-
-  // Override createRenderRoot to disable shadow DOM
-  createRenderRoot() {
-    return this;
-  }
-
-  init() {
-    if (getGamesPlayed() > 1) {
-      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
-  firstUpdated() {
-    // DOM is guaranteed to be available here
-    console.log("GutterAdModal DOM is ready");
-  }
-
-  public show(): void {
-    console.log("showing GutterAdModal");
-    this.isVisible = true;
-    this.requestUpdate();
-
-    // Wait for the update to complete, then load ads
-    this.updateComplete.then(() => {
-      this.loadAds();
-    });
-  }
-
-  public hide(): void {
-    console.log("hiding GutterAdModal");
-    this.isVisible = false;
-    this.destroyAds();
-    this.adLoaded = false;
-    this.requestUpdate();
-  }
-
-  private loadAds(): void {
-    // Ensure the container elements exist before loading ads
-    const leftContainer = this.querySelector(`#${this.leftContainerId}`);
-    const rightContainer = this.querySelector(`#${this.rightContainerId}`);
-
-    if (!leftContainer || !rightContainer) {
-      console.warn("Ad containers not found in DOM");
-      return;
-    }
-
-    if (!window.ramp) {
-      console.warn("Playwire RAMP not available");
-      this.hide();
-      return;
-    }
-
-    if (this.adLoaded) {
-      console.log("Ads already loaded, skipping");
-      return;
-    }
-
-    try {
-      window.ramp.que.push(() => {
-        window.ramp.spaAddAds([
-          {
-            type: this.leftAdType,
-            selectorId: this.leftContainerId,
-          },
-          {
-            type: this.rightAdType,
-            selectorId: this.rightContainerId,
-          },
-        ]);
-        this.adLoaded = true;
-        console.log("Playwire ads loaded:", this.leftAdType, this.rightAdType);
-      });
-    } catch (error) {
-      console.error("Failed to load Playwire ads:", error);
-      this.hide();
-    }
-  }
-
-  private destroyAds(): void {
-    if (!window.ramp || !this.adLoaded) {
-      return;
-    }
-    try {
-      window.ramp.destroyUnits("all");
-    } catch (error) {
-      console.error("Failed to destroy Playwire ad:", error);
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.destroyAds();
-  }
-
-  render() {
-    if (!this.isVisible) {
-      return html``;
-    }
-
-    return html`
-      <!-- Left Gutter Ad -->
-      <div
-        class="hidden xl:flex fixed left-0 top-1/2 transform -translate-y-1/2 w-[160px] min-h-[600px] z-[10] pointer-events-auto items-center justify-center"
-        style="margin-left: ${this.margin};"
-      >
-        <div
-          id="${this.leftContainerId}"
-          class="w-full h-full flex items-center justify-center p-2"
-        ></div>
-      </div>
-
-      <!-- Right Gutter Ad -->
-      <div
-        class="hidden xl:flex fixed right-0 top-1/2 transform -translate-y-1/2 w-[160px] min-h-[600px] z-[10] pointer-events-auto items-center justify-center"
-        style="margin-right: ${this.margin};"
-      >
-        <div
-          id="${this.rightContainerId}"
-          class="w-full h-full flex items-center justify-center p-2"
-        ></div>
-      </div>
-    `;
-  }
-}