add google ads to homepage

src/client/GoogleAdElement.ts

@@ -1,8 +1,30 @@
 import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
 
+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;
   }
@@ -10,33 +32,57 @@ export class GoogleAdElement extends LitElement {
   static styles = css`
     .google-ad-container {
       margin-top: 1rem;
-      background-color: rgba(255, 255, 255, 0.1);
       border-radius: 0.5rem;
       padding: 0.5rem;
       width: 100%;
       overflow: hidden;
+      transition:
+        opacity 0.3s ease,
+        height 0.3s ease;
     }
-
-    .dark .google-ad-container {
-      background-color: rgba(0, 0, 0, 0.2);
+    .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">
+      <div class="google-ad-container" style="${containerStyle}">
         <ins
           class="adsbygoogle"
           style="display:block"
-          data-ad-client="ca-pub-7035513310742290"
-          data-ad-slot="rightsidebar"
-          data-ad-format="auto"
-          data-full-width-responsive="true"
+          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>
-        <script>
-          (adsbygoogle = window.adsbygoogle || []).push({});
-        </script>
       </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

@@ -22,6 +22,7 @@ import "./GoogleAdElement";
 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;
@@ -32,6 +33,7 @@ class Client {
 
   private joinModal: JoinPrivateLobbyModal;
   private publicLobby: PublicLobby;
+  private googleAds: NodeListOf<GoogleAdElement>;
   private userSettings: UserSettings = new UserSettings();
 
   constructor() {}
@@ -57,6 +59,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");
@@ -164,6 +169,9 @@ class Client {
       () => {
         this.joinModal.close();
         this.publicLobby.stop();
+        document.querySelectorAll(".ad").forEach((ad) => {
+          (ad as HTMLElement).style.display = "none";
+        });
 
         // show when the game loads
         const startingModal = document.querySelector(

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,8 +213,24 @@
 
     <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>
-    <google-ad></google-ad>
 
     <!-- Main container with responsive padding -->
     <div class="flex justify-center items-center flex-grow">