Add destructed structure FX (#2210)

## Description:

New FX on building destruction

Icon level:

https://github.com/user-attachments/assets/0ba5e557-a5d7-436f-8a58-2843d4c99332

Pixel art level:

https://github.com/user-attachments/assets/12002df6-eb46-4853-b84f-4f81ce7c3528


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

IngloriousTom

---------

Co-authored-by: Evan <evanpelle@gmail.com>

src/client/graphics/AnimatedSpriteLoader.ts

@@ -1,4 +1,5 @@
 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";
@@ -89,6 +90,15 @@ 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,

src/client/graphics/fx/Fx.ts

@@ -9,6 +9,7 @@ export enum FxType {
   MiniSmokeAndFire = "MiniSmokeAndFire",
   MiniExplosion = "MiniExplosion",
   UnitExplosion = "UnitExplosion",
+  BuildingExplosion = "BuildingExplosion",
   SinkingShip = "SinkingShip",
   Nuke = "Nuke",
   SAMExplosion = "SAMExplosion",

src/client/graphics/layers/FxLayer.ts

@@ -151,6 +151,14 @@ export class FxLayer implements Layer {
       case UnitType.Train:
         this.onTrainEvent(unit);
         break;
+      case UnitType.DefensePost:
+      case UnitType.City:
+      case UnitType.Port:
+      case UnitType.MissileSilo:
+      case UnitType.SAMLauncher:
+      case UnitType.Factory:
+        this.onStructureEvent(unit);
+        break;
     }
   }
 
@@ -246,6 +254,20 @@ export class FxLayer implements Layer {
     }
   }
 
+  onStructureEvent(unit: UnitView) {
+    if (!unit.isActive()) {
+      const x = this.game.x(unit.lastTile());
+      const y = this.game.y(unit.lastTile());
+      const explosion = new SpriteFx(
+        this.animatedSpriteLoader,
+        x,
+        y,
+        FxType.BuildingExplosion,
+      );
+      this.allFx.push(explosion);
+    }
+  }
+
   onNukeEvent(unit: UnitView, radius: number) {
     if (!unit.isActive()) {
       if (!unit.reachedTarget()) {

src/core/game/Game.ts

@@ -202,6 +202,7 @@ const _structureTypes: ReadonlySet<UnitType> = new Set([
   UnitType.SAMLauncher,
   UnitType.MissileSilo,
   UnitType.Port,
+  UnitType.Factory,
 ]);
 
 export function isStructureType(type: UnitType): boolean {