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

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,6 @@ 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 { withMobile } from "./components/gui/mobile";
 export * from "./services/AbstractSocket";

package/src/module.ts

@@ -155,6 +155,19 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
           },
         };
       }
+      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 = {

package/src/services/actionInput.spec.ts

@@ -0,0 +1,101 @@
+import { describe, expect, test } from "vitest";
+import {
+  getKeyboardControlBind,
+  normalizeActionInput,
+  resolveKeyboardActionInput,
+} from "./actionInput";
+
+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",
+    });
+  });
+});

package/src/services/actionInput.ts

@@ -0,0 +1,53 @@
+import type { RpgActionInput, 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;
+}
+
+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 };
+}

package/src/services/mmorpg-connection.spec.ts

@@ -0,0 +1,99 @@
+import { describe, expect, test } from "vitest";
+import { isNativeSocketEvent, parseSocketMessage, waitForRpgjsConnected } from "./mmorpg-connection";
+
+function wait(ms = 0): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+class FakeConnection extends EventTarget {
+  serverMessage(data: any) {
+    this.dispatchEvent(new MessageEvent("message", {
+      data: typeof data === "string" ? data : JSON.stringify(data),
+    }));
+  }
+
+  close(reason = "", code = 1008) {
+    this.dispatchEvent(new CloseEvent("close", {
+      code,
+      reason,
+    }));
+  }
+
+  fail(message = "WebSocket connection failed") {
+    this.dispatchEvent(new ErrorEvent("error", {
+      message,
+    }));
+  }
+}
+
+describe("MMORPG connection gate", () => {
+  test("resolves only after the RPGJS connected packet", async () => {
+    const conn = new FakeConnection();
+    let resolved = false;
+    const promise = waitForRpgjsConnected(conn).then(() => {
+      resolved = true;
+    });
+
+    conn.serverMessage({ type: "sync", value: { pId: "player-1" } });
+    await wait();
+
+    expect(resolved).toBe(false);
+
+    conn.serverMessage({ type: "connected", value: { id: "conn-1" } });
+    await promise;
+
+    expect(resolved).toBe(true);
+  });
+
+  test("rejects when the socket closes before the RPGJS connected packet", async () => {
+    const conn = new FakeConnection();
+    const promise = waitForRpgjsConnected(conn);
+
+    conn.close("Authentication failed");
+
+    await expect(promise).rejects.toThrow("Authentication failed");
+  });
+
+  test("can ignore the clean close emitted by PartySocket during manual reconnect", async () => {
+    const conn = new FakeConnection();
+    const promise = waitForRpgjsConnected(conn, 10000, { ignoreCleanClose: true });
+
+    conn.close("", 1000);
+    await wait();
+
+    conn.serverMessage({ type: "connected", value: { id: "conn-2" } });
+
+    await expect(promise).resolves.toBeUndefined();
+  });
+
+  test("can ignore PartySocket reconnect close events with non-string reasons", async () => {
+    const conn = new FakeConnection();
+    const promise = waitForRpgjsConnected(conn, 10000, { ignoreCleanClose: true });
+
+    conn.dispatchEvent(new CloseEvent("close", {
+      code: 1000,
+      reason: new Event("close") as any,
+    }));
+    await wait();
+
+    conn.serverMessage({ type: "connected", value: { id: "conn-3" } });
+
+    await expect(promise).resolves.toBeUndefined();
+  });
+
+  test("rejects when the socket errors before the RPGJS connected packet", async () => {
+    const conn = new FakeConnection();
+    const promise = waitForRpgjsConnected(conn);
+
+    conn.fail("Unauthorized");
+
+    await expect(promise).rejects.toThrow("Unauthorized");
+  });
+
+  test("parses connection messages and detects native socket events", () => {
+    expect(parseSocketMessage(JSON.stringify({ type: "connected" }))).toEqual({ type: "connected" });
+    expect(parseSocketMessage("not-json")).toBeUndefined();
+    expect(isNativeSocketEvent("open")).toBe(true);
+    expect(isNativeSocketEvent("sync")).toBe(false);
+  });
+});

package/src/services/mmorpg-connection.ts

@@ -0,0 +1,69 @@
+export function parseSocketMessage(data: any) {
+  if (typeof data !== "string") {
+    return data;
+  }
+  try {
+    return JSON.parse(data);
+  }
+  catch {
+    return undefined;
+  }
+}
+
+export function isNativeSocketEvent(event: string) {
+  return event === "open" || event === "close" || event === "error";
+}
+
+export function waitForRpgjsConnected(
+  conn: any,
+  timeoutMs = 10000,
+  options: { ignoreCleanClose?: boolean } = {},
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    let timeoutId: number | undefined;
+
+    const cleanup = () => {
+      conn.removeEventListener("message", onMessage);
+      conn.removeEventListener("close", onClose);
+      conn.removeEventListener("error", onError);
+      if (timeoutId !== undefined) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+    const rejectWith = (error: Error) => {
+      cleanup();
+      reject(error);
+    };
+    const onMessage = (event: MessageEvent) => {
+      const data = parseSocketMessage(event.data);
+      if (data?.type !== "connected") {
+        return;
+      }
+      cleanup();
+      resolve();
+    };
+    const onClose = (event: CloseEvent) => {
+      const rawReason: unknown = (event as any).reason;
+      if (
+        options.ignoreCleanClose
+        && (event.code === 1000 || rawReason instanceof Event || typeof rawReason !== "string")
+      ) {
+        return;
+      }
+      const reason = typeof rawReason === "string" && rawReason
+        ? rawReason
+        : "WebSocket closed before RPGJS connection was accepted";
+      rejectWith(new Error(reason));
+    };
+    const onError = (event: ErrorEvent) => {
+      rejectWith(new Error(event.message || "WebSocket connection failed"));
+    };
+
+    conn.addEventListener("message", onMessage);
+    conn.addEventListener("close", onClose);
+    conn.addEventListener("error", onError);
+    timeoutId = window.setTimeout(() => {
+      rejectWith(new Error("RPGJS connection timeout"));
+    }, timeoutMs);
+  });
+}

package/src/services/mmorpg.ts

@@ -2,21 +2,25 @@ import { Context } from "@signe/di";
 import { connectionRoom } from "@signe/sync/client";
 import { RpgGui } from "../Gui/Gui";
 import { RpgClientEngine } from "../RpgClientEngine";
-import { AbstractWebsocket, SocketUpdateProperties, WebSocketToken } from "./AbstractSocket";
+import { AbstractWebsocket, SocketQuery, SocketUpdateProperties, WebSocketToken } from "./AbstractSocket";
 import { UpdateMapService, UpdateMapToken } from "@rpgjs/common";
 import { provideKeyboardControls } from "./keyboardControls";
 import { provideSaveClient } from "./save";
+import { isNativeSocketEvent, waitForRpgjsConnected } from "./mmorpg-connection";
 
-interface MmorpgOptions {
+export interface MmorpgOptions {
     host?: string;
     connectionId?: string;
     connectionIdScope?: "local" | "session" | "ephemeral";
+    query?: SocketQuery | (() => SocketQuery | undefined);
+    socketOptions?: Record<string, any>;
 }
 
-class BridgeWebsocket extends AbstractWebsocket {
+export class BridgeWebsocket extends AbstractWebsocket {
   private socket: any;
   private privateId: string;
   private pendingOn: Array<{ event: string; callback: (data: any) => void }> = [];
+  private acceptedOpenListeners = new Set<(data: any) => void>();
   private targetRoom = "lobby-1";
 
   constructor(protected context: Context, private options: MmorpgOptions = {}) {
@@ -51,6 +55,14 @@ class BridgeWebsocket extends AbstractWebsocket {
     return id;
   }
 
+  private resolveQuery(): SocketQuery {
+    const query = typeof this.options.query === "function"
+      ? this.options.query()
+      : this.options.query;
+
+    return query ?? {};
+  }
+
   async connection(listeners?: (data: any) => void) {
     // tmp
     class Room {
@@ -59,17 +71,28 @@ class BridgeWebsocket extends AbstractWebsocket {
     const instance = new Room()
     const host = this.options.host || window.location.host;
     this.socket = await connectionRoom({
+        maxRetries: 0,
+        ...this.options.socketOptions,
         host,
         room: this.targetRoom,
         id: this.privateId,
         query: {
+          ...this.resolveQuery(),
           id: this.privateId,
         },
     }, instance)
 
-    listeners?.(this.socket)
-    this.pendingOn.forEach(({ event, callback }) => this.socket.on(event, callback));
+    const pendingOn = this.pendingOn;
     this.pendingOn = [];
+    pendingOn
+      .filter(({ event }) => !this.isNativeSocketEvent(event))
+      .forEach(({ event, callback }) => this.attachEvent(event, callback));
+    await waitForRpgjsConnected(this.socket.conn);
+    pendingOn
+      .filter(({ event }) => this.isNativeSocketEvent(event))
+      .forEach(({ event, callback }) => this.attachEvent(event, callback));
+    this.emitAcceptedOpen();
+    listeners?.(this.socket)
   }
 
   on(key: string, callback: (data: any) => void) {
@@ -77,11 +100,19 @@ class BridgeWebsocket extends AbstractWebsocket {
       this.pendingOn.push({ event: key, callback });
       return;
     }
-    this.socket.on(key, callback);
+    this.attachEvent(key, callback);
   }
 
   off(event: string, callback: (data: any) => void) {
     if (!this.socket) return;
+    if (event === "open") {
+      this.acceptedOpenListeners.delete(callback);
+      return;
+    }
+    if (this.isNativeSocketEvent(event)) {
+      this.socket.conn.removeEventListener(event, callback);
+      return;
+    }
     this.socket.off(event, callback);
   }
 
@@ -89,6 +120,23 @@ class BridgeWebsocket extends AbstractWebsocket {
     this.socket.emit(event, data);
   }
 
+  private attachEvent(event: string, callback: (data: any) => void) {
+    if (event === "open") {
+      this.acceptedOpenListeners.add(callback);
+      return;
+    }
+    if (this.isNativeSocketEvent(event)) {
+      this.socket.conn.addEventListener(event, callback);
+      return;
+    }
+    this.socket.on(event, callback);
+  }
+
+  private emitAcceptedOpen() {
+    const event = new Event("open");
+    this.acceptedOpenListeners.forEach((callback) => callback(event));
+  }
+
   updateProperties({ room, host, query }: SocketUpdateProperties) {
     if (!this.socket?.conn) return;
     this.targetRoom = room;
@@ -97,46 +145,24 @@ class BridgeWebsocket extends AbstractWebsocket {
       id: this.privateId,
       host: host || this.options.host || window.location.host,
       query: {
+        ...this.resolveQuery(),
         ...query,
         id: this.privateId,
       },
     })
   }
 
-  private waitForNextOpen(conn: any, timeoutMs = 10000): Promise<void> {
-    return new Promise((resolve, reject) => {
-      let timeoutId: number | undefined;
-      const onOpen = () => {
-        cleanup();
-        resolve();
-      };
-      const onError = () => {
-        cleanup();
-        reject(new Error("WebSocket reconnect failed"));
-      };
-      const cleanup = () => {
-        conn.removeEventListener("open", onOpen);
-        conn.removeEventListener("error", onError);
-        if (timeoutId !== undefined) {
-          window.clearTimeout(timeoutId);
-        }
-      };
-
-      conn.addEventListener("open", onOpen);
-      conn.addEventListener("error", onError);
-      timeoutId = window.setTimeout(() => {
-        cleanup();
-        reject(new Error("WebSocket reconnect timeout"));
-      }, timeoutMs);
-    });
+  private isNativeSocketEvent(event: string) {
+    return isNativeSocketEvent(event);
   }
 
   async reconnect(_listeners?: (data: any) => void): Promise<void> {
     if (!this.socket?.conn) return;
     const conn = this.socket.conn;
-    const opened = this.waitForNextOpen(conn);
+    const connected = waitForRpgjsConnected(conn, 10000, { ignoreCleanClose: true });
     conn.reconnect();
-    await opened;
+    await connected;
+    this.emitAcceptedOpen();
   }
 
   getCurrentRoom(): string {

package/src/services/pointerContext.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "vitest";
+import { createClientPointerContext } from "./pointerContext";
+
+describe("createClientPointerContext", () => {
+  test("returns null before any pointer event", () => {
+    const pointer = createClientPointerContext();
+
+    expect(pointer.screen()).toBeNull();
+    expect(pointer.world()).toBeNull();
+  });
+
+  test("stores screen and world coordinates from pointer events", () => {
+    const pointer = createClientPointerContext();
+
+    const world = pointer.updateFromEvent({
+      global: { x: 120, y: 80 },
+      currentTarget: {
+        toLocal(point: { x: number; y: number }) {
+          return { x: point.x + 10, y: point.y + 20 };
+        },
+      },
+    });
+
+    expect(world).toEqual({ x: 130, y: 100 });
+    expect(pointer.screen()).toEqual({ x: 120, y: 80 });
+    expect(pointer.world()).toEqual({ x: 130, y: 100 });
+  });
+
+  test("ignores pointer events without usable coordinates", () => {
+    const pointer = createClientPointerContext();
+
+    expect(pointer.updateFromEvent({ global: { x: Number.NaN, y: 80 } })).toBeNull();
+    expect(pointer.screen()).toBeNull();
+    expect(pointer.world()).toBeNull();
+  });
+});