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/StructureDrawingUtils.ts b/src/client/graphics/layers/StructureDrawingUtils.ts
index a3693dc74..a8a7ef930 100644
--- a/src/client/graphics/layers/StructureDrawingUtils.ts
+++ b/src/client/graphics/layers/StructureDrawingUtils.ts
@@ -99,10 +99,7 @@ export class SpriteFactory {
private invalidateTextureCache(unitType: UnitType) {
for (const key of Array.from(this.textureCache.keys())) {
- if (
- key.endsWith(`-${unitType}-icon`) ||
- key === `construction-${unitType}-icon`
- ) {
+ if (key.includes(`-${unitType}`)) {
this.textureCache.delete(key);
}
}
@@ -115,7 +112,13 @@ export class SpriteFactory {
structureType: UnitType,
): PIXI.Container {
const parentContainer = new PIXI.Container();
- const texture = this.createTexture(structureType, player, false, true);
+ const texture = this.createTexture(
+ structureType,
+ player,
+ false,
+ false,
+ true,
+ );
const sprite = new PIXI.Sprite(texture);
sprite.anchor.set(0.5);
sprite.alpha = 0.5;
@@ -139,6 +142,7 @@ export class SpriteFactory {
const worldPos = new Cell(this.game.x(tile), this.game.y(tile));
const screenPos = this.transformHandler.worldToScreenCoordinates(worldPos);
+ const isMarkedForDeletion = unit.markedForDeletion() !== false;
const isConstruction = unit.type() === UnitType.Construction;
const constructionType = unit.constructionType();
const structureType = isConstruction ? constructionType! : unit.type();
@@ -156,6 +160,7 @@ export class SpriteFactory {
structureType,
unit.owner(),
isConstruction,
+ isMarkedForDeletion,
type === "icon",
);
const sprite = new PIXI.Sprite(texture);
@@ -202,19 +207,30 @@ export class SpriteFactory {
type: UnitType,
owner: PlayerView,
isConstruction: boolean,
+ isMarkedForDeletion: boolean,
renderIcon: boolean,
): PIXI.Texture {
- const cacheKey = isConstruction
- ? `construction-${type}` + (renderIcon ? "-icon" : "")
- : `${this.theme.territoryColor(owner).toRgbString()}-${type}` +
- (renderIcon ? "-icon" : "");
+ const cacheKeyBase = isConstruction
+ ? `construction-${type}`
+ : `${this.theme.territoryColor(owner).toRgbString()}-${type}`;
+ const cacheKey =
+ cacheKeyBase +
+ (renderIcon ? "-icon" : "") +
+ (isMarkedForDeletion ? "-deleted" : "");
if (this.textureCache.has(cacheKey)) {
return this.textureCache.get(cacheKey)!;
}
const shape = STRUCTURE_SHAPES[type];
const texture = shape
- ? this.createIcon(owner, type, isConstruction, shape, renderIcon)
+ ? this.createIcon(
+ owner,
+ type,
+ isConstruction,
+ isMarkedForDeletion,
+ shape,
+ renderIcon,
+ )
: PIXI.Texture.EMPTY;
this.textureCache.set(cacheKey, texture);
return texture;
@@ -224,6 +240,7 @@ export class SpriteFactory {
owner: PlayerView,
structureType: UnitType,
isConstruction: boolean,
+ isMarkedForDeletion: boolean,
shape: string,
renderIcon: boolean,
): PIXI.Texture {
@@ -370,11 +387,8 @@ export class SpriteFactory {
}
const structureInfo = this.structuresInfos.get(structureType);
- if (!structureInfo?.image) {
- return PIXI.Texture.from(structureCanvas);
- }
- if (renderIcon) {
+ if (structureInfo?.image && renderIcon) {
const SHAPE_OFFSETS = {
triangle: [6, 11],
square: [5, 5],
@@ -390,6 +404,22 @@ export class SpriteFactory {
offsetY,
);
}
+
+ if (isMarkedForDeletion) {
+ context.save();
+ context.strokeStyle = "rgba(255, 64, 64, 0.95)";
+ context.lineWidth = Math.max(2, Math.round(iconSize * 0.12));
+ context.lineCap = "round";
+ const padding = Math.max(2, iconSize * 0.12);
+ context.beginPath();
+ context.moveTo(padding, padding);
+ context.lineTo(iconSize - padding, iconSize - padding);
+ context.moveTo(iconSize - padding, padding);
+ context.lineTo(padding, iconSize - padding);
+ context.stroke();
+ context.restore();
+ }
+
return PIXI.Texture.from(structureCanvas);
}
diff --git a/src/client/graphics/layers/StructureIconsLayer.ts b/src/client/graphics/layers/StructureIconsLayer.ts
index 0e9050bad..4b04ec9e0 100644
--- a/src/client/graphics/layers/StructureIconsLayer.ts
+++ b/src/client/graphics/layers/StructureIconsLayer.ts
@@ -418,6 +418,7 @@ export class StructureIconsLayer implements Layer {
const render = this.findRenderByUnit(unitView);
if (render) {
this.checkForConstructionState(render, unitView);
+ this.checkForDeletionState(render, unitView);
this.checkForOwnershipChange(render, unitView);
this.checkForLevelChange(render, unitView);
}
@@ -467,6 +468,16 @@ export class StructureIconsLayer implements Layer {
}
}
+ private checkForDeletionState(render: StructureRenderInfo, unit: UnitView) {
+ if (unit.markedForDeletion() !== false) {
+ render.iconContainer?.destroy();
+ render.dotContainer?.destroy();
+ render.iconContainer = this.createIconSprite(unit);
+ render.dotContainer = this.createDotSprite(unit);
+ this.modifyVisibility(render);
+ }
+ }
+
private checkForConstructionState(
render: StructureRenderInfo,
unit: UnitView,
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/TerritoryLayer.ts b/src/client/graphics/layers/TerritoryLayer.ts
index 59670db17..945ac3524 100644
--- a/src/client/graphics/layers/TerritoryLayer.ts
+++ b/src/client/graphics/layers/TerritoryLayer.ts
@@ -74,6 +74,10 @@ export class TerritoryLayer implements Layer {
}
tick() {
+ if (this.game.inSpawnPhase()) {
+ this.spawnHighlight();
+ }
+
this.game.recentlyUpdatedTiles().forEach((t) => this.enqueueTile(t));
const updates = this.game.updatesSinceLastTick();
const unitUpdates = updates !== null ? updates[GameUpdateType.Unit] : [];
@@ -145,12 +149,6 @@ export class TerritoryLayer implements Layer {
}
this.lastFocusedPlayer = focusedPlayer;
}
-
- if (!this.game.inSpawnPhase()) {
- return;
- }
-
- this.spawnHighlight();
}
private spawnHighlight() {
@@ -186,13 +184,16 @@ export class TerritoryLayer implements Layer {
}
let color = this.theme.spawnHighlightColor();
const myPlayer = this.game.myPlayer();
- if (
- myPlayer !== null &&
- myPlayer !== human &&
- myPlayer.isFriendly(human)
- ) {
- color = this.theme.selfColor();
+ if (myPlayer !== null && myPlayer !== human && myPlayer.team() === null) {
+ // In FFA games (when team === null), use default yellow spawn highlight color
+ color = this.theme.spawnHighlightColor();
+ } else if (myPlayer !== null && myPlayer !== human) {
+ // In Team games, the spawn highlight color becomes that player's team color
+ // Optionally, this could be broken down to teammate or enemy and simplified to green and red, respectively
+ const team = human.team();
+ if (team !== null) color = this.theme.teamColor(team);
}
+
for (const tile of this.game.bfs(
centerTile,
euclDistFN(centerTile, 9, true),
@@ -215,20 +216,20 @@ export class TerritoryLayer implements Layer {
return;
}
// Breathing border animation
- this.borderAnimTime += 3;
- const minPadding = 6;
- const maxPadding = 12;
+ this.borderAnimTime += 0.5;
+ const minRad = 8;
+ const maxRad = 24;
// Range: [minPadding..maxPadding]
- const breathingPadding =
- minPadding +
- (maxPadding - minPadding) *
- (0.5 + 0.5 * Math.sin(this.borderAnimTime * 0.3));
+ const radius =
+ minRad + (maxRad - minRad) * (0.5 + 0.5 * Math.sin(this.borderAnimTime));
this.drawBreathingRing(
center.x,
center.y,
- breathingPadding,
- this.theme.spawnHighlightColor(),
+ minRad,
+ maxRad,
+ radius,
+ this.theme.spawnHighlightSelfColor(), // Always draw breathing ring with self spawn highlight color
);
}
@@ -558,18 +559,52 @@ export class TerritoryLayer implements Layer {
const y = this.game.y(tile);
this.highlightContext.clearRect(x, y, 1, 1);
}
+
private drawBreathingRing(
cx: number,
cy: number,
+ minRad: number,
+ maxRad: number,
radius: number,
color: Colord,
) {
const ctx = this.highlightContext;
if (!ctx) return;
+
+ // Draw a semi-transparent ring around the starting location
ctx.beginPath();
+ // Transparency matches the highlight color provided
+ const transparent = color.toHex() + "00";
+ const c = color.toHex();
+ const radGrad = ctx.createRadialGradient(cx, cy, minRad, cx, cy, maxRad);
+
+ // Pixels with radius < minRad are transparent
+ radGrad.addColorStop(0, transparent);
+ // The ring then starts with solid highlight color
+ radGrad.addColorStop(0.01, c);
+ radGrad.addColorStop(0.1, c);
+ // The outer edge of the ring is transparent
+ radGrad.addColorStop(1, transparent);
+
+ // Draw an arc at the max radius and fill with the created radial gradient
+ ctx.arc(cx, cy, maxRad, 0, Math.PI * 2);
+ ctx.fillStyle = radGrad;
+ ctx.closePath();
+ ctx.fill();
+
+ // Draw a solid ring around the starting location with outer radius = the breathing radius
+ ctx.beginPath();
+ const radGrad2 = ctx.createRadialGradient(cx, cy, minRad, cx, cy, radius);
+ // Pixels with radius < minRad are transparent
+ radGrad2.addColorStop(0, transparent);
+ // The ring then starts with solid highlight color
+ radGrad2.addColorStop(0.01, c);
+ // The ring is solid throughout
+ radGrad2.addColorStop(1, c);
+
+ // Draw an arc at the current breathing radius and fill with the created "gradient"
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
- ctx.strokeStyle = color.toRgbString();
- ctx.lineWidth = 4;
- ctx.stroke();
+ ctx.fillStyle = radGrad2;
+ ctx.fill();
}
}
diff --git a/src/client/graphics/layers/UILayer.ts b/src/client/graphics/layers/UILayer.ts
index 5bda48ef6..43092a642 100644
--- a/src/client/graphics/layers/UILayer.ts
+++ b/src/client/graphics/layers/UILayer.ts
@@ -117,11 +117,18 @@ export class UILayer implements Layer {
this.drawHealthBar(unit);
break;
}
+ case UnitType.City:
+ case UnitType.Factory:
+ case UnitType.DefensePost:
+ case UnitType.Port:
case UnitType.MissileSilo:
- this.createLoadingBar(unit);
- break;
case UnitType.SAMLauncher:
- this.createLoadingBar(unit);
+ if (
+ unit.markedForDeletion() !== false ||
+ unit.missileReadinesss() < 1
+ ) {
+ this.createLoadingBar(unit);
+ }
break;
default:
return;
@@ -329,12 +336,28 @@ export class UILayer implements Layer {
}
case UnitType.MissileSilo:
case UnitType.SAMLauncher:
- return unit.missileReadinesss();
+ return !unit.markedForDeletion()
+ ? unit.missileReadinesss()
+ : this.deletionProgress(this.game, unit);
+ case UnitType.City:
+ case UnitType.Factory:
+ case UnitType.Port:
+ case UnitType.DefensePost:
+ return this.deletionProgress(this.game, unit);
default:
return 1;
}
}
+ private deletionProgress(game: GameView, unit: UnitView): number {
+ const deleteAt = unit.markedForDeletion();
+ if (deleteAt === false) return 1;
+ return Math.max(
+ 0,
+ (deleteAt - game.ticks()) / game.config().deletionMarkDuration(),
+ );
+ }
+
public createLoadingBar(unit: UnitView) {
if (!this.context) {
return;
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 f103179ed..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"
>
+
+