-
+ 
${translateText("help_modal.ui_leaderboard")}
@@ -144,13 +150,14 @@ export class HelpModal extends LitElement {
-
+ 
${translateText("help_modal.ui_control")}
@@ -172,13 +179,52 @@ export class HelpModal extends LitElement {
+ +
-
+
+
+
+
+ ${translateText("help_modal.ui_events")}
+
+
+ 
+ 
+
+
+
+
+
+ ${translateText("help_modal.ui_events_desc")}
+-
+
- + ${translateText("help_modal.ui_events_alliance")} + +
- + ${translateText("help_modal.ui_events_attack")} + +
- + ${translateText("help_modal.ui_events_quickchat")} + +
+ +
+
+ 
${translateText("help_modal.ui_options")}
@@ -196,18 +242,46 @@ export class HelpModal extends LitElement {
-
-
+
+ +
+
+
+
+ 
+
+
+ ${translateText("help_modal.ui_playeroverlay")}
+
+
+
+
+ + ${translateText("help_modal.ui_playeroverlay_desc")} +
++ +
${translateText("help_modal.radial_title")}
- 
+
@@ -238,24 +316,29 @@ export class HelpModal extends LitElement {
+
+ 
+ 
+
+
+ ${translateText("help_modal.radial_desc")}
-
@@ -228,8 +302,12 @@ export class HelpModal extends LitElement {
${translateText("help_modal.radial_boat")}
- - - ${translateText("help_modal.radial_close")} + + ${translateText("help_modal.info_alliance")} + +
- + + ${translateText("help_modal.ally_betray")}
-
+
${translateText("help_modal.info_title")}
-
-
-
+
+
@@ -276,13 +365,14 @@ export class HelpModal extends LitElement {
+ 
${translateText("help_modal.info_enemy_panel")}
${translateText("help_modal.info_enemy_desc")}
-
+
- + + ${translateText("help_modal.info_chat")} +
- ${translateText("help_modal.info_target")} @@ -264,10 +347,16 @@ export class HelpModal extends LitElement { ${translateText("help_modal.info_alliance")} -
- +
- ${translateText("help_modal.info_emoji")} +
-
+ ++ ${translateText("help_modal.info_trade")} +
+
-
@@ -307,6 +401,7 @@ export class HelpModal extends LitElement {
+ 
${translateText("help_modal.info_ally_panel")}
@@ -296,6 +386,10 @@ export class HelpModal extends LitElement {
${translateText("help_modal.ally_donate")}
+
+
+ ${translateText("help_modal.ally_donate_gold")}
+
${translateText("help_modal.build_menu_title")}
+ ${translateText("help_modal.build_menu_desc")}
| + | ${this.outgoingBoats.map( - (boats) => html` + (boat) => html` + ${!boat.retreating() + ? html`` + : "(retreating...)"} `, )} | diff --git a/src/client/graphics/layers/FxLayer.ts b/src/client/graphics/layers/FxLayer.ts new file mode 100644 index 000000000..f19147b65 --- /dev/null +++ b/src/client/graphics/layers/FxLayer.ts @@ -0,0 +1,109 @@ +import { UnitType } from "../../../core/game/Game"; +import { GameUpdateType } from "../../../core/game/GameUpdates"; +import { GameView, UnitView } from "../../../core/game/GameView"; +import { loadAllAnimatedSpriteImages } from "../AnimatedSpriteLoader"; +import { Fx } from "../fx/Fx"; +import { NukeExplosionFx, ShockwaveFx } from "../fx/NukeFx"; +import { Layer } from "./Layer"; + +export class FxLayer implements Layer { + private canvas: HTMLCanvasElement; + private context: CanvasRenderingContext2D; + + private lastRefresh: number = 0; + private refreshRate: number = 10; + + private allFx: Fx[] = []; + + constructor(private game: GameView) {} + + shouldTransform(): boolean { + return true; + } + + tick() { + this.game + .updatesSinceLastTick() + ?.[GameUpdateType.Unit]?.map((unit) => this.game.unit(unit.id)) + ?.forEach((unitView) => { + if (unitView === undefined) return; + this.onUnitEvent(unitView); + }); + } + + onUnitEvent(unit: UnitView) { + switch (unit.type()) { + case UnitType.AtomBomb: + case UnitType.MIRVWarhead: + this.handleNukeExplosion(unit, 70); + break; + case UnitType.HydrogenBomb: + this.handleNukeExplosion(unit, 250); + break; + } + } + + handleNukeExplosion(unit: UnitView, shockwaveRadius: number) { + if (!unit.isActive()) { + const x = this.game.x(unit.lastTile()); + const y = this.game.y(unit.lastTile()); + const nuke = new NukeExplosionFx(x, y, 1000); + this.allFx.push(nuke as Fx); + const shockwave = new ShockwaveFx(x, y, 1500, shockwaveRadius); + this.allFx.push(shockwave as Fx); + } + } + + async init() { + this.redraw(); + try { + await loadAllAnimatedSpriteImages(); + console.log("FX sprites loaded successfully"); + } catch (err) { + console.error("Failed to load FX sprites:", err); + } + } + + redraw(): void { + this.canvas = document.createElement("canvas"); + const context = this.canvas.getContext("2d"); + if (context === null) throw new Error("2d context not supported"); + this.context = context; + this.context.imageSmoothingEnabled = false; + this.canvas.width = this.game.width(); + this.canvas.height = this.game.height(); + } + + renderLayer(context: CanvasRenderingContext2D) { + const now = Date.now(); + if (this.game.config().userSettings()?.fxLayer()) { + if (now > this.lastRefresh + this.refreshRate) { + const delta = now - this.lastRefresh; + this.renderAllFx(context, delta); + this.lastRefresh = now; + } + context.drawImage( + this.canvas, + -this.game.width() / 2, + -this.game.height() / 2, + this.game.width(), + this.game.height(), + ); + } + } + + renderAllFx(context: CanvasRenderingContext2D, delta: number) { + if (this.allFx.length > 0) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.renderContextFx(delta); + } + } + + renderContextFx(duration: number) { + for (let i = this.allFx.length - 1; i >= 0; i--) { + if (!this.allFx[i].renderTick(duration, this.context)) { + this.allFx.splice(i, 1); + } + } + } +} diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts index c73460acf..8449c551f 100644 --- a/src/client/graphics/layers/NameLayer.ts +++ b/src/client/graphics/layers/NameLayer.ts @@ -12,7 +12,7 @@ import { ClientID } from "../../../core/Schemas"; import { Theme } from "../../../core/configuration/Config"; import { AllPlayers, Cell, nukeTypes } from "../../../core/game/Game"; import { GameView, PlayerView } from "../../../core/game/GameView"; -import { createCanvas, renderTroops } from "../../Utils"; +import { createCanvas, renderNumber, renderTroops } from "../../Utils"; import { TransformHandler } from "../TransformHandler"; import { Layer } from "./Layer"; @@ -214,20 +214,18 @@ export class NameLayer implements Layer { troopsDiv.style.marginTop = "-5%"; element.appendChild(troopsDiv); - // TODO: enable this for new meta. - - // const shieldDiv = document.createElement("div"); - // shieldDiv.classList.add("player-shield"); - // shieldDiv.style.zIndex = "3"; - // shieldDiv.style.marginTop = "-5%"; - // shieldDiv.style.display = "flex"; - // shieldDiv.style.alignItems = "center"; - // shieldDiv.style.gap = "0px"; - // shieldDiv.innerHTML = ` - //
+ 
+ 
+ 