@rpgjs/action-battle 5.0.0-alpha.33 → 5.0.0-alpha.36

package/dist/server/index2.js

@@ -1,6 +1,9 @@
 import { RpgEvent } from "@rpgjs/server";
 import { defineModule, Control } from "@rpgjs/common";
 import { DEFAULT_KNOCKBACK } from "./index3.js";
+import { normalizeActionBattleOptions } from "./index4.js";
+import { manhattanDistance, parseAoeMask } from "./index5.js";
+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,83 +59,276 @@ function applyPlayerHitToEvent(player, target, hooks) {
   }
   return hitResult;
 }
-const server = 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);
+      }
+    }
+  });
+};
+const server = createActionBattleServer();
 export {
+  ACTION_BATTLE_ACTION_BAR_GUI_ID,
   DEFAULT_PLAYER_ATTACK_HITBOXES,
   applyPlayerHitToEvent,
+  createActionBattleServer,
   server as default,
-  getPlayerWeaponKnockbackForce
+  getPlayerWeaponKnockbackForce,
+  openActionBattleActionBar,
+  updateActionBattleActionBar
 };

package/dist/server/index3.js

@@ -1121,7 +1121,7 @@ class BattleAi {
     }
     if (this.event.hp <= 0) {
       this.debugLog("damage", "Defeated!");
-      this.kill();
+      this.kill(attacker);
       return true;
     }
     return false;
@@ -1132,9 +1132,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/server/index4.js

@@ -0,0 +1,55 @@
+const DEFAULT_ACTION_BATTLE_OPTIONS = {
+  ui: {
+    actionBar: {
+      enabled: false,
+      autoOpen: false,
+      mode: "both"
+    },
+    targeting: {
+      enabled: true,
+      showGrid: true,
+      colors: {
+        area: 3120887,
+        edge: 1796760,
+        cursor: 16765286
+      }
+    }
+  },
+  skills: {
+    defaultAoeMask: ["#"]
+  },
+  targeting: {
+    affects: "events",
+    allowEmptyTarget: true
+  }
+};
+function normalizeActionBattleOptions(options = {}) {
+  return {
+    ui: {
+      actionBar: {
+        ...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.actionBar,
+        ...options.ui?.actionBar
+      },
+      targeting: {
+        ...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.targeting,
+        ...options.ui?.targeting,
+        colors: {
+          ...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.targeting?.colors,
+          ...options.ui?.targeting?.colors
+        }
+      }
+    },
+    skills: {
+      ...DEFAULT_ACTION_BATTLE_OPTIONS.skills,
+      ...options.skills
+    },
+    targeting: {
+      ...DEFAULT_ACTION_BATTLE_OPTIONS.targeting,
+      ...options.targeting
+    }
+  };
+}
+export {
+  DEFAULT_ACTION_BATTLE_OPTIONS,
+  normalizeActionBattleOptions
+};

package/dist/server/index5.js

@@ -0,0 +1,30 @@
+const 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
+};

package/dist/server.d.ts

@@ -1,5 +1,7 @@
 import { RpgEvent, RpgPlayer } 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";
 /**
  * Default player attack hitboxes offsets for each direction
  *
@@ -89,5 +91,8 @@ 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 default _default;

package/dist/targeting.d.ts

@@ -0,0 +1,19 @@
+import { ActionBattleAoeMask } from './types';
+export interface ParsedAoeMask {
+    width: number;
+    height: number;
+    centerX: number;
+    centerY: number;
+    cells: Array<{
+        dx: number;
+        dy: number;
+    }>;
+}
+export declare const parseAoeMask: (mask: ActionBattleAoeMask | undefined) => ParsedAoeMask;
+export declare const manhattanDistance: (a: {
+    x: number;
+    y: number;
+}, b: {
+    x: number;
+    y: number;
+}) => number;

package/dist/ui/state.d.ts

@@ -0,0 +1,18 @@
+import { ActionBattleActionBarSkill, ActionBattleOptions } from '../types';
+export interface ActionBattleTargetingState {
+    active: boolean;
+    skill: ActionBattleActionBarSkill | null;
+    range: number;
+    offset: {
+        x: number;
+        y: number;
+    };
+    aoeMask: string[] | string;
+}
+export declare const actionBattleUiOptions: any;
+export declare const actionBattleSkillOptions: any;
+export declare const actionBattleTargetingState: any;
+export declare const setActionBattleOptions: (options?: ActionBattleOptions) => void;
+export declare const startTargeting: (skill: ActionBattleActionBarSkill) => void;
+export declare const stopTargeting: () => void;
+export declare const moveTargetingOffset: (dx: number, dy: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/action-battle",
-  "version": "5.0.0-alpha.33",
+  "version": "5.0.0-alpha.36",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -23,18 +23,18 @@
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "peerDependencies": {
     "@canvasengine/presets": "*",
-    "@rpgjs/client": "5.0.0-alpha.33",
-    "@rpgjs/common": "5.0.0-alpha.33",
-    "@rpgjs/server": "5.0.0-alpha.33",
-    "@rpgjs/vite": "5.0.0-alpha.33",
+    "@rpgjs/client": "5.0.0-alpha.36",
+    "@rpgjs/common": "5.0.0-alpha.36",
+    "@rpgjs/server": "5.0.0-alpha.36",
+    "@rpgjs/vite": "5.0.0-alpha.36",
     "canvasengine": "*"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@canvasengine/compiler": "^2.0.0-beta.44",
-    "vite": "^7.3.0",
+    "@canvasengine/compiler": "^2.0.0-beta.52",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },
   "type": "module",

package/src/ai.server.ts

@@ -280,7 +280,7 @@ export class BattleAi {
   private isMovingToTarget: boolean = false;
 
   // Callback when AI is defeated
-  private onDefeatedCallback?: (event: RpgEvent) => void;
+  private onDefeatedCallback?: (event: RpgEvent, attacker?: RpgPlayer) => void;
 
   // Direction hysteresis to prevent animation flickering
   private lastFacingDirection: string | null = null;
@@ -349,7 +349,7 @@ export class BattleAi {
         retreatThreshold?: number;
       };
       /** Callback called when the AI is defeated */
-      onDefeated?: (event: RpgEvent) => void;
+      onDefeated?: (event: RpgEvent, attacker?: RpgPlayer) => void;
     } = {}
   ) {
     event.battleAi = this;
@@ -1454,7 +1454,7 @@ export class BattleAi {
     // Check death
     if (this.event.hp <= 0) {
       this.debugLog('damage', 'Defeated!');
-      this.kill();
+      this.kill(attacker);
       return true;
     }
 
@@ -1467,10 +1467,10 @@ export class BattleAi {
    * Stops all movements, cleans up resources, calls the onDefeated hook,
    * and removes the event from the map.
    */
-  private kill() {
+  private kill(attacker?: RpgPlayer) {
     // Call onDefeated hook before cleanup
     if (this.onDefeatedCallback) {
-      this.onDefeatedCallback(this.event);
+      this.onDefeatedCallback(this.event, attacker);
     }
     
     this.destroy();

package/src/client.ts

@@ -1,11 +1,52 @@
-import {PrebuiltComponentAnimations, RpgClient } from "@rpgjs/client";
+import { inject, PrebuiltComponentAnimations, RpgClient, RpgClientEngine, RpgGui } from "@rpgjs/client";
 import { defineModule } from "@rpgjs/common";
+import ActionBarComponent from "./components/action-bar.ce";
+import TargetingOverlayComponent from "./components/targeting-overlay.ce";
+import { setActionBattleOptions } from "./ui/state";
+import { ActionBattleOptions } from "./types";
+import { normalizeActionBattleOptions } from "./config";
 
-export default defineModule<RpgClient>({
-  componentAnimations: [
-    {
-      id: 'hit',
-      component: PrebuiltComponentAnimations.Hit
+export const createActionBattleClient = (
+  options: ActionBattleOptions = {}
+) => {
+  const normalized = normalizeActionBattleOptions(options);
+  setActionBattleOptions(normalized);
+  const actionBarEnabled = normalized.ui?.actionBar?.enabled;
+  const targetingEnabled = normalized.ui?.targeting?.enabled;
+  const hitComponent = PrebuiltComponentAnimations?.Hit;
+  return defineModule<RpgClient>({
+    componentAnimations: hitComponent
+      ? [
+          {
+            id: "hit",
+            component: hitComponent,
+          },
+        ]
+      : [],
+    gui: actionBarEnabled
+      ? [
+          {
+            id: "action-battle-action-bar",
+            component: ActionBarComponent,
+            dependencies: () => {
+              const engine = inject(RpgClientEngine)
+              return [engine.scene.currentPlayer]
+            },
+          },
+        ]
+      : [],
+    sprite: {
+      componentsInFront: targetingEnabled ? [TargetingOverlayComponent] : [],
+    },
+    sceneMap: {
+      onAfterLoading() {
+        if (actionBarEnabled && normalized.ui?.actionBar?.autoOpen) {
+          const gui = inject(RpgGui)
+          gui.display('action-battle-action-bar')
+        }
+      }
     }
-  ]
-})
+  });
+};
+
+export default createActionBattleClient();