add google ads to homepage

src/client/GoogleAdElement.ts

@@ -0,0 +1,88 @@
+import { LitElement, html, css } from "lit";
+
+declare global {
+  interface Window {
+    adsbygoogle: any[];
+  }
+}
+import { customElement, property } from "lit/decorators.js";
+
+/**
+ * Google AdSense integration component
+ *
+ * This component creates a configurable container for Google AdSense ads
+ * and properly initializes them after the component is rendered.
+ */
+@customElement("google-ad")
+export class GoogleAdElement extends LitElement {
+  // Configurable properties
+  @property({ type: String }) adClient = "ca-pub-7035513310742290";
+  @property({ type: String }) adSlot = "5220834834";
+  @property({ type: String }) adFormat = "auto";
+  @property({ type: Boolean }) fullWidthResponsive = true;
+  @property({ type: String }) adTest = "off"; // "on" for testing, remove or set to "off" for production
+  @property({ type: String }) backgroundColor = "rgba(255, 255, 255, 0.1)";
+  @property({ type: String }) darkBackgroundColor = "rgba(0, 0, 0, 0.2)";
+
+  // Disable shadow DOM so AdSense can access the elements
+  createRenderRoot() {
+    return this;
+  }
+
+  static styles = css`
+    .google-ad-container {
+      margin-top: 1rem;
+      border-radius: 0.5rem;
+      padding: 0.5rem;
+      width: 100%;
+      overflow: hidden;
+      transition:
+        opacity 0.3s ease,
+        height 0.3s ease;
+    }
+    .google-ad-container.hidden {
+      opacity: 0;
+      height: 0;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+  `;
+
+  render() {
+    // Apply background color dynamically
+    const containerStyle = `
+      background-color: ${this.backgroundColor};
+    `;
+
+    return html`
+      <div class="google-ad-container" style="${containerStyle}">
+        <ins
+          class="adsbygoogle"
+          style="display:block"
+          data-ad-client="${this.adClient}"
+          data-ad-slot="${this.adSlot}"
+          data-ad-format="${this.adFormat}"
+          data-full-width-responsive="${this.fullWidthResponsive}"
+          data-adtest="${this.adTest}"
+        ></ins>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Wait for the component to be fully rendered
+    setTimeout(() => {
+      try {
+        // Initialize this specific ad
+        (window.adsbygoogle = window.adsbygoogle || []).push({});
+        console.log("Ad initialized for slot:", this.adSlot);
+      } catch (e) {
+        console.error("AdSense initialization error for slot:", this.adSlot, e);
+      }
+    }, 100);
+  }
+}
+export default GoogleAdElement;

src/client/Main.ts

@@ -20,6 +20,7 @@ import { DarkModeButton } from "./DarkModeButton";
 import { HelpModal } from "./HelpModal";
 import { GameType } from "../core/game/Game";
 import { getServerConfigFromClient } from "../core/configuration/Config";
+import GoogleAdElement from "./GoogleAdElement";
 
 class Client {
   private gameStop: () => void;
@@ -30,6 +31,7 @@ class Client {
 
   private joinModal: JoinPrivateLobbyModal;
   private publicLobby: PublicLobby;
+  private googleAds: NodeListOf<GoogleAdElement>;
   private userSettings: UserSettings = new UserSettings();
 
   constructor() {}
@@ -55,6 +57,9 @@ class Client {
     }
 
     this.publicLobby = document.querySelector("public-lobby") as PublicLobby;
+    this.googleAds = document.querySelectorAll(
+      "google-ad",
+    ) as NodeListOf<GoogleAdElement>;
 
     window.addEventListener("beforeunload", (event) => {
       consolex.log("Browser is closing");
@@ -159,6 +164,10 @@ class Client {
       () => {
         this.joinModal.close();
         this.publicLobby.stop();
+        document.querySelectorAll(".ad").forEach((ad) => {
+          (ad as HTMLElement).style.display = "none";
+        });
+
         if (gameType != GameType.Singleplayer) {
           window.history.pushState({}, "", `/join/${lobby.gameID}`);
           sessionStorage.setItem("inLobby", "true");

src/client/index.html

@@ -68,6 +68,60 @@
           drop-shadow(1px -1px 0px rgb(255, 255, 255))
           drop-shadow(-1px 1px 0px rgb(255, 255, 255));
       }
+
+      .left-gutter-ad {
+        position: fixed;
+        left: 0;
+        top: 200px; /* Changed from top: 50% */
+        transform: none; /* Removed translateY(-50%) since we don't need to center anymore */
+        z-index: 40;
+        width: 300px;
+        height: 600px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        pointer-events: auto;
+        background: rgba(0, 0, 0, 0.2);
+        backdrop-filter: blur(2px);
+      }
+
+      .left-gutter-ad google-ad {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      .right-gutter-ad {
+        position: fixed;
+        right: 0;
+        top: 200px; /* Changed from top: 50% */
+        transform: none; /* Removed translateY(-50%) since we don't need to center anymore */
+        z-index: 40;
+        width: 300px;
+        height: 600px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        pointer-events: auto;
+        background: rgba(0, 0, 0, 0.2);
+        backdrop-filter: blur(2px);
+      }
+
+      .right-gutter-ad google-ad {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      /* Media query to hide the gutter ad on smaller screens */
+      @media (max-width: 1280px) {
+        .left-gutter-ad {
+          display: none;
+        }
+        .right-gutter-ad {
+          display: none;
+        }
+      }
     </style>
 
     <!-- Immediate execution to prevent FOUC -->
@@ -159,6 +213,23 @@
 
     <div class="bg-image"></div>
 
+    <!-- Left gutter ad placement - full height, no empty space -->
+    <div class="left-gutter-ad ad">
+      <google-ad
+        adSlot="5220834834"
+        adFormat="vertical"
+        fullWidthResponsive="false"
+      ></google-ad>
+    </div>
+
+    <div class="right-gutter-ad ad">
+      <google-ad
+        adSlot="1814331462"
+        adFormat="vertical"
+        fullWidthResponsive="false"
+      ></google-ad>
+    </div>
+
     <dark-mode-button></dark-mode-button>
 
     <!-- Main container with responsive padding -->