@rpgjs/action-battle 5.0.0-alpha.32 → 5.0.0-alpha.35

package/README.md

@@ -157,8 +157,9 @@ new BattleAi(event, {
   groupBehavior: true,
   
   // Callback when AI is defeated
-  onDefeated: (event) => {
-    console.log(`${event.name()} was defeated!`);
+  onDefeated: (event, attacker) => {
+    const name = attacker?.name?.() ?? "Unknown";
+    console.log(`${event.name()} was defeated by ${name}!`);
   }
 });
 ```
@@ -645,7 +646,7 @@ console.log(`Player knockback force: ${force}`);
 
 ## onDefeated Hook
 
-The `onDefeated` callback is triggered when an AI enemy is killed. Use it to:
+The `onDefeated` callback is triggered when an AI enemy is killed. It receives the defeated event and the player who landed the killing blow (if available). Use it to:
 - Award experience, gold, or items to the player
 - Spawn loot drops
 - Trigger events or cutscenes
@@ -657,8 +658,9 @@ The `onDefeated` callback is triggered when an AI enemy is killed. Use it to:
 ```typescript
 new BattleAi(this, {
   enemyType: EnemyType.Aggressive,
-  onDefeated: (event) => {
-    console.log(`${event.name()} was defeated!`);
+  onDefeated: (event, attacker) => {
+    const name = attacker?.name?.() ?? "Unknown";
+    console.log(`${event.name()} was defeated by ${name}!`);
   }
 });
 ```
@@ -677,23 +679,19 @@ function Goblin() {
       
       new BattleAi(this, {
         enemyType: EnemyType.Aggressive,
-        onDefeated: (event) => {
-          // Find the player who killed this enemy
-          const map = event.getCurrentMap();
-          const players = map?.getPlayersIn() || [];
+        onDefeated: (event, attacker) => {
+          if (!attacker) return;
+
+          // Award gold
+          attacker.gold += 25;
           
-          players.forEach(player => {
-            // Award gold
-            player.gold += 25;
-            
-            // Award experience
-            player.exp += 50;
-            
-            // Random loot drop
-            if (Math.random() < 0.3) {
-              player.addItem(HealthPotion);
-            }
-          });
+          // Award experience
+          attacker.exp += 50;
+          
+          // Random loot drop
+          if (Math.random() < 0.3) {
+            attacker.addItem(HealthPotion);
+          }
         }
       });
     }
@@ -705,7 +703,7 @@ function Goblin() {
 
 ```typescript
 new BattleAi(this, {
-  onDefeated: (event) => {
+  onDefeated: (event, attacker) => {
     const map = event.getCurrentMap();
     if (!map) return;
     
@@ -725,7 +723,7 @@ new BattleAi(this, {
 let killCount = 0;
 
 new BattleAi(this, {
-  onDefeated: (event) => {
+  onDefeated: (event, attacker) => {
     killCount++;
     
     // Check quest progress
@@ -749,7 +747,7 @@ function DragonBoss() {
       
       new BattleAi(this, {
         enemyType: EnemyType.Tank,
-        onDefeated: (event) => {
+        onDefeated: (event, attacker) => {
           const map = event.getCurrentMap();
           
           // Announce victory
@@ -782,3 +780,93 @@ Automatic feedback:
 - **Damage Numbers**: Floating damage text
 - **Attack Animation**: Triggers `attack` animation
 - **Knockback**: Entities pushed back based on weapon `knockbackForce`
+
+## Action Bar + AoE Targeting (client + server)
+
+The action-battle package includes optional GUI components for an A-RPG action bar
+and AoE skill targeting. They are disabled by default and are configured via
+`provideActionBattle()`.
+
+### Enable the Action Bar
+
+```ts
+import { provideActionBattle } from "@rpgjs/action-battle";
+
+export default provideActionBattle({
+  ui: {
+    actionBar: {
+      enabled: true,
+      autoOpen: true,
+      mode: "both" // "items" | "skills" | "both"
+    }
+  }
+});
+```
+
+You can open/close it manually on the server:
+
+```ts
+import { openActionBattleActionBar } from "@rpgjs/action-battle/server";
+
+openActionBattleActionBar(player);
+```
+
+### Skill Range + AoE Mask (ASCII)
+
+Define range and AoE mask on the skill data (custom fields). The range uses
+Manhattan distance, and the mask is centered on the target tile.
+
+```ts
+@Skill({
+  name: "Nova",
+  spCost: 12,
+  // Custom fields used by action-battle
+  range: 3,
+  aoeMask: [
+    ".#.",
+    "###",
+    ".#."
+  ]
+})
+export class Nova {}
+```
+
+### Targeting Options
+
+```ts
+export default provideActionBattle({
+  ui: {
+    actionBar: {
+      enabled: true,
+      autoOpen: false
+    },
+    targeting: {
+      enabled: true,
+      showGrid: true,
+      colors: {
+        area: 0x2f9ef7,
+        edge: 0x1b6a98,
+        cursor: 0xffd166
+      }
+    }
+  },
+  targeting: {
+    affects: "events", // "events" | "players" | "both"
+    allowEmptyTarget: true
+  }
+});
+```
+
+### Custom Targeting Resolver (optional)
+
+If you prefer to compute targeting from your own skill schema, use `getTargeting`:
+
+```ts
+export default provideActionBattle({
+  skills: {
+    getTargeting(skill) {
+      return skill?.targeting;
+    }
+  }
+});
+```

package/dist/ai.server.d.ts

@@ -296,7 +296,7 @@ export declare class BattleAi {
             retreatThreshold?: number;
         };
         /** Callback called when the AI is defeated */
-        onDefeated?: (event: RpgEvent) => void;
+        onDefeated?: (event: RpgEvent, attacker?: RpgPlayer) => void;
     });
     /**
      * Apply enemy type-specific behavior modifiers

package/dist/client/index.js

@@ -1,17 +1,23 @@
-import client from "./index2.js";
+import client, { createActionBattleClient } from "./index2.js";
 import { createModule } from "@rpgjs/common";
 import { AiDebug, AiState, AttackPattern, BattleAi, DEFAULT_KNOCKBACK, EnemyType } from "./index3.js";
-import { DEFAULT_PLAYER_ATTACK_HITBOXES, applyPlayerHitToEvent, getPlayerWeaponKnockbackForce } from "./index4.js";
+import { ACTION_BATTLE_ACTION_BAR_GUI_ID, DEFAULT_PLAYER_ATTACK_HITBOXES, applyPlayerHitToEvent, createActionBattleServer, getPlayerWeaponKnockbackForce, openActionBattleActionBar, updateActionBattleActionBar } from "./index4.js";
 const server = null;
-function provideActionBattle() {
+const createActionBattleServer2 = null;
+function provideActionBattle(options = {}) {
   return createModule("ActionBattle", [
     {
-      server,
-      client
+      server: createActionBattleServer2?.(options),
+      client: createActionBattleClient?.(options)
     }
   ]);
 }
+const index = {
+  server,
+  client
+};
 export {
+  ACTION_BATTLE_ACTION_BAR_GUI_ID,
   AiDebug,
   AiState,
   AttackPattern,
@@ -20,6 +26,10 @@ export {
   DEFAULT_PLAYER_ATTACK_HITBOXES,
   EnemyType,
   applyPlayerHitToEvent,
+  createActionBattleServer,
+  index as default,
   getPlayerWeaponKnockbackForce,
-  provideActionBattle
+  openActionBattleActionBar,
+  provideActionBattle,
+  updateActionBattleActionBar
 };

package/dist/client/index2.js

@@ -1,13 +1,45 @@
-import { PrebuiltComponentAnimations } from "@rpgjs/client";
+import { PrebuiltComponentAnimations, inject, RpgGui, RpgClientEngine } from "@rpgjs/client";
 import { defineModule } from "@rpgjs/common";
-const client = defineModule({
-  componentAnimations: [
-    {
-      id: "hit",
-      component: PrebuiltComponentAnimations.Hit
+import component$1 from "./index5.js";
+import component from "./index6.js";
+import { setActionBattleOptions } from "./index7.js";
+import { normalizeActionBattleOptions } from "./index8.js";
+const createActionBattleClient = (options = {}) => {
+  const normalized = normalizeActionBattleOptions(options);
+  setActionBattleOptions(normalized);
+  const actionBarEnabled = normalized.ui?.actionBar?.enabled;
+  const targetingEnabled = normalized.ui?.targeting?.enabled;
+  const hitComponent = PrebuiltComponentAnimations?.Hit;
+  return defineModule({
+    componentAnimations: hitComponent ? [
+      {
+        id: "hit",
+        component: hitComponent
+      }
+    ] : [],
+    gui: actionBarEnabled ? [
+      {
+        id: "action-battle-action-bar",
+        component: component$1,
+        dependencies: () => {
+          const engine = inject(RpgClientEngine);
+          return [engine.scene.currentPlayer];
+        }
+      }
+    ] : [],
+    sprite: {
+      componentsInFront: targetingEnabled ? [component] : []
+    },
+    sceneMap: {
+      onAfterLoading() {
+        const gui = inject(RpgGui);
+        gui.display("action-battle-action-bar");
+      }
     }
-  ]
-});
+  });
+};
+const client = createActionBattleClient();
 export {
+  createActionBattleClient,
   client as default
 };

package/dist/client/index3.js

@@ -1122,7 +1122,7 @@ class BattleAi {
     }
     if (this.event.hp <= 0) {
       this.debugLog("damage", "Defeated!");
-      this.kill();
+      this.kill(attacker);
       return true;
     }
     return false;
@@ -1133,9 +1133,9 @@ class BattleAi {
    * Stops all movements, cleans up resources, calls the onDefeated hook,
    * and removes the event from the map.
    */
-  kill() {
+  kill(attacker) {
     if (this.onDefeatedCallback) {
-      this.onDefeatedCallback(this.event);
+      this.onDefeatedCallback(this.event, attacker);
     }
     this.destroy();
     this.event.remove();

package/dist/client/index4.js

@@ -1,6 +1,9 @@
 import { defineModule, Control } from "@rpgjs/common";
+import { normalizeActionBattleOptions } from "./index8.js";
+import { manhattanDistance, parseAoeMask } from "./index9.js";
 const RpgEvent = null;
 const DEFAULT_KNOCKBACK = null;
+const ACTION_BATTLE_ACTION_BAR_GUI_ID = "action-battle-action-bar";
 const DEFAULT_PLAYER_ATTACK_HITBOXES = {
   up: { offsetX: -16, offsetY: -48, width: 32, height: 32 },
   down: { offsetX: -16, offsetY: 16, width: 32, height: 32 },
@@ -56,82 +59,275 @@ function applyPlayerHitToEvent(player, target, hooks) {
   }
   return hitResult;
 }
-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) {
-        player.setGraphicAnimation("attack", 1);
-        const playerX = player.x();
-        const playerY = player.y();
-        const direction = player.getDirection();
-        const directionKey = direction;
-        const hitboxConfig = DEFAULT_PLAYER_ATTACK_HITBOXES[directionKey] || DEFAULT_PLAYER_ATTACK_HITBOXES.default;
-        const hitboxes = [{
-          x: playerX + hitboxConfig.offsetX,
-          y: playerY + hitboxConfig.offsetY,
-          width: hitboxConfig.width,
-          height: hitboxConfig.height
-        }];
-        const map = player.getCurrentMap();
-        map?.createMovingHitbox(hitboxes, { speed: 3 }).subscribe({
-          next(hits) {
-            hits.forEach((hit) => {
-              if (hit instanceof RpgEvent) {
-                const result = applyPlayerHitToEvent(player, hit);
-                if (result?.defeated) {
-                  console.log(`Player ${player.id} defeated AI ${hit.id}`);
-                }
-              }
-            });
-          }
-        });
+const resolveSignal = (value) => typeof value === "function" ? value() : value;
+const resolveItemData = (player, itemId) => {
+  try {
+    return player.databaseById?.(itemId);
+  } catch {
+    return null;
+  }
+};
+const resolveSkillData = (player, skillId) => {
+  try {
+    return player.databaseById?.(skillId);
+  } catch {
+    return null;
+  }
+};
+const 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
+  };
+};
+const normalizeMaskRows = (mask) => {
+  if (!mask) return [];
+  if (Array.isArray(mask)) return mask;
+  return mask.trim().split("\n").map((row) => row.replace(/\r/g, ""));
+};
+const buildActionBarData = (player, options) => {
+  const 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);
+    const usable = quantity > 0 && consumable !== false && (itemType ? itemType === "item" : true);
+    return {
+      id,
+      name,
+      description,
+      icon,
+      quantity,
+      usable
+    };
+  });
+  const 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);
       }
     }
-  },
-  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) {
-      const ai = event.battleAi;
-      ai?.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) {
-      const ai = event.battleAi;
-      ai?.onDetectOutShape(player, shape);
-    }
+    return skillEntry;
+  });
+  return { items, skills };
+};
+const ensureActionBarGui = (player, options) => {
+  const existing = player.getGui?.(ACTION_BATTLE_ACTION_BAR_GUI_ID);
+  const gui = existing || player.gui(ACTION_BATTLE_ACTION_BAR_GUI_ID);
+  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;
+};
+const openActionBattleActionBar = (player, rawOptions = {}) => {
+  const options = normalizeActionBattleOptions(rawOptions);
+  const gui = ensureActionBarGui(player, options);
+  gui.open(buildActionBarData(player, options));
+};
+const updateActionBattleActionBar = (player, rawOptions = {}) => {
+  const options = normalizeActionBattleOptions(rawOptions);
+  const gui = player.getGui?.(ACTION_BATTLE_ACTION_BAR_GUI_ID);
+  if (gui) {
+    gui.update(buildActionBarData(player, options));
+  }
+};
+const getTileSize = (map) => ({
+  width: map?.tileWidth ?? 32,
+  height: map?.tileHeight ?? 32
 });
+const getEntityTile = (entity, tileSize) => {
+  const hitbox = entity.hitbox?.() || { w: tileSize.width, h: tileSize.height };
+  const x = Math.floor((entity.x() + hitbox.w / 2) / tileSize.width);
+  const y = Math.floor((entity.y() + hitbox.h / 2) / tileSize.height);
+  return { x, y };
+};
+const handleActionBattleSkillUse = (player, skillId, target, options) => {
+  const map = player.getCurrentMap();
+  if (!map) {
+    player.useSkill(skillId);
+    return;
+  }
+  const targeting = resolveSkillTargeting(player, skillId, options);
+  if (!targeting || !target) {
+    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;
+  }
+  player.useSkill(skillId, targets);
+};
+const createActionBattleServer = (rawOptions = {}) => {
+  const options = normalizeActionBattleOptions(rawOptions);
+  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) {
+          player.setGraphicAnimation("attack", 1);
+          const playerX = player.x();
+          const playerY = player.y();
+          const direction = player.getDirection();
+          const directionKey = direction;
+          const hitboxConfig = DEFAULT_PLAYER_ATTACK_HITBOXES[directionKey] || DEFAULT_PLAYER_ATTACK_HITBOXES.default;
+          const hitboxes = [
+            {
+              x: playerX + hitboxConfig.offsetX,
+              y: playerY + hitboxConfig.offsetY,
+              width: hitboxConfig.width,
+              height: hitboxConfig.height
+            }
+          ];
+          const map = player.getCurrentMap();
+          map?.createMovingHitbox(hitboxes, { speed: 3 }).subscribe({
+            next(hits) {
+              hits.forEach((hit) => {
+                if (hit instanceof RpgEvent) {
+                  const result = applyPlayerHitToEvent(player, hit);
+                  if (result?.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) {
+        const ai = event.battleAi;
+        ai?.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) {
+        const ai = event.battleAi;
+        ai?.onDetectOutShape(player, shape);
+      }
+    }
+  });
+};
+createActionBattleServer();
 export {
+  ACTION_BATTLE_ACTION_BAR_GUI_ID,
   DEFAULT_PLAYER_ATTACK_HITBOXES,
   applyPlayerHitToEvent,
-  getPlayerWeaponKnockbackForce
+  createActionBattleServer,
+  getPlayerWeaponKnockbackForce,
+  openActionBattleActionBar,
+  updateActionBattleActionBar
 };