@rpgjs/action-battle 5.0.0-beta.1 → 5.0.0-beta.3

package/dist/server/index5.js

@@ -1,30 +1,37 @@
-const normalizeMaskRows = (mask) => {
-  if (!mask) return ["#"];
-  if (Array.isArray(mask)) return mask;
-  return mask.trim().split("\n").map((row) => row.replace(/\r/g, ""));
+//#region src/targeting.ts
+var normalizeMaskRows = (mask) => {
+	if (!mask) return ["#"];
+	if (Array.isArray(mask)) return mask;
+	return mask.trim().split("\n").map((row) => row.replace(/\r/g, ""));
 };
-const parseAoeMask = (mask) => {
-  const rows = normalizeMaskRows(mask);
-  const height = rows.length;
-  const width = rows.reduce((max, row) => Math.max(max, row.length), 0);
-  const centerX = Math.floor(width / 2);
-  const centerY = Math.floor(height / 2);
-  const cells = [];
-  rows.forEach((row, y) => {
-    for (let x = 0; x < row.length; x++) {
-      const char = row[x];
-      if (char && char !== "." && char !== " ") {
-        cells.push({ dx: x - centerX, dy: y - centerY });
-      }
-    }
-  });
-  if (cells.length === 0) {
-    cells.push({ dx: 0, dy: 0 });
-  }
-  return { width, height, centerX, centerY, cells };
-};
-const manhattanDistance = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
-export {
-  manhattanDistance,
-  parseAoeMask
+var parseAoeMask = (mask) => {
+	const rows = normalizeMaskRows(mask);
+	const height = rows.length;
+	const width = rows.reduce((max, row) => Math.max(max, row.length), 0);
+	const centerX = Math.floor(width / 2);
+	const centerY = Math.floor(height / 2);
+	const cells = [];
+	rows.forEach((row, y) => {
+		for (let x = 0; x < row.length; x++) {
+			const char = row[x];
+			if (char && char !== "." && char !== " ") cells.push({
+				dx: x - centerX,
+				dy: y - centerY
+			});
+		}
+	});
+	if (cells.length === 0) cells.push({
+		dx: 0,
+		dy: 0
+	});
+	return {
+		width,
+		height,
+		centerX,
+		centerY,
+		cells
+	};
 };
+var manhattanDistance = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+//#endregion
+export { manhattanDistance, parseAoeMask };

package/dist/server/index6.js

@@ -0,0 +1,376 @@
+import { playActionBattleAnimation } from "./index2.js";
+import { normalizeActionBattleOptions, setActionBattleOptions } from "./index3.js";
+import { DEFAULT_KNOCKBACK } from "./index4.js";
+import { manhattanDistance, parseAoeMask } from "./index5.js";
+import { RpgEvent } from "@rpgjs/server";
+import { Control, defineModule } from "@rpgjs/common";
+//#region src/server.ts
+var ACTION_BATTLE_ACTION_BAR_GUI_ID = "action-battle-action-bar";
+/**
+* Default player attack hitboxes offsets for each direction
+* 
+* These hitboxes define the attack areas relative to the player's position
+* for each cardinal direction. They are converted to absolute coordinates
+* when creating the moving hitbox.
+*/
+var DEFAULT_PLAYER_ATTACK_HITBOXES = {
+	up: {
+		offsetX: -16,
+		offsetY: -48,
+		width: 32,
+		height: 32
+	},
+	down: {
+		offsetX: -16,
+		offsetY: 16,
+		width: 32,
+		height: 32
+	},
+	left: {
+		offsetX: -48,
+		offsetY: -16,
+		width: 32,
+		height: 32
+	},
+	right: {
+		offsetX: 16,
+		offsetY: -16,
+		width: 32,
+		height: 32
+	},
+	default: {
+		offsetX: 0,
+		offsetY: -32,
+		width: 32,
+		height: 32
+	}
+};
+/**
+* Get knockback force from player's equipped weapon
+* 
+* Retrieves the knockbackForce property from the player's equipped weapon.
+* Falls back to DEFAULT_KNOCKBACK.force if no weapon or property is set.
+* 
+* @param player - The player to get weapon knockback from
+* @returns Knockback force value
+* 
+* @example
+* ```ts
+* // Player with weapon having knockbackForce: 80
+* const force = getPlayerWeaponKnockbackForce(player); // 80
+* 
+* // No weapon equipped
+* const force = getPlayerWeaponKnockbackForce(player); // 50 (default)
+* ```
+*/
+function getPlayerWeaponKnockbackForce(player) {
+	try {
+		const equipments = player.equipments?.() || [];
+		for (const item of equipments) {
+			const itemData = player.databaseById?.(item.id());
+			if (itemData?._type === "weapon" && itemData.knockbackForce !== void 0) return itemData.knockbackForce;
+		}
+	} catch {}
+	return DEFAULT_KNOCKBACK.force;
+}
+/**
+* Apply hit from player to target (event with AI)
+* 
+* Handles damage calculation, knockback based on weapon, and visual effects.
+* Can be customized using hooks.
+* 
+* @param player - The attacking player
+* @param target - The event being hit
+* @param hooks - Optional hooks for customizing hit behavior
+* @returns Hit result if AI exists, undefined otherwise
+* 
+* @example
+* ```ts
+* // Basic hit
+* const result = applyPlayerHitToEvent(player, event);
+* 
+* // With custom hooks
+* const result = applyPlayerHitToEvent(player, event, {
+*   onBeforeHit(result) {
+*     result.knockbackForce *= 2; // Double knockback
+*     return result;
+*   },
+*   onAfterHit(result) {
+*     if (result.defeated) {
+*       player.gold += 10;
+*     }
+*   }
+* });
+* ```
+*/
+function applyPlayerHitToEvent(player, target, hooks) {
+	const ai = target.battleAi;
+	if (!ai) return void 0;
+	const knockbackForce = getPlayerWeaponKnockbackForce(player);
+	const defeated = ai.takeDamage(player);
+	const dx = target.x() - player.x();
+	const dy = target.y() - player.y();
+	const distance = Math.sqrt(dx * dx + dy * dy);
+	let hitResult = {
+		damage: 0,
+		knockbackForce,
+		knockbackDuration: DEFAULT_KNOCKBACK.duration,
+		defeated,
+		attacker: player,
+		target
+	};
+	if (hooks?.onBeforeHit) {
+		const modified = hooks.onBeforeHit(hitResult);
+		if (modified) hitResult = modified;
+	}
+	if (!hitResult.defeated && hitResult.knockbackForce > 0 && distance > 0) {
+		const knockbackDirection = {
+			x: dx / distance,
+			y: dy / distance
+		};
+		target.knockback(knockbackDirection, hitResult.knockbackForce, hitResult.knockbackDuration);
+	}
+	if (hooks?.onAfterHit) hooks.onAfterHit(hitResult);
+	return hitResult;
+}
+var resolveSignal = (value) => typeof value === "function" ? value() : value;
+var resolveItemData = (player, itemId) => {
+	try {
+		return player.databaseById?.(itemId);
+	} catch {
+		return null;
+	}
+};
+var resolveSkillData = (player, skillId) => {
+	try {
+		return player.databaseById?.(skillId);
+	} catch {
+		return null;
+	}
+};
+var resolveSkillTargeting = (player, skillId, options) => {
+	const skillsOptions = options.skills;
+	const skillData = resolveSkillData(player, skillId);
+	if (skillsOptions?.getTargeting) return skillsOptions.getTargeting(skillData);
+	const range = skillData?.range ?? skillData?.targeting?.range ?? skillData?.targeting?.distance;
+	const aoeMask = skillData?.aoeMask ?? skillData?.targeting?.aoeMask ?? skillData?.targeting?.mask;
+	if (range === void 0 && aoeMask === void 0) return null;
+	return {
+		range: range ?? 0,
+		aoeMask
+	};
+};
+var normalizeMaskRows = (mask) => {
+	if (!mask) return [];
+	if (Array.isArray(mask)) return mask;
+	return mask.trim().split("\n").map((row) => row.replace(/\r/g, ""));
+};
+var buildActionBarData = (player, options) => {
+	return {
+		items: (player.items?.() || []).map((item) => {
+			const id = item.id?.() ?? item.id;
+			const data = resolveItemData(player, id);
+			const name = resolveSignal(data?.name) ?? resolveSignal(item.name) ?? id;
+			const description = resolveSignal(data?.description) ?? resolveSignal(item.description) ?? "";
+			const icon = resolveSignal(data?.icon) ?? resolveSignal(item.icon);
+			const quantity = resolveSignal(item.quantity) ?? 1;
+			const consumable = resolveSignal(data?.consumable);
+			const itemType = resolveSignal(data?._type);
+			return {
+				id,
+				name,
+				description,
+				icon,
+				quantity,
+				usable: quantity > 0 && consumable !== false && (itemType ? itemType === "item" : true)
+			};
+		}),
+		skills: (player.skills?.() || []).map((skill) => {
+			const id = skill.id?.() ?? skill.id;
+			const data = resolveSkillData(player, id) || skill;
+			const name = resolveSignal(data?.name) ?? resolveSignal(skill.name) ?? id;
+			const description = resolveSignal(data?.description) ?? resolveSignal(skill.description) ?? "";
+			const icon = resolveSignal(data?.icon) ?? resolveSignal(skill.icon);
+			const spCost = resolveSignal(data?.spCost) ?? resolveSignal(skill.spCost) ?? 0;
+			const usable = spCost <= player.sp;
+			const targeting = resolveSkillTargeting(player, id, options);
+			const skillEntry = {
+				id,
+				name,
+				description,
+				icon,
+				spCost,
+				usable,
+				range: targeting?.range ?? 0
+			};
+			if (targeting) {
+				const mask = targeting.aoeMask ?? options.skills?.defaultAoeMask;
+				if (mask) skillEntry.aoeMask = normalizeMaskRows(mask);
+			}
+			return skillEntry;
+		})
+	};
+};
+var ensureActionBarGui = (player, options) => {
+	const gui = player.getGui?.("action-battle-action-bar") || player.gui("action-battle-action-bar");
+	if (!gui.__actionBattleReady) {
+		gui.__actionBattleReady = true;
+		gui.on("useItem", ({ id }) => {
+			try {
+				player.useItem(id);
+			} catch {}
+			gui.update(buildActionBarData(player, options));
+		});
+		gui.on("useSkill", ({ id, target }) => {
+			handleActionBattleSkillUse(player, id, target, options);
+			gui.update(buildActionBarData(player, options));
+		});
+		gui.on("refresh", () => {
+			gui.update(buildActionBarData(player, options));
+		});
+	}
+	return gui;
+};
+var openActionBattleActionBar = (player, rawOptions = {}) => {
+	const options = normalizeActionBattleOptions(rawOptions);
+	ensureActionBarGui(player, options).open(buildActionBarData(player, options));
+};
+var updateActionBattleActionBar = (player, rawOptions = {}) => {
+	const options = normalizeActionBattleOptions(rawOptions);
+	const gui = player.getGui?.(ACTION_BATTLE_ACTION_BAR_GUI_ID);
+	if (gui) gui.update(buildActionBarData(player, options));
+};
+var getTileSize = (map) => ({
+	width: map?.tileWidth ?? 32,
+	height: map?.tileHeight ?? 32
+});
+var getEntityTile = (entity, tileSize) => {
+	const hitbox = entity.hitbox?.() || {
+		w: tileSize.width,
+		h: tileSize.height
+	};
+	return {
+		x: Math.floor((entity.x() + hitbox.w / 2) / tileSize.width),
+		y: Math.floor((entity.y() + hitbox.h / 2) / tileSize.height)
+	};
+};
+var handleActionBattleSkillUse = (player, skillId, target, options) => {
+	const skillData = resolveSkillData(player, skillId);
+	const map = player.getCurrentMap();
+	if (!map) {
+		playActionBattleAnimation("castSkill", player, options.animations, { skill: skillData });
+		player.useSkill(skillId);
+		return;
+	}
+	const targeting = resolveSkillTargeting(player, skillId, options);
+	if (!targeting || !target) {
+		playActionBattleAnimation("castSkill", player, options.animations, { skill: skillData });
+		player.useSkill(skillId);
+		return;
+	}
+	const tileSize = getTileSize(map);
+	const origin = getEntityTile(player, tileSize);
+	const targetTile = {
+		x: target.x,
+		y: target.y
+	};
+	if (manhattanDistance(origin, targetTile) > targeting.range) return;
+	const mask = parseAoeMask(targeting.aoeMask || options.skills?.defaultAoeMask);
+	const affected = /* @__PURE__ */ new Set();
+	mask.cells.forEach((cell) => {
+		const x = targetTile.x + cell.dx;
+		const y = targetTile.y + cell.dy;
+		affected.add(`${x},${y}`);
+	});
+	const targets = [];
+	const affects = options.targeting?.affects || "events";
+	if (affects === "events" || affects === "both") map.getEvents().forEach((event) => {
+		const tile = getEntityTile(event, tileSize);
+		if (affected.has(`${tile.x},${tile.y}`)) targets.push(event);
+	});
+	if (affects === "players" || affects === "both") map.getPlayers().forEach((other) => {
+		if (other.id === player.id) return;
+		const tile = getEntityTile(other, tileSize);
+		if (affected.has(`${tile.x},${tile.y}`)) targets.push(other);
+	});
+	if (!options.targeting?.allowEmptyTarget && targets.length === 0) return;
+	playActionBattleAnimation("castSkill", player, options.animations, {
+		skill: skillData,
+		target: targets[0]
+	});
+	player.useSkill(skillId, targets);
+};
+var createActionBattleServer = (rawOptions = {}) => {
+	const options = normalizeActionBattleOptions(rawOptions);
+	setActionBattleOptions(options);
+	return defineModule({
+		player: {
+			/**
+			* Handle player input for combat actions
+			*
+			* When a player presses the action key, create an attack hitbox
+			* that can damage AI enemies within range and knockback the event.
+			* Knockback force is based on the player's equipped weapon.
+			* Triggers attack animation and visual effects.
+			*
+			* @param player - The player performing the action
+			* @param input - Input data containing pressed keys
+			*/
+			onInput(player, input) {
+				if (input.action == Control.Action) {
+					playActionBattleAnimation("attack", player, options.animations);
+					const playerX = player.x();
+					const playerY = player.y();
+					const hitboxConfig = DEFAULT_PLAYER_ATTACK_HITBOXES[player.getDirection()] || DEFAULT_PLAYER_ATTACK_HITBOXES.default;
+					const hitboxes = [{
+						x: playerX + hitboxConfig.offsetX,
+						y: playerY + hitboxConfig.offsetY,
+						width: hitboxConfig.width,
+						height: hitboxConfig.height
+					}];
+					player.getCurrentMap()?.createMovingHitbox(hitboxes, { speed: 3 }).subscribe({ next(hits) {
+						hits.forEach((hit) => {
+							if (hit instanceof RpgEvent) {
+								if (applyPlayerHitToEvent(player, hit)?.defeated) console.log(`Player ${player.id} defeated AI ${hit.id}`);
+							}
+						});
+					} });
+				}
+			},
+			onConnected(player) {
+				if (options.ui?.actionBar?.enabled && options.ui?.actionBar?.autoOpen) openActionBattleActionBar(player, options);
+			}
+		},
+		event: {
+			/**
+			* Handle player detection when entering AI vision
+			*
+			* Called when a player enters an AI event's vision range.
+			* The AI will start pursuing and attacking the player.
+			*
+			* @param event - The AI event
+			* @param player - The player entering vision
+			* @param shape - The vision shape
+			*/
+			onDetectInShape(event, player, shape) {
+				event.battleAi?.onDetectInShape(player, shape);
+			},
+			/**
+			* Handle player leaving AI vision
+			*
+			* Called when a player leaves an AI event's vision range.
+			* The AI will stop pursuing the player.
+			*
+			* @param event - The AI event
+			* @param player - The player leaving vision
+			* @param shape - The vision shape
+			*/
+			onDetectOutShape(event, player, shape) {
+				event.battleAi?.onDetectOutShape(player, shape);
+			}
+		}
+	});
+};
+var server_default = createActionBattleServer();
+//#endregion
+export { ACTION_BATTLE_ACTION_BAR_GUI_ID, DEFAULT_PLAYER_ATTACK_HITBOXES, applyPlayerHitToEvent, createActionBattleServer, server_default as default, getPlayerWeaponKnockbackForce, openActionBattleActionBar, updateActionBattleActionBar };

package/dist/server.d.ts

@@ -1,4 +1,4 @@
-import { RpgEvent, RpgPlayer } from '@rpgjs/server';
+import { RpgEvent, RpgPlayer, RpgServer } from '@rpgjs/server';
 import { HitResult, ApplyHitHooks } from './ai.server';
 import { ActionBattleOptions } from './types';
 export declare const ACTION_BATTLE_ACTION_BAR_GUI_ID = "action-battle-action-bar";
@@ -93,6 +93,6 @@ export declare function getPlayerWeaponKnockbackForce(player: RpgPlayer): number
 export declare function applyPlayerHitToEvent(player: RpgPlayer, target: RpgEvent, hooks?: ApplyHitHooks): HitResult | undefined;
 export declare const openActionBattleActionBar: (player: RpgPlayer, rawOptions?: ActionBattleOptions) => void;
 export declare const updateActionBattleActionBar: (player: RpgPlayer, rawOptions?: ActionBattleOptions) => void;
-export declare const createActionBattleServer: (rawOptions?: ActionBattleOptions) => any;
-declare const _default: any;
+export declare const createActionBattleServer: (rawOptions?: ActionBattleOptions) => RpgServer;
+declare const _default: RpgServer;
 export default _default;

package/dist/ui/state.d.ts

@@ -9,9 +9,9 @@ export interface ActionBattleTargetingState {
     };
     aoeMask: string[] | string;
 }
-export declare const actionBattleUiOptions: any;
-export declare const actionBattleSkillOptions: any;
-export declare const actionBattleTargetingState: any;
+export declare const actionBattleUiOptions: import('canvasengine').WritableObjectSignal<import('..').ActionBattleUiOptions>;
+export declare const actionBattleSkillOptions: import('canvasengine').WritableObjectSignal<import('../types').ActionBattleSkillOptions>;
+export declare const actionBattleTargetingState: import('canvasengine').WritableObjectSignal<ActionBattleTargetingState>;
 export declare const setActionBattleOptions: (options?: ActionBattleOptions) => void;
 export declare const startTargeting: (skill: ActionBattleActionBarSkill) => void;
 export declare const stopTargeting: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/action-battle",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -23,10 +23,10 @@
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "peerDependencies": {
     "@canvasengine/presets": "*",
-    "@rpgjs/client": "5.0.0-beta.1",
-    "@rpgjs/common": "5.0.0-beta.1",
-    "@rpgjs/server": "5.0.0-beta.1",
-    "@rpgjs/vite": "5.0.0-beta.1",
+    "@rpgjs/client": "5.0.0-beta.3",
+    "@rpgjs/common": "5.0.0-beta.3",
+    "@rpgjs/server": "5.0.0-beta.3",
+    "@rpgjs/vite": "5.0.0-beta.3",
     "canvasengine": "*"
   },
   "publishConfig": {

package/src/ai.server.ts

@@ -1,9 +1,41 @@
 import { MAXHP, RpgEvent, RpgPlayer } from "@rpgjs/server";
+import {
+  getActionBattleAnimationRemovalDelay,
+  playActionBattleAnimation,
+} from "./animations";
+import { getActionBattleOptions } from "./config";
+import type { ActionBattleAnimationOptions } from "./types";
 
 type RpgEventWithBattleAi = RpgEvent & {
   battleAi: BattleAi;
 };
 
+export interface BattleAiOptions {
+  enemyType?: EnemyType;
+  attackCooldown?: number;
+  visionRange?: number;
+  attackRange?: number;
+  dodgeChance?: number;
+  dodgeCooldown?: number;
+  fleeThreshold?: number;
+  attackSkill?: any;
+  attackPatterns?: AttackPattern[];
+  patrolWaypoints?: Array<{ x: number; y: number }>;
+  groupBehavior?: boolean;
+  moveToCooldown?: number;
+  retreatCooldown?: number;
+  behavior?: {
+    baseScore?: number;
+    updateInterval?: number;
+    minStateDuration?: number;
+    assaultThreshold?: number;
+    retreatThreshold?: number;
+  };
+  animations?: ActionBattleAnimationOptions;
+  /** Callback called when the AI is defeated */
+  onDefeated?: (event: RpgEvent, attacker?: RpgPlayer) => void;
+}
+
 /**
  * Hit result data returned after applying damage
  * 
@@ -258,6 +290,7 @@ export class BattleAi {
   // Attack configuration
   private attackSkill: any | null; // Skill to use for attacks
   private attackPatterns: AttackPattern[];
+  private animations?: ActionBattleAnimationOptions;
   private comboCount: number = 0;
   private comboMax: number = 3;
   private chargingAttack: boolean = false;
@@ -327,30 +360,7 @@ export class BattleAi {
    */
   constructor(
     event: RpgEventWithBattleAi,
-    options: {
-      enemyType?: EnemyType;
-      attackCooldown?: number;
-      visionRange?: number;
-      attackRange?: number;
-      dodgeChance?: number;
-      dodgeCooldown?: number;
-      fleeThreshold?: number;
-      attackSkill?: any;
-      attackPatterns?: AttackPattern[];
-      patrolWaypoints?: Array<{ x: number; y: number }>;
-      groupBehavior?: boolean;
-      moveToCooldown?: number;
-      retreatCooldown?: number;
-      behavior?: {
-        baseScore?: number;
-        updateInterval?: number;
-        minStateDuration?: number;
-        assaultThreshold?: number;
-        retreatThreshold?: number;
-      };
-      /** Callback called when the AI is defeated */
-      onDefeated?: (event: RpgEvent, attacker?: RpgPlayer) => void;
-    } = {}
+    options: BattleAiOptions = {}
   ) {
     event.battleAi = this;
     this.event = event;
@@ -361,6 +371,10 @@ export class BattleAi {
 
     // Store attack skill reference
     this.attackSkill = options.attackSkill || null;
+    this.animations = {
+      ...getActionBattleOptions().animations,
+      ...options.animations,
+    };
 
     // Initialize attack patterns
     this.attackPatterns = options.attackPatterns || [
@@ -867,11 +881,17 @@ export class BattleAi {
     if (!this.target) return;
 
     this.faceTarget();
-    this.event.setGraphicAnimation('attack', 1);
+    playActionBattleAnimation("attack", this.event, this.animations, {
+      target: this.target,
+    });
 
     // Use skill if available
     if (this.attackSkill) {
       try {
+        playActionBattleAnimation("castSkill", this.event, this.animations, {
+          skill: this.attackSkill,
+          target: this.target,
+        });
         this.event.useSkill(this.attackSkill, this.target);
       } catch (e) {
         // Skill failed (no SP, etc.) - fall back to basic attack
@@ -1066,7 +1086,15 @@ export class BattleAi {
 
     this.chargingAttack = true;
     this.faceTarget();
-    this.event.setGraphicAnimation('attack', 2);
+    playActionBattleAnimation(
+      "attack",
+      this.event,
+      this.animations,
+      {
+        target: this.target,
+      },
+      { repeat: 2 }
+    );
 
     setTimeout(() => {
       if (!this.target || this.state !== AiState.Combat) {
@@ -1077,6 +1105,10 @@ export class BattleAi {
       // Charged attacks can use a stronger skill or wider hitbox
       if (this.attackSkill) {
         try {
+          playActionBattleAnimation("castSkill", this.event, this.animations, {
+            skill: this.attackSkill,
+            target: this.target,
+          });
           this.event.useSkill(this.attackSkill, this.target);
         } catch (e) {
           this.performBasicHitbox();
@@ -1093,7 +1125,9 @@ export class BattleAi {
    * Perform zone attack (360 degrees)
    */
   private performZoneAttack() {
-    this.event.setGraphicAnimation('attack', 1);
+    playActionBattleAnimation("attack", this.event, this.animations, {
+      target: this.target ?? undefined,
+    });
 
     const eventX = this.event.x();
     const eventY = this.event.y();
@@ -1439,6 +1473,9 @@ export class BattleAi {
       cycles: 1
     });
     this.event.showHit(`-${damage}`);
+    playActionBattleAnimation("hurt", this.event, this.animations, {
+      attacker,
+    });
 
     // Track damage
     this.recentDamageTaken += damage;
@@ -1468,13 +1505,27 @@ export class BattleAi {
    * and removes the event from the map.
    */
   private kill(attacker?: RpgPlayer) {
+    const dieAnimation = playActionBattleAnimation(
+      "die",
+      this.event,
+      this.animations,
+      {
+        attacker,
+      }
+    );
+    const removeDelay = getActionBattleAnimationRemovalDelay(dieAnimation);
+
     // Call onDefeated hook before cleanup
     if (this.onDefeatedCallback) {
       this.onDefeatedCallback(this.event, attacker);
     }
     
     this.destroy();
-    this.event.remove();
+    if (removeDelay > 0) {
+      setTimeout(() => this.event.remove(), removeDelay);
+    } else {
+      this.event.remove();
+    }
   }
 
   /**