add google ad to home page

src/client/GoogleAdElement.ts

@@ -0,0 +1,42 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("google-ad")
+export class GoogleAdElement extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  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;
+    }
+
+    .dark .google-ad-container {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="google-ad-container">
+        <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"
+        ></ins>
+        <script>
+          (adsbygoogle = window.adsbygoogle || []).push({});
+        </script>
+      </div>
+    `;
+  }
+}

src/client/Main.ts

@@ -17,6 +17,7 @@ import { PublicLobby } from "./PublicLobby";
 import { UserSettings } from "../core/game/UserSettings";
 import "./DarkModeButton";
 import { DarkModeButton } from "./DarkModeButton";
+import "./GoogleAdElement";
 import { HelpModal } from "./HelpModal";
 import { GameType } from "../core/game/Game";
 

src/client/index.html

@@ -160,6 +160,7 @@
     <div class="bg-image"></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">