@rpgjs/client 5.0.0-beta.10 → 5.0.0-beta.12

package/src/components/gui/menu/equip-menu.ce

@@ -90,6 +90,7 @@
     import { signal, computed, createTabindexNavigator, effect } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -380,7 +381,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (!listEntries().length) return;
                 commitSelection(selectedItem());

package/src/components/gui/menu/exit-menu.ce

@@ -16,6 +16,7 @@
     import { signal } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -23,7 +24,7 @@
 
     const controls = signal({
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (onConfirm) onConfirm();
             }

package/src/components/gui/menu/items-menu.ce

@@ -90,6 +90,7 @@
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
     import { delay } from "@rpgjs/common";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -226,7 +227,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (!confirmOpen()) return;
                 confirmSelect(selectedConfirm())();
@@ -289,7 +290,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (confirmOpen()) {
                     confirmSelect(selectedConfirm())();

package/src/components/gui/menu/main-menu.ce

@@ -101,6 +101,7 @@
     import ExitMenu from "./exit-menu.ce";
     import { getEntityProp } from "../../../utils/getEntityProp";
     import { delay } from "@rpgjs/common";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const currentPlayer = engine.scene.currentPlayer;
@@ -259,7 +260,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (saveOverlay()) return;
                 if (view() !== "menu") return;

package/src/components/gui/save-load.ce

@@ -40,6 +40,7 @@
     import { SaveClientService } from "../../services/save";
     import { PrebuiltGui } from "@rpgjs/common";
     import { RpgGui } from "../../Gui/Gui";
+    import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const saveClient = inject(SaveClientService);
@@ -185,7 +186,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 triggerSelect(selectedSlot());
             }

package/src/components/gui/shop/shop.ce

@@ -180,6 +180,7 @@
     import { mount, signal, computed, createTabindexNavigator, effect } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine)
     const currentPlayer = engine.scene.currentPlayer
@@ -387,7 +388,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 const mode = selectedModeIndex() === 0 ? 'buy' : 'sell'
                 tradeMode.set(mode)
@@ -433,7 +434,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (quantityDialogOpen()) {
                     const item = currentItem()

package/src/components/gui/title-screen.ce

@@ -31,6 +31,7 @@
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { RpgGui } from "../../Gui/Gui";
+    import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const guiService = inject(RpgGui);
@@ -150,7 +151,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (guiService.isDisplaying(PrebuiltGui.Save)) return;
                 triggerSelect(selectedEntry());

package/src/components/index.ts

@@ -1,7 +1,8 @@
 import EventLayerComponent from "./scenes/event-layer.ce";
+import SceneMap from "./scenes/draw-map.ce";
 import CharacterComponent from "./character.ce";
 
 // Prebuilt sprite components
 export { HpBar } from "./prebuilt";
 
-export { EventLayerComponent, CharacterComponent } 
+export { EventLayerComponent, SceneMap, CharacterComponent } 

package/src/components/player-components.ce

@@ -29,7 +29,7 @@
           justifyContent="center"
           alignItems="center"
         >
-          <entry.component object ...entry.props />
+          <entry.component object={sprite} ...entry.props />
         </Container>
       }
     </Container>
@@ -54,6 +54,7 @@ const { object, position, graphicBounds } = defineProps({
     default: 'top'
   }
 });
+const sprite = object();
 
 const client = inject(RpgClientEngine);
 const warnedComponents = new Set();
@@ -63,16 +64,16 @@ const readPosition = computed(() => position?.() ?? 'top');
 const componentSource = computed(() => {
   switch (readPosition()) {
     case 'bottom':
-      return object.componentsBottom?.();
+      return sprite.componentsBottom?.();
     case 'center':
-      return object.componentsCenter?.();
+      return sprite.componentsCenter?.();
     case 'left':
-      return object.componentsLeft?.();
+      return sprite.componentsLeft?.();
     case 'right':
-      return object.componentsRight?.();
+      return sprite.componentsRight?.();
     case 'top':
     default:
-      return object.componentsTop?.();
+      return sprite.componentsTop?.();
   }
 });
 
@@ -98,16 +99,16 @@ const componentData = computed(() => {
 
 const layout = computed(() => componentData()?.layout ?? {});
 const rows = computed(() => componentData()?.components ?? []);
-const hitbox = object.hitbox;
+const hitbox = sprite.hitbox;
 
 const toNumber = (value, fallback = 0) => {
-  const resolved = resolveDynamicValue(value, object);
+  const resolved = resolveDynamicValue(value, sprite);
   const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);
   return Number.isFinite(num) ? num : fallback;
 };
 
 const estimateTextWidth = (value, style = {}) => {
-  const text = String(resolveDynamicValue(value ?? '', object) ?? '');
+  const text = String(resolveDynamicValue(value ?? '', sprite) ?? '');
   const fontSize = toNumber(style.fontSize, 12);
   return Math.max(1, Math.ceil(text.length * fontSize * 0.6));
 };
@@ -206,7 +207,7 @@ const renderedRows = computed(() => {
 
       entries.push({
         component,
-        props: resolveDynamicProps(getComponentProps(definition), object),
+        props: resolveDynamicProps(getComponentProps(definition), sprite),
         width: cell.width,
         height: cell.height
       });

package/src/components/prebuilt/hp-bar.ce

@@ -46,6 +46,7 @@
 import { computed, animatedSignal, effect } from "canvasengine";
 
 const { object } = defineProps();
+const sprite = object();
 
 // ====================
 // Configuration
@@ -93,14 +94,14 @@ const highlightHeight = Math.floor(fillHeight / 2);
 // ====================
 
 /** Gets hitbox dimensions for positioning */
-const hitbox = object.hitbox;
+const hitbox = sprite.hitbox;
 
 /**
  * Gets the current HP value from the player object
  * Uses hpSignal which is synchronized from the server
  */
 const currentHp = computed(() => {
-  return object.hpSignal?.() ?? 0;
+  return sprite.hpSignal?.() ?? 0;
 });
 
 /**
@@ -108,7 +109,7 @@ const currentHp = computed(() => {
  * Reads from _param.maxHp which contains calculated stats
  */
 const maxHp = computed(() => {
-  const params = object._param?.() ?? {};
+  const params = sprite._param?.() ?? {};
   return params.maxHp ?? 100;
 });
 

package/src/components/prebuilt/light-halo.ce

@@ -31,6 +31,7 @@ const {
   opacitySpeed,
   lightColor
 } = defineProps();
+const sprite = object();
 
 // ====================
 // Props with default values
@@ -92,7 +93,7 @@ const currentOpacity = computed(() => {
 // Position calculations
 // ====================
 
-const hitbox = object.hitbox;
+const hitbox = sprite.hitbox;
 
 const position = computed(() => ({
   x: hitbox().w / 2,
@@ -145,4 +146,3 @@ tick(() => {
   time.update(t => t + 1);
 });
 </script>
-

package/src/components/scenes/canvas.ce

@@ -23,7 +23,15 @@
     <SceneMap />
   </Viewport>
   @for (gui of guiList) {
-      <Container display="flex">
+      <Container
+        positionType="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        width={engine.width}
+        height={engine.height}
+      >
         @if (gui.display) {
           <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {
             onGuiFinish(gui, data)
@@ -39,12 +47,12 @@
   import { computed, effect } from "canvasengine";
   import { inject } from "../../core/inject";
   import { RpgClientEngine } from "../../RpgClientEngine";
-  import SceneMap from './draw-map.ce'
   import { RpgGui } from "../../Gui/Gui";
   import { delay } from "@rpgjs/common";
   import { NightAmbiant, SpriteShadows } from '@canvasengine/presets'
 
   const engine = inject(RpgClientEngine);
+  const SceneMap = engine.sceneMapComponent;
   const guiService = inject(RpgGui);
   const sceneData = engine.sceneMap.data
   const lighting = engine.sceneMap.lighting

package/src/components/scenes/draw-map.ce

@@ -1,8 +1,14 @@
 <Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>
   <Container sound={backgroundAmbientSound} />
 
-  @if (map() && sceneComponent()) {
-    <sceneComponent() data={map().data} params={map().params} />
+  <Container>
+    @if (map() && sceneComponent()) {
+      <sceneComponent() data={map().data} params={map().params} />
+    }
+  </Container>
+
+  @for (child of children) {
+    <child />
   }
 
   @for (componentAnimation of componentAnimations) {
@@ -13,19 +19,27 @@
     </Container>
   }
 
+  <Container sortableChildren={true}>
+    @for (projectile of projectiles() ; track projectile.props.id) {
+      <projectile.component ...projectile.props />
+    }
+  </Container>
+
   @if (weatherProps()) {
     <Weather ...weatherProps() />
   }
 </Container>
 
 <script>
-    import { computed } from 'canvasengine'
+    import { computed, effect } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { Weather } from '@canvasengine/presets'
 
+    const { children } = defineProps()
     const engine = inject(RpgClientEngine);
     const componentAnimations = engine.componentAnimations
+    const projectiles = engine.projectiles.current
     const map = engine.sceneMap?.data
     const sceneComponent = computed(() => map()?.component)
     const mapParams = map()?.params

package/src/index.ts

@@ -6,6 +6,8 @@ export * from "./services/save";
 export * from "./core/setup";
 export * from "./core/inject";
 export * from "./services/loadMap";
+export * from "./services/actionInput";
+export * from "./services/pointerContext";
 export * from "./module";
 export * from "./Gui/Gui";
 export * from "./components/gui";
@@ -24,5 +26,7 @@ export { Control } from "./services/keyboardControls";
 export { RpgClientObject } from "./Game/Object";
 export { RpgClientPlayer } from "./Game/Player";
 export { RpgClientEvent } from "./Game/Event";
+export * from "./Game/ProjectileManager";
+export * from "./Game/ClientVisuals";
 export { withMobile } from "./components/gui/mobile";
 export * from "./services/AbstractSocket";

package/src/module.ts

@@ -155,6 +155,27 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
           },
         };
       }
+      if (module.clientVisuals) {
+        const clientVisuals = { ...module.clientVisuals };
+        module.clientVisuals = {
+          load: (engine: RpgClientEngine) => {
+            engine.registerClientVisuals(clientVisuals);
+          },
+        };
+      }
+      if (module.projectiles) {
+        const projectiles = { ...module.projectiles };
+        module.projectiles = {
+          ...projectiles,
+          load: (engine: RpgClientEngine) => {
+            if (projectiles.components) {
+              Object.entries(projectiles.components).forEach(([type, component]) => {
+                engine.registerProjectileComponent(type, component);
+              });
+            }
+          },
+        };
+      }
       if (module.transitions) {
         const transitions = [...module.transitions];
         module.transitions = {
@@ -200,6 +221,9 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
                 engine.registerSpriteComponent(id, component);
               });
             }
+            if (sprite.eventComponent) {
+              engine.addEventComponentResolver(sprite.eventComponent);
+            }
           },
         };
       }

package/src/services/actionInput.spec.ts

@@ -0,0 +1,155 @@
+import { describe, expect, test } from "vitest";
+import {
+  getKeyboardControlBind,
+  keyboardEventMatchesBind,
+  normalizeActionInput,
+  resolveKeyboardActionInput,
+  resolveKeyboardDirectionInput,
+} from "./actionInput";
+
+const keyboardEvent = (values: Partial<KeyboardEvent>) =>
+  values as KeyboardEvent;
+
+describe("normalizeActionInput", () => {
+  test("keeps simple actions compatible", () => {
+    expect(normalizeActionInput("action")).toEqual({
+      action: "action",
+    });
+  });
+
+  test("adds custom data to action payloads", () => {
+    expect(normalizeActionInput("projectile:shoot", {
+      target: { x: 320, y: 180 },
+      source: "map-click",
+    })).toEqual({
+      action: "projectile:shoot",
+      data: {
+        target: { x: 320, y: 180 },
+        source: "map-click",
+      },
+    });
+  });
+
+  test("keeps object-form action payloads intact", () => {
+    const payload = {
+      action: "projectile:shoot",
+      data: { target: { x: 64, y: 96 } },
+    };
+
+    expect(normalizeActionInput(payload)).toBe(payload);
+  });
+});
+
+describe("keyboard action controls", () => {
+  test("keeps string controls compatible", () => {
+    expect(getKeyboardControlBind("space")).toBe("space");
+    expect(resolveKeyboardActionInput("space", {}, {})).toEqual({
+      action: "action",
+    });
+  });
+
+  test("resolves object controls with static data", () => {
+    const control = {
+      bind: "space",
+      action: "projectile:shoot",
+      data: {
+        source: "keyboard",
+        target: { x: 10, y: 20 },
+      },
+    };
+
+    expect(getKeyboardControlBind(control)).toBe("space");
+    expect(resolveKeyboardActionInput(control, {}, {})).toEqual({
+      action: "projectile:shoot",
+      data: {
+        source: "keyboard",
+        target: { x: 10, y: 20 },
+      },
+    });
+  });
+
+  test("resolves object controls with functional data", () => {
+    const client = {
+      pointer: {
+        world: () => ({ x: 64, y: 96 }),
+      },
+    };
+    const sprite = { id: "player-1" };
+    const control = {
+      bind: "space",
+      action: "projectile:shoot",
+      data: (resolvedClient: typeof client, resolvedSprite: typeof sprite) => ({
+        source: "keyboard",
+        target: resolvedClient.pointer.world(),
+        playerId: resolvedSprite.id,
+      }),
+    };
+
+    expect(resolveKeyboardActionInput(control, client, sprite)).toEqual({
+      action: "projectile:shoot",
+      data: {
+        source: "keyboard",
+        target: { x: 64, y: 96 },
+        playerId: "player-1",
+      },
+    });
+  });
+
+  test("omits data when object controls do not provide it", () => {
+    expect(resolveKeyboardActionInput({
+      bind: "space",
+      action: "projectile:shoot",
+    }, {}, {})).toEqual({
+      action: "projectile:shoot",
+    });
+  });
+
+  test("matches keyboard events against string, numeric, and array binds", () => {
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: " ", code: "Space", keyCode: 32 }),
+        "space"
+      )
+    ).toBe(true);
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: "ArrowUp", code: "ArrowUp", keyCode: 38 }),
+        "up"
+      )
+    ).toBe(true);
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: "x", code: "KeyX", keyCode: 88 }),
+        ["space", "x"]
+      )
+    ).toBe(true);
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: "Escape", code: "Escape", keyCode: 27 }),
+        27
+      )
+    ).toBe(true);
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: "a", code: "KeyA", keyCode: 65 }),
+        "space"
+      )
+    ).toBe(false);
+  });
+
+  test("resolves directional keyboard controls from a native keyboard event", () => {
+    const controls = {
+      up: "up",
+      down: "down",
+      left: "left",
+      right: "right",
+    };
+
+    expect(
+      resolveKeyboardDirectionInput(
+        keyboardEvent({ key: "ArrowRight", code: "ArrowRight", keyCode: 39 }),
+        controls
+      )
+    ).toBe("right");
+  });
+});

package/src/services/actionInput.ts

@@ -0,0 +1,120 @@
+import { Direction, type RpgActionInput, type RpgActionName } from "@rpgjs/common";
+
+export type KeyboardActionDataResolver<TClient = any, TSprite = any> = (
+  client: TClient,
+  sprite: TSprite,
+) => any;
+
+export interface KeyboardActionConfig<TClient = any, TSprite = any> {
+  bind: any;
+  action?: RpgActionName;
+  data?: any | KeyboardActionDataResolver<TClient, TSprite>;
+}
+
+export function normalizeActionInput(action: RpgActionName, data?: any): RpgActionInput;
+export function normalizeActionInput(action: RpgActionInput): RpgActionInput;
+export function normalizeActionInput(action: RpgActionName | RpgActionInput, data?: any): RpgActionInput {
+  if (typeof action === "object") {
+    return action;
+  }
+  return data === undefined
+    ? { action }
+    : { action, data };
+}
+
+export function isKeyboardActionConfig(value: any): value is KeyboardActionConfig {
+  return value !== null
+    && typeof value === "object"
+    && Object.prototype.hasOwnProperty.call(value, "bind");
+}
+
+export function getKeyboardControlBind(control: any): any {
+  return isKeyboardActionConfig(control) ? control.bind : control;
+}
+
+const KEY_CODE_NAMES: Record<number, string> = {
+  32: "space",
+  27: "escape",
+  37: "left",
+  38: "up",
+  39: "right",
+  40: "down",
+};
+
+const normalizeKeyboardName = (value: unknown): string | undefined => {
+  if (typeof value !== "string") return undefined;
+  const normalized = value.toLowerCase();
+  if (
+    normalized === " " ||
+    normalized === "spacebar" ||
+    normalized === "space"
+  ) {
+    return "space";
+  }
+  if (normalized.startsWith("arrow")) {
+    return normalized.slice("arrow".length);
+  }
+  return normalized;
+};
+
+export function keyboardEventMatchesBind(
+  event: KeyboardEvent,
+  bind: any
+): boolean {
+  if (Array.isArray(bind)) {
+    return bind.some(item => keyboardEventMatchesBind(event, item));
+  }
+
+  if (typeof bind === "number") {
+    return event.keyCode === bind;
+  }
+
+  const expected = normalizeKeyboardName(bind);
+  if (!expected) return false;
+
+  return (
+    normalizeKeyboardName(event.key) === expected ||
+    normalizeKeyboardName(event.code) === expected ||
+    KEY_CODE_NAMES[event.keyCode] === expected
+  );
+}
+
+export function resolveKeyboardActionInput(
+  control: any,
+  client: any,
+  sprite: any,
+  defaultAction: RpgActionName = "action",
+): RpgActionInput {
+  if (!isKeyboardActionConfig(control)) {
+    return { action: defaultAction };
+  }
+
+  const action = control.action ?? defaultAction;
+  const data = typeof control.data === "function"
+    ? control.data(client, sprite)
+    : control.data;
+
+  return data === undefined
+    ? { action }
+    : { action, data };
+}
+
+export function resolveKeyboardDirectionInput(
+  event: KeyboardEvent,
+  keyboardControls: any
+): Direction | undefined {
+  const directions: Array<[any, Direction]> = [
+    [keyboardControls?.up, Direction.Up],
+    [keyboardControls?.down, Direction.Down],
+    [keyboardControls?.left, Direction.Left],
+    [keyboardControls?.right, Direction.Right],
+  ];
+
+  for (const [control, direction] of directions) {
+    if (keyboardEventMatchesBind(event, getKeyboardControlBind(control))) {
+      return direction;
+    }
+  }
+
+  return undefined;
+}