@rpgjs/client 5.0.0-beta.2 → 5.0.0-beta.22

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,46 @@ 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.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 = {
@@ -195,6 +238,14 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
                 engine.addSpriteComponentInFront(component);
               });
             }
+            if (sprite.components) {
+              Object.entries(sprite.components).forEach(([id, component]) => {
+                engine.registerSpriteComponent(id, component);
+              });
+            }
+            if (sprite.eventComponent) {
+              engine.addEventComponentResolver(sprite.eventComponent);
+            }
           },
         };
       }
@@ -214,16 +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/AbstractSocket.ts

@@ -9,8 +9,11 @@ export type SocketUpdateProperties = {
   host?: string;
   query?: SocketQuery;
 };
+export type WebSocketMode = "standalone" | "mmorpg";
 
 export abstract class AbstractWebsocket {
+  readonly mode?: WebSocketMode;
+
   constructor(protected context: Context) {}
 
   abstract connection(listeners?: (data: any) => void): Promise<void>;

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;
+}

package/src/services/cameraFollow.spec.ts

@@ -0,0 +1,220 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  applyCameraFollow,
+  cameraFollowAnimationOptions,
+  cameraFollowOptions,
+  ownsCameraFollowRevision,
+} from "./cameraFollow";
+
+const createViewport = () => ({
+  animate: vi.fn(),
+  follow: vi.fn(),
+  plugins: {
+    remove: vi.fn(),
+  },
+});
+
+describe("camera follow", () => {
+  it("normalizes transition options from smoothMove", () => {
+    expect(cameraFollowAnimationOptions(true)).toEqual({
+      time: 1000,
+      ease: "easeInOutSine",
+    });
+    expect(cameraFollowAnimationOptions({ time: 450, ease: "easeInOutQuad" })).toEqual({
+      time: 450,
+      ease: "easeInOutQuad",
+    });
+    expect(cameraFollowAnimationOptions({ time: 450, ease: "easeInOutQuadd" } as any)).toEqual({
+      time: 450,
+      ease: "easeInOutSine",
+    });
+    expect(cameraFollowAnimationOptions(false)).toBeNull();
+  });
+
+  it("normalizes continuous follow options", () => {
+    expect(cameraFollowOptions({ speed: 12, acceleration: 0.2, radius: 80 })).toEqual({
+      speed: 12,
+      acceleration: 0.2,
+      radius: 80,
+    });
+    expect(cameraFollowOptions({ speed: -4, acceleration: null, radius: null })).toEqual({
+      speed: 0,
+      acceleration: null,
+      radius: null,
+    });
+    expect(cameraFollowOptions(true)).toBeUndefined();
+  });
+
+  it("animates to the target then follows it", () => {
+    const viewport = createViewport();
+    const target = { x: 120, y: 240 };
+
+    applyCameraFollow({
+      viewport,
+      target,
+      smoothMove: { time: 800, ease: "easeInOutQuad", speed: 10, radius: 32 },
+      followRevision: 2,
+      isCurrentRevision: (revision) => revision === 2,
+      shouldFollowCamera: () => true,
+    });
+
+    expect(viewport.plugins.remove).toHaveBeenCalledWith("animate");
+    expect(viewport.plugins.remove).toHaveBeenCalledWith("follow");
+    expect(viewport.animate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        position: { x: 120, y: 240 },
+        time: 800,
+        ease: "easeInOutQuad",
+      })
+    );
+    expect(viewport.follow).not.toHaveBeenCalled();
+
+    const animateOptions = viewport.animate.mock.calls[0][0];
+    animateOptions.callbackOnComplete();
+
+    const [followTarget, followOptions] = viewport.follow.mock.calls[0];
+    expect(followTarget).not.toBe(target);
+    expect(followTarget.x).toBe(120);
+    expect(followTarget.y).toBe(240);
+    expect(followOptions).toEqual({
+      speed: 10,
+      radius: 32,
+    });
+  });
+
+  it("follows instantly when smoothMove is disabled", () => {
+    const viewport = createViewport();
+    const target = { x: 120, y: 240 };
+
+    applyCameraFollow({
+      viewport,
+      target,
+      smoothMove: false,
+      followRevision: 1,
+      isCurrentRevision: () => true,
+      shouldFollowCamera: () => true,
+    });
+
+    expect(viewport.animate).not.toHaveBeenCalled();
+    const [followTarget] = viewport.follow.mock.calls[0];
+    expect(followTarget).not.toBe(target);
+    expect(followTarget.x).toBe(120);
+    expect(followTarget.y).toBe(240);
+  });
+
+  it("does not follow after animation if another camera command superseded it", () => {
+    const viewport = createViewport();
+
+    applyCameraFollow({
+      viewport,
+      target: { x: 120, y: 240 },
+      smoothMove: { time: 800, ease: "easeInOutQuad" },
+      followRevision: 2,
+      isCurrentRevision: (revision) => revision === 3,
+      shouldFollowCamera: () => true,
+    });
+
+    const animateOptions = viewport.animate.mock.calls[0][0];
+    animateOptions.callbackOnComplete();
+
+    expect(viewport.follow).not.toHaveBeenCalled();
+  });
+
+  it("does not follow a target whose position cannot be read", () => {
+    const viewport = createViewport();
+    const target = {
+      get x(): number {
+        throw new Error("target destroyed");
+      },
+      get y() {
+        return 240;
+      },
+    };
+
+    applyCameraFollow({
+      viewport,
+      target,
+      smoothMove: false,
+      followRevision: 1,
+      isCurrentRevision: () => true,
+      shouldFollowCamera: () => true,
+    });
+
+    expect(viewport.plugins.remove).toHaveBeenCalledWith("animate");
+    expect(viewport.plugins.remove).toHaveBeenCalledWith("follow");
+    expect(viewport.animate).not.toHaveBeenCalled();
+    expect(viewport.follow).not.toHaveBeenCalled();
+  });
+
+  it("keeps the follow target readable when the source target is destroyed", () => {
+    const viewport = createViewport();
+    let position: { x: number; y: number } | null = { x: 120, y: 240 };
+    const target = {
+      get destroyed() {
+        return position === null;
+      },
+      get x() {
+        if (!position) throw new Error("target destroyed");
+        return position.x;
+      },
+      get y() {
+        if (!position) throw new Error("target destroyed");
+        return position.y;
+      },
+    };
+
+    applyCameraFollow({
+      viewport,
+      target,
+      smoothMove: false,
+      followRevision: 1,
+      isCurrentRevision: () => true,
+      shouldFollowCamera: () => true,
+    });
+
+    const [followTarget] = viewport.follow.mock.calls[0];
+    expect(followTarget.x).toBe(120);
+    expect(followTarget.y).toBe(240);
+
+    position = { x: 160, y: 280 };
+    expect(followTarget.x).toBe(160);
+    expect(followTarget.y).toBe(280);
+
+    position = null;
+    expect(followTarget.x).toBe(160);
+    expect(followTarget.y).toBe(280);
+  });
+
+  it("does not follow after animation if the target was destroyed", () => {
+    const viewport = createViewport();
+    let destroyed = false;
+    const target = {
+      get destroyed() {
+        return destroyed;
+      },
+      x: 120,
+      y: 240,
+    };
+
+    applyCameraFollow({
+      viewport,
+      target,
+      smoothMove: { time: 800, ease: "easeInOutQuad" },
+      followRevision: 2,
+      isCurrentRevision: (revision) => revision === 2,
+      shouldFollowCamera: () => true,
+    });
+
+    destroyed = true;
+    const animateOptions = viewport.animate.mock.calls[0][0];
+    animateOptions.callbackOnComplete();
+
+    expect(viewport.follow).not.toHaveBeenCalled();
+  });
+
+  it("only lets the sprite that owns the active follow revision clear plugins", () => {
+    expect(ownsCameraFollowRevision(2, 2)).toBe(true);
+    expect(ownsCameraFollowRevision(2, 3)).toBe(false);
+    expect(ownsCameraFollowRevision(null, 2)).toBe(false);
+  });
+});