@rpgjs/client 5.0.0-beta.20 → 5.0.0-beta.23

package/src/services/cameraFollow.ts

@@ -0,0 +1,222 @@
+export const DEFAULT_CAMERA_FOLLOW_TIME = 1000;
+export const DEFAULT_CAMERA_FOLLOW_EASE = "easeInOutSine";
+
+export const CAMERA_FOLLOW_EASES = [
+  "linear",
+  "easeInQuad",
+  "easeOutQuad",
+  "easeInOutQuad",
+  "easeInCubic",
+  "easeOutCubic",
+  "easeInOutCubic",
+  "easeInQuart",
+  "easeOutQuart",
+  "easeInOutQuart",
+  "easeInQuint",
+  "easeOutQuint",
+  "easeInOutQuint",
+  "easeInSine",
+  "easeOutSine",
+  "easeInOutSine",
+  "easeInExpo",
+  "easeOutExpo",
+  "easeInOutExpo",
+  "easeInCirc",
+  "easeOutCirc",
+  "easeInOutCirc",
+  "easeInElastic",
+  "easeOutElastic",
+  "easeInOutElastic",
+  "easeInBack",
+  "easeOutBack",
+  "easeInOutBack",
+  "easeInBounce",
+  "easeOutBounce",
+  "easeInOutBounce",
+] as const;
+
+export type CameraFollowEase = typeof CAMERA_FOLLOW_EASES[number];
+
+export type CameraFollowSmoothMoveOptions = {
+  /** Enable or disable the smooth transition when options are sent as an object. */
+  enabled?: boolean;
+  /** Duration of the transition to the new camera target, in milliseconds. */
+  time?: number;
+  /** pixi-viewport easing name, for example "easeInOutQuad". */
+  ease?: CameraFollowEase;
+  /** Continuous follow speed after the transition. 0 keeps the target centered instantly. */
+  speed?: number;
+  /** Continuous follow acceleration after the transition. */
+  acceleration?: number | null;
+  /** Center radius where the followed target can move without moving the viewport. */
+  radius?: number | null;
+};
+
+export type CameraFollowSmoothMove = boolean | CameraFollowSmoothMoveOptions;
+
+export type CameraFollowTarget = {
+  x: number;
+  y: number;
+  destroyed?: boolean;
+} | null | undefined;
+
+export type CameraFollowPosition = {
+  x: number;
+  y: number;
+};
+
+export interface CameraFollowApplyContext {
+  viewport: any;
+  target: CameraFollowTarget;
+  smoothMove: CameraFollowSmoothMove;
+  followRevision: number;
+  isCurrentRevision: (revision: number) => boolean;
+  shouldFollowCamera: () => boolean;
+}
+
+const finiteNumber = (value: unknown, fallback: number) => {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+};
+
+const isCameraFollowEase = (value: unknown): value is CameraFollowEase => {
+  return typeof value === "string" && (CAMERA_FOLLOW_EASES as readonly string[]).includes(value);
+};
+
+export const smoothMoveEnabled = (smoothMove: CameraFollowSmoothMove) => {
+  if (smoothMove === false) return false;
+  if (typeof smoothMove === "object" && smoothMove !== null && smoothMove.enabled === false) {
+    return false;
+  }
+  return true;
+};
+
+export const cameraFollowAnimationOptions = (
+  smoothMove: CameraFollowSmoothMove
+) => {
+  if (!smoothMoveEnabled(smoothMove)) return null;
+  const options = typeof smoothMove === "object" && smoothMove !== null ? smoothMove : {};
+  return {
+    time: Math.max(0, finiteNumber(options.time, DEFAULT_CAMERA_FOLLOW_TIME)),
+    ease: isCameraFollowEase(options.ease) ? options.ease : DEFAULT_CAMERA_FOLLOW_EASE,
+  };
+};
+
+export const cameraFollowOptions = (smoothMove: CameraFollowSmoothMove) => {
+  if (typeof smoothMove !== "object" || smoothMove === null) return undefined;
+  const options: { speed?: number; acceleration?: number | null; radius?: number | null } = {};
+  if (typeof smoothMove.speed === "number" && Number.isFinite(smoothMove.speed)) {
+    options.speed = Math.max(0, smoothMove.speed);
+  }
+  if (typeof smoothMove.acceleration === "number" && Number.isFinite(smoothMove.acceleration)) {
+    options.acceleration = Math.max(0, smoothMove.acceleration);
+  } else if (smoothMove.acceleration === null) {
+    options.acceleration = null;
+  }
+  if (typeof smoothMove.radius === "number" && Number.isFinite(smoothMove.radius)) {
+    options.radius = Math.max(0, smoothMove.radius);
+  } else if (smoothMove.radius === null) {
+    options.radius = null;
+  }
+  return Object.keys(options).length > 0 ? options : undefined;
+};
+
+export const clearCameraFollowPlugins = (viewport: any) => {
+  viewport?.plugins?.remove?.("animate");
+  viewport?.plugins?.remove?.("follow");
+};
+
+export const ownsCameraFollowRevision = (
+  appliedRevision: number | null,
+  currentRevision: number
+) => {
+  return appliedRevision !== null && appliedRevision === currentRevision;
+};
+
+export const readCameraFollowPosition = (
+  target: CameraFollowTarget
+): CameraFollowPosition | null => {
+  if (!target) return null;
+
+  try {
+    if (target.destroyed) return null;
+    const x = target.x;
+    const y = target.y;
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
+    return { x, y };
+  } catch {
+    return null;
+  }
+};
+
+const createCameraFollowTarget = (
+  target: CameraFollowTarget,
+  initialPosition: CameraFollowPosition
+) => {
+  let lastPosition = initialPosition;
+
+  const readPosition = () => {
+    const nextPosition = readCameraFollowPosition(target);
+    if (nextPosition) {
+      lastPosition = nextPosition;
+    }
+    return lastPosition;
+  };
+
+  return {
+    get x() {
+      return readPosition().x;
+    },
+    get y() {
+      return readPosition().y;
+    },
+  };
+};
+
+export const followCameraInstantly = (
+  viewport: any,
+  target: CameraFollowTarget,
+  smoothMove: CameraFollowSmoothMove
+) => {
+  const position = readCameraFollowPosition(target);
+  if (!position) return false;
+
+  const followTarget = createCameraFollowTarget(target, position);
+  const followOptions = cameraFollowOptions(smoothMove);
+  if (followOptions) {
+    viewport.follow(followTarget, followOptions);
+  } else {
+    viewport.follow(followTarget);
+  }
+  return true;
+};
+
+export const applyCameraFollow = ({
+  viewport,
+  target,
+  smoothMove,
+  followRevision,
+  isCurrentRevision,
+  shouldFollowCamera,
+}: CameraFollowApplyContext) => {
+  clearCameraFollowPlugins(viewport);
+
+  const position = readCameraFollowPosition(target);
+  if (!position) return false;
+
+  const animationOptions = cameraFollowAnimationOptions(smoothMove);
+  if (!animationOptions || animationOptions.time <= 0) {
+    return followCameraInstantly(viewport, target, smoothMove);
+  }
+
+  viewport.animate({
+    position,
+    time: animationOptions.time,
+    ease: animationOptions.ease,
+    callbackOnComplete: () => {
+      if (!isCurrentRevision(followRevision) || !shouldFollowCamera()) return;
+      if (!readCameraFollowPosition(target)) return;
+      followCameraInstantly(viewport, target, smoothMove);
+    },
+  });
+  return true;
+};

package/src/services/standalone.spec.ts

@@ -51,4 +51,51 @@ describe("standalone websocket bridge", () => {
     expect(standaloneProvider.useFactory(context).mode).toBe("standalone");
     expect(mmorpgProvider.useFactory(context).mode).toBe("mmorpg");
   });
+
+  test("reconnects standalone rooms with updated room and query", async () => {
+    const connects: Array<{ roomId: string; url: string; sessionId: string }> = [];
+    class Server {
+      subRoom = {
+        onStart: vi.fn(),
+      };
+
+      constructor(public room: any) {}
+
+      async onStart() {}
+
+      async onConnect(conn: any, ctx: any) {
+        connects.push({
+          roomId: this.room.id,
+          url: ctx.request.url,
+          sessionId: conn.sessionId,
+        });
+      }
+    }
+
+    const context = new Context();
+    const standaloneProvider = provideRpg(Server).find(
+      (provider: any) => provider.provide === WebSocketToken,
+    ) as any;
+    const socket = standaloneProvider.useFactory(context);
+
+    await socket.connection();
+    socket.updateProperties({
+      room: "map-center-map",
+      query: { transferToken: "token-1" },
+    });
+    await socket.reconnect();
+
+    expect(connects).toEqual([
+      expect.objectContaining({
+        roomId: "lobby-1",
+        sessionId: "player-client-id",
+      }),
+      expect.objectContaining({
+        roomId: "map-center-map",
+        sessionId: "player-client-id",
+      }),
+    ]);
+    expect(connects[1].url).toContain("transferToken=token-1");
+    expect(socket.getServer().room.id).toBe("map-center-map");
+  });
 });

package/src/services/standalone.ts

@@ -8,6 +8,7 @@ import { RpgGui } from "../Gui/Gui";
 import { provideKeyboardControls } from "./keyboardControls";
 import { provideSaveClient } from "./save";
 import { normalizeStandaloneMessage } from "./standalone-message";
+import type { SocketQuery } from "./AbstractSocket";
 
 type ServerIo = any;
 type ClientIo = any;
@@ -22,6 +23,9 @@ class BridgeWebsocket extends AbstractWebsocket {
   private room: ServerIo;
   private socket: ClientIo;
   private socketRoom?: ServerIo;
+  private roomId = "lobby-1";
+  private query?: SocketQuery;
+  private readonly privateId = "player-client-id";
   private listeners: Array<{
     event: string;
     callback: (data: any) => void;
@@ -29,11 +33,10 @@ class BridgeWebsocket extends AbstractWebsocket {
   }> = [];
   private rooms = {
     partyFn: async (roomId: string) => {
-      this.room = new ServerIo(roomId, this.rooms);
-      const server = new this.server(this.room)
+      const room = new ServerIo(roomId, this.rooms);
+      const server = new this.server(room)
       await server.onStart();
       await server.subRoom.onStart()
-      this.context.set('server', server)
       return server
     },
     env: {}
@@ -57,22 +60,8 @@ 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')
-    const request = new Request(url.toString(), {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    })
+    await this.connectToRoom();
     listeners?.(this.socket)
-    this.room.clients.set(this.socket.id, this.socket);
-    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
   }
 
@@ -129,8 +118,9 @@ class BridgeWebsocket extends AbstractWebsocket {
    * await websocket.reconnect()
    * ```
    */
-  updateProperties(_params: SocketUpdateProperties) {
-    // empty
+  updateProperties({ room, query }: SocketUpdateProperties) {
+    this.roomId = room;
+    this.query = query;
   }
 
   /**
@@ -156,6 +146,49 @@ class BridgeWebsocket extends AbstractWebsocket {
     })
   }
 
+  private async connectToRoom() {
+    if (this.serverInstance?.room?.id !== this.roomId) {
+      const party = await this.room.context.parties.main.get(this.roomId);
+      this.serverInstance = party.server;
+      this.context.set('server', this.serverInstance);
+      this.room = this.serverInstance.room;
+    }
+    else {
+      this.serverInstance = this.context.get('server');
+    }
+
+    this.socket = new ClientIo(this.serverInstance, this.privateId);
+    const url = new URL('http://localhost');
+    const query = this.normalizeQuery(this.query);
+    if (query) {
+      for (const [key, value] of Object.entries(query)) {
+        url.searchParams.set(key, value);
+      }
+    }
+    const request = new Request(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    this.room.clients.set(this.socket.id, this.socket);
+    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);
+  }
+
+  private normalizeQuery(query?: SocketQuery): Record<string, string> | undefined {
+    if (!query) {
+      return undefined;
+    }
+    return Object.fromEntries(
+      Object.entries(query)
+        .filter((entry): entry is [string, string] => typeof entry[1] === "string")
+    );
+  }
+
   private detachCurrentSocket() {
     if (!this.socket) return;
     this.listeners.forEach(({ handler }) => {

package/src/utils/syncHitbox.spec.ts

@@ -0,0 +1,79 @@
+import { signal } from "canvasengine";
+import { describe, expect, test, vi } from "vitest";
+import { load } from "@signe/sync";
+import { applySyncedHitboxPayload } from "./syncHitbox";
+
+const createObject = (id: string) => ({
+  id,
+  x: signal(10),
+  y: signal(20),
+  hitbox: signal({ w: 32, h: 32 }),
+});
+
+describe("applySyncedHitboxPayload", () => {
+  test("applies player hitboxes from sync object payloads", () => {
+    const player = createObject("player-1");
+    const sceneMap = {
+      players: () => ({ "player-1": player }),
+      events: () => ({}),
+      getObjectById: (id: string) => (id === "player-1" ? player : undefined),
+      updateHitbox: vi.fn(),
+    };
+    const payload = {
+      players: {
+        "player-1": {
+          hitbox: { w: 56, h: 50 },
+        },
+      },
+    };
+
+    load(sceneMap, payload, true);
+    expect(player.hitbox()).toEqual({ w: 32, h: 32 });
+
+    applySyncedHitboxPayload(sceneMap, payload);
+
+    expect(player.hitbox()).toEqual({ w: 56, h: 50 });
+    expect(sceneMap.updateHitbox).toHaveBeenCalledWith("player-1", 10, 20, 56, 50);
+  });
+
+  test("accepts Studio width and height hitbox payloads for events", () => {
+    const event = createObject("event-1");
+    const sceneMap = {
+      players: () => ({}),
+      events: () => ({ "event-1": event }),
+      getObjectById: (id: string) => (id === "event-1" ? event : undefined),
+      updateHitbox: vi.fn(),
+    };
+
+    applySyncedHitboxPayload(sceneMap, {
+      events: {
+        "event-1": {
+          hitbox: { width: "80", height: 40 },
+        },
+      },
+    });
+
+    expect(event.hitbox()).toEqual({ w: 80, h: 40 });
+    expect(sceneMap.updateHitbox).toHaveBeenCalledWith("event-1", 10, 20, 80, 40);
+  });
+
+  test("ignores invalid hitbox payloads", () => {
+    const player = createObject("player-1");
+    const sceneMap = {
+      players: () => ({ "player-1": player }),
+      events: () => ({}),
+      updateHitbox: vi.fn(),
+    };
+
+    applySyncedHitboxPayload(sceneMap, {
+      players: {
+        "player-1": {
+          hitbox: { w: 0, h: 40 },
+        },
+      },
+    });
+
+    expect(player.hitbox()).toEqual({ w: 32, h: 32 });
+    expect(sceneMap.updateHitbox).not.toHaveBeenCalled();
+  });
+});

package/src/utils/syncHitbox.ts

@@ -0,0 +1,104 @@
+interface HitboxSize {
+  width: number;
+  height: number;
+}
+
+const toPositiveNumber = (value: unknown): number | null => {
+  const numberValue = typeof value === "string" ? Number(value) : value;
+  return typeof numberValue === "number" && Number.isFinite(numberValue) && numberValue > 0
+    ? Math.round(numberValue)
+    : null;
+};
+
+const readSignalValue = (value: any): any => {
+  if (typeof value === "function") {
+    try {
+      return value();
+    }
+    catch {
+      return undefined;
+    }
+  }
+  return value;
+};
+
+const normalizeHitbox = (source: unknown): HitboxSize | null => {
+  if (!source || typeof source !== "object") {
+    return null;
+  }
+
+  const hitbox = source as any;
+  const width = toPositiveNumber(hitbox.w ?? hitbox.width);
+  const height = toPositiveNumber(hitbox.h ?? hitbox.height);
+
+  return width && height ? { width, height } : null;
+};
+
+const readObjectHitbox = (object: any): HitboxSize | null => {
+  return normalizeHitbox(readSignalValue(object?.hitbox));
+};
+
+const readCoordinate = (object: any, key: "x" | "y"): number | null => {
+  const value = readSignalValue(object?.[key]);
+  const numberValue = typeof value === "string" ? Number(value) : value;
+  return typeof numberValue === "number" && Number.isFinite(numberValue)
+    ? numberValue
+    : null;
+};
+
+const getObjectById = (sceneMap: any, id: string): any => {
+  return sceneMap?.getObjectById?.(id)
+    ?? sceneMap?.players?.()?.[id]
+    ?? sceneMap?.events?.()?.[id];
+};
+
+const applyHitboxToObject = (
+  sceneMap: any,
+  id: string,
+  object: any,
+  hitbox: HitboxSize,
+): void => {
+  if (!object) {
+    return;
+  }
+
+  const current = readObjectHitbox(object);
+  if (current?.width !== hitbox.width || current?.height !== hitbox.height) {
+    if (typeof object.hitbox?.set === "function") {
+      object.hitbox.set({ w: hitbox.width, h: hitbox.height });
+    }
+    else if (typeof object.setHitbox === "function") {
+      object.setHitbox(hitbox.width, hitbox.height);
+      return;
+    }
+  }
+
+  const objectId = typeof object.id === "string" && object.id ? object.id : id;
+  const x = readCoordinate(object, "x");
+  const y = readCoordinate(object, "y");
+  if (objectId && x !== null && y !== null) {
+    sceneMap?.updateHitbox?.(objectId, x, y, hitbox.width, hitbox.height);
+  }
+};
+
+const applyHitboxCollection = (sceneMap: any, collection: unknown): void => {
+  if (!collection || typeof collection !== "object") {
+    return;
+  }
+
+  for (const [id, patch] of Object.entries(collection)) {
+    if (!patch || typeof patch !== "object") {
+      continue;
+    }
+    const hitbox = normalizeHitbox((patch as any).hitbox);
+    if (!hitbox) {
+      continue;
+    }
+    applyHitboxToObject(sceneMap, id, getObjectById(sceneMap, id), hitbox);
+  }
+};
+
+export const applySyncedHitboxPayload = (sceneMap: any, payload: any): void => {
+  applyHitboxCollection(sceneMap, payload?.players);
+  applyHitboxCollection(sceneMap, payload?.events);
+};