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

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

package/src/services/pointerContext.ts

@@ -0,0 +1,84 @@
+export interface ClientPointerPosition {
+  x: number;
+  y: number;
+}
+
+export interface ClientPointerContext {
+  screen(): ClientPointerPosition | null;
+  world(): ClientPointerPosition | null;
+  update(screen: ClientPointerPosition | null, world?: ClientPointerPosition | null): ClientPointerPosition | null;
+  updateFromEvent(event: any): ClientPointerPosition | null;
+}
+
+function toPosition(point: any): ClientPointerPosition | null {
+  const x = Number(point?.x);
+  const y = Number(point?.y);
+
+  if (!Number.isFinite(x) || !Number.isFinite(y)) {
+    return null;
+  }
+
+  return { x, y };
+}
+
+function extractGlobalPoint(event: any): ClientPointerPosition | null {
+  return toPosition(event?.global)
+    ?? toPosition(event?.data?.global)
+    ?? toPosition(event);
+}
+
+function extractWorldPoint(event: any, global: ClientPointerPosition | null): ClientPointerPosition | null {
+  const target = event?.currentTarget ?? event?.target;
+
+  if (target && global && typeof target.toLocal === "function") {
+    return toPosition(target.toLocal(global));
+  }
+
+  if (typeof event?.getLocalPosition === "function") {
+    return toPosition(event.getLocalPosition(target));
+  }
+
+  if (typeof event?.data?.getLocalPosition === "function") {
+    return toPosition(event.data.getLocalPosition(target));
+  }
+
+  return global;
+}
+
+export function createClientPointerContext(): ClientPointerContext {
+  let lastScreen: ClientPointerPosition | null = null;
+  let lastWorld: ClientPointerPosition | null = null;
+
+  const update = (screen: ClientPointerPosition | null, world?: ClientPointerPosition | null) => {
+    const nextScreen = toPosition(screen);
+    const nextWorld = toPosition(world) ?? nextScreen;
+
+    if (nextScreen) {
+      lastScreen = nextScreen;
+    }
+
+    if (nextWorld) {
+      lastWorld = nextWorld;
+    }
+
+    return lastWorld ? { ...lastWorld } : null;
+  };
+
+  return {
+    screen() {
+      return lastScreen ? { ...lastScreen } : null;
+    },
+
+    world() {
+      return lastWorld ? { ...lastWorld } : null;
+    },
+
+    update,
+
+    updateFromEvent(event: any) {
+      const global = extractGlobalPoint(event);
+      const world = extractWorldPoint(event, global);
+      return update(global, world);
+    },
+  };
+}

package/src/services/standalone-message.ts

@@ -0,0 +1,7 @@
+export function normalizeStandaloneMessage(event: unknown): any {
+  const raw = event && typeof event === "object" && "data" in event
+    ? (event as MessageEvent).data
+    : event;
+
+  return typeof raw === "string" ? JSON.parse(raw) : raw;
+}

package/src/services/standalone.spec.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test, vi } from "vitest";
+import { normalizeStandaloneMessage } from "./standalone-message";
+
+describe("standalone websocket bridge", () => {
+  test("dispatches mock room object broadcasts to named listeners", () => {
+    const onSpawn = vi.fn();
+    const object = normalizeStandaloneMessage({
+      type: "projectile:spawnBatch",
+      value: {
+        projectiles: [{ id: "p1", type: "bolt" }],
+      },
+    });
+
+    if (object.type === "projectile:spawnBatch") {
+      onSpawn(object.value);
+    }
+
+    expect(onSpawn).toHaveBeenCalledWith({
+      projectiles: [{ id: "p1", type: "bolt" }],
+    });
+  });
+
+  test("still accepts browser-style string messages", () => {
+    expect(normalizeStandaloneMessage({
+      data: JSON.stringify({
+        type: "projectile:spawnBatch",
+        value: { projectiles: [] },
+      }),
+    })).toEqual({
+      type: "projectile:spawnBatch",
+      value: { projectiles: [] },
+    });
+  });
+});

package/src/services/standalone.ts

@@ -7,6 +7,7 @@ import { LoadMapToken } from "./loadMap";
 import { RpgGui } from "../Gui/Gui";
 import { provideKeyboardControls } from "./keyboardControls";
 import { provideSaveClient } from "./save";
+import { normalizeStandaloneMessage } from "./standalone-message";
 
 type ServerIo = any;
 type ClientIo = any;
@@ -18,7 +19,12 @@ interface StandaloneOptions {
 class BridgeWebsocket extends AbstractWebsocket {
   private room: ServerIo;
   private socket: ClientIo;
-  private pendingOn: Array<{ event: string; callback: (data: any) => void }> = [];
+  private socketRoom?: ServerIo;
+  private listeners: Array<{
+    event: string;
+    callback: (data: any) => void;
+    handler: (event: any) => void;
+  }> = [];
   private rooms = {
     partyFn: async (roomId: string) => {
       this.room = new ServerIo(roomId, this.rooms);
@@ -48,6 +54,7 @@ class BridgeWebsocket extends AbstractWebsocket {
   }
 
   private async _connection(listeners?: (data: any) => void) {
+    this.detachCurrentSocket();
     this.serverInstance = this.context.get('server')
     this.socket = new ClientIo(this.serverInstance, 'player-client-id');
     const url = new URL('http://localhost')
@@ -58,30 +65,43 @@ class BridgeWebsocket extends AbstractWebsocket {
       }
     })
     listeners?.(this.socket)
-    await this.serverInstance.onConnect(this.socket.conn as any, { request } as any);
     this.room.clients.set(this.socket.id, this.socket);
-    this.pendingOn.forEach(({ event, callback }) => this.socket.addEventListener(event, callback));
-    this.pendingOn = [];
+    this.socketRoom = this.room;
+    this.listeners.forEach(({ handler }) => {
+      this.socket.addEventListener("message", handler);
+    });
+    await this.serverInstance.onConnect(this.socket.conn as any, { request } as any);
     return this.socket
   }
 
   on(key: string, callback: (data: any) => void) {
+    if (
+      this.listeners.some(
+        (listener) => listener.event === key && listener.callback === callback
+      )
+    ) {
+      return;
+    }
     const handler = (event) => {
-      const object = JSON.parse(event);
+      const object = normalizeStandaloneMessage(event);
       if (object.type === key) {
         callback(object.value);
       }
     };
-    if (!this.socket) {
-      this.pendingOn.push({ event: "message", callback: handler });
-      return;
-    }
-    this.socket.addEventListener("message", handler);
+    this.listeners.push({ event: key, callback, handler });
+    this.socket?.addEventListener("message", handler);
   }
 
   off(event: string, callback: (data: any) => void) {
-    if (!this.socket) return;
-    this.socket.removeEventListener(event, callback);
+    const remaining: typeof this.listeners = [];
+    for (const listener of this.listeners) {
+      if (listener.event === event && listener.callback === callback) {
+        this.socket?.removeEventListener("message", listener.handler);
+        continue;
+      }
+      remaining.push(listener);
+    }
+    this.listeners = remaining;
   }
 
   emit(event: string, data: any) {
@@ -134,6 +154,16 @@ class BridgeWebsocket extends AbstractWebsocket {
     })
   }
 
+  private detachCurrentSocket() {
+    if (!this.socket) return;
+    this.listeners.forEach(({ handler }) => {
+      this.socket.removeEventListener("message", handler);
+    });
+    this.socketRoom?.clients?.delete?.(this.socket.id);
+    this.socket = undefined as any;
+    this.socketRoom = undefined;
+  }
+
   getServer() {
     return this.serverInstance
   }

package/src/utils/mapId.ts

@@ -0,0 +1,2 @@
+export const normalizeRoomMapId = (mapId: string | undefined): string | undefined =>
+  typeof mapId === "string" ? mapId.replace(/^map-/, "") : undefined;