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

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/Map.d.ts

@@ -1,7 +1,13 @@
 import { RpgCommonMap } 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>;
+    getCurrentPlayer(): RpgClientPlayer;
+    reset(): void;
+    stepPredictionTick(): void;
 }

package/dist/Gui/Gui.d.ts

@@ -1,23 +1,188 @@
 import { Context } from '@signe/di';
+import { Signal, WritableSignal } from 'canvasengine';
+import { Subscription } from 'rxjs';
 interface GuiOptions {
-    name: string;
+    name?: string;
+    id?: string;
     component: any;
     display?: boolean;
     data?: any;
+    /**
+     * Auto display the GUI when added to the system
+     * @default false
+     */
+    autoDisplay?: boolean;
+    /**
+     * Function that returns an array of Signal dependencies
+     * The GUI will only display when all dependencies are resolved (!= undefined)
+     * @returns Array of Signal dependencies
+     */
+    dependencies?: () => Signal[];
+    /**
+     * Attach the GUI to sprites instead of displaying globally
+     * When true, the GUI will be rendered in character.ce for each sprite
+     * @default false
+     */
+    attachToSprite?: boolean;
+}
+interface GuiInstance {
+    name: string;
+    component: any;
+    display: WritableSignal<boolean>;
+    data: WritableSignal<any>;
+    autoDisplay: boolean;
+    dependencies?: () => Signal[];
+    subscription?: Subscription;
+    attachToSprite?: boolean;
 }
 export declare class RpgGui {
     private context;
     private webSocket;
-    gui: import('canvasengine').WritableArraySignal<any>;
+    gui: import('canvasengine').WritableObjectSignal<Record<string, GuiInstance>>;
+    extraGuis: GuiInstance[];
+    private vueGuiInstance;
+    /**
+     * Signal tracking which player IDs should display attached GUIs
+     * Key: player ID, Value: boolean (true = show, false = hide)
+     */
+    attachedGuiDisplayState: import('canvasengine').WritableObjectSignal<Record<string, boolean>>;
     constructor(context: Context);
     _initialize(): Promise<void>;
+    /**
+     * Set the VueGui instance reference for Vue component management
+     * This is called by VueGui when it's initialized
+     *
+     * @param vueGuiInstance - The VueGui instance
+     */
+    _setVueGuiInstance(vueGuiInstance: any): void;
+    /**
+     * Notify VueGui about GUI state changes
+     * This synchronizes the Vue component display state
+     *
+     * @param guiId - The GUI component ID
+     * @param display - Display state
+     * @param data - Component data
+     */
+    private _notifyVueGui;
+    /**
+     * Initialize Vue components in the VueGui instance
+     * This should be called after VueGui is mounted
+     */
+    _initializeVueComponents(): void;
     guiInteraction(guiId: string, name: string, data: any): void;
     guiClose(guiId: string, data?: any): void;
+    /**
+     * Add a GUI component to the system
+     *
+     * By default, only CanvasEngine components (.ce files) are accepted.
+     * Vue components should be handled by the @rpgjs/vue package.
+     *
+     * @param gui - GUI configuration options
+     * @param gui.name - Name or ID of the GUI component
+     * @param gui.id - Alternative ID if name is not provided
+     * @param gui.component - The component to render (must be a CanvasEngine component)
+     * @param gui.display - Initial display state (default: false)
+     * @param gui.data - Initial data for the component
+     * @param gui.autoDisplay - Auto display when added (default: false)
+     * @param gui.dependencies - Function returning Signal dependencies
+     * @param gui.attachToSprite - Attach GUI to sprites instead of global display (default: false)
+     *
+     * @example
+     * ```ts
+     * gui.add({
+     *   name: 'inventory',
+     *   component: InventoryComponent, // Must be a .ce component
+     *   autoDisplay: true,
+     *   dependencies: () => [playerSignal, inventorySignal]
+     * });
+     *
+     * // Attach to sprites
+     * gui.add({
+     *   name: 'tooltip',
+     *   component: TooltipComponent,
+     *   attachToSprite: true
+     * });
+     * ```
+     */
     add(gui: GuiOptions): void;
-    get(id: string | GuiOptions): any;
+    /**
+     * Get all attached GUI components (attachToSprite: true)
+     *
+     * Returns all GUI instances that are configured to be attached to sprites.
+     * These GUIs should be rendered in character.ce instead of canvas.ce.
+     *
+     * @returns Array of GUI instances with attachToSprite: true
+     *
+     * @example
+     * ```ts
+     * const attachedGuis = gui.getAttachedGuis();
+     * // Use in character.ce to render tooltips
+     * ```
+     */
+    getAttachedGuis(): GuiInstance[];
+    /**
+     * Check if a player should display attached GUIs
+     *
+     * @param playerId - The player ID to check
+     * @returns true if attached GUIs should be displayed for this player
+     */
+    shouldDisplayAttachedGui(playerId: string): boolean;
+    get(id: string): GuiInstance | undefined;
     exists(id: string): boolean;
-    getAll(): any;
-    display(id: string, data?: {}): void;
+    getAll(): Record<string, GuiInstance>;
+    /**
+     * Display a GUI component
+     *
+     * Displays the GUI immediately if no dependencies are configured,
+     * or waits for all dependencies to be resolved if dependencies are present.
+     * Automatically manages subscriptions to prevent memory leaks.
+     * Works with both CanvasEngine components and Vue components.
+     *
+     * @param id - The GUI component ID
+     * @param data - Data to pass to the component
+     * @param dependencies - Optional runtime dependencies (overrides config dependencies)
+     *
+     * @example
+     * ```ts
+     * // Display immediately
+     * gui.display('inventory', { items: [] });
+     *
+     * // Display with runtime dependencies
+     * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);
+     * ```
+     */
+    display(id: string, data?: {}, dependencies?: Signal[]): void;
+    /**
+     * Handle Vue component display logic
+     *
+     * @param id - GUI component ID
+     * @param data - Component data
+     * @param dependencies - Runtime dependencies
+     * @param guiInstance - GUI instance
+     */
+    private _handleVueComponentDisplay;
+    /**
+     * Handle CanvasEngine component display logic
+     *
+     * @param id - GUI component ID
+     * @param data - Component data
+     * @param dependencies - Runtime dependencies
+     * @param guiInstance - GUI instance
+     */
+    private _handleCanvasComponentDisplay;
+    /**
+     * Hide a GUI component
+     *
+     * Hides the GUI and cleans up any active subscriptions.
+     * Works with both CanvasEngine components and Vue components.
+     *
+     * @param id - The GUI component ID
+     *
+     * @example
+     * ```ts
+     * gui.hide('inventory');
+     * ```
+     */
     hide(id: string): void;
 }
 export {};

package/dist/Resource.d.ts

@@ -0,0 +1,97 @@
+import { RpgClientEngine } from './RpgClientEngine';
+/**
+ * RpgResource class
+ *
+ * Provides a unified API to access resource file links (images and sounds) in the game.
+ * Resources are stored as Maps of resource IDs to file paths/URLs.
+ *
+ * ## Design
+ *
+ * RpgResource acts as a facade over the engine's resource storage, providing
+ * easy access to resource file links. It maintains Maps that are synchronized
+ * with the engine's internal storage, but only stores the file paths/URLs,
+ * not the full resource objects.
+ *
+ * @example
+ * ```ts
+ * import { RpgResource } from '@rpgjs/client'
+ *
+ * // Get spritesheet image link
+ * const imageLink = RpgResource.spritesheets.get('hero')
+ *
+ * // Get sound file link
+ * const soundLink = RpgResource.sounds.get('town-music')
+ *
+ * // Set a new resource link
+ * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')
+ * ```
+ */
+export declare class RpgResource {
+    private static engine;
+    private static _spritesheets;
+    private static _sounds;
+    /**
+     * Initialize RpgResource with the engine instance
+     *
+     * This is called automatically by the engine during initialization.
+     * It synchronizes the resource Maps with the engine's internal storage.
+     *
+     * @param engine - The RpgClientEngine instance
+     */
+    static init(engine: RpgClientEngine): void;
+    /**
+     * Synchronize resource Maps with the engine's internal storage
+     *
+     * Extracts file links from spritesheets and sounds stored in the engine
+     * and updates the Maps accordingly.
+     *
+     * @private
+     */
+    private static syncResources;
+    /**
+     * Get/Set image links for spritesheets
+     *
+     * Map of spritesheet IDs to their image file paths/URLs.
+     * This Map is synchronized with the engine's spritesheet storage.
+     *
+     * @type {Map<string, string>}
+     *
+     * @example
+     * ```ts
+     * // Get an image link
+     * const imageLink = RpgResource.spritesheets.get('hero')
+     *
+     * // Set a new image link
+     * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')
+     *
+     * // Check if a spritesheet exists
+     * if (RpgResource.spritesheets.has('monster')) {
+     *   const link = RpgResource.spritesheets.get('monster')
+     * }
+     * ```
+     */
+    static get spritesheets(): Map<string, string>;
+    /**
+     * Get/Set sound file links
+     *
+     * Map of sound IDs to their audio file paths/URLs.
+     * This Map is synchronized with the engine's sound storage.
+     *
+     * @type {Map<string, string>}
+     *
+     * @example
+     * ```ts
+     * // Get a sound link
+     * const soundLink = RpgResource.sounds.get('town-music')
+     *
+     * // Set a new sound link
+     * RpgResource.sounds.set('new-sound', './assets/new-sound.ogg')
+     *
+     * // Iterate over all sounds
+     * RpgResource.sounds.forEach((link, id) => {
+     *   console.log(`Sound ${id}: ${link}`)
+     * })
+     * ```
+     */
+    static get sounds(): Map<string, string>;
+}