add footer ad to homepage (#3385)

Ad a footer ad to the bottom of the homescreen


<img width="1568" height="984" alt="Screenshot 2026-03-08 at 2 28 05 PM"
src="https://github.com/user-attachments/assets/a8009e37-778e-47f0-add8-42885d4f0c11"
/>

<img width="716" height="834" alt="Screenshot 2026-03-08 at 2 28 56 PM"
src="https://github.com/user-attachments/assets/5e910d6a-5019-4e06-ad9a-8980470371ca"
/>

<img width="862" height="834" alt="Screenshot 2026-03-08 at 2 29 31 PM"
src="https://github.com/user-attachments/assets/85e87052-ff7a-4266-8a2d-432831e3c7d6"
/>




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

@@ -252,8 +252,11 @@
         ></ranked-modal>
       </main-layout>
 
-      <!-- Desktop Footer -->
-      <page-footer></page-footer>
+      <!-- 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>
 
       <!-- Global Modals -->
       <territory-patterns-modal

src/client/GutterAds.ts

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { FOOTER_AD_MIN_HEIGHT } from "./components/HomeFooterAd";
 
 @customElement("gutter-ads")
 export class GutterAds extends LitElement {
@@ -9,6 +10,14 @@ export class GutterAds extends LitElement {
   @state()
   private adLoaded: boolean = false;
 
+  @state()
+  private hasFooterAd: boolean = false;
+
+  private onResize = () => {
+    const isDesktop = window.innerWidth >= 640;
+    this.hasFooterAd = isDesktop && window.innerHeight >= FOOTER_AD_MIN_HEIGHT;
+  };
+
   private leftAdType: string = "standard_iab_left2";
   private rightAdType: string = "standard_iab_rght1";
   private leftContainerId: string = "gutter-ad-container-left";
@@ -23,6 +32,8 @@ export class GutterAds extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.onResize();
+    window.addEventListener("resize", this.onResize);
     document.addEventListener("userMeResponse", () => {
       if (window.adsEnabled) {
         console.log("showing gutter ads");
@@ -110,6 +121,7 @@ export class GutterAds extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    window.removeEventListener("resize", this.onResize);
   }
 
   render() {
@@ -121,7 +133,10 @@ export class GutterAds 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);"
+        style="left: calc(50% - var(--half-content) - 208px); top: calc(50% + 10px${this
+          .hasFooterAd
+          ? " - 1.2cm"
+          : ""});"
       >
         <div
           id="${this.leftContainerId}"
@@ -132,7 +147,10 @@ export class GutterAds 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);"
+        style="left: calc(50% + var(--half-content) + 48px); top: calc(50% + 10px${this
+          .hasFooterAd
+          ? " - 1.2cm"
+          : ""});"
       >
         <div
           id="${this.rightContainerId}"

src/client/Main.ts

@@ -58,6 +58,7 @@ import {
 } from "./Utils";
 import "./components/DesktopNavBar";
 import "./components/Footer";
+import "./components/HomeFooterAd";
 import "./components/MainLayout";
 import "./components/MobileNavBar";
 import "./components/PlayPage";

src/client/components/Footer.ts

@@ -10,7 +10,7 @@ export class Footer extends LitElement {
   render() {
     return html`
       <footer
-        class="[.in-game_&]:hidden bg-zinc-900/90 backdrop-blur-md flex flex-col items-center justify-center gap-1 pt-1 pb-3 text-white/50 w-full border-t border-white/10 shrink-0 mt-auto relative z-50"
+        class="[.in-game_&]:hidden bg-zinc-900/90 backdrop-blur-md flex flex-col items-center justify-center gap-1 pt-1 pb-3 text-white/50 w-full border-t border-white/10 shrink-0 relative z-50"
       >
         <div class="flex items-center justify-center gap-4 lg:gap-6 pt-2">
           <a

src/client/components/HomeFooterAd.ts

@@ -0,0 +1,86 @@
+import { LitElement, html, nothing } 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";
+
+@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/components/MainLayout.ts

@@ -19,7 +19,7 @@ export class MainLayout extends LitElement {
   render() {
     return html`
       <main
-        class="relative [.in-game_&]:hidden flex flex-col flex-1 overflow-hidden w-full px-0 lg:px-[clamp(1.5rem,3vw,3rem)] pt-0 lg:pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-0 lg:pb-[clamp(0.75rem,1.5vw,1.5rem)]"
+        class="relative [.in-game_&]:hidden flex flex-col flex-1 overflow-hidden w-full px-0 lg:px-[clamp(1.5rem,3vw,3rem)] pt-0 lg:pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-0 lg:pb-[clamp(0.375rem,0.75vw,0.75rem)]"
       >
         <div
           class="w-full lg:max-w-[20cm] 2xl:max-w-[24cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden sm:px-4 lg:px-0"