@rpgjs/client 5.0.0-beta.11 → 5.0.0-beta.13

package/src/index.ts

@@ -8,6 +8,7 @@ export * from "./core/inject";
 export * from "./services/loadMap";
 export * from "./services/actionInput";
 export * from "./services/pointerContext";
+export * from "./services/interactions";
 export * from "./module";
 export * from "./Gui/Gui";
 export * from "./components/gui";
@@ -27,5 +28,7 @@ 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";
+export * from "./i18n";

package/src/module.ts

@@ -1,4 +1,4 @@
-import { findModules, provideModules } from "@rpgjs/common";
+import { findModules, provideModules, registerI18nMessages } from "@rpgjs/common";
 import { FactoryProvider } from "@signe/di";
 import { RpgClientEngine } from "./RpgClientEngine";
 import { RpgClient } from "./RpgClient";
@@ -67,6 +67,9 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
       if ('client' in module) {
         module = module.client as any;
       }
+      if (module.i18n) {
+        registerI18nMessages(context, module.i18n, "client-module", 10);
+      }
       if (module.spritesheets) {
         const spritesheets = [...module.spritesheets];
         module.spritesheets = {
@@ -155,6 +158,14 @@ 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 = {
@@ -168,6 +179,25 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
           },
         };
       }
+      if (module.interactions) {
+        const interactions = module.interactions;
+        module.interactions = {
+          ...interactions,
+          load: (engine: RpgClientEngine) => {
+            if (typeof interactions === "function") {
+              interactions(engine);
+              return;
+            }
+            interactions.load?.(engine);
+            interactions.setup?.(engine);
+            if (Array.isArray(interactions.use)) {
+              interactions.use.forEach(([matcher, behavior]) => {
+                engine.interactions.use(matcher, behavior);
+              });
+            }
+          },
+        };
+      }
       if (module.transitions) {
         const transitions = [...module.transitions];
         module.transitions = {
@@ -213,6 +243,9 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
                 engine.registerSpriteComponent(id, component);
               });
             }
+            if (sprite.eventComponent) {
+              engine.addEventComponentResolver(sprite.eventComponent);
+            }
           },
         };
       }
@@ -232,15 +265,15 @@ export function provideGlobalConfig(config: any) {
 }
 
 export function provideClientGlobalConfig(config: any = {}) {
-  if (!config.keyboardControls) {
-    config.keyboardControls = {
-      up: 'up',
-      down: 'down',
-      left: 'left',
-      right: 'right',
-      action: 'space',
-      escape: 'escape'
-    }
+  config.keyboardControls = {
+    up: 'up',
+    down: 'down',
+    left: 'left',
+    right: 'right',
+    action: 'space',
+    dash: 'shift',
+    escape: 'escape',
+    ...(config.keyboardControls ?? {}),
   }
   return provideGlobalConfig(config)
 }

package/src/services/actionInput.spec.ts

@@ -1,10 +1,15 @@
 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({
@@ -98,4 +103,53 @@ describe("keyboard action controls", () => {
       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

@@ -1,4 +1,4 @@
-import type { RpgActionInput, RpgActionName } from "@rpgjs/common";
+import { Direction, type RpgActionInput, type RpgActionName } from "@rpgjs/common";
 
 export type KeyboardActionDataResolver<TClient = any, TSprite = any> = (
   client: TClient,
@@ -32,6 +32,53 @@ 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,
@@ -51,3 +98,23 @@ export function resolveKeyboardActionInput(
     ? { 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;
+}

package/src/services/interactions.spec.ts

@@ -0,0 +1,175 @@
+import { describe, expect, test, vi } from "vitest";
+import {
+  dragToTile,
+  hoverPopover,
+  RpgClientInteractions,
+  selectable,
+} from "./interactions";
+import { createClientPointerContext } from "./pointerContext";
+
+function createClient() {
+  const client = {
+    pointer: createClientPointerContext(),
+    processAction: vi.fn(),
+    sceneMap: {
+      tileWidth: 16,
+      tileHeight: 16,
+    },
+  } as any;
+  client.interactions = new RpgClientInteractions(client);
+  return client;
+}
+
+describe("RpgClientInteractions", () => {
+  test("renders registered components with sprite state and bounds", () => {
+    const client = createClient();
+    const Popover = () => null;
+    const sprite = { id: "event-1", name: "Guard" };
+
+    client.interactions.use("Guard", hoverPopover(Popover, { label: "Talk" }));
+    client.interactions.handle(sprite, "pointerover", {
+      bounds: {
+        graphic: { left: 1, top: 2, right: 11, bottom: 22, width: 10, height: 20, centerX: 6, centerY: 12 } as any,
+      },
+    });
+
+    const entries = client.interactions.getRenderedComponents(sprite, {
+      graphic: { left: 1, top: 2, right: 11, bottom: 22, width: 10, height: 20, centerX: 6, centerY: 12 } as any,
+    });
+
+    expect(entries).toHaveLength(1);
+    expect(entries[0].component).toBe(Popover);
+    expect(entries[0].props.label).toBe("Talk");
+    expect(entries[0].props.state.hovered).toBe(true);
+    expect(entries[0].props.bounds.centerX).toBe(6);
+  });
+
+  test("keeps clicks client-only unless a behavior sends an action", () => {
+    const client = createClient();
+    const sprite = { id: "event-1", name: "Guard" };
+
+    client.interactions.use("Guard", selectable());
+    client.interactions.handle(sprite, "click");
+
+    expect(client.interactions.getState(sprite).selected).toBe(true);
+    expect(client.processAction).not.toHaveBeenCalled();
+
+    client.interactions.use("Guard", {
+      click(ctx) {
+        ctx.action("guard:talk", { eventId: ctx.target.id });
+      },
+    });
+    client.interactions.handle(sprite, "click");
+
+    expect(client.processAction).toHaveBeenCalledWith("guard:talk", { eventId: "event-1" });
+  });
+
+  test("uses behavior hit tests before changing hover state", () => {
+    const client = createClient();
+    const sprite = { id: "event-1", name: "Tree" };
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 40, y: 40 });
+    client.interactions.use("Tree", {
+      cursor: "pointer",
+      hitTest(ctx) {
+        return ctx.bounds("hitbox").contains(ctx.pointer.world());
+      },
+    });
+
+    client.interactions.handle(sprite, "pointerover", {
+      bounds: {
+        hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+      },
+    });
+
+    expect(client.interactions.getState(sprite).hovered).toBe(false);
+    expect(client.interactions.cursorFor(sprite, {
+      hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+    })).toBeUndefined();
+  });
+
+  test("exposes handler bounds in world coordinates", () => {
+    const client = createClient();
+    const sprite = { id: "crate-1", name: "Crate", x: () => 100, y: () => 80 };
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 112, y: 92 });
+    client.interactions.use("Crate", {
+      component: () => null,
+      cursor: "grab",
+      hitTest(ctx) {
+        return ctx.bounds("hitbox").contains(ctx.pointer.world());
+      },
+    });
+
+    client.interactions.handle(sprite, "pointerover", {
+      bounds: {
+        hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+      },
+    });
+
+    expect(client.interactions.getState(sprite).hovered).toBe(true);
+    expect(client.interactions.cursorFor(sprite, {
+      hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+    })).toBe("grab");
+
+    const [entry] = client.interactions.getRenderedComponents(sprite, {
+      hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+    });
+    expect(entry?.props.bounds.centerX).toBe(8);
+  });
+
+  test("updates hit-tested hover while moving inside an already hovered sprite", () => {
+    const client = createClient();
+    const sprite = { id: "crate-1", name: "Crate", x: () => 100, y: () => 80 };
+
+    client.interactions.use("Crate", {
+      hitTest(ctx) {
+        return ctx.bounds("hitbox").contains(ctx.pointer.world());
+      },
+    });
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 140, y: 120 });
+    client.interactions.handle(sprite, "pointerover", {
+      bounds: {
+        hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+      },
+    });
+    expect(client.interactions.getState(sprite).hovered).toBe(false);
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 112, y: 92 });
+    client.interactions.handle(sprite, "pointermove", {
+      bounds: {
+        hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+      },
+    });
+
+    expect(client.interactions.getState(sprite).hovered).toBe(true);
+  });
+
+  test("runs drag lifecycle and resolves pointer tile on drop", () => {
+    const client = createClient();
+    const sprite = { id: "crate-1", name: "Crate" };
+
+    client.interactions.use("Crate", dragToTile({ action: "crate:move" }));
+    client.pointer.update({ x: 0, y: 0 }, { x: 18, y: 35 });
+    client.interactions.handle(sprite, "pointerdown");
+
+    expect(client.interactions.getState(sprite).dragging).toBe(true);
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 33, y: 47 });
+    client.interactions.handlePointerUp();
+
+    expect(client.interactions.getState(sprite).dragging).toBe(false);
+    expect(client.processAction).toHaveBeenCalledWith("crate:move", {
+      eventId: "crate-1",
+      position: {
+        x: 2,
+        y: 2,
+        worldX: 32,
+        worldY: 32,
+        width: 16,
+        height: 16,
+      },
+    });
+  });
+});