Update homepage & in-game promos (#3602)

## Description:

* Replace the static footer ad (HomeFooterAd component) with a Playwire
bottom_rail ad that loads on lobby join and persists into the spawn
phase
* Expand in-game ad slots from 1 to 3 (standard_iab_left1, left3, left4)
with a timer-based visibility check to show a background container when
ads render
* Remove the resize-based footer ad height logic and gutter ad vertical
offset adjustments that depended on it

<img width="1828" height="961" alt="Screenshot 2026-04-16 at 12 14
00 PM"
src="https://github.com/user-attachments/assets/50bfd0de-dd54-4f8b-b75e-04b720a1841b"
/>


<img width="1286" height="939" alt="Screenshot 2026-04-16 at 11 59
18 AM"
src="https://github.com/user-attachments/assets/e0fb0762-82e7-444f-8706-5908aad0f094"
/>
## 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

index.html

@@ -26,6 +26,11 @@
         padding-left: env(safe-area-inset-left);
       }
 
+      /* Prevent Playwire bottom rail from affecting flex layout */
+      [id^="pw-oop-bottom_rail"] {
+        position: fixed !important;
+      }
+
       /* Ensure full viewport height on iOS */
       html,
       body {
@@ -257,9 +262,7 @@
         ></ranked-modal>
       </main-layout>
 
-      <!-- Ad above footer -->
       <div class="[.in-game_&]:hidden mt-auto flex flex-col shrink-0">
-        <home-footer-ad></home-footer-ad>
         <page-footer></page-footer>
       </div>
 

src/client/HomepagePromos.ts

@@ -1,11 +1,6 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
-export const FOOTER_AD_MIN_HEIGHT = 880;
-
-const FOOTER_AD_TYPE = "standard_iab_head2";
-const FOOTER_AD_CONTAINER_ID = "home-footer-ad-container";
-
 // ─── Gutter Ads ──────────────────────────────────────────────────────────────
 
 @customElement("homepage-promos")
@@ -13,12 +8,6 @@ export class HomepagePromos extends LitElement {
   @state() private isVisible: boolean = false;
   @state() private adLoaded: boolean = false;
   private cornerAdLoaded: boolean = false;
-  @state() private hasFooterAd: boolean = false;
-
-  private onResize = () => {
-    const isDesktop = window.innerWidth >= 640;
-    this.hasFooterAd = isDesktop && window.innerHeight >= FOOTER_AD_MIN_HEIGHT;
-  };
 
   private onUserMeResponse = () => {
     if (window.adsEnabled) {
@@ -30,6 +19,16 @@ export class HomepagePromos extends LitElement {
     }
   };
 
+  private onJoinLobby = () => {
+    this.loadBottomRail();
+  };
+
+  private onLeaveLobby = () => {
+    this.destroyBottomRail();
+  };
+
+  private bottomRailActive: boolean = false;
+
   private leftAdType: string = "standard_iab_left2";
   private rightAdType: string = "standard_iab_rght1";
   private leftContainerId: string = "gutter-ad-container-left";
@@ -39,19 +38,18 @@ export class HomepagePromos extends LitElement {
     return this;
   }
 
-  static styles = css``;
-
   connectedCallback() {
     super.connectedCallback();
-    this.onResize();
-    window.addEventListener("resize", this.onResize);
     document.addEventListener("userMeResponse", this.onUserMeResponse);
+    document.addEventListener("join-lobby", this.onJoinLobby);
+    document.addEventListener("leave-lobby", this.onLeaveLobby);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener("resize", this.onResize);
     document.removeEventListener("userMeResponse", this.onUserMeResponse);
+    document.removeEventListener("join-lobby", this.onJoinLobby);
+    document.removeEventListener("leave-lobby", this.onLeaveLobby);
   }
 
   public show(): void {
@@ -63,8 +61,10 @@ export class HomepagePromos extends LitElement {
   }
 
   public close(): void {
+    this.isVisible = false;
+    this.adLoaded = false;
     try {
-      // Keep corner video ad alive.
+      // Only destroy gutter ads; bottom_rail persists into spawn phase.
       window.ramp.destroyUnits(this.leftAdType);
       window.ramp.destroyUnits(this.rightAdType);
       console.log("successfully destroyed gutter ads");
@@ -73,6 +73,43 @@ export class HomepagePromos extends LitElement {
     }
   }
 
+  public loadBottomRail(): void {
+    if (!window.adsEnabled) return;
+    if (this.bottomRailActive) return;
+    if (!window.ramp) {
+      console.warn("Playwire RAMP not available for bottom_rail ad");
+      return;
+    }
+
+    this.bottomRailActive = true;
+    try {
+      window.ramp.que.push(() => {
+        try {
+          window.ramp.spaAddAds([{ type: "bottom_rail" }]);
+          console.log("Bottom rail ad loaded");
+        } catch (e) {
+          console.error("Failed to add bottom_rail ad:", e);
+        }
+      });
+    } catch (error) {
+      console.error("Failed to load bottom_rail ad:", error);
+    }
+  }
+
+  public destroyBottomRail(): void {
+    if (!this.bottomRailActive) return;
+    this.bottomRailActive = false;
+
+    if (!window.ramp) return;
+
+    try {
+      window.ramp.destroyUnits("pw-oop-bottom_rail");
+      console.log("Bottom rail ad destroyed");
+    } catch (e) {
+      console.error("Error destroying bottom_rail ad:", e);
+    }
+  }
+
   private loadGutterAds(): void {
     console.log("loading ramp gutter ads");
     const leftContainer = this.querySelector(`#${this.leftContainerId}`);
@@ -149,10 +186,7 @@ export class HomepagePromos extends LitElement {
       <!-- Left Gutter Ad -->
       <div
         class="hidden xl:flex fixed transform -translate-y-1/2 w-[160px] min-h-[600px] z-40 pointer-events-auto items-center justify-center xl:[--half-content:10.5cm] 2xl:[--half-content:12.5cm]"
-        style="left: calc(50% - var(--half-content) - 208px); top: calc(50% + 10px${this
+        style="left: calc(50% - var(--half-content) - 208px); top: calc(50% + 10px);"
-          .hasFooterAd
-          ? " - 1.2cm"
-          : ""});"
       >
         <div
           id="${this.leftContainerId}"
@@ -163,10 +197,7 @@ export class HomepagePromos extends LitElement {
       <!-- Right Gutter Ad -->
       <div
         class="hidden xl:flex fixed transform -translate-y-1/2 w-[160px] min-h-[600px] z-40 pointer-events-auto items-center justify-center xl:[--half-content:10.5cm] 2xl:[--half-content:12.5cm]"
-        style="left: calc(50% + var(--half-content) + 48px); top: calc(50% + 10px${this
+        style="left: calc(50% + var(--half-content) + 48px); top: calc(50% + 10px);"
-          .hasFooterAd
-          ? " - 1.2cm"
-          : ""});"
       >
         <div
           id="${this.rightContainerId}"
@@ -176,84 +207,3 @@ export class HomepagePromos extends LitElement {
     `;
   }
 }
-
-// ─── Footer Ad ───────────────────────────────────────────────────────────────
-
-@customElement("home-footer-ad")
-export class HomeFooterAd extends LitElement {
-  @state() private shouldShow: boolean = false;
-
-  createRenderRoot() {
-    return this;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.style.display = "contents";
-    document.addEventListener("userMeResponse", this.onUserMeResponse);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("userMeResponse", this.onUserMeResponse);
-    this.destroyAd();
-  }
-
-  private onUserMeResponse = () => {
-    const isDesktop = window.innerWidth >= 640;
-    if (
-      !window.adsEnabled ||
-      (isDesktop && window.innerHeight < FOOTER_AD_MIN_HEIGHT)
-    ) {
-      return;
-    }
-    this.shouldShow = true;
-    this.updateComplete.then(() => {
-      this.loadAd();
-    });
-  };
-
-  private loadAd(): void {
-    if (!window.ramp) {
-      console.warn("Playwire RAMP not available for footer ad");
-      return;
-    }
-    try {
-      window.ramp.que.push(() => {
-        try {
-          window.ramp.spaAddAds([
-            { type: FOOTER_AD_TYPE, selectorId: FOOTER_AD_CONTAINER_ID },
-          ]);
-          console.log("Footer ad loaded:", FOOTER_AD_TYPE);
-        } catch (e) {
-          console.error("Failed to add footer ad:", e);
-        }
-      });
-    } catch (error) {
-      console.error("Failed to load footer ad:", error);
-    }
-  }
-
-  private destroyAd(): void {
-    try {
-      window.ramp.destroyUnits(FOOTER_AD_TYPE);
-      console.log("successfully destroyed footer ad");
-    } catch (e) {
-      console.error("error destroying footer ad", e);
-    }
-  }
-
-  render() {
-    if (!this.shouldShow) {
-      return nothing;
-    }
-
-    return html`
-      <div
-        id="${FOOTER_AD_CONTAINER_ID}"
-        class="flex justify-center items-center w-full pointer-events-auto [&_*]:!m-0 [&_*]:!p-0"
-        style="margin: 0; padding: 0; line-height: 0;"
-      ></div>
-    `;
-  }
-}

src/client/Main.ts

@@ -28,7 +28,7 @@ import { GameModeSelector } from "./GameModeSelector";
 import { GameStartingModal } from "./GameStartingModal";
 import "./GoogleAdElement";
 import { HelpModal } from "./HelpModal";
-import { HomepagePromos } from "./HomepagePromos";
+import "./HomepagePromos";
 import { HostLobbyModal as HostPrivateLobbyModal } from "./HostLobbyModal";
 import { JoinLobbyModal } from "./JoinLobbyModal";
 import "./LangSelector";
@@ -58,6 +58,7 @@ import {
   isInIframe,
   translateText,
 } from "./Utils";
+
 import "./components/DesktopNavBar";
 import "./components/Footer";
 import "./components/MainLayout";
@@ -303,10 +304,6 @@ class Client {
       }
     });
 
-    const gutterAds = document.querySelector("homepage-promos");
-    if (!(gutterAds instanceof HomepagePromos))
-      throw new Error("Missing homepage-promos");
-
     document.addEventListener("join-lobby", this.handleJoinLobby.bind(this));
     document.addEventListener("leave-lobby", this.handleLeaveLobby.bind(this));
     document.addEventListener("kick-player", this.handleKickPlayer.bind(this));

src/client/graphics/layers/InGamePromo.ts

@@ -4,29 +4,32 @@ import { GameView } from "../../../core/game/GameView";
 import { crazyGamesSDK } from "../../CrazyGamesSDK";
 import { Layer } from "./Layer";
 
-const AD_TYPE = "standard_iab_left1";
+const AD_TYPES = [
-const AD_CONTAINER_ID = "in-game-bottom-left-ad";
+  { type: "standard_iab_left1", selectorId: "in-game-bottom-left-ad" },
-const BOTTOM_RAIL_TYPE = "bottom_rail";
+  { type: "standard_iab_left3", selectorId: "in-game-bottom-left-ad3" },
+  { type: "standard_iab_left4", selectorId: "in-game-bottom-left-ad4" },
+];
 
 @customElement("in-game-promo")
 export class InGamePromo extends LitElement implements Layer {
   public game: GameView;
 
   private shouldShow: boolean = false;
-  private bottomRailActive: boolean = false;
+  private adsVisible: boolean = false;
+  private bottomRailDestroyed: boolean = false;
   private cornerAdShown: boolean = false;
+  private adCheckInterval: ReturnType<typeof setTimeout> | null = null;
 
   createRenderRoot() {
     return this;
   }
 
-  init() {
+  init() {}
-    this.showBottomRail();
-  }
 
   tick() {
     if (!this.game.inSpawnPhase()) {
-      if (this.bottomRailActive) {
+      if (!this.bottomRailDestroyed) {
+        this.bottomRailDestroyed = true;
         this.destroyBottomRail();
       }
       if (!this.cornerAdShown) {
@@ -37,38 +40,12 @@ export class InGamePromo extends LitElement implements Layer {
     }
   }
 
-  private showBottomRail(): void {
-    if (!window.adsEnabled) return;
-    if (!this.game.inSpawnPhase()) return;
-    if (!window.ramp) {
-      console.warn("Playwire RAMP not available for bottom_rail ad");
-      return;
-    }
-
-    this.bottomRailActive = true;
-    try {
-      window.ramp.que.push(() => {
-        try {
-          window.ramp.spaAddAds([{ type: BOTTOM_RAIL_TYPE }]);
-          console.log("Bottom rail ad loaded during spawn phase");
-        } catch (e) {
-          console.error("Failed to add bottom_rail ad:", e);
-        }
-      });
-    } catch (error) {
-      console.error("Failed to load bottom_rail ad:", error);
-    }
-  }
-
   private destroyBottomRail(): void {
-    if (!this.bottomRailActive) return;
-    this.bottomRailActive = false;
-
     if (!window.ramp) return;
 
     try {
-      window.ramp.spaAds({ ads: [], countPageview: false });
+      window.ramp.destroyUnits("pw-oop-bottom_rail");
-      console.log("Bottom rail ad destroyed via spaAds after spawn phase");
+      console.log("Bottom rail ad destroyed after spawn phase");
     } catch (e) {
       console.error("Error destroying bottom_rail ad:", e);
     }
@@ -93,6 +70,7 @@ export class InGamePromo extends LitElement implements Layer {
 
     this.updateComplete.then(() => {
       this.loadAd();
+      this.checkForAds();
     });
   }
 
@@ -115,6 +93,26 @@ export class InGamePromo extends LitElement implements Layer {
     });
   }
 
+  private checkForAds(): void {
+    if (this.adCheckInterval) {
+      clearInterval(this.adCheckInterval);
+    }
+    this.adCheckInterval = setInterval(() => {
+      const hasAds = AD_TYPES.some(({ selectorId }) => {
+        const el = document.getElementById(selectorId);
+        return el && el.clientHeight > 50;
+      });
+      if (hasAds) {
+        this.adsVisible = true;
+        this.requestUpdate();
+        if (this.adCheckInterval) {
+          clearInterval(this.adCheckInterval);
+          this.adCheckInterval = null;
+        }
+      }
+    }, 1000);
+  }
+
   private loadAd(): void {
     if (!window.ramp) {
       console.warn("Playwire RAMP not available for in-game ad");
@@ -124,23 +122,28 @@ export class InGamePromo extends LitElement implements Layer {
     try {
       window.ramp.que.push(() => {
         try {
-          window.ramp.spaAddAds([
+          window.ramp.spaAddAds(
-            {
+            AD_TYPES.map(({ type, selectorId }) => ({ type, selectorId })),
-              type: AD_TYPE,
+          );
-              selectorId: AD_CONTAINER_ID,
+          console.log(
-            },
+            "In-game bottom-left ads loaded:",
-          ]);
+            AD_TYPES.map((a) => a.type),
-          console.log("In-game bottom-left ad loaded:", AD_TYPE);
+          );
         } catch (e) {
-          console.error("Failed to add in-game ad:", e);
+          console.error("Failed to add in-game ads:", e);
         }
       });
     } catch (error) {
-      console.error("Failed to load in-game ad:", error);
+      console.error("Failed to load in-game ads:", error);
     }
   }
 
   public hideAd(): void {
+    if (this.adCheckInterval) {
+      clearInterval(this.adCheckInterval);
+      this.adCheckInterval = null;
+    }
+    this.adsVisible = false;
     this.destroyBottomRail();
 
     if (crazyGamesSDK.isOnCrazyGames()) {
@@ -156,10 +159,12 @@ export class InGamePromo extends LitElement implements Layer {
     }
     this.shouldShow = false;
     try {
-      window.ramp.destroyUnits(AD_TYPE);
+      for (const { type } of AD_TYPES) {
-      console.log("successfully destroyed in-game bottom-left ad");
+        window.ramp.destroyUnits(type);
+      }
+      console.log("successfully destroyed in-game bottom-left ads");
     } catch (e) {
-      console.error("error destroying in-game ad:", e);
+      console.error("error destroying in-game ads:", e);
     }
     this.requestUpdate();
   }
@@ -175,10 +180,18 @@ export class InGamePromo extends LitElement implements Layer {
 
     return html`
       <div
-        id="${AD_CONTAINER_ID}"
+        id="in-game-promo-container"
-        class="fixed left-0 z-[100] pointer-events-auto"
+        class="fixed left-0 z-[100] pointer-events-auto flex flex-col-reverse ${this
+          .adsVisible
+          ? "bg-gray-800 rounded-tr-lg p-1"
+          : ""}"
         style="bottom: -0.7cm"
-      ></div>
+      >
+        ${AD_TYPES.map(
+          ({ selectorId }) =>
+            html`<div id="${selectorId}" style="margin:0;padding:0"></div>`,
+        )}
+      </div>
     `;
   }
 }