From 60d0539d2dc22c45f3a914679237d3cbfc761e3b Mon Sep 17 00:00:00 2001 From: Evan Date: Fri, 7 Mar 2025 21:27:19 -0800 Subject: [PATCH] add google ads to homepage --- src/client/GoogleAdElement.ts | 88 +++++++++++++++++++++++++++++++++++ src/client/Main.ts | 9 ++++ src/client/index.html | 71 ++++++++++++++++++++++++++++ src/server/gatekeeper | 1 - 4 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 src/client/GoogleAdElement.ts delete mode 160000 src/server/gatekeeper diff --git a/src/client/GoogleAdElement.ts b/src/client/GoogleAdElement.ts new file mode 100644 index 000000000..4ddc32b51 --- /dev/null +++ b/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` + + `; + } + + 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; diff --git a/src/client/Main.ts b/src/client/Main.ts index ec033b8bb..59e2e4d26 100644 --- a/src/client/Main.ts +++ b/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; 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; 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"); diff --git a/src/client/index.html b/src/client/index.html index 886087198..3f17c0d13 100644 --- a/src/client/index.html +++ b/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; + } + } @@ -159,6 +213,23 @@
+ +
+ +
+ +
+ +
+ diff --git a/src/server/gatekeeper b/src/server/gatekeeper deleted file mode 160000 index 958deadce..000000000 --- a/src/server/gatekeeper +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 958deadcebe0d06dbfcc2378e6ec74bb83821414