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