@rpgjs/client 5.0.0-alpha.8 → 5.0.0-beta.1

package/dist/Game/AnimationManager.d.ts

@@ -0,0 +1,8 @@
+import { RpgCommonPlayer } from '@rpgjs/common';
+export declare class AnimationManager {
+    current: import('canvasengine').WritableArraySignal<any[]>;
+    displayEffect(params: any, player: RpgCommonPlayer | {
+        x: number;
+        y: number;
+    }): void;
+}

package/dist/Game/AnimationManager.js

@@ -0,0 +1,26 @@
+import { signal } from "canvasengine";
+import { generateUID } from "@rpgjs/common";
+//#region src/Game/AnimationManager.ts
+var AnimationManager = class {
+	constructor() {
+		this.current = signal([]);
+	}
+	displayEffect(params, player) {
+		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);
+			}
+		});
+	}
+};
+//#endregion
+export { AnimationManager };
+
+//# sourceMappingURL=AnimationManager.js.map

package/dist/Game/AnimationManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationManager.js","names":[],"sources":["../../src/Game/AnimationManager.ts"],"sourcesContent":["import { generateUID, RpgCommonPlayer } from \"@rpgjs/common\";\nimport { signal } from \"canvasengine\";\n\nexport class AnimationManager {\n  current = signal<any[]>([]);\n\n  displayEffect(params: any, player: RpgCommonPlayer | { x: number, y: number }) {\n    const id = generateUID();\n    this.current().push({\n      ...params,\n      id,\n      x: player.x,\n      y: player.y,\n      object: player,\n      onFinish: () => {\n        const index = this.current().findIndex((value) => value.id === id);\n        this.current().splice(index, 1);\n      },\n    });\n  }\n}\n"],"mappings":";;;AAGA,IAAa,mBAAb,MAA8B;;iBAClB,OAAc,EAAE,CAAC;;CAE3B,cAAc,QAAa,QAAoD;EAC7E,MAAM,KAAK,aAAa;AACxB,OAAK,SAAS,CAAC,KAAK;GAClB,GAAG;GACH;GACA,GAAG,OAAO;GACV,GAAG,OAAO;GACV,QAAQ;GACR,gBAAgB;IACd,MAAM,QAAQ,KAAK,SAAS,CAAC,WAAW,UAAU,MAAM,OAAO,GAAG;AAClE,SAAK,SAAS,CAAC,OAAO,OAAO,EAAE;;GAElC,CAAC"}

package/dist/Game/Event.d.ts

@@ -1,4 +1,4 @@
 import { RpgClientObject } from './Object';
 export declare class RpgClientEvent extends RpgClientObject {
-    type: string;
+    _type: string;
 }

package/dist/Game/Event.js

@@ -0,0 +1,12 @@
+import { RpgClientObject } from "./Object.js";
+//#region src/Game/Event.ts
+var RpgClientEvent = class extends RpgClientObject {
+	constructor(..._args) {
+		super(..._args);
+		this._type = "event";
+	}
+};
+//#endregion
+export { RpgClientEvent };
+
+//# sourceMappingURL=Event.js.map

package/dist/Game/Event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Event.js","names":[],"sources":["../../src/Game/Event.ts"],"sourcesContent":["import { RpgClientObject } from \"./Object\"; \n\nexport class RpgClientEvent extends RpgClientObject {\n    _type = 'event'\n}   "],"mappings":";;AAEA,IAAa,iBAAb,cAAoC,gBAAgB;;;eACxC"}

package/dist/Game/Map.d.ts

@@ -1,7 +1,28 @@
-import { RpgCommonMap } from '@rpgjs/common';
+import { RpgCommonMap, WeatherState, MapPhysicsInitContext, MapPhysicsEntityContext } from '@rpgjs/common';
 import { RpgClientPlayer } from './Player';
 import { RpgClientEvent } from './Event';
-export declare class RpgClientMap extends RpgCommonMap<RpgClientPlayer> {
+import { RpgClientEngine } from '../RpgClientEngine';
+export declare class RpgClientMap extends RpgCommonMap<any> {
+    engine: RpgClientEngine;
     players: import('canvasengine').WritableObjectSignal<Record<string, RpgClientPlayer>>;
     events: import('canvasengine').WritableObjectSignal<Record<string, RpgClientEvent>>;
+    currentPlayer: import('canvasengine').ComputedSignal<RpgClientPlayer>;
+    weatherState: import('canvasengine').WritableSignal<WeatherState | null>;
+    localWeatherOverride: import('canvasengine').WritableSignal<WeatherState | null>;
+    weather: import('canvasengine').ComputedSignal<WeatherState | null>;
+    private manualClientPhysicsTick;
+    private readonly isTestEnvironment;
+    constructor();
+    configureClientPrediction(enabled: boolean): void;
+    getCurrentPlayer(): RpgClientPlayer;
+    reset(force?: boolean): void;
+    getWeather(): WeatherState | null;
+    setLocalWeather(next: WeatherState | null): void;
+    clearLocalWeather(): void;
+    stepClientPhysics(deltaMs: number): number;
+    stepPredictionTick(): void;
+    protected emitPhysicsInit(context: MapPhysicsInitContext): void;
+    protected emitPhysicsEntityAdd(context: MapPhysicsEntityContext): void;
+    protected emitPhysicsEntityRemove(context: MapPhysicsEntityContext): void;
+    protected emitPhysicsReset(): void;
 }

package/dist/Game/Map.js

@@ -0,0 +1,80 @@
+import { inject } from "../core/inject.js";
+import { sync, users } from "../node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/index.js";
+import { RpgClientPlayer } from "./Player.js";
+import { RpgClientEvent } from "./Event.js";
+import { __decorateMetadata } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { RpgClientEngine } from "../RpgClientEngine.js";
+import { computed, signal } from "canvasengine";
+import { RpgCommonMap } from "@rpgjs/common";
+//#region src/Game/Map.ts
+var RpgClientMap = class extends RpgCommonMap {
+	constructor() {
+		super();
+		this.engine = inject(RpgClientEngine);
+		this.players = signal({});
+		this.events = signal({});
+		this.currentPlayer = computed(() => this.players()[this.engine.playerIdSignal()]);
+		this.weatherState = signal(null);
+		this.localWeatherOverride = signal(null);
+		this.weather = computed(() => {
+			const local = this.localWeatherOverride();
+			const state = this.weatherState();
+			return local ?? state;
+		});
+		this.manualClientPhysicsTick = false;
+		const isTest = typeof process !== "undefined" && process.env?.TEST === "true" || typeof window !== "undefined" && window.__RPGJS_TEST__ === true;
+		this.isTestEnvironment = isTest;
+		if (isTest) this.autoTickEnabled = false;
+	}
+	configureClientPrediction(enabled) {
+		this.manualClientPhysicsTick = enabled;
+		this.autoTickEnabled = enabled ? false : !this.isTestEnvironment;
+	}
+	getCurrentPlayer() {
+		return this.currentPlayer();
+	}
+	reset(force = false) {
+		const currentPlayerId = this.engine.playerIdSignal();
+		const currentPlayer = !force && currentPlayerId ? this.players()[currentPlayerId] : void 0;
+		this.players.set(currentPlayerId && currentPlayer ? { [currentPlayerId]: currentPlayer } : {});
+		this.events.set({});
+		this.weatherState.set(null);
+		this.localWeatherOverride.set(null);
+		this.clearPhysic();
+	}
+	getWeather() {
+		return this.weather();
+	}
+	setLocalWeather(next) {
+		this.localWeatherOverride.set(next);
+	}
+	clearLocalWeather() {
+		this.localWeatherOverride.set(null);
+	}
+	stepClientPhysics(deltaMs) {
+		if (!this.manualClientPhysicsTick) return 0;
+		return this.nextTick(deltaMs);
+	}
+	stepPredictionTick() {
+		this.forceSingleTick();
+	}
+	emitPhysicsInit(context) {
+		this.engine?.emitSceneMapHook?.("onPhysicsInit", this, context);
+	}
+	emitPhysicsEntityAdd(context) {
+		this.engine?.emitSceneMapHook?.("onPhysicsEntityAdd", this, context);
+	}
+	emitPhysicsEntityRemove(context) {
+		this.engine?.emitSceneMapHook?.("onPhysicsEntityRemove", this, context);
+	}
+	emitPhysicsReset() {
+		this.engine?.emitSceneMapHook?.("onPhysicsReset", this);
+	}
+};
+__decorate([users(RpgClientPlayer), __decorateMetadata("design:type", Object)], RpgClientMap.prototype, "players", void 0);
+__decorate([sync(RpgClientEvent), __decorateMetadata("design:type", Object)], RpgClientMap.prototype, "events", void 0);
+//#endregion
+export { RpgClientMap };
+
+//# sourceMappingURL=Map.js.map

package/dist/Game/Map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Map.js","names":[],"sources":["../../src/Game/Map.ts"],"sourcesContent":["import {\n  RpgCommonMap,\n  type WeatherState,\n  type MapPhysicsInitContext,\n  type MapPhysicsEntityContext,\n} from \"@rpgjs/common\";\nimport { sync, users } from \"@signe/sync\";\nimport { RpgClientPlayer } from \"./Player\";\nimport { Signal, signal, computed, effect } from \"canvasengine\";\nimport { RpgClientEvent } from \"./Event\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { inject } from \"../core/inject\";\n\nexport class RpgClientMap extends RpgCommonMap<any> {\n  engine: RpgClientEngine = inject(RpgClientEngine)\n  @users(RpgClientPlayer) players = signal<Record<string, RpgClientPlayer>>({});\n  @sync(RpgClientEvent) events = signal<Record<string, RpgClientEvent>>({});\n  currentPlayer = computed(() => this.players()[this.engine.playerIdSignal()!])\n  weatherState = signal<WeatherState | null>(null);\n  localWeatherOverride = signal<WeatherState | null>(null);\n  weather = computed<WeatherState | null>(() => {\n    const local = this.localWeatherOverride() \n    const state = this.weatherState()\n    return local ?? state\n  });\n  private manualClientPhysicsTick = false;\n  private readonly isTestEnvironment: boolean;\n\n  constructor() {\n    super();\n    // Détecter l'environnement de test\n    const isTest = (typeof process !== 'undefined' && process.env?.TEST === 'true')\n      || (typeof window !== 'undefined' && (window as any).__RPGJS_TEST__ === true);\n    this.isTestEnvironment = isTest;\n    if (isTest) {\n      this.autoTickEnabled = false;\n    }\n  }\n\n  configureClientPrediction(enabled: boolean): void {\n    this.manualClientPhysicsTick = enabled;\n    this.autoTickEnabled = enabled ? false : !this.isTestEnvironment;\n  }\n\n  getCurrentPlayer() {\n    return this.currentPlayer()\n  }\n\n  reset(force = false) {\n    const currentPlayerId = this.engine.playerIdSignal();\n    const currentPlayer = !force && currentPlayerId\n      ? this.players()[currentPlayerId]\n      : undefined;\n\n    this.players.set(\n      currentPlayerId && currentPlayer ? { [currentPlayerId]: currentPlayer } : {}\n    );\n    this.events.set({})\n    this.weatherState.set(null);\n    this.localWeatherOverride.set(null);\n    this.clearPhysic()\n  }\n\n  getWeather(): WeatherState | null {\n    return this.weather();\n  }\n\n  setLocalWeather(next: WeatherState | null): void {\n    this.localWeatherOverride.set(next);\n  }\n\n  clearLocalWeather(): void {\n    this.localWeatherOverride.set(null);\n  }\n\n  stepClientPhysics(deltaMs: number): number {\n    if (!this.manualClientPhysicsTick) {\n      return 0;\n    }\n    return this.nextTick(deltaMs);\n  }\n\n  stepPredictionTick(): void {\n    this.forceSingleTick();\n  }\n\n  protected emitPhysicsInit(context: MapPhysicsInitContext): void {\n    this.engine?.emitSceneMapHook?.(\"onPhysicsInit\", this, context);\n  }\n\n  protected emitPhysicsEntityAdd(context: MapPhysicsEntityContext): void {\n    this.engine?.emitSceneMapHook?.(\"onPhysicsEntityAdd\", this, context);\n  }\n\n  protected emitPhysicsEntityRemove(context: MapPhysicsEntityContext): void {\n    this.engine?.emitSceneMapHook?.(\"onPhysicsEntityRemove\", this, context);\n  }\n\n  protected emitPhysicsReset(): void {\n    this.engine?.emitSceneMapHook?.(\"onPhysicsReset\", this);\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAa,eAAb,cAAkC,aAAkB;CAelD,cAAc;AACZ,SAAO;gBAfiB,OAAO,gBAAgB;iBACf,OAAwC,EAAE,CAAC;gBAC9C,OAAuC,EAAE,CAAC;uBACzD,eAAe,KAAK,SAAS,CAAC,KAAK,OAAO,gBAAgB,EAAG;sBAC9D,OAA4B,KAAK;8BACzB,OAA4B,KAAK;iBAC9C,eAAoC;GAC5C,MAAM,QAAQ,KAAK,sBAAsB;GACzC,MAAM,QAAQ,KAAK,cAAc;AACjC,UAAO,SAAS;IAChB;iCACgC;EAMhC,MAAM,SAAU,OAAO,YAAY,eAAe,QAAQ,KAAK,SAAS,UAClE,OAAO,WAAW,eAAgB,OAAe,mBAAmB;AAC1E,OAAK,oBAAoB;AACzB,MAAI,OACF,MAAK,kBAAkB;;CAI3B,0BAA0B,SAAwB;AAChD,OAAK,0BAA0B;AAC/B,OAAK,kBAAkB,UAAU,QAAQ,CAAC,KAAK;;CAGjD,mBAAmB;AACjB,SAAO,KAAK,eAAe;;CAG7B,MAAM,QAAQ,OAAO;EACnB,MAAM,kBAAkB,KAAK,OAAO,gBAAgB;EACpD,MAAM,gBAAgB,CAAC,SAAS,kBAC5B,KAAK,SAAS,CAAC,mBACf,KAAA;AAEJ,OAAK,QAAQ,IACX,mBAAmB,gBAAgB,GAAG,kBAAkB,eAAe,GAAG,EAAE,CAC7E;AACD,OAAK,OAAO,IAAI,EAAE,CAAC;AACnB,OAAK,aAAa,IAAI,KAAK;AAC3B,OAAK,qBAAqB,IAAI,KAAK;AACnC,OAAK,aAAa;;CAGpB,aAAkC;AAChC,SAAO,KAAK,SAAS;;CAGvB,gBAAgB,MAAiC;AAC/C,OAAK,qBAAqB,IAAI,KAAK;;CAGrC,oBAA0B;AACxB,OAAK,qBAAqB,IAAI,KAAK;;CAGrC,kBAAkB,SAAyB;AACzC,MAAI,CAAC,KAAK,wBACR,QAAO;AAET,SAAO,KAAK,SAAS,QAAQ;;CAG/B,qBAA2B;AACzB,OAAK,iBAAiB;;CAGxB,gBAA0B,SAAsC;AAC9D,OAAK,QAAQ,mBAAmB,iBAAiB,MAAM,QAAQ;;CAGjE,qBAA+B,SAAwC;AACrE,OAAK,QAAQ,mBAAmB,sBAAsB,MAAM,QAAQ;;CAGtE,wBAAkC,SAAwC;AACxE,OAAK,QAAQ,mBAAmB,yBAAyB,MAAM,QAAQ;;CAGzE,mBAAmC;AACjC,OAAK,QAAQ,mBAAmB,kBAAkB,KAAK;;;YApFxD,MAAM,gBAAgB,EAAA,mBAAA,eAAA,OAAA,CAAA,EAAA,aAAA,WAAA,WAAA,KAAA,EAAA;YACtB,KAAK,eAAe,EAAA,mBAAA,eAAA,OAAA,CAAA,EAAA,aAAA,WAAA,UAAA,KAAA,EAAA"}

package/dist/Game/Object.d.ts

@@ -0,0 +1,157 @@
+import { Hooks, RpgCommonPlayer } from '@rpgjs/common';
+import { RpgClientEngine } from '../RpgClientEngine';
+type Frame = {
+    x: number;
+    y: number;
+    ts: number;
+};
+export declare abstract class RpgClientObject extends RpgCommonPlayer {
+    abstract _type: string;
+    emitParticleTrigger: import('canvasengine').Trigger<any>;
+    particleName: import('canvasengine').WritableSignal<string>;
+    animationCurrentIndex: import('canvasengine').WritableSignal<number>;
+    animationIsPlaying: import('canvasengine').WritableSignal<boolean>;
+    _param: import('canvasengine').WritableObjectSignal<{}>;
+    frames: Frame[];
+    graphicsSignals: import('canvasengine').WritableArraySignal<any[]>;
+    _component: {};
+    flashTrigger: import('canvasengine').Trigger<any>;
+    constructor();
+    /**
+     * Access the shared client hook registry.
+     *
+     * @returns The hook service used to register and trigger client-side hooks.
+     */
+    get hooks(): Hooks;
+    /**
+     * Access the current client engine instance.
+     *
+     * @returns The active {@link RpgClientEngine} instance.
+     */
+    get engine(): RpgClientEngine<unknown>;
+    private animationSubscription?;
+    /**
+     * Trigger a flash animation on this sprite
+     *
+     * This method triggers a flash effect using CanvasEngine's flash directive.
+     * The flash can be configured with various options including type (alpha, tint, or both),
+     * duration, cycles, and color.
+     *
+     * ## Design
+     *
+     * The flash uses a trigger system that is connected to the flash directive in the
+     * character component. This allows for flexible configuration and can be triggered
+     * from both server events and client-side code.
+     *
+     * @param options - Flash configuration options
+     * @param options.type - Type of flash effect: 'alpha' (opacity), 'tint' (color), or 'both' (default: 'alpha')
+     * @param options.duration - Duration of the flash animation in milliseconds (default: 300)
+     * @param options.cycles - Number of flash cycles (flash on/off) (default: 1)
+     * @param options.alpha - Alpha value when flashing, from 0 to 1 (default: 0.3)
+     * @param options.tint - Tint color when flashing as hex value or color name (default: 0xffffff - white)
+     *
+     * @example
+     * ```ts
+     * // Simple flash with default settings (alpha flash)
+     * player.flash();
+     *
+     * // Flash with red tint
+     * player.flash({ type: 'tint', tint: 0xff0000 });
+     *
+     * // Flash with both alpha and tint
+     * player.flash({
+     *   type: 'both',
+     *   alpha: 0.5,
+     *   tint: 0xff0000,
+     *   duration: 200,
+     *   cycles: 2
+     * });
+     *
+     * // Quick damage flash
+     * player.flash({
+     *   type: 'tint',
+     *   tint: 0xff0000,
+     *   duration: 150,
+     *   cycles: 1
+     * });
+     * ```
+     */
+    flash(options?: {
+        type?: 'alpha' | 'tint' | 'both';
+        duration?: number;
+        cycles?: number;
+        alpha?: number;
+        tint?: number | string;
+    }): void;
+    /**
+     * 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(): void;
+    /**
+     * 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): void;
+    /**
+     * Set a custom animation with temporary graphic change
+     *
+     * Plays a custom animation for the specified number of repetitions and temporarily
+     * changes the player's graphic (sprite sheet) during the animation. The graphic
+     * is automatically reset when the animation finishes.
+     *
+     * @param animationName - Name of the animation to play
+     * @param graphic - The graphic(s) to temporarily use during the animation
+     * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)
+     *
+     * @example
+     * ```ts
+     * // Play attack animation with temporary graphic change
+     * player.setAnimation('attack', 'hero_attack', 3);
+     * ```
+     */
+    setAnimation(animationName: string, graphic?: string | string[], nbTimes?: number): void;
+    /**
+     * Display a registered component animation effect on this object.
+     *
+     * @param id - Identifier of the component animation to play.
+     * @param params - Parameters forwarded to the animation effect.
+     */
+    showComponentAnimation(id: string, params: any): void;
+    /**
+     * Check whether this client object represents an event.
+     *
+     * @returns `true` if the object type is `event`, otherwise `false`.
+     */
+    isEvent(): boolean;
+    /**
+     * Check whether this client object represents a player.
+     *
+     * @returns `true` if the object type is `player`, otherwise `false`.
+     */
+    isPlayer(): boolean;
+}
+export {};

package/dist/Game/Object.js

@@ -0,0 +1,211 @@
+import { inject } from "../core/inject.js";
+import component from "../components/dynamics/text.ce.js";
+import { RpgClientEngine } from "../RpgClientEngine.js";
+import { signal, trigger } from "canvasengine";
+import { ModulesToken, RpgCommonPlayer } from "@rpgjs/common";
+import { filter, from, map, switchMap } from "rxjs";
+//#region src/Game/Object.ts
+var DYNAMIC_COMPONENTS = { text: component };
+var RpgClientObject = class extends RpgCommonPlayer {
+	constructor() {
+		super();
+		this.emitParticleTrigger = trigger();
+		this.particleName = signal("");
+		this.animationCurrentIndex = signal(0);
+		this.animationIsPlaying = signal(false);
+		this._param = signal({});
+		this.frames = [];
+		this.graphicsSignals = signal([]);
+		this._component = {};
+		this.flashTrigger = trigger();
+		this.hooks.callHooks("client-sprite-onInit", this).subscribe();
+		this._frames.observable.subscribe(({ items }) => {
+			if (!this.id) return;
+			const nextFrames = items.flatMap((item) => Array.isArray(item) ? item : [item]);
+			this.frames = [...this.frames, ...nextFrames];
+		});
+		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 !== void 0), 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;
+				console.log(value);
+				const type = value.type;
+				if (DYNAMIC_COMPONENTS[type]) this.engine.addSpriteComponentInFront(DYNAMIC_COMPONENTS[type]);
+			}
+		});
+		this.engine.tick.pipe().subscribe(() => {
+			const frame = this.frames.shift();
+			if (frame) {
+				if (typeof frame.x !== "number" || typeof frame.y !== "number") return;
+				this.engine.scene.setBodyPosition(this.id, frame.x, frame.y, "top-left");
+			}
+		});
+	}
+	/**
+	* Access the shared client hook registry.
+	*
+	* @returns The hook service used to register and trigger client-side hooks.
+	*/
+	get hooks() {
+		return inject(ModulesToken);
+	}
+	/**
+	* Access the current client engine instance.
+	*
+	* @returns The active {@link RpgClientEngine} instance.
+	*/
+	get engine() {
+		return inject(RpgClientEngine);
+	}
+	/**
+	* Trigger a flash animation on this sprite
+	* 
+	* This method triggers a flash effect using CanvasEngine's flash directive.
+	* The flash can be configured with various options including type (alpha, tint, or both),
+	* duration, cycles, and color.
+	* 
+	* ## Design
+	* 
+	* The flash uses a trigger system that is connected to the flash directive in the
+	* character component. This allows for flexible configuration and can be triggered
+	* from both server events and client-side code.
+	* 
+	* @param options - Flash configuration options
+	* @param options.type - Type of flash effect: 'alpha' (opacity), 'tint' (color), or 'both' (default: 'alpha')
+	* @param options.duration - Duration of the flash animation in milliseconds (default: 300)
+	* @param options.cycles - Number of flash cycles (flash on/off) (default: 1)
+	* @param options.alpha - Alpha value when flashing, from 0 to 1 (default: 0.3)
+	* @param options.tint - Tint color when flashing as hex value or color name (default: 0xffffff - white)
+	* 
+	* @example
+	* ```ts
+	* // Simple flash with default settings (alpha flash)
+	* player.flash();
+	* 
+	* // Flash with red tint
+	* player.flash({ type: 'tint', tint: 0xff0000 });
+	* 
+	* // Flash with both alpha and tint
+	* player.flash({ 
+	*   type: 'both', 
+	*   alpha: 0.5, 
+	*   tint: 0xff0000,
+	*   duration: 200,
+	*   cycles: 2
+	* });
+	* 
+	* // Quick damage flash
+	* player.flash({ 
+	*   type: 'tint', 
+	*   tint: 0xff0000, 
+	*   duration: 150,
+	*   cycles: 1
+	* });
+	* ```
+	*/
+	flash(options) {
+		const flashOptions = {
+			type: options?.type || "alpha",
+			duration: options?.duration ?? 300,
+			cycles: options?.cycles ?? 1,
+			alpha: options?.alpha ?? .3,
+			tint: options?.tint ?? 16777215
+		};
+		let tintValue = flashOptions.tint;
+		if (typeof tintValue === "string") tintValue = {
+			"white": 16777215,
+			"red": 16711680,
+			"green": 65280,
+			"blue": 255,
+			"yellow": 16776960,
+			"cyan": 65535,
+			"magenta": 16711935,
+			"black": 0
+		}[tintValue.toLowerCase()] ?? 16777215;
+		this.flashTrigger.start({
+			...flashOptions,
+			tint: tintValue
+		});
+	}
+	/**
+	* 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 = void 0;
+		}
+	}
+	setAnimation(animationName, graphicOrNbTimes, nbTimes) {
+		if (this.animationIsPlaying()) return;
+		this.animationIsPlaying.set(true);
+		const previousAnimationName = this.animationName();
+		const previousGraphics = this.graphics();
+		this.animationCurrentIndex.set(0);
+		let graphic;
+		let finalNbTimes = Infinity;
+		if (typeof graphicOrNbTimes === "number") finalNbTimes = graphicOrNbTimes;
+		else if (graphicOrNbTimes !== void 0) {
+			graphic = graphicOrNbTimes;
+			finalNbTimes = nbTimes ?? Infinity;
+		} else finalNbTimes = Infinity;
+		if (graphic !== void 0) if (Array.isArray(graphic)) this.graphics.set(graphic);
+		else this.graphics.set([graphic]);
+		if (this.animationSubscription) this.animationSubscription.unsubscribe();
+		this.animationSubscription = this.animationCurrentIndex.observable.subscribe((index) => {
+			if (index >= finalNbTimes) {
+				this.animationCurrentIndex.set(0);
+				this.animationName.set(previousAnimationName);
+				if (graphic !== void 0) this.graphics.set(previousGraphics);
+				this.animationIsPlaying.set(false);
+				if (this.animationSubscription) {
+					this.animationSubscription.unsubscribe();
+					this.animationSubscription = void 0;
+				}
+			}
+		});
+		this.animationName.set(animationName);
+	}
+	/**
+	* Display a registered component animation effect on this object.
+	*
+	* @param id - Identifier of the component animation to play.
+	* @param params - Parameters forwarded to the animation effect.
+	*/
+	showComponentAnimation(id, params) {
+		inject(RpgClientEngine).getComponentAnimation(id).displayEffect(params, this);
+	}
+	/**
+	* Check whether this client object represents an event.
+	*
+	* @returns `true` if the object type is `event`, otherwise `false`.
+	*/
+	isEvent() {
+		return this._type === "event";
+	}
+	/**
+	* Check whether this client object represents a player.
+	*
+	* @returns `true` if the object type is `player`, otherwise `false`.
+	*/
+	isPlayer() {
+		return this._type === "player";
+	}
+};
+//#endregion
+export { RpgClientObject };
+
+//# sourceMappingURL=Object.js.map

package/dist/Game/Object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Object.js","names":[],"sources":["../../src/Game/Object.ts"],"sourcesContent":["import { Hooks, ModulesToken, RpgCommonPlayer } from \"@rpgjs/common\";\nimport { trigger, signal, effect } from \"canvasengine\";\nimport { filter, from, map, Subscription, switchMap } from \"rxjs\";\nimport { inject } from \"../core/inject\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport TextComponent from \"../components/dynamics/text.ce\";\n\nconst DYNAMIC_COMPONENTS = {\n  text: TextComponent,\n}\n\ntype Frame = { x: number; y: number; ts: number };\n\nexport abstract class RpgClientObject extends RpgCommonPlayer {\n  abstract _type: string;\n  emitParticleTrigger = trigger();\n  particleName = signal(\"\");\n  animationCurrentIndex = signal(0);\n  animationIsPlaying = signal(false);\n  _param = signal({});\n  frames: Frame[] = [];\n  graphicsSignals = signal<any[]>([]);\n  _component = {} // temporary component memory\n  flashTrigger = trigger();\n\n  constructor() {\n    super();\n    this.hooks.callHooks(\"client-sprite-onInit\", this).subscribe();\n\n    this._frames.observable.subscribe(({ items }) => {\n      if (!this.id) return;\n      //if (this.id == this.engine.playerIdSignal()!) return;\n      const nextFrames = items.flatMap((item): Frame[] =>\n        Array.isArray(item) ? item : [item]\n      );\n      this.frames = [...this.frames, ...nextFrames];\n    });\n\n    this.graphics.observable\n    .pipe(\n      map(({ items }) => items),\n      filter(graphics => graphics.length > 0),\n      switchMap(graphics => from(Promise.all(graphics.map(graphic => this.engine.getSpriteSheet(graphic)))))\n    )\n    .subscribe((sheets) => {  \n      this.graphicsSignals.set(sheets);\n    });\n\n    this.componentsTop.observable\n    .pipe(\n      filter(value => value !== null && value !== undefined),\n      map((value) => typeof value === 'string' ? JSON.parse(value) : value),\n    )\n    .subscribe(({components}) => {\n      for (const component of components) {\n        for (const [key, value] of Object.entries(component)) {\n          this._component = value as any; // temporary component memory\n          console.log(value)\n          const type = (value as any).type as keyof typeof DYNAMIC_COMPONENTS;\n          if (DYNAMIC_COMPONENTS[type]) {\n            this.engine.addSpriteComponentInFront(DYNAMIC_COMPONENTS[type]);\n          }\n        }\n      }\n    });\n\n    this.engine.tick\n      .pipe\n      //throttleTime(10)\n      ()\n      .subscribe(() => {\n        const frame = this.frames.shift();\n        if (frame) {\n          if (typeof frame.x !== \"number\" || typeof frame.y !== \"number\") return;\n          this.engine.scene.setBodyPosition(\n            this.id,\n            frame.x,\n            frame.y,\n            \"top-left\"\n          );\n        }\n      });\n  }\n\n  /**\n   * Access the shared client hook registry.\n   *\n   * @returns The hook service used to register and trigger client-side hooks.\n   */\n  get hooks() {\n    return inject<Hooks>(ModulesToken);\n  }\n\n  /**\n   * Access the current client engine instance.\n   *\n   * @returns The active {@link RpgClientEngine} instance.\n   */\n  get engine() {\n    return inject(RpgClientEngine);\n  }\n\n  private animationSubscription?: Subscription;\n\n  /**\n   * Trigger a flash animation on this sprite\n   * \n   * This method triggers a flash effect using CanvasEngine's flash directive.\n   * The flash can be configured with various options including type (alpha, tint, or both),\n   * duration, cycles, and color.\n   * \n   * ## Design\n   * \n   * The flash uses a trigger system that is connected to the flash directive in the\n   * character component. This allows for flexible configuration and can be triggered\n   * from both server events and client-side code.\n   * \n   * @param options - Flash configuration options\n   * @param options.type - Type of flash effect: 'alpha' (opacity), 'tint' (color), or 'both' (default: 'alpha')\n   * @param options.duration - Duration of the flash animation in milliseconds (default: 300)\n   * @param options.cycles - Number of flash cycles (flash on/off) (default: 1)\n   * @param options.alpha - Alpha value when flashing, from 0 to 1 (default: 0.3)\n   * @param options.tint - Tint color when flashing as hex value or color name (default: 0xffffff - white)\n   * \n   * @example\n   * ```ts\n   * // Simple flash with default settings (alpha flash)\n   * player.flash();\n   * \n   * // Flash with red tint\n   * player.flash({ type: 'tint', tint: 0xff0000 });\n   * \n   * // Flash with both alpha and tint\n   * player.flash({ \n   *   type: 'both', \n   *   alpha: 0.5, \n   *   tint: 0xff0000,\n   *   duration: 200,\n   *   cycles: 2\n   * });\n   * \n   * // Quick damage flash\n   * player.flash({ \n   *   type: 'tint', \n   *   tint: 0xff0000, \n   *   duration: 150,\n   *   cycles: 1\n   * });\n   * ```\n   */\n  flash(options?: {\n    type?: 'alpha' | 'tint' | 'both';\n    duration?: number;\n    cycles?: number;\n    alpha?: number;\n    tint?: number | string;\n  }): void {\n    const flashOptions = {\n      type: options?.type || 'alpha',\n      duration: options?.duration ?? 300,\n      cycles: options?.cycles ?? 1,\n      alpha: options?.alpha ?? 0.3,\n      tint: options?.tint ?? 0xffffff,\n    };\n    \n    // Convert color name to hex if needed\n    let tintValue = flashOptions.tint;\n    if (typeof tintValue === 'string') {\n      // Common color name to hex mapping\n      const colorMap: Record<string, number> = {\n        'white': 0xffffff,\n        'red': 0xff0000,\n        'green': 0x00ff00,\n        'blue': 0x0000ff,\n        'yellow': 0xffff00,\n        'cyan': 0x00ffff,\n        'magenta': 0xff00ff,\n        'black': 0x000000,\n      };\n      tintValue = colorMap[tintValue.toLowerCase()] ?? 0xffffff;\n    }\n    \n    this.flashTrigger.start({\n      ...flashOptions,\n      tint: tintValue,\n    });\n  }\n\n  /**\n   * Reset animation state when animation changes externally\n   *\n   * This method should be called when the animation changes due to movement\n   * or other external factors to ensure the animation system doesn't get stuck\n   *\n   * @example\n   * ```ts\n   * // Reset when player starts moving\n   * player.resetAnimationState();\n   * ```\n   */\n  resetAnimationState() {\n    this.animationIsPlaying.set(false);\n    this.animationCurrentIndex.set(0);\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n      this.animationSubscription = undefined;\n    }\n  }\n\n  /**\n   * Set a custom animation for a specific number of times\n   *\n   * Plays a custom animation for the specified number of repetitions.\n   * The animation system prevents overlapping animations and automatically\n   * returns to the previous animation when complete.\n   *\n   * @param animationName - Name of the animation to play\n   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)\n   *\n   * @example\n   * ```ts\n   * // Play attack animation 3 times\n   * player.setAnimation('attack', 3);\n   *\n   * // Play continuous spell animation\n   * player.setAnimation('spell');\n   * ```\n   */\n  setAnimation(animationName: string, nbTimes?: number): void;\n  /**\n   * Set a custom animation with temporary graphic change\n   *\n   * Plays a custom animation for the specified number of repetitions and temporarily\n   * changes the player's graphic (sprite sheet) during the animation. The graphic\n   * is automatically reset when the animation finishes.\n   *\n   * @param animationName - Name of the animation to play\n   * @param graphic - The graphic(s) to temporarily use during the animation\n   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)\n   *\n   * @example\n   * ```ts\n   * // Play attack animation with temporary graphic change\n   * player.setAnimation('attack', 'hero_attack', 3);\n   * ```\n   */\n  setAnimation(animationName: string, graphic?: string | string[], nbTimes?: number): void;\n  setAnimation(animationName: string, graphicOrNbTimes?: string | string[] | number, nbTimes?: number): void {\n    if (this.animationIsPlaying()) return;\n    this.animationIsPlaying.set(true);\n    const previousAnimationName = this.animationName();\n    const previousGraphics = this.graphics();\n    this.animationCurrentIndex.set(0);\n\n    let graphic: string | string[] | undefined;\n    let finalNbTimes: number = Infinity;\n\n    // Handle overloads\n    if (typeof graphicOrNbTimes === 'number') {\n      // setAnimation(animationName, nbTimes)\n      finalNbTimes = graphicOrNbTimes;\n    } else if (graphicOrNbTimes !== undefined) {\n      // setAnimation(animationName, graphic, nbTimes)\n      graphic = graphicOrNbTimes;\n      finalNbTimes = nbTimes ?? Infinity;\n    } else {\n      // setAnimation(animationName) - nbTimes remains Infinity\n      finalNbTimes = Infinity;\n    }\n\n    // Temporarily change graphic if provided\n    if (graphic !== undefined) {\n      if (Array.isArray(graphic)) {\n        this.graphics.set(graphic);\n      } else {\n        this.graphics.set([graphic]);\n      }\n    }\n\n    // Clean up any existing subscription\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n    }\n\n    this.animationSubscription =\n      this.animationCurrentIndex.observable.subscribe((index) => {\n        if (index >= finalNbTimes) {\n          this.animationCurrentIndex.set(0);\n          this.animationName.set(previousAnimationName);\n          // Reset graphic to previous value if it was changed\n          if (graphic !== undefined) {\n            this.graphics.set(previousGraphics);\n          }\n          this.animationIsPlaying.set(false);\n          if (this.animationSubscription) {\n            this.animationSubscription.unsubscribe();\n            this.animationSubscription = undefined;\n          }\n        }\n      });\n    this.animationName.set(animationName);\n  }\n\n  /**\n   * Display a registered component animation effect on this object.\n   *\n   * @param id - Identifier of the component animation to play.\n   * @param params - Parameters forwarded to the animation effect.\n   */\n  showComponentAnimation(id: string, params: any) {\n    const engine = inject(RpgClientEngine);\n    engine.getComponentAnimation(id).displayEffect(params, this);\n  }\n  \n  /**\n   * Check whether this client object represents an event.\n   *\n   * @returns `true` if the object type is `event`, otherwise `false`.\n   */\n  isEvent(): boolean {\n    return this._type === 'event';\n  }\n\n  /**\n   * Check whether this client object represents a player.\n   *\n   * @returns `true` if the object type is `player`, otherwise `false`.\n   */\n  isPlayer(): boolean {\n    return this._type === 'player';\n  }\n}\n"],"mappings":"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"}

package/dist/Game/Player.d.ts

@@ -1,4 +1,4 @@
 import { RpgClientObject } from './Object';
 export declare class RpgClientPlayer extends RpgClientObject {
-    type: string;
+    _type: string;
 }

package/dist/Game/Player.js

@@ -0,0 +1,12 @@
+import { RpgClientObject } from "./Object.js";
+//#region src/Game/Player.ts
+var RpgClientPlayer = class extends RpgClientObject {
+	constructor(..._args) {
+		super(..._args);
+		this._type = "player";
+	}
+};
+//#endregion
+export { RpgClientPlayer };
+
+//# sourceMappingURL=Player.js.map

package/dist/Game/Player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Player.js","names":[],"sources":["../../src/Game/Player.ts"],"sourcesContent":["import { RpgClientObject } from \"./Object\";\n\nexport class RpgClientPlayer extends RpgClientObject {\n    _type = 'player'\n}   "],"mappings":";;AAEA,IAAa,kBAAb,cAAqC,gBAAgB;;;eACzC"}