diff --git a/src/client/graphics/layers/InGamePromo.ts b/src/client/graphics/layers/InGamePromo.ts index a160e5924..28548fc32 100644 --- a/src/client/graphics/layers/InGamePromo.ts +++ b/src/client/graphics/layers/InGamePromo.ts @@ -1,30 +1,69 @@ import { LitElement, html } from "lit"; -import { customElement } from "lit/decorators.js"; +import { customElement, state } from "lit/decorators.js"; import { GameView } from "../../../core/game/GameView"; import { Layer } from "./Layer"; const AD_TYPE = "standard_iab_left1"; const AD_CONTAINER_ID = "in-game-bottom-left-ad"; +const GUTTER_LEFT_AD_TYPE = "standard_iab_left2"; +const GUTTER_RIGHT_AD_TYPE = "standard_iab_rght1"; +const GUTTER_LEFT_CONTAINER_ID = "in-game-gutter-left"; +const GUTTER_RIGHT_CONTAINER_ID = "in-game-gutter-right"; + +const FOOTER_AD_TYPE = "standard_iab_head2"; +const FOOTER_AD_CONTAINER_ID = "in-game-footer-ad"; + @customElement("in-game-promo") export class InGamePromo extends LitElement implements Layer { public game: GameView; private shouldShow: boolean = false; + private bottomLeftEligible: boolean = false; + private bottomLeftAdShown: boolean = false; + + @state() + private showGutterAds: boolean = false; + + @state() + private showFooterAd: boolean = false; + + private gutterAdsLoaded: boolean = false; + private footerAdLoaded: boolean = false; createRenderRoot() { return this; } init() { - this.showAd(); + this.checkBottomLeftEligibility(); + this.initGutterAds(); + this.initFooterAd(); } - private showAd(): void { + tick() { + if (!this.game.inSpawnPhase()) { + if (this.showGutterAds) { + this.hideGutterAds(); + } + if (this.showFooterAd) { + this.hideFooterAd(); + } + if (this.bottomLeftEligible && !this.bottomLeftAdShown) { + this.bottomLeftAdShown = true; + this.showAd(); + } + } + } + + private checkBottomLeftEligibility(): void { if (!window.adsEnabled) return; if (window.innerWidth < 1100) return; if (window.innerHeight < 750) return; + this.bottomLeftEligible = true; + } + private showAd(): void { this.shouldShow = true; this.requestUpdate(); @@ -33,6 +72,18 @@ export class InGamePromo extends LitElement implements Layer { }); } + private initGutterAds(): void { + if (!window.adsEnabled) return; + if (window.innerWidth <= 1700) return; + + this.showGutterAds = true; + this.requestUpdate(); + + this.updateComplete.then(() => { + this.loadGutterAds(); + }); + } + private loadAd(): void { if (!window.ramp) { console.warn("Playwire RAMP not available for in-game ad"); @@ -58,6 +109,101 @@ export class InGamePromo extends LitElement implements Layer { } } + private loadGutterAds(): void { + if (!window.ramp) { + console.warn("Playwire RAMP not available for gutter ads"); + return; + } + + if (this.gutterAdsLoaded) return; + + try { + window.ramp.que.push(() => { + try { + window.ramp.spaAddAds([ + { + type: GUTTER_LEFT_AD_TYPE, + selectorId: GUTTER_LEFT_CONTAINER_ID, + }, + { + type: GUTTER_RIGHT_AD_TYPE, + selectorId: GUTTER_RIGHT_CONTAINER_ID, + }, + ]); + this.gutterAdsLoaded = true; + console.log("In-game gutter ads loaded"); + } catch (e) { + console.error("Failed to add gutter ads:", e); + } + }); + } catch (error) { + console.error("Failed to load gutter ads:", error); + } + } + + private initFooterAd(): void { + if (!window.adsEnabled) return; + + this.showFooterAd = true; + this.requestUpdate(); + + this.updateComplete.then(() => { + this.loadFooterAd(); + }); + } + + private loadFooterAd(): void { + if (!window.ramp) { + console.warn("Playwire RAMP not available for footer ad"); + return; + } + + if (this.footerAdLoaded) return; + + try { + window.ramp.que.push(() => { + try { + window.ramp.spaAddAds([ + { type: FOOTER_AD_TYPE, selectorId: FOOTER_AD_CONTAINER_ID }, + ]); + this.footerAdLoaded = true; + console.log("In-game footer ad loaded"); + } catch (e) { + console.error("Failed to add footer ad:", e); + } + }); + } catch (error) { + console.error("Failed to load footer ad:", error); + } + } + + private hideFooterAd(): void { + this.showFooterAd = false; + if (this.footerAdLoaded && window.ramp) { + try { + window.ramp.destroyUnits(FOOTER_AD_TYPE); + console.log("Successfully destroyed in-game footer ad"); + } catch (e) { + console.error("Error destroying footer ad:", e); + } + } + this.requestUpdate(); + } + + private hideGutterAds(): void { + this.showGutterAds = false; + if (this.gutterAdsLoaded && window.ramp) { + try { + window.ramp.destroyUnits(GUTTER_LEFT_AD_TYPE); + window.ramp.destroyUnits(GUTTER_RIGHT_AD_TYPE); + console.log("Successfully destroyed in-game gutter ads"); + } catch (e) { + console.error("Error destroying gutter ads:", e); + } + } + this.requestUpdate(); + } + public hideAd(): void { if (!window.ramp) { console.warn("Playwire RAMP not available for in-game ad"); @@ -78,16 +224,43 @@ export class InGamePromo extends LitElement implements Layer { } render() { - if (!this.shouldShow) { - return html``; - } - return html` -
+ ${this.shouldShow + ? html` +
+ ` + : html``} + ${this.showGutterAds + ? html` + +
+
+
+ + +
+
+
+ ` + : html``} + ${this.showFooterAd + ? html` +
+ ` + : html``} `; } }