Merge branch 'v26'

src/client/LocalServer.ts

@@ -14,6 +14,7 @@ import {
 import {
   createPartialGameRecord,
   decompressGameRecord,
+  getClanTag,
   replacer,
 } from "../core/Util";
 import { LobbyConfig } from "./ClientGameRunner";
@@ -188,6 +189,7 @@ export class LocalServer {
         clientID: this.lobbyConfig.clientID,
         stats: this.allPlayersStats[this.lobbyConfig.clientID],
         cosmetics: this.lobbyConfig.gameStartInfo?.players[0].cosmetics,
+        clanTag: getClanTag(this.lobbyConfig.playerName) ?? undefined,
       },
     ];
     if (this.lobbyConfig.gameStartInfo === undefined) {

src/client/graphics/AnimatedSpriteLoader.ts

@@ -1,15 +1,21 @@
-import miniBigSmoke from "../../../resources/sprites/bigsmoke.png";
 import buildingExplosion from "../../../resources/sprites/buildingExplosion.png";
-import conquestSword from "../../../resources/sprites/conquestSword.png";
 import dust from "../../../resources/sprites/dust.png";
 import miniExplosion from "../../../resources/sprites/miniExplosion.png";
-import miniFire from "../../../resources/sprites/minifire.png";
-import nuke from "../../../resources/sprites/nukeExplosion.png";
 import SAMExplosion from "../../../resources/sprites/samExplosion.png";
 import sinkingShip from "../../../resources/sprites/sinkingShip.png";
-import miniSmoke from "../../../resources/sprites/smoke.png";
-import miniSmokeAndFire from "../../../resources/sprites/smokeAndFire.png";
 import unitExplosion from "../../../resources/sprites/unitExplosion.png";
+
+import bats from "../../../resources/sprites/halloween/bats.png";
+import bubble from "../../../resources/sprites/halloween/bubble.png";
+import ghost from "../../../resources/sprites/halloween/ghost.png";
+import minifireGreen from "../../../resources/sprites/halloween/minifireGreen.png";
+import shark from "../../../resources/sprites/halloween/shark.png";
+import skull from "../../../resources/sprites/halloween/skull.png";
+import skullNuke from "../../../resources/sprites/halloween/skullNuke.png";
+import miniSmokeAndFireGreen from "../../../resources/sprites/halloween/smokeAndFireGreen.png";
+import tentacle from "../../../resources/sprites/halloween/tentacle.png";
+import tornado from "../../../resources/sprites/halloween/tornado.png";
+
 import { Theme } from "../../core/configuration/Config";
 import { PlayerView } from "../../core/game/GameView";
 import { AnimatedSprite } from "./AnimatedSprite";
@@ -28,7 +34,7 @@ type AnimatedSpriteConfig = {
 
 const ANIMATED_SPRITE_CONFIG: Partial<Record<FxType, AnimatedSpriteConfig>> = {
   [FxType.MiniFire]: {
-    url: miniFire,
+    url: minifireGreen,
     frameWidth: 7,
     frameCount: 6,
     frameDuration: 100,
@@ -37,28 +43,28 @@ const ANIMATED_SPRITE_CONFIG: Partial<Record<FxType, AnimatedSpriteConfig>> = {
     originY: 11,
   },
   [FxType.MiniSmoke]: {
-    url: miniSmoke,
-    frameWidth: 11,
-    frameCount: 4,
-    frameDuration: 120,
+    url: ghost,
+    frameWidth: 10,
+    frameCount: 5,
+    frameDuration: 100,
     looping: true,
-    originX: 2,
+    originX: 4,
     originY: 10,
   },
   [FxType.MiniBigSmoke]: {
-    url: miniBigSmoke,
-    frameWidth: 24,
-    frameCount: 5,
+    url: bats,
+    frameWidth: 21,
+    frameCount: 6,
     frameDuration: 120,
     looping: true,
     originX: 9,
     originY: 14,
   },
   [FxType.MiniSmokeAndFire]: {
-    url: miniSmokeAndFire,
+    url: miniSmokeAndFireGreen,
     frameWidth: 24,
     frameCount: 5,
-    frameDuration: 120,
+    frameDuration: 90,
     looping: true,
     originX: 9,
     originY: 14,
@@ -90,15 +96,6 @@ const ANIMATED_SPRITE_CONFIG: Partial<Record<FxType, AnimatedSpriteConfig>> = {
     originX: 9,
     originY: 9,
   },
-  [FxType.BuildingExplosion]: {
-    url: buildingExplosion,
-    frameWidth: 17,
-    frameCount: 10,
-    frameDuration: 70,
-    looping: false,
-    originX: 8,
-    originY: 8,
-  },
   [FxType.SinkingShip]: {
     url: sinkingShip,
     frameWidth: 16,
@@ -108,14 +105,23 @@ const ANIMATED_SPRITE_CONFIG: Partial<Record<FxType, AnimatedSpriteConfig>> = {
     originX: 7,
     originY: 7,
   },
-  [FxType.Nuke]: {
-    url: nuke,
-    frameWidth: 60,
-    frameCount: 9,
+  [FxType.BuildingExplosion]: {
+    url: buildingExplosion,
+    frameWidth: 17,
+    frameCount: 10,
     frameDuration: 70,
     looping: false,
-    originX: 30,
-    originY: 30,
+    originX: 8,
+    originY: 8,
+  },
+  [FxType.Nuke]: {
+    url: skullNuke,
+    frameWidth: 42,
+    frameCount: 19,
+    frameDuration: 50,
+    looping: false,
+    originX: 20,
+    originY: 21,
   },
   [FxType.SAMExplosion]: {
     url: SAMExplosion,
@@ -127,16 +133,51 @@ const ANIMATED_SPRITE_CONFIG: Partial<Record<FxType, AnimatedSpriteConfig>> = {
     originY: 19,
   },
   [FxType.Conquest]: {
-    url: conquestSword,
-    frameWidth: 21,
-    frameCount: 10,
+    url: skull,
+    frameWidth: 14,
+    frameCount: 14,
     frameDuration: 90,
     looping: false,
-    originX: 10,
-    originY: 16,
+    originX: 7,
+    originY: 23,
+  },
+  [FxType.Tentacle]: {
+    url: tentacle,
+    frameWidth: 22,
+    frameCount: 26,
+    frameDuration: 90,
+    looping: false,
+    originX: 13,
+    originY: 28,
+  },
+  [FxType.Shark]: {
+    url: shark,
+    frameWidth: 25,
+    frameCount: 14,
+    frameDuration: 90,
+    looping: false,
+    originX: 13,
+    originY: 8,
+  },
+  [FxType.Bubble]: {
+    url: bubble,
+    frameWidth: 22,
+    frameCount: 13,
+    frameDuration: 80,
+    looping: false,
+    originX: 13,
+    originY: 8,
+  },
+  [FxType.Tornado]: {
+    url: tornado,
+    frameWidth: 30,
+    frameCount: 10,
+    frameDuration: 80,
+    looping: true,
+    originX: 11,
+    originY: 22,
   },
 };
-
 export class AnimatedSpriteLoader {
   private animatedSpriteImageMap: Map<FxType, HTMLCanvasElement> = new Map();
   // Do not color the same sprite twice

src/client/graphics/SpriteLoader.ts

@@ -1,6 +1,6 @@
 import { Colord } from "colord";
-import atomBombSprite from "../../../resources/sprites/atombomb.png";
-import hydrogenBombSprite from "../../../resources/sprites/hydrogenbomb.png";
+import miniPumpkin from "../../../resources/sprites/halloween/miniPumpkin.png";
+import pumpkin from "../../../resources/sprites/halloween/pumpkin.png";
 import mirvSprite from "../../../resources/sprites/mirv2.png";
 import samMissileSprite from "../../../resources/sprites/samMissile.png";
 import tradeShipSprite from "../../../resources/sprites/tradeship.png";
@@ -26,8 +26,8 @@ const SPRITE_CONFIG: Partial<Record<UnitType | TrainTypeSprite, string>> = {
   [UnitType.TransportShip]: transportShipSprite,
   [UnitType.Warship]: warshipSprite,
   [UnitType.SAMMissile]: samMissileSprite,
-  [UnitType.AtomBomb]: atomBombSprite,
-  [UnitType.HydrogenBomb]: hydrogenBombSprite,
+  [UnitType.AtomBomb]: miniPumpkin,
+  [UnitType.HydrogenBomb]: pumpkin,
   [UnitType.TradeShip]: tradeShipSprite,
   [UnitType.MIRV]: mirvSprite,
   [TrainTypeSprite.Engine]: trainEngineSprite,

src/client/graphics/fx/ConquestFx.ts

@@ -26,7 +26,6 @@ export function conquestFxFactory(
     x,
     y,
     FxType.Conquest,
-    2500,
   );
   const fadeAnimation = new FadeFx(swordAnimation, 0.1, 0.6);
   conquestFx.push(fadeAnimation);

src/client/graphics/fx/Fx.ts

@@ -16,4 +16,8 @@ export enum FxType {
   UnderConstruction = "UnderConstruction",
   Dust = "Dust",
   Conquest = "Conquest",
+  Tentacle = "Tentacle",
+  Shark = "Shark",
+  Bubble = "Bubble",
+  Tornado = "Tornado",
 }

src/client/graphics/fx/SpriteFx.ts

@@ -19,6 +19,35 @@ function fadeInOut(
     return 1 - f * f;
   }
 }
+/**
+ * Move a sprite around
+ */
+export class MoveSpriteFx implements Fx {
+  private originX: number;
+  private originY: number;
+  constructor(
+    private fxToMove: SpriteFx,
+    private toX: number,
+    private toY: number,
+    private fadeIn: number = 0.1,
+    private fadeOut: number = 0.9,
+  ) {
+    this.originX = fxToMove.x;
+    this.originY = fxToMove.y;
+  }
+
+  renderTick(duration: number, ctx: CanvasRenderingContext2D): boolean {
+    const t = this.fxToMove.getElapsedTime() / this.fxToMove.getDuration();
+    this.fxToMove.x = Math.floor(this.originX * (1 - t) + this.toX * t);
+    this.fxToMove.y = Math.floor(this.originY * (1 - t) + this.toY * t);
+    ctx.save();
+    ctx.globalAlpha = fadeInOut(t, this.fadeIn, this.fadeOut);
+    const result = this.fxToMove.renderTick(duration, ctx);
+    ctx.restore();
+    return result;
+  }
+}
+
 /**
  * Fade in/out another FX
  */
@@ -49,8 +78,8 @@ export class SpriteFx implements Fx {
   protected waitToTheEnd = false;
   constructor(
     animatedSpriteLoader: AnimatedSpriteLoader,
-    protected x: number,
-    protected y: number,
+    public x: number,
+    public y: number,
     fxType: FxType,
     duration?: number,
     owner?: PlayerView,

src/client/graphics/layers/FxLayer.ts

@@ -13,7 +13,7 @@ import { AnimatedSpriteLoader } from "../AnimatedSpriteLoader";
 import { conquestFxFactory } from "../fx/ConquestFx";
 import { Fx, FxType } from "../fx/Fx";
 import { nukeFxFactory, ShockwaveFx } from "../fx/NukeFx";
-import { SpriteFx } from "../fx/SpriteFx";
+import { FadeFx, MoveSpriteFx, SpriteFx } from "../fx/SpriteFx";
 import { TargetFx } from "../fx/TargetFx";
 import { TextFx } from "../fx/TextFx";
 import { UnitExplosionFx } from "../fx/UnitExplosionFx";
@@ -21,6 +21,8 @@ import { Layer } from "./Layer";
 export class FxLayer implements Layer {
   private canvas: HTMLCanvasElement;
   private context: CanvasRenderingContext2D;
+  private lastRandomEvent: number = 0;
+  private randomEventRate: number = 8;
 
   private lastRefresh: number = 0;
   private refreshRate: number = 10;
@@ -41,6 +43,14 @@ export class FxLayer implements Layer {
   }
 
   tick() {
+    if (!this.game.config().userSettings()?.fxLayer()) {
+      return;
+    }
+    this.lastRandomEvent += 1;
+    if (this.lastRandomEvent > this.randomEventRate) {
+      this.lastRandomEvent = 0;
+      this.randomEvent();
+    }
     this.manageBoatTargetFx();
     this.game
       .updatesSinceLastTick()
@@ -139,6 +149,72 @@ export class FxLayer implements Layer {
     this.allFx.push(textFx);
   }
 
+  randomEvent() {
+    const randX = Math.floor(Math.random() * this.game.width());
+    const randY = Math.floor(Math.random() * this.game.height());
+    const ref = this.game.ref(randX, randY);
+    if (this.game.isOcean(ref) && !this.game.isShoreline(ref)) {
+      const animation = Math.floor(Math.random() * 4);
+      if (animation === 0) {
+        const fx = new SpriteFx(
+          this.animatedSpriteLoader,
+          randX,
+          randY,
+          FxType.Shark,
+        );
+        this.allFx.push(fx);
+      } else if (animation === 1) {
+        const fx = new SpriteFx(
+          this.animatedSpriteLoader,
+          randX,
+          randY,
+          FxType.Bubble,
+        );
+        this.allFx.push(fx);
+      } else if (animation === 2) {
+        const fx = new MoveSpriteFx(
+          new SpriteFx(
+            this.animatedSpriteLoader,
+            randX,
+            randY,
+            FxType.Tornado,
+            6000,
+          ),
+          randX - 40,
+          randY,
+          0.1,
+          0.8,
+        );
+        this.allFx.push(fx);
+      } else if (animation === 3) {
+        const fx = new FadeFx(
+          new SpriteFx(
+            this.animatedSpriteLoader,
+            randX,
+            randY,
+            FxType.Tentacle,
+          ),
+          0.1,
+          0.8,
+        );
+        this.allFx.push(fx);
+      }
+    } else {
+      const ghost = new FadeFx(
+        new SpriteFx(
+          this.animatedSpriteLoader,
+          randX,
+          randY,
+          FxType.MiniSmoke,
+          4000,
+        ),
+        0.1,
+        0.8,
+      );
+      this.allFx.push(ghost);
+    }
+  }
+
   onUnitEvent(unit: UnitView) {
     switch (unit.type()) {
       case UnitType.TransportShip: {