Change animation steps for moving

src/constants/textures/monsters.ts

@@ -2082,11 +2082,11 @@ const monsterDir = `${config.assetsPath}/monsters`;
 
 export const monsterTextures: TextureMap<MONSTER_SPRITES> = slowFrames(
   {
-    [TEXTURES.CBKNIG]: {
-      url: `${monsterDir}/CNOSFE.webp`,
+    [TEXTURES.CAELEM]: {
+      url: `${monsterDir}/CAELEM.webp`,
       width: 220,
       height: 180,
-      textures: frames[TEXTURES['CBKNIG']]!,
+      textures: frames[TEXTURES['CAELEM']]!,
     },
 
     [TEXTURES.CABEHE]: {

src/constants/units.ts

@@ -16,19 +16,19 @@ export const leftHeroArmy: Array<Creature> = [
   {
     monsterId: 61,
     position: new Hexagon(-7, 0, 7),
-    animation: { sprite: TEXTURES.CBKNIG, size: { width: 240, height: 200, offsetY: 55 } },
-    quantity: 12,
+    animation: { sprite: TEXTURES.CAELEM, size: { width: 240, height: 200, offsetY: 55 } },
+    quantity: 90,
   },
   {
     monsterId: 61,
     position: new Hexagon(-5, -4, 9),
-    animation: { sprite: TEXTURES.CBKNIG, size: { width: 240, height: 200, offsetY: 55 } },
+    animation: { sprite: TEXTURES.CAELEM, size: { width: 240, height: 200, offsetY: 55 } },
     quantity: 1,
   },
   {
     monsterId: 61,
     position: new Hexagon(-9, 4, 5),
-    animation: { sprite: TEXTURES.CADEVL, size: { width: 240, height: 200, offsetY: 50 } },
+    animation: { sprite: TEXTURES.CADEVL, size: { width: 240, height: 200, offsetY: 55 } },
     quantity: 4,
   },
 ];
@@ -37,7 +37,7 @@ export const rightHeroArmy: Array<Creature> = [
   {
     monsterId: 61,
     position: new Hexagon(-3, 0, 3),
-    animation: { sprite: TEXTURES.CBKNIG, size: { width: 240, height: 200, offsetY: 50 } },
+    animation: { sprite: TEXTURES.CAELEM, size: { width: 240, height: 200, offsetY: 55 } },
     quantity: 5,
   },
 ];

src/view/objects/BattleMonster.ts

@@ -13,6 +13,7 @@ class BattleMonsterView implements Observer {
   public sprite: MonsterSprite;
 
   private animationIndex: number = 0;
+  private isMovingStarted: boolean = false;
 
   constructor(controller: BattleMonster, ctx: CanvasRenderingContext2D) {
     this.ctx = ctx;
@@ -37,13 +38,19 @@ class BattleMonsterView implements Observer {
     const { animation } = this.controller.model;
     const { width, height, offsetY } = animation.size;
 
-    if (this.sprite.currentAnimation !== MONSTER_SPRITES['start moving']) {
+    if (!this.isMovingStarted) {
       this.sprite.setAnimation(MONSTER_SPRITES['start moving']);
-      this.sprite.setNextAnimation(MONSTER_SPRITES.moving);
+      this.isMovingStarted = true;
     }
 
+    this.sprite.setNextAnimation(MONSTER_SPRITES.moving);
+
     const pixel = animationPath[this.animationIndex];
-    if (!pixel) return this.endAnimation();
+    if (!pixel) {
+      this.sprite.setAnimation(MONSTER_SPRITES['stop moving']);
+      this.isMovingStarted = false;
+      return this.endAnimation();
+    }
 
     const x = pixel.x - width / 2;
     const y = pixel.y - height + offsetY;
@@ -124,8 +131,7 @@ class BattleMonsterView implements Observer {
     const x = pixel.x - width / 2;
     const y = pixel.y - height + offsetY;
 
-    // TODO: Dead sprite
-    this.sprite.setAnimation(MONSTER_SPRITES.defend);
+    this.sprite.setAnimation(MONSTER_SPRITES.death, { lastFrame: true });
     this.sprite.drawFrame(this.ctx, x, y, width, height);
   }
 

src/view/sprites/MonsterSprite.ts

@@ -34,10 +34,10 @@ class MonsterSprite extends Sprite<Texture<MONSTER_SPRITES>> {
     }
   }
 
-  setAnimation(sprite: MONSTER_SPRITES) {
+  setAnimation(sprite: MONSTER_SPRITES, options?: { lastFrame?: boolean }) {
     if (!this.options.textures?.[sprite]) return;
 
-    this.currentFrame = 0;
+    this.currentFrame = options?.lastFrame ? this.animationSteps.x.length - 1 : 0;
     this.currentAnimation = sprite;
     this.nextAnimation = MONSTER_SPRITES.standing;