Merge branch 'v29'

src/client/graphics/layers/AdTimer.ts

@@ -1,28 +0,0 @@
-import { GameView } from "../../../core/game/GameView";
-import { Layer } from "./Layer";
-
-const AD_SHOW_TICKS = 2 * 60 * 10; // 2 minute
-
-export class AdTimer implements Layer {
-  private isHidden: boolean = false;
-
-  constructor(private g: GameView) {}
-
-  init() {}
-
-  public async tick() {
-    if (this.isHidden) {
-      return;
-    }
-
-    const gameTicks = this.g.ticks() - this.g.config().numSpawnPhaseTurns();
-    if (gameTicks > AD_SHOW_TICKS) {
-      console.log("destroying sticky ads");
-      window.fusetag?.que?.push(() => {
-        window.fusetag?.destroySticky?.();
-      });
-      this.isHidden = true;
-      return;
-    }
-  }
-}

src/client/graphics/layers/GameRightSidebar.ts

@@ -114,10 +114,15 @@ export class GameRightSidebar extends LitElement implements Layer {
 
   private onPauseButtonClick() {
     this.isPaused = !this.isPaused;
+    if (this.isPaused) {
+      crazyGamesSDK.gameplayStop();
+    } else {
+      crazyGamesSDK.gameplayStart();
+    }
     this.eventBus.emit(new PauseGameIntentEvent(this.isPaused));
   }
 
-  private onExitButtonClick() {
+  private async onExitButtonClick() {
     const isAlive = this.game.myPlayer()?.isAlive();
     if (isAlive) {
       const isConfirmed = confirm(
@@ -125,10 +130,10 @@ export class GameRightSidebar extends LitElement implements Layer {
       );
       if (!isConfirmed) return;
     }
-    crazyGamesSDK.gameplayStop().then(() => {
-      // redirect to the home page
-      window.location.href = "/";
-    });
+    await crazyGamesSDK.requestMidgameAd();
+    await crazyGamesSDK.gameplayStop();
+    // redirect to the home page
+    window.location.href = "/";
   }
 
   private onSettingsButtonClick() {

src/client/graphics/layers/InGameHeaderAd.ts

@@ -0,0 +1,112 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { GameView } from "../../../core/game/GameView";
+import { Layer } from "./Layer";
+
+const AD_SHOW_TICKS = 2 * 60 * 10; // 2 minutes
+const HEADER_AD_TYPE = "standard_iab_head1";
+const HEADER_AD_CONTAINER_ID = "header-ad-container";
+const TWO_XL_BREAKPOINT = 1536;
+
+@customElement("in-game-header-ad")
+export class InGameHeaderAd extends LitElement implements Layer {
+  public game: GameView;
+
+  private isHidden: boolean = false;
+  private adLoaded: boolean = false;
+  private shouldShow: boolean = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  init() {
+    this.showHeaderAd();
+  }
+
+  private showHeaderAd(): void {
+    // Don't show header ad on screens smaller than 2xl
+    if (window.innerWidth < TWO_XL_BREAKPOINT) {
+      return;
+    }
+    if (!window.adsEnabled) {
+      return;
+    }
+
+    this.shouldShow = true;
+    this.requestUpdate();
+
+    // Wait for the element to render before loading the ad
+    this.updateComplete.then(() => {
+      this.loadAd();
+    });
+  }
+
+  private loadAd(): void {
+    if (!window.ramp) {
+      console.warn("Playwire RAMP not available for header ad");
+      return;
+    }
+
+    try {
+      window.ramp.que.push(() => {
+        try {
+          window.ramp.spaAddAds([
+            {
+              type: HEADER_AD_TYPE,
+              selectorId: HEADER_AD_CONTAINER_ID,
+            },
+          ]);
+          this.adLoaded = true;
+          console.log("Header ad loaded:", HEADER_AD_TYPE);
+        } catch (e) {
+          console.error("Failed to add header ad:", e);
+        }
+      });
+    } catch (error) {
+      console.error("Failed to load header ad:", error);
+    }
+  }
+
+  private hideHeaderAd(): void {
+    this.shouldShow = false;
+    this.adLoaded = false;
+    this.requestUpdate();
+  }
+
+  public tick() {
+    if (this.isHidden) {
+      return;
+    }
+
+    const gameTicks =
+      this.game.ticks() - this.game.config().numSpawnPhaseTurns();
+    if (gameTicks > AD_SHOW_TICKS) {
+      console.log("destroying header ad and refreshing PageOS");
+      this.hideHeaderAd();
+      this.isHidden = true;
+
+      if (window.PageOS?.session?.newPageView) {
+        window.PageOS.session.newPageView();
+      }
+      return;
+    }
+  }
+
+  shouldTransform(): boolean {
+    return false;
+  }
+
+  render() {
+    if (!this.shouldShow) {
+      return html``;
+    }
+
+    return html`
+      <div
+        id="${HEADER_AD_CONTAINER_ID}"
+        class="hidden 2xl:flex fixed top-0 left-1/2 -translate-x-1/2 z-[100] justify-center items-center pointer-events-auto p-0 -mt-[20px]"
+      ></div>
+    `;
+  }
+}

src/client/graphics/layers/SettingsModal.ts

@@ -1,9 +1,10 @@
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
+import { crazyGamesSDK } from "src/client/CrazyGamesSDK";
+import { PauseGameIntentEvent } from "src/client/Transport";
 import { EventBus } from "../../../core/EventBus";
 import { UserSettings } from "../../../core/game/UserSettings";
 import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler";
-import { PauseGameIntentEvent } from "../../Transport";
 import { translateText } from "../../Utils";
 import SoundManager from "../../sound/SoundManager";
 import { Layer } from "./Layer";
@@ -105,8 +106,14 @@ export class SettingsModal extends LitElement implements Layer {
   }
 
   private pauseGame(pause: boolean) {
-    if (this.shouldPause && !this.wasPausedWhenOpened)
+    if (this.shouldPause && !this.wasPausedWhenOpened) {
+      if (pause) {
+        crazyGamesSDK.gameplayStop();
+      } else {
+        crazyGamesSDK.gameplayStart();
+      }
       this.eventBus.emit(new PauseGameIntentEvent(pause));
+    }
   }
 
   private onTerrainButtonClick() {

src/client/graphics/layers/UnitDisplay.ts

@@ -130,7 +130,7 @@ export class UnitDisplay extends LitElement implements Layer {
 
     return html`
       <div
-        class="hidden 2xl:flex lg:flex fixed bottom-4 left-1/2 transform -translate-x-1/2 z-1100 2xl:flex-row xl:flex-col lg:flex-col 2xl:gap-5 xl:gap-2 lg:gap-2 justify-center items-center"
+        class="hidden min-[1200px]:flex fixed bottom-4 left-1/2 transform -translate-x-1/2 z-[1100] 2xl:flex-row xl:flex-col min-[1200px]:flex-col 2xl:gap-5 xl:gap-2 min-[1200px]:gap-2 justify-center items-center"
       >
         <div class="bg-gray-800/70 backdrop-blur-xs rounded-lg p-0.5">
           <div class="grid grid-rows-1 auto-cols-max grid-flow-col gap-1 w-fit">

src/client/graphics/layers/WinModal.ts

@@ -250,6 +250,7 @@ export class WinModal extends LitElement implements Layer {
   }
 
   async show() {
+    crazyGamesSDK.gameplayStop();
     await this.loadPatternContent();
     this.isVisible = true;
     this.requestUpdate();