@rpgjs/client 5.0.0-alpha.2 → 5.0.0-alpha.20

package/dist/presets/lpc.d.ts

@@ -0,0 +1,89 @@
+export declare const LPCSpritesheetPreset: (options: {
+    id: string;
+    imageSource: string;
+    width: number;
+    height: number;
+    ratio?: number;
+}) => {
+    id: string;
+    image: string;
+    width: number;
+    height: number;
+    opacity: number;
+    rectWidth: number;
+    rectHeight: number;
+    framesWidth: number;
+    framesHeight: number;
+    spriteRealSize: {
+        width: number;
+        height: number;
+    };
+    textures: {
+        attack3?: {
+            offset: {
+                x: number;
+                y: number;
+            };
+            rectWidth: number;
+            rectHeight: number;
+            framesWidth: number;
+            framesHeight: number;
+            animations: ({ direction }: {
+                direction: any;
+            }) => any[];
+        } | undefined;
+        stand: {
+            offset: {
+                x: number;
+                y: number;
+            };
+            animations: ({ direction }: {
+                direction: any;
+            }) => {
+                time: number;
+                frameX: number;
+                frameY: number;
+            }[][];
+        };
+        walk: {
+            offset: {
+                x: number;
+                y: number;
+            };
+            framesWidth: number;
+            framesHeight: number;
+            animations: ({ direction }: {
+                direction: any;
+            }) => any[];
+        };
+        attack: {
+            offset: {
+                x: number;
+                y: number;
+            };
+            framesWidth: number;
+            framesHeight: number;
+            animations: ({ direction }: {
+                direction: any;
+            }) => any[];
+        };
+        skill: {
+            framesWidth: number;
+            framesHeight: number;
+            animations: ({ direction }: {
+                direction: any;
+            }) => any[];
+        };
+        attack2: {
+            offset: {
+                x: number;
+                y: number;
+            };
+            framesWidth: number;
+            framesHeight: number;
+            animations: ({ direction }: {
+                direction: any;
+            }) => any[];
+        };
+    };
+};

package/dist/services/loadMap.d.ts

@@ -1,14 +1,135 @@
 import { Context } from '@signe/di';
 export declare const LoadMapToken = "LoadMapToken";
-export type LoadMapOptions = (mapId: string) => Promise<void>;
+/**
+ * Represents the structure of map data that should be returned by the load map callback.
+ * This interface defines all the properties that can be provided when loading a custom map.
+ *
+ * @interface MapData
+ */
+type MapData = {
+    /** Raw map data that will be passed to the map component */
+    data: any;
+    /** CanvasEngine component that will render the map */
+    component: any;
+    /** Optional map width in pixels, used for viewport calculations */
+    width?: number;
+    /** Optional map height in pixels, used for viewport calculations */
+    height?: number;
+    /** Optional map events data (NPCs, interactive objects, etc.) */
+    events?: any;
+    /** Optional map identifier, defaults to the mapId parameter if not provided */
+    id?: string;
+};
+/**
+ * Callback function type for loading map data.
+ * This function receives a map ID and should return either a MapData object directly
+ * or a Promise that resolves to a MapData object.
+ *
+ * @callback LoadMapOptions
+ * @param {string} mapId - The identifier of the map to load
+ * @returns {Promise<MapData> | MapData} The map data object or a promise resolving to it
+ */
+export type LoadMapOptions = (mapId: string) => Promise<MapData> | MapData;
 export declare class LoadMapService {
     private context;
     private options;
     private updateMapService;
     constructor(context: Context, options: LoadMapOptions);
-    load(mapId: string): Promise<void>;
+    load(mapId: string): Promise<MapData>;
 }
+/**
+ * Creates a dependency injection configuration for custom map loading on the client side.
+ *
+ * This function allows you to customize how maps are loaded and displayed by providing
+ * a callback that defines custom map data and rendering components. It's designed to work
+ * with the RPG-JS dependency injection system and enables integration of custom map formats
+ * like Tiled TMX files or any other map data structure.
+ *
+ * The function sets up the necessary service providers for map loading, including:
+ * - UpdateMapToken: Handles map updates in the client context
+ * - LoadMapToken: Provides the LoadMapService with your custom loading logic
+ *
+ * **Design Concept:**
+ * The function follows the provider pattern, creating a modular way to inject custom
+ * map loading behavior into the RPG-JS client engine. It separates the concern of
+ * map data fetching from map rendering, allowing developers to focus on their specific
+ * map format while leveraging the engine's rendering capabilities.
+ *
+ * @param {LoadMapOptions} options - Callback function that handles map loading logic
+ * @returns {Array<Object>} Array of dependency injection provider configurations
+ *
+ * @example
+ * ```typescript
+ * import { provideLoadMap } from '@rpgjs/client'
+ * import { createModule } from '@rpgjs/common'
+ * import MyTiledMapComponent from './MyTiledMapComponent.ce'
+ *
+ * // Basic usage with JSON map data
+ * export function provideCustomMap() {
+ *   return createModule("CustomMap", [
+ *     provideLoadMap(async (mapId) => {
+ *       const response = await fetch(`/maps/${mapId}.json`)
+ *       const mapData = await response.json()
+ *
+ *       return {
+ *         data: mapData,
+ *         component: MyTiledMapComponent,
+ *         width: mapData.width,
+ *         height: mapData.height,
+ *         events: mapData.events
+ *       }
+ *     })
+ *   ])
+ * }
+ *
+ * // Advanced usage with Tiled TMX files
+ * export function provideTiledMap() {
+ *   return createModule("TiledMap", [
+ *     provideLoadMap(async (mapId) => {
+ *       // Load TMX file
+ *       const tmxResponse = await fetch(`/tiled/${mapId}.tmx`)
+ *       const tmxData = await tmxResponse.text()
+ *
+ *       // Parse TMX data (using a TMX parser)
+ *       const parsedMap = parseTMX(tmxData)
+ *
+ *       return {
+ *         data: parsedMap,
+ *         component: TiledMapRenderer,
+ *         width: parsedMap.width * parsedMap.tilewidth,
+ *         height: parsedMap.height * parsedMap.tileheight,
+ *         events: parsedMap.objectGroups?.find(g => g.name === 'events')?.objects
+ *       }
+ *     })
+ *   ])
+ * }
+ *
+ * // Synchronous usage for static maps
+ * export function provideStaticMap() {
+ *   return createModule("StaticMap", [
+ *     provideLoadMap((mapId) => {
+ *       const staticMaps = {
+ *         'town': { tiles: [...], npcs: [...] },
+ *         'dungeon': { tiles: [...], monsters: [...] }
+ *       }
+ *
+ *       return {
+ *         data: staticMaps[mapId],
+ *         component: StaticMapComponent,
+ *         width: 800,
+ *         height: 600
+ *       }
+ *     })
+ *   ])
+ * }
+ * ```
+ *
+ * @since 4.0.0
+ * @see {@link LoadMapOptions} for callback function signature
+ * @see {@link MapData} for return data structure
+ */
 export declare function provideLoadMap(options: LoadMapOptions): {
     provide: string;
     useFactory: (context: Context) => void;
 }[];
+export {};

package/dist/services/mmorpg.d.ts

@@ -4,17 +4,22 @@ import { RpgClientEngine } from '../RpgClientEngine';
 import { AbstractWebsocket } from './AbstractSocket';
 import { UpdateMapService } from '@rpgjs/common';
 interface MmorpgOptions {
-    host: string;
+    host?: string;
 }
 declare class BridgeWebsocket extends AbstractWebsocket {
     protected context: Context;
     private options;
     private socket;
-    constructor(context: Context, options: MmorpgOptions);
-    connection(): Promise<void>;
+    private privateId;
+    constructor(context: Context, options?: MmorpgOptions);
+    connection(listeners?: (data: any) => void): Promise<void>;
     on(key: string, callback: (data: any) => void): void;
     off(event: string, callback: (data: any) => void): void;
     emit(event: string, data: any): void;
+    updateProperties({ room }: {
+        room: any;
+    }): void;
+    reconnect(listeners?: (data: any) => void): Promise<void>;
 }
 declare class UpdateMapStandaloneService extends UpdateMapService {
     protected context: Context;
@@ -22,7 +27,7 @@ declare class UpdateMapStandaloneService extends UpdateMapService {
     constructor(context: Context, options: MmorpgOptions);
     update(map: any): Promise<void>;
 }
-export declare function provideMmorpg(options: MmorpgOptions): (typeof RpgGui | typeof RpgClientEngine | {
+export declare function provideMmorpg(options: MmorpgOptions): (typeof RpgClientEngine | typeof RpgGui | {
     provide: string;
     useFactory: (context: Context) => BridgeWebsocket;
 } | {

package/dist/services/standalone.d.ts

@@ -8,21 +8,70 @@ declare class BridgeWebsocket extends AbstractWebsocket {
     private server;
     private room;
     private socket;
+    private rooms;
     constructor(context: Context, server: any);
     connection(listeners?: (data: any) => void): Promise<any>;
+    private _connection;
     on(key: string, callback: (data: any) => void): void;
     off(event: string, callback: (data: any) => void): void;
     emit(event: string, data: any): void;
+    /**
+     * Update underlying connection properties before a reconnect
+     *
+     * Design
+     * - Dynamically register a factory for the requested room to ensure a fresh server instance
+     * - Swap the internal ServerIo to target the new room
+     *
+     * @param params - Properties to update
+     * @param params.room - The target room id (e.g. `map-simplemap2`)
+     *
+     * @example
+     * ```ts
+     * websocket.updateProperties({ room: 'map-simplemap2' })
+     * await websocket.reconnect()
+     * ```
+     */
     updateProperties({ room }: {
         room: any;
     }): void;
+    /**
+     * Reconnect the client to the current Party room
+     *
+     * Design
+     * - Must be called after `updateProperties()` when switching rooms
+     * - Rebuilds the client <-> server bridge and re-triggers connection listeners
+     *
+     * @param listeners - Optional callback to re-bind event handlers on the new socket
+     *
+     * @example
+     * ```ts
+     * websocket.updateProperties({ room: 'map-dungeon' })
+     * await websocket.reconnect((socket) => {
+     *   // re-bind events here
+     * })
+     * ```
+     */
     reconnect(listeners?: (data: any) => void): Promise<void>;
 }
 declare class UpdateMapStandaloneService extends UpdateMapService {
     private server;
-    update(mapId: string, map: any): Promise<void>;
+    /**
+     * Update the current room map data on the server side
+     *
+     * Design
+     * - Uses the in-memory server instance stored in context (standalone mode)
+     * - Builds a local HTTP-like request to the current Party room endpoint
+     *
+     * @param map - The map payload to apply on the server
+     *
+     * @example
+     * ```ts
+     * await updateMapService.update({ width: 1024, height: 768, events: [] })
+     * ```
+     */
+    update(map: any): Promise<void>;
 }
-export declare function provideRpg(server: any): (typeof RpgGui | typeof RpgClientEngine | {
+export declare function provideRpg(server: any): (typeof RpgClientEngine | typeof RpgGui | {
     provide: string;
     useFactory: (context: Context) => BridgeWebsocket;
     useClass?: undefined;

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.20",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build"
-  },
   "keywords": [
     "rpg",
     "game",
@@ -20,21 +16,29 @@
   ],
   "author": "Samuel Ronce",
   "license": "MIT",
+  "peerDependencies": {
+    "@canvasengine/presets": "*",
+    "canvasengine": "*",
+    "pixi.js": "^8.9.2"
+  },
   "dependencies": {
-    "@canvasengine/presets": "2.0.0-beta.22",
-    "@rpgjs/common": "workspace:*",
-    "@signe/di": "^2.3.3",
-    "@signe/room": "^2.3.3",
-    "@signe/sync": "^2.3.3",
-    "canvasengine": "2.0.0-beta.22",
-    "pixi.js": "^8.10.1",
+    "@rpgjs/client": "5.0.0-alpha.20",
+    "@rpgjs/common": "5.0.0-alpha.20",
+    "@rpgjs/server": "5.0.0-alpha.20",
+    "@signe/di": "^2.5.1",
+    "@signe/room": "^2.5.1",
+    "@signe/sync": "^2.5.1",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
-    "@canvasengine/compiler": "2.0.0-beta.21",
-    "vite": "^6.2.5",
-    "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.1.1"
+    "@canvasengine/compiler": "2.0.0-beta.34",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.14"
   },
-  "type": "module"
-}
+  "type": "module",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
+  }
+}

package/src/Game/{EffectManager.ts → AnimationManager.ts}

@@ -1,16 +1,17 @@
 import { generateUID, RpgCommonPlayer } from "@rpgjs/common";
 import { signal } from "canvasengine";
 
-export class EffectManager {
+export class AnimationManager {
   current = signal<any[]>([]);
 
-  displayEffect(params: any, player: RpgCommonPlayer) {
+  displayEffect(params: any, player: RpgCommonPlayer | { x: number, y: number }) {
     const id = generateUID();
     this.current().push({
       ...params,
       id,
       x: player.x,
       y: player.y,
+      object: player,
       onFinish: () => {
         const index = this.current().findIndex((value) => value.id === id);
         this.current().splice(index, 1);

package/src/Game/Map.ts

@@ -1,10 +1,28 @@
 import { RpgCommonMap } from "@rpgjs/common";
 import { sync, users } from "@signe/sync";
 import { RpgClientPlayer } from "./Player";
-import { Signal, signal } from "canvasengine";
+import { Signal, signal, computed } from "canvasengine";
 import { RpgClientEvent } from "./Event";
+import { RpgClientEngine } from "../RpgClientEngine";
+import { inject } from "../core/inject";
 
-export class RpgClientMap extends RpgCommonMap<RpgClientPlayer> {
+export class RpgClientMap extends RpgCommonMap<any> {
+  engine: RpgClientEngine = inject(RpgClientEngine)
   @users(RpgClientPlayer) players = signal<Record<string, RpgClientPlayer>>({});
   @sync(RpgClientEvent) events = signal<Record<string, RpgClientEvent>>({});
+  currentPlayer = computed(() => this.players()[this.engine.playerIdSignal()!])
+
+  getCurrentPlayer() {
+    return this.currentPlayer()
+  }
+
+  reset() {
+    this.players.set({})
+    this.events.set({})
+    this.clearPhysic()
+  }
+
+  stepPredictionTick(): void {
+    this.forceSingleTick();
+  }
 }

package/src/Game/Object.ts

@@ -1,16 +1,170 @@
-import { RpgCommonPlayer } from "@rpgjs/common";
+import { Hooks, ModulesToken, RpgCommonPlayer } from "@rpgjs/common";
 import { trigger, signal } from "canvasengine";
+import { filter, from, map, Subscription, switchMap } from "rxjs";
+import { inject } from "../core/inject";
+import { RpgClientEngine } from "../RpgClientEngine";
+import TextComponent from "../components/dynamics/text.ce";
+
+const DYNAMIC_COMPONENTS = {
+  text: TextComponent,
+}
 
 export abstract class RpgClientObject extends RpgCommonPlayer {
   abstract type: string;
-  emitParticleTrigger = trigger()
-  particleName = signal('')
+  emitParticleTrigger = trigger();
+  particleName = signal("");
+  animationCurrentIndex = signal(0);
+  animationIsPlaying = signal(false);
+  _param = signal({});
+  frames: { x: number; y: number; ts: number }[] = [];
+  graphicsSignals = signal<any[]>([]);
+  _component = {} // temporary component memory
+
+  constructor() {
+    super();
+    this.hooks.callHooks("client-sprite-onInit", this).subscribe();
+
+    this._frames.observable.subscribe(({ items }) => {
+      if (!this.id) return;
+      //if (this.id == this.engine.playerIdSignal()!) return;
+      this.frames = [...this.frames, ...items];
+    });
+
+    this.graphics.observable
+    .pipe(
+      map(({ items }) => items),
+      filter(graphics => graphics.length > 0),
+      switchMap(graphics => from(Promise.all(graphics.map(graphic => this.engine.getSpriteSheet(graphic)))))
+    )
+    .subscribe((sheets) => {  
+      this.graphicsSignals.set(sheets);
+    });
+
+    this.componentsTop.observable
+    .pipe(
+      filter(value => value !== null && value !== undefined),
+      map((value) => typeof value === 'string' ? JSON.parse(value) : value),
+    )
+    .subscribe(({components}) => {
+      for (const component of components) {
+        for (const [key, value] of Object.entries(component)) {
+          this._component = value as any; // temporary component memory
+          console.log(value)
+          const type = (value as any).type as keyof typeof DYNAMIC_COMPONENTS;
+          if (DYNAMIC_COMPONENTS[type]) {
+            this.engine.addSpriteComponentInFront(DYNAMIC_COMPONENTS[type]);
+          }
+        }
+      }
+    });
+
+    this.engine.tick
+      .pipe
+      //throttleTime(10)
+      ()
+      .subscribe(() => {
+        const frame = this.frames.shift();
+        if (frame) {
+          if (!frame.x || !frame.y) return;
+          this.engine.scene.setBodyPosition(
+            this.id,
+            frame.x,
+            frame.y,
+            "top-left"
+          );
+        }
+      });
+  }
+
+  get hooks() {
+    return inject<Hooks>(ModulesToken);
+  }
+
+  get engine() {
+    return inject(RpgClientEngine);
+  }
+
+  private animationSubscription?: Subscription;
 
   flash(color: string, duration: number = 100) {
-    const lastTint = this.tint()
-    this.tint.set(color);
-    setTimeout(() => {
-      this.tint.set(lastTint)
-    }, duration)
+    return new Promise((resolve) => {
+      const lastTint = this.tint();
+      this.tint.set(color);
+      setTimeout(() => {
+        this.tint.set(lastTint);
+        resolve(true);
+      }, duration);
+    });
+  }
+
+  /**
+   * Reset animation state when animation changes externally
+   *
+   * This method should be called when the animation changes due to movement
+   * or other external factors to ensure the animation system doesn't get stuck
+   *
+   * @example
+   * ```ts
+   * // Reset when player starts moving
+   * player.resetAnimationState();
+   * ```
+   */
+  resetAnimationState() {
+    this.animationIsPlaying.set(false);
+    this.animationCurrentIndex.set(0);
+    if (this.animationSubscription) {
+      this.animationSubscription.unsubscribe();
+      this.animationSubscription = undefined;
+    }
+  }
+
+  /**
+   * Set a custom animation for a specific number of times
+   *
+   * Plays a custom animation for the specified number of repetitions.
+   * The animation system prevents overlapping animations and automatically
+   * returns to the previous animation when complete.
+   *
+   * @param animationName - Name of the animation to play
+   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)
+   *
+   * @example
+   * ```ts
+   * // Play attack animation 3 times
+   * player.setAnimation('attack', 3);
+   *
+   * // Play continuous spell animation
+   * player.setAnimation('spell');
+   * ```
+   */
+  setAnimation(animationName: string, nbTimes: number = Infinity) {
+    if (this.animationIsPlaying()) return;
+    this.animationIsPlaying.set(true);
+    const previousAnimationName = this.animationName();
+    this.animationCurrentIndex.set(0);
+
+    // Clean up any existing subscription
+    if (this.animationSubscription) {
+      this.animationSubscription.unsubscribe();
+    }
+
+    this.animationSubscription =
+      this.animationCurrentIndex.observable.subscribe((index) => {
+        if (index >= nbTimes) {
+          this.animationCurrentIndex.set(0);
+          this.animationName.set(previousAnimationName);
+          this.animationIsPlaying.set(false);
+          if (this.animationSubscription) {
+            this.animationSubscription.unsubscribe();
+            this.animationSubscription = undefined;
+          }
+        }
+      });
+    this.animationName.set(animationName);
+  }
+
+  showComponentAnimation(id: string, params: any) {
+    const engine = inject(RpgClientEngine);
+    engine.getComponentAnimation(id).displayEffect(params, this);
   }
-}   
+}