this.closeModal()}
>
diff --git a/src/client/graphics/layers/SpawnAd.ts b/src/client/graphics/layers/SpawnAd.ts
deleted file mode 100644
index f8f39294f..000000000
--- a/src/client/graphics/layers/SpawnAd.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { translateText } from "../../../client/Utils";
-import { GameView } from "../../../core/game/GameView";
-import { getGamesPlayed } from "../../Utils";
-import { Layer } from "./Layer";
-
-const AD_TYPE = "bottom_rail";
-const AD_CONTAINER_ID = "bottom-rail-ad-container";
-
-@customElement("spawn-ad")
-export class SpawnAd extends LitElement implements Layer {
- public g: GameView;
-
- @state()
- private isVisible: boolean = false;
-
- @state()
- private adLoaded: boolean = false;
-
- private gamesPlayed: number = 0;
-
- // Override createRenderRoot to disable shadow DOM
- createRenderRoot() {
- return this;
- }
-
- static styles = css``;
-
- constructor() {
- super();
- }
-
- init() {
- this.gamesPlayed = getGamesPlayed();
- }
-
- public show(): void {
- this.isVisible = true;
- this.loadAd();
- this.requestUpdate();
- }
-
- public hide(): void {
- // Destroy the ad when hiding
- this.destroyAd();
- this.isVisible = false;
- this.adLoaded = false;
- this.requestUpdate();
- }
-
- public async tick() {
- if (
- !this.isVisible &&
- this.g.inSpawnPhase() &&
- this.g.ticks() > 10 &&
- this.gamesPlayed > 5
- ) {
- console.log("not showing spawn ad");
- // this.show();
- }
- if (this.isVisible && !this.g.inSpawnPhase()) {
- console.log("hiding bottom left ad");
- this.hide();
- }
- }
-
- private loadAd(): void {
- if (!window.ramp) {
- console.warn("Playwire RAMP not available");
- return;
- }
- if (this.adLoaded) {
- console.log("Ad already loaded, skipping");
- return;
- }
- try {
- window.ramp.que.push(() => {
- window.ramp.spaAddAds([
- {
- type: AD_TYPE,
- selectorId: AD_CONTAINER_ID,
- },
- ]);
- this.adLoaded = true;
- console.log("Playwire ad loaded:", AD_TYPE);
- });
- } catch (error) {
- console.error("Failed to load Playwire ad:", error);
- }
- }
-
- private destroyAd(): void {
- if (!window.ramp || !this.adLoaded) {
- return;
- }
- try {
- window.ramp.que.push(() => {
- window.ramp.destroyUnits("all");
- console.log("Playwire spawn ad destroyed");
- });
- } catch (error) {
- console.error("Failed to destroy Playwire ad:", error);
- }
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- // Clean up ad when component is removed
- this.destroyAd();
- }
-
- render() {
- if (!this.isVisible) {
- return html``;
- }
-
- return html`
-
-
- ${!this.adLoaded
- ? html`${translateText("spawn_ad.loading")}`
- : ""}
-
-
- `;
- }
-}
diff --git a/src/client/graphics/layers/SpawnTimer.ts b/src/client/graphics/layers/SpawnTimer.ts
index da96c89a1..393cf96d4 100644
--- a/src/client/graphics/layers/SpawnTimer.ts
+++ b/src/client/graphics/layers/SpawnTimer.ts
@@ -1,18 +1,34 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
import { GameMode, Team } from "../../../core/game/Game";
import { GameView } from "../../../core/game/GameView";
import { TransformHandler } from "../TransformHandler";
import { Layer } from "./Layer";
-export class SpawnTimer implements Layer {
+@customElement("spawn-timer")
+export class SpawnTimer extends LitElement implements Layer {
+ public game: GameView;
+ public transformHandler: TransformHandler;
+
private ratios = [0];
private colors = ["rgba(0, 128, 255, 0.7)", "rgba(0, 0, 0, 0.5)"];
- constructor(
- private game: GameView,
- private transformHandler: TransformHandler,
- ) {}
+ private isVisible = false;
- init() {}
+ createRenderRoot() {
+ this.style.position = "fixed";
+ this.style.top = "0";
+ this.style.left = "0";
+ this.style.width = "100%";
+ this.style.height = "7px";
+ this.style.zIndex = "1000";
+ this.style.pointerEvents = "none";
+ return this;
+ }
+
+ init() {
+ this.isVisible = true;
+ }
tick() {
if (this.game.inSpawnPhase()) {
@@ -21,6 +37,7 @@ export class SpawnTimer implements Layer {
this.game.ticks() / this.game.config().numSpawnPhaseTurns(),
];
this.colors = ["rgba(0, 128, 255, 0.7)"];
+ this.requestUpdate();
return;
}
@@ -28,6 +45,7 @@ export class SpawnTimer implements Layer {
this.colors = [];
if (this.game.config().gameConfig().gameMode !== GameMode.Team) {
+ this.requestUpdate();
return;
}
@@ -41,44 +59,52 @@ export class SpawnTimer implements Layer {
const theme = this.game.config().theme();
const total = sumIterator(teamTiles.values());
- if (total === 0) return;
+ if (total === 0) {
+ this.requestUpdate();
+ return;
+ }
for (const [team, count] of teamTiles) {
const ratio = count / total;
this.ratios.push(ratio);
this.colors.push(theme.teamColor(team).toRgbString());
}
+ this.requestUpdate();
}
shouldTransform(): boolean {
return false;
}
- renderLayer(context: CanvasRenderingContext2D) {
- if (this.ratios.length === 0 || this.colors.length === 0) return;
+ render() {
+ if (!this.isVisible) {
+ return html``;
+ }
- const barHeight = 10;
- const barWidth = this.transformHandler.width();
+ if (this.ratios.length === 0 || this.colors.length === 0) {
+ return html``;
+ }
if (
!this.game.inSpawnPhase() &&
this.game.config().gameConfig().gameMode !== GameMode.Team
) {
- return;
+ return html``;
}
- let x = 0;
- let filledRatio = 0;
- for (let i = 0; i < this.ratios.length && i < this.colors.length; i++) {
- const ratio = this.ratios[i] ?? 1 - filledRatio;
- const segmentWidth = barWidth * ratio;
-
- context.fillStyle = this.colors[i];
- context.fillRect(x, 0, segmentWidth, barHeight);
-
- x += segmentWidth;
- filledRatio += ratio;
- }
+ return html`
+
+ ${this.ratios.map((ratio, i) => {
+ const color = this.colors[i] || "rgba(0, 0, 0, 0.5)";
+ return html`
+
+ `;
+ })}
+
+ `;
}
}
diff --git a/src/client/graphics/layers/TeamStats.ts b/src/client/graphics/layers/TeamStats.ts
index ba8e9dbe7..a8503c229 100644
--- a/src/client/graphics/layers/TeamStats.ts
+++ b/src/client/graphics/layers/TeamStats.ts
@@ -221,5 +221,6 @@ export class TeamStats extends LitElement implements Layer {
function formatPercentage(value: number): string {
const perc = value * 100;
if (Number.isNaN(perc)) return "0%";
+ if (perc === 100) return "100%";
return perc.toPrecision(2) + "%";
}
diff --git a/src/client/graphics/layers/WinModal.ts b/src/client/graphics/layers/WinModal.ts
index 809eb5465..3e042afe1 100644
--- a/src/client/graphics/layers/WinModal.ts
+++ b/src/client/graphics/layers/WinModal.ts
@@ -132,12 +132,7 @@ export class WinModal extends LitElement implements Layer {
for (const pattern of Object.values(patterns?.patterns ?? {})) {
for (const colorPalette of pattern.colorPalettes ?? []) {
if (
- patternRelationship(
- pattern,
- colorPalette,
- me !== false ? me : null,
- null,
- ) === "purchasable"
+ patternRelationship(pattern, colorPalette, me, null) === "purchasable"
) {
const palette = patterns?.colorPalettes?.[colorPalette.name];
if (palette) {
diff --git a/src/client/index.html b/src/client/index.html
index 7a765995c..a588a0d02 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -97,6 +97,13 @@
src="https://cdn.fuseplatform.net/publift/tags/2/4121/fuse.js"
>
+
+