@rpgjs/client 5.0.0-alpha.22 → 5.0.0-alpha.23

package/dist/Game/Object.d.ts

@@ -106,4 +106,6 @@ export declare abstract class RpgClientObject extends RpgCommonPlayer {
      */
     setAnimation(animationName: string, nbTimes?: number): void;
     showComponentAnimation(id: string, params: any): void;
+    isEvent(): boolean;
+    isPlayer(): boolean;
 }

package/dist/Game/TransitionManager.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Manages active transitions in the game
+ *
+ * This class handles the lifecycle of screen transitions, such as fade effects,
+ * slide transitions, or any custom transition components. It maintains a list
+ * of currently active transitions and provides methods to start and finish them.
+ *
+ * ## Design
+ *
+ * - Uses signals to track active transitions reactively
+ * - Each transition has a unique ID for identification
+ * - Transitions automatically remove themselves when finished via onFinish callback
+ * - Supports multiple simultaneous transitions if needed
+ *
+ * @example
+ * ```ts
+ * const manager = new TransitionManager();
+ *
+ * // Start a fade transition
+ * manager.start('fade', { duration: 1000 });
+ *
+ * // Check active transitions
+ * console.log(manager.current()); // Array of active transitions
+ * ```
+ */
+export declare class TransitionManager {
+    /**
+     * Signal containing all currently active transitions
+     *
+     * Each transition object contains:
+     * - id: Unique identifier
+     * - props: Properties passed to the transition component
+     * - onFinish: Callback to remove the transition when complete
+     */
+    current: import('canvasengine').WritableArraySignal<any[]>;
+    /**
+     * Start a new transition
+     *
+     * Creates a new transition instance with the given props and adds it to
+     * the active transitions list. The transition will be automatically removed
+     * when it calls its onFinish callback.
+     *
+     * @param props - Properties to pass to the transition component (must include onFinish)
+     * @returns The created transition object with id and onFinish callback
+     *
+     * @example
+     * ```ts
+     * const transition = manager.start({
+     *   duration: 1000,
+     *   color: 'black',
+     *   onFinish: () => console.log('Transition complete')
+     * });
+     * ```
+     */
+    start(props: any): any;
+}

package/dist/RpgClientEngine.d.ts

@@ -1,12 +1,12 @@
-import { Context } from '@signe/di';
 import { AbstractWebsocket } from './services/AbstractSocket';
 import { Direction } from '@rpgjs/common';
 import { RpgClientMap } from './Game/Map';
 import { AnimationManager } from './Game/AnimationManager';
+import { TransitionManager } from './Game/TransitionManager';
 import { Observable } from 'rxjs';
 import * as PIXI from "pixi.js";
 export declare class RpgClientEngine<T = any> {
-    context: Context;
+    context: any;
     private guiService;
     private webSocket;
     private loadMapService;
@@ -21,6 +21,7 @@ export declare class RpgClientEngine<T = any> {
     spritesheets: Map<string, any>;
     sounds: Map<string, any>;
     componentAnimations: any[];
+    transitions: any[];
     private spritesheetResolver?;
     private soundResolver?;
     particleSettings: {
@@ -44,7 +45,7 @@ export declare class RpgClientEngine<T = any> {
     private pingInterval;
     private readonly PING_INTERVAL_MS;
     private lastInputTime;
-    constructor(context: Context);
+    constructor(context: any);
     /**
      * Assigns a CanvasEngine KeyboardControls instance to the dependency injection context
      *
@@ -353,13 +354,38 @@ export declare class RpgClientEngine<T = any> {
      * Add a component to render behind sprites
      * Components added with this method will be displayed with a lower z-index than the sprite
      *
-     * @param component - The component to add behind sprites
-     * @returns The added component
+     * Supports multiple formats:
+     * 1. Direct component: `ShadowComponent`
+     * 2. Configuration object: `{ component: LightHalo, props: {...} }`
+     * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`
+     * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`
+     *
+     * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).
+     * The object (sprite) is passed to the dependencies function to allow sprite-specific dependency resolution.
+     *
+     * @param component - The component to add behind sprites, or a configuration object
+     * @param component.component - The component function to render
+     * @param component.props - Static props object or function that receives the sprite object and returns props
+     * @param component.dependencies - Function that receives the sprite object and returns an array of Signals
+     * @returns The added component or configuration
      *
      * @example
      * ```ts
      * // Add a shadow component behind all sprites
      * engine.addSpriteComponentBehind(ShadowComponent);
+     *
+     * // Add a component with static props
+     * engine.addSpriteComponentBehind({
+     *   component: LightHalo,
+     *   props: { radius: 30 }
+     * });
+     *
+     * // Add a component with dynamic props and dependencies
+     * engine.addSpriteComponentBehind({
+     *   component: HealthBar,
+     *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+     *   dependencies: (object) => [object.hp, object.param.maxHp]
+     * });
      * ```
      */
     addSpriteComponentBehind(component: any): any;
@@ -367,16 +393,45 @@ export declare class RpgClientEngine<T = any> {
      * Add a component to render in front of sprites
      * Components added with this method will be displayed with a higher z-index than the sprite
      *
-     * @param component - The component to add in front of sprites
-     * @returns The added component
+     * Supports multiple formats:
+     * 1. Direct component: `HealthBarComponent`
+     * 2. Configuration object: `{ component: StatusIndicator, props: {...} }`
+     * 3. With dynamic props: `{ component: HealthBar, props: (object) => {...} }`
+     * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`
+     *
+     * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).
+     * The object (sprite) is passed to the dependencies function to allow sprite-specific dependency resolution.
+     *
+     * @param component - The component to add in front of sprites, or a configuration object
+     * @param component.component - The component function to render
+     * @param component.props - Static props object or function that receives the sprite object and returns props
+     * @param component.dependencies - Function that receives the sprite object and returns an array of Signals
+     * @returns The added component or configuration
      *
      * @example
      * ```ts
      * // Add a health bar component in front of all sprites
      * engine.addSpriteComponentInFront(HealthBarComponent);
+     *
+     * // Add a component with static props
+     * engine.addSpriteComponentInFront({
+     *   component: StatusIndicator,
+     *   props: { type: 'poison' }
+     * });
+     *
+     * // Add a component with dynamic props and dependencies
+     * engine.addSpriteComponentInFront({
+     *   component: HealthBar,
+     *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+     *   dependencies: (object) => [object.hp, object.param.maxHp]
+     * });
      * ```
      */
-    addSpriteComponentInFront(component: any): any;
+    addSpriteComponentInFront(component: any | {
+        component: any;
+        props: (object: any) => any;
+        dependencies?: (object: any) => any[];
+    }): any;
     /**
      * Add a component animation to the engine
      *
@@ -428,6 +483,137 @@ export declare class RpgClientEngine<T = any> {
      * ```
      */
     getComponentAnimation(id: string): AnimationManager;
+    /**
+     * Add a transition to the engine
+     *
+     * Transitions are screen effects that can be displayed during scene changes,
+     * map loading, or any other moment where a visual transition is needed.
+     * They are displayed on top of the entire canvas and can have custom props
+     * that can be functions (similar to ComponentAnimation).
+     *
+     * @param transition - The transition configuration
+     * @param transition.id - Unique identifier for the transition
+     * @param transition.component - The component function to render
+     * @param transition.props - Optional props to pass to the component (can be a function)
+     * @returns The added transition configuration
+     *
+     * @example
+     * ```ts
+     * // Add a fade transition
+     * engine.addTransition({
+     *   id: 'fade',
+     *   component: FadeComponent
+     * });
+     *
+     * // Add a transition with props
+     * engine.addTransition({
+     *   id: 'slide',
+     *   component: SlideComponent,
+     *   props: { direction: 'left', duration: 500 }
+     * });
+     *
+     * // Add a transition with function props
+     * engine.addTransition({
+     *   id: 'custom',
+     *   component: CustomTransition,
+     *   props: (engine) => ({ width: engine.width(), height: engine.height() })
+     * });
+     * ```
+     */
+    addTransition(transition: {
+        component: any;
+        id: string;
+        props?: any | ((engine: RpgClientEngine) => any);
+    }): {
+        component: any;
+        id: string;
+        props?: any | ((engine: RpgClientEngine) => any);
+    };
+    /**
+     * Remove a transition from the engine
+     *
+     * Removes a transition by its ID. This will not affect any currently
+     * running transitions, only prevent new ones from being started.
+     *
+     * @param id - The unique identifier of the transition to remove
+     * @returns true if the transition was found and removed, false otherwise
+     *
+     * @example
+     * ```ts
+     * // Remove a transition
+     * engine.removeTransition('fade');
+     * ```
+     */
+    removeTransition(id: string): boolean;
+    /**
+     * Modify an existing transition
+     *
+     * Updates the component or props of an existing transition. This will
+     * not affect any currently running transitions, only future ones.
+     *
+     * @param id - The unique identifier of the transition to modify
+     * @param updates - The updates to apply (component and/or props)
+     * @returns true if the transition was found and modified, false otherwise
+     *
+     * @example
+     * ```ts
+     * // Update transition props
+     * engine.modifyTransition('fade', {
+     *   props: { duration: 2000, color: 'white' }
+     * });
+     *
+     * // Update transition component
+     * engine.modifyTransition('fade', {
+     *   component: NewFadeComponent
+     * });
+     * ```
+     */
+    modifyTransition(id: string, updates: {
+        component?: any;
+        props?: any | ((engine: RpgClientEngine) => any);
+    }): boolean;
+    /**
+     * Get a transition by its ID
+     *
+     * Retrieves the TransitionManager instance for a specific transition,
+     * which can be used to start the transition.
+     *
+     * @param id - The unique identifier of the transition
+     * @returns The TransitionManager instance for the transition
+     * @throws Error if the transition is not found
+     *
+     * @example
+     * ```ts
+     * // Get a transition and start it
+     * const fadeTransition = engine.getTransition('fade');
+     * fadeTransition.start({ duration: 1000 });
+     * ```
+     */
+    getTransition(id: string): TransitionManager;
+    /**
+     * Start a transition
+     *
+     * Convenience method to start a transition by its ID. This combines
+     * getTransition and start into a single call. The transition will
+     * automatically receive an onFinish callback to remove itself when done.
+     *
+     * @param id - The unique identifier of the transition to start
+     * @param props - Additional props to pass to the transition component
+     * @returns The created transition object
+     *
+     * @example
+     * ```ts
+     * // Start a fade transition
+     * engine.startTransition('fade', { duration: 1000, color: 'black' });
+     *
+     * // Start with onFinish callback
+     * engine.startTransition('fade', {
+     *   duration: 1000,
+     *   onFinish: () => console.log('Fade complete')
+     * });
+     * ```
+     */
+    startTransition(id: string, props?: any): any;
     processInput({ input }: {
         input: Direction;
     }): Promise<void>;
@@ -442,7 +628,7 @@ export declare class RpgClientEngine<T = any> {
     private getLocalPlayerState;
     private applyAuthoritativeState;
     private initializePredictionController;
-    getCurrentPlayer(): import('./Game/Player').RpgClientPlayer;
+    getCurrentPlayer(): import('.').RpgClientPlayer;
     /**
      * Clear client prediction states for cleanup
      *

package/dist/components/gui/mobile/index.d.ts

@@ -0,0 +1,8 @@
+export declare const withMobile: () => {
+    gui: {
+        id: string;
+        component: any;
+        autoDisplay: boolean;
+        dependencies: () => (import('canvasengine').ComputedSignal<import('../../..').RpgClientPlayer> | import('canvasengine').WritableSignal<true | undefined>)[];
+    }[];
+};

package/dist/components/prebuilt/index.d.ts

@@ -16,3 +16,4 @@
  * ```
  */
 export { default as HpBar } from './hp-bar.ce';
+export { default as LightHalo } from './light-halo.ce';

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './module';
 export * from './Gui/Gui';
 export * from './components/gui';
 export * from './components/animations';
+export * from './components/prebuilt';
 export * from './presets';
 export * from './components';
 export * from './components/gui';
@@ -17,3 +18,7 @@ export * from './Resource';
 export { Context } from '@signe/di';
 export { KeyboardControls, Input } from 'canvasengine';
 export { Control } from './services/keyboardControls';
+export { RpgClientObject } from './Game/Object';
+export { RpgClientPlayer } from './Game/Player';
+export { RpgClientEvent } from './Game/Event';
+export { withMobile } from './components/gui/mobile';

package/dist/index.js

@@ -9,13 +9,18 @@ export { RpgGui } from './index9.js';
 export { default as DialogboxComponent } from './index10.js';
 export { default as BoxComponent } from './index11.js';
 export { PrebuiltComponentAnimations } from './index12.js';
-export { Presets } from './index13.js';
-export { default as EventLayerComponent } from './index14.js';
-export { default as CharacterComponent } from './index15.js';
-export { default as HpBar } from './index16.js';
-export { RpgSound, Sound, getSoundMetadata } from './index17.js';
-export { RpgResource } from './index18.js';
-export { Context } from './index19.js';
+export { default as HpBar } from './index13.js';
+export { default as LightHalo } from './index14.js';
+export { Presets } from './index15.js';
+export { default as EventLayerComponent } from './index16.js';
+export { default as CharacterComponent } from './index17.js';
+export { RpgSound, Sound, getSoundMetadata } from './index18.js';
+export { RpgResource } from './index19.js';
+export { Context } from './index20.js';
 export { Input, KeyboardControls } from 'canvasengine';
-export { Control } from './index20.js';
+export { Control } from './index21.js';
+export { RpgClientObject } from './index22.js';
+export { RpgClientPlayer } from './index23.js';
+export { RpgClientEvent } from './index24.js';
+export { withMobile } from './index25.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index10.js

@@ -1,5 +1,5 @@
 import { useProps, useDefineProps, signal, animatedSignal, computed, trigger, mount, effect, h, Container, Rect, cond, Text, Sprite } from 'canvasengine';
-import component$1 from './index43.js';
+import component$1 from './index47.js';
 import { inject } from './index6.js';
 import { RpgClientEngine } from './index2.js';
 

package/dist/index11.js

@@ -1,14 +1,15 @@
 import { useProps, useDefineProps, computed, h, Container, Rect } from 'canvasengine';
 import { RpgClientEngine } from './index2.js';
-import './index26.js';
+import './index32.js';
 import '@rpgjs/common';
-import './index19.js';
+import './index20.js';
 import { inject } from './index6.js';
 import 'rxjs';
-import './index27.js';
-import './index17.js';
-import '@canvasengine/presets';
+import './index33.js';
 import './index18.js';
+import 'pixi.js';
+import '@canvasengine/presets';
+import './index19.js';
 
 function component($$props) {
         useProps($$props);

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.js","sources":["../src/components/gui/box.ce"],"sourcesContent":["<Container positionType=\"absolute\" top={top} left={left}>\n    <Container\n      anchor={[0.5, 0.5]}\n    >\n    <Rect width height color={_color} />\n    <Container attach={child}></Container>\n  </Container>  \n</Container>\n\n<script>\n  import { RpgClientEngine, inject } from \"../../index\";\n\n  const { width, height, children, color, top, left } = defineProps();\n  const engine = inject(RpgClientEngine)\n  const child = children[0]\n  const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || \"#1a1a2e\")\n</script>"],"names":[],"mappings":";;;;;;;;;;;;AAOqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI;AAC5I,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AACpC,IAAI,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC;AACvB,IAAI,MAAM,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,WAAW,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,MAAM,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC;AAClN,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACvM,QAAQ,OAAO;AACf,MAAM;;;;"}
+{"version":3,"file":"index11.js","sources":["../src/components/gui/box.ce"],"sourcesContent":["<Container positionType=\"absolute\" top={top} left={left}>\n    <Container\n      anchor={[0.5, 0.5]}\n    >\n    <Rect width height color={_color} />\n    <Container attach={child}></Container>\n  </Container>  \n</Container>\n\n<script>\n  import { RpgClientEngine, inject } from \"../../index\";\n\n  const { width, height, children, color, top, left } = defineProps();\n  const engine = inject(RpgClientEngine)\n  const child = children[0]\n  const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || \"#1a1a2e\")\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;AAOqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI;AAC5I,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AACpC,IAAI,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC;AACvB,IAAI,MAAM,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,WAAW,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,MAAM,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC;AAClN,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACvM,QAAQ,OAAO;AACf,MAAM;;;;"}

package/dist/index12.js

@@ -1,5 +1,5 @@
-import component$1 from './index28.js';
-import component from './index29.js';
+import component$1 from './index34.js';
+import component from './index35.js';
 
 const PrebuiltComponentAnimations = {
   Hit: component$1,

package/dist/index13.js

@@ -1,14 +1,106 @@
-import { AnimationSpritesheetPreset } from './index30.js';
-import { LPCSpritesheetPreset } from './index31.js';
-import { RMSpritesheet } from './index32.js';
-import { FacesetPreset } from './index33.js';
+import { useProps, useDefineProps, computed, animatedSignal, effect, h, Container, Graphics } from 'canvasengine';
 
-const Presets = {
-  RMSpritesheet,
-  LPCSpritesheetPreset,
-  AnimationSpritesheetPreset,
-  FacesetPreset
+function component($$props) {
+        useProps($$props);
+        const defineProps = useDefineProps($$props);
+        var object = defineProps().object;
+var barWidth = 50;
+var barHeight = 8;
+var borderRadius = 4;
+var innerRadius = 3;
+var padding = 1;
+var bgColor = 0x16213e;
+var shadowColor = 0x000000;
+var borderColor = 0x4a5568;
+var maxFillWidth = barWidth - (padding * 2);
+var fillHeight = barHeight - (padding * 2);
+var highlightHeight = Math.floor(fillHeight / 2);
+var hitbox = object.hitbox;
+var currentHp = computed(function () {
+    var _a, _b;
+    return (_b = (_a = object.hpSignal) === null || _a === void 0 ? void 0 : _a.call(object)) !== null && _b !== void 0 ? _b : 0;
+});
+var maxHp = computed(function () {
+    var _a, _b, _c;
+    var params = (_b = (_a = object._param) === null || _a === void 0 ? void 0 : _a.call(object)) !== null && _b !== void 0 ? _b : {};
+    return (_c = params.maxHp) !== null && _c !== void 0 ? _c : 100;
+});
+var hpPercent = computed(function () {
+    var max = maxHp();
+    if (max <= 0)
+        return 0;
+    var percent = currentHp() / max;
+    return Math.max(0, Math.min(1, percent));
+});
+var animatedPercent = animatedSignal(hpPercent(), {
+    duration: 300,
+    easing: 'easeOutCubic'
+});
+effect(function () {
+    var newPercent = hpPercent();
+    animatedPercent.set(newPercent);
+});
+var position = computed(function () { return ({
+    x: (hitbox().w / 2) - (barWidth / 2),
+    y: -barHeight - 8
+}); });
+var fillWidth = computed(function () {
+    var percent = animatedPercent();
+    var width = maxFillWidth * percent;
+    // Ensure minimum visible width when HP > 0
+    if (percent > 0 && width < innerRadius * 2) {
+        return innerRadius * 2;
+    }
+    return Math.max(0, width);
+});
+var hpColorHex = computed(function () {
+    var percent = hpPercent();
+    if (percent > 0.6) {
+        return 0x4ade80; // Green - healthy
+    }
+    else if (percent > 0.3) {
+        return 0xfacc15; // Yellow - caution
+    }
+    else if (percent > 0.15) {
+        return 0xfb923c; // Orange - danger
+    }
+    else {
+        return 0xef4444; // Red - critical
+    }
+});
+var drawShadow = function (g) {
+    g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+    g.fill({ color: shadowColor, alpha: 0.3 });
 };
+var drawBackground = function (g) {
+    g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+    g.fill({ color: bgColor, alpha: 0.9 });
+};
+var drawFill = function (g) {
+    var width = fillWidth();
+    if (width > 0) {
+        g.roundRect(padding, padding, width, fillHeight, innerRadius);
+        g.fill({ color: hpColorHex() });
+    }
+};
+var drawHighlight = function (g) {
+    var width = fillWidth();
+    if (width > 0) {
+        g.roundRect(padding, padding, width, highlightHeight, innerRadius);
+        g.fill({ color: 0xffffff, alpha: 0.25 });
+    }
+};
+var drawBorder = function (g) {
+    g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+    g.stroke({
+        color: borderColor,
+        width: 1,
+        alpha: 0.7
+    });
+};
+        let $this = [,h(Container, { x: computed(() => position().x), y: computed(() => position().y) }, [h(Graphics, { draw: drawShadow, x: 1, y: 1 }), h(Graphics, { draw: drawBackground }), h(Graphics, { draw: drawFill }), h(Graphics, { draw: drawHighlight }), h(Graphics, { draw: drawBorder })])];
+        return $this
+      }
 
-export { Presets };
+export { component as default };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../src/presets/index.ts"],"sourcesContent":["import { AnimationSpritesheetPreset } from \"./animation\";\nimport { LPCSpritesheetPreset } from \"./lpc\";\nimport { RMSpritesheet } from \"./rmspritesheet\";\nimport { FacesetPreset } from \"./faceset\";\n\nexport const Presets = {\n    RMSpritesheet,\n    LPCSpritesheetPreset,\n    AnimationSpritesheetPreset,\n    FacesetPreset\n}"],"names":[],"mappings":";;;;;AAKO,MAAM,OAAA,GAAU;AAAA,EACnB,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,0BAAA;AAAA,EACA;AACJ;;;;"}
+{"version":3,"file":"index13.js","sources":["../src/components/prebuilt/hp-bar.ce"],"sourcesContent":["<!-- \n  HP Bar Component\n  \n  A beautiful, animated health bar component for displaying player HP above sprites.\n  Features a gradient color based on HP level, smooth animations, and modern styling.\n  \n  ## Design\n  \n  The bar changes color dynamically based on HP percentage:\n  - Green (#4ade80) when HP > 60% - Healthy state\n  - Yellow (#facc15) when HP 30-60% - Caution state  \n  - Orange (#fb923c) when HP 15-30% - Danger state\n  - Red (#ef4444) when HP < 15% - Critical state\n  \n  @example\n  ```ts\n  import HpBar from './hp-bar.ce';\n  \n  // In module configuration\n  export default defineModule<RpgClient>({\n    sprite: {\n      componentsInFront: [HpBar]\n    }\n  })\n  ```\n-->\n\n<Container x={position.@x} y={position.@y}>\n  <!-- Background shadow for depth effect -->\n  <Graphics draw={drawShadow} x={1} y={1} />\n  \n  <!-- Main background -->\n  <Graphics draw={drawBackground} />\n  \n  <!-- HP fill bar -->\n  <Graphics draw={drawFill} />\n  \n  <!-- Highlight overlay for 3D effect -->\n  <Graphics draw={drawHighlight} />\n  \n  <!-- Border frame -->\n  <Graphics draw={drawBorder} />\n</Container>\n\n<script>\nimport { computed, animatedSignal, effect } from \"canvasengine\";\n\nconst { object } = defineProps();\n\n// ====================\n// Configuration\n// ====================\n\n/** Total width of the HP bar in pixels */\nconst barWidth = 50;\n\n/** Total height of the HP bar in pixels */\nconst barHeight = 8;\n\n/** Border radius for rounded corners */\nconst borderRadius = 4;\n\n/** Inner border radius for the fill bar */\nconst innerRadius = 3;\n\n/** Padding between background and fill */\nconst padding = 1;\n\n/** Background color (dark theme) */\nconst bgColor = 0x16213e;\n\n/** Shadow color */\nconst shadowColor = 0x000000;\n\n/** Border color */\nconst borderColor = 0x4a5568;\n\n// ====================\n// Calculated dimensions\n// ====================\n\n/** Maximum fill width */\nconst maxFillWidth = barWidth - (padding * 2);\n\n/** Fill height */\nconst fillHeight = barHeight - (padding * 2);\n\n/** Highlight height (half of fill) */\nconst highlightHeight = Math.floor(fillHeight / 2);\n\n// ====================\n// Reactive HP values\n// ====================\n\n/** Gets hitbox dimensions for positioning */\nconst hitbox = object.hitbox;\n\n/**\n * Gets the current HP value from the player object\n * Uses hpSignal which is synchronized from the server\n */\nconst currentHp = computed(() => {\n  return object.hpSignal?.() ?? 0;\n});\n\n/**\n * Gets the maximum HP value from player parameters\n * Reads from _param.maxHp which contains calculated stats\n */\nconst maxHp = computed(() => {\n  const params = object._param?.() ?? {};\n  return params.maxHp ?? 100;\n});\n\n/**\n * Calculates HP percentage (0 to 1)\n */\nconst hpPercent = computed(() => {\n  const max = maxHp();\n  if (max <= 0) return 0;\n  const percent = currentHp() / max;\n  return Math.max(0, Math.min(1, percent));\n});\n\n// ====================\n// Animated values\n// ====================\n\n/**\n * Animated percentage for smooth bar transitions\n */\nconst animatedPercent = animatedSignal(hpPercent(), {\n  duration: 300,\n  easing: 'easeOutCubic'\n});\n\n// Update animated value when HP changes\neffect(() => {\n  const newPercent = hpPercent();\n  animatedPercent.set(newPercent);\n});\n\n// ====================\n// Visual calculations\n// ====================\n\n/**\n * Position of the bar relative to the sprite\n */\nconst position = computed(() => ({\n  x: (hitbox().w / 2) - (barWidth / 2),\n  y: -barHeight - 8\n}));\n\n/**\n * Current width of the HP fill based on animated percentage\n */\nconst fillWidth = computed(() => {\n  const percent = animatedPercent();\n  const width = maxFillWidth * percent;\n  // Ensure minimum visible width when HP > 0\n  if (percent > 0 && width < innerRadius * 2) {\n    return innerRadius * 2;\n  }\n  return Math.max(0, width);\n});\n\n/**\n * Determines HP bar color based on current HP percentage\n * Returns hex color number for PixiJS\n * \n * ## Color Thresholds\n * - Green (0x4ade80): HP > 60% - Healthy\n * - Yellow (0xfacc15): HP 30-60% - Caution\n * - Orange (0xfb923c): HP 15-30% - Danger\n * - Red (0xef4444): HP < 15% - Critical\n */\nconst hpColorHex = computed(() => {\n  const percent = hpPercent();\n  \n  if (percent > 0.6) {\n    return 0x4ade80; // Green - healthy\n  } else if (percent > 0.3) {\n    return 0xfacc15; // Yellow - caution\n  } else if (percent > 0.15) {\n    return 0xfb923c; // Orange - danger\n  } else {\n    return 0xef4444; // Red - critical\n  }\n});\n\n// ====================\n// Drawing functions\n// ====================\n\n/**\n * Draws the shadow behind the HP bar for depth effect\n */\nconst drawShadow = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: shadowColor, alpha: 0.3 });\n};\n\n/**\n * Draws the main background of the HP bar\n */\nconst drawBackground = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: bgColor, alpha: 0.9 });\n};\n\n/**\n * Draws the HP fill bar with dynamic color\n */\nconst drawFill = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, fillHeight, innerRadius);\n    g.fill({ color: hpColorHex() });\n  }\n};\n\n/**\n * Draws the highlight overlay for 3D effect\n */\nconst drawHighlight = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, highlightHeight, innerRadius);\n    g.fill({ color: 0xffffff, alpha: 0.25 });\n  }\n};\n\n/**\n * Draws the border frame around the HP bar\n * \n * Uses PixiJS Graphics API to create a rounded rectangle stroke\n * that serves as a visual border for the bar.\n * \n * @param g - PixiJS Graphics object\n * \n * @example\n * ```html\n * <Graphics draw={drawBorder} />\n * ```\n */\nconst drawBorder = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.stroke({ \n    color: borderColor, \n    width: 1,\n    alpha: 0.7\n  });\n};\n</script>\n"],"names":[],"mappings":";;AAOqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,MAAM,GAAG,WAAW,EAAE,CAAC,MAAM;AACzC,IAAI,QAAQ,GAAG,EAAE;AACjB,IAAI,SAAS,GAAG,CAAC;AACjB,IAAI,YAAY,GAAG,CAAC;AACpB,IAAI,WAAW,GAAG,CAAC;AACnB,IAAI,OAAO,GAAG,CAAC;AACf,IAAI,OAAO,GAAG,QAAQ;AACtB,IAAI,WAAW,GAAG,QAAQ;AAC1B,IAAI,WAAW,GAAG,QAAQ;AAC1B,IAAI,YAAY,GAAG,QAAQ,IAAI,OAAO,GAAG,CAAC,CAAC;AAC3C,IAAI,UAAU,GAAG,SAAS,IAAI,OAAO,GAAG,CAAC,CAAC;AAC1C,IAAI,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC;AAChD,IAAI,MAAM,GAAG,MAAM,CAAC,MAAM;AAC1B,IAAI,SAAS,GAAG,QAAQ,CAAC,YAAY;AACrC,IAAI,IAAI,EAAE,EAAE,EAAE;AACd,IAAI,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC,QAAQ,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,CAAC;AAChI,CAAC,CAAC;AACF,IAAI,KAAK,GAAG,QAAQ,CAAC,YAAY;AACjC,IAAI,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE;AAClB,IAAI,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,EAAE;AACrI,IAAI,OAAO,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,GAAG;AACnE,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,QAAQ,CAAC,YAAY;AACrC,IAAI,IAAI,GAAG,GAAG,KAAK,EAAE;AACrB,IAAI,IAAI,GAAG,IAAI,CAAC;AAChB,QAAQ,OAAO,CAAC;AAChB,IAAI,IAAI,OAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AACnC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;AAC5C,CAAC,CAAC;AACF,IAAI,eAAe,GAAG,cAAc,CAAC,SAAS,EAAE,EAAE;AAClD,IAAI,QAAQ,EAAE,GAAG;AACjB,IAAI,MAAM,EAAE;AACZ,CAAC,CAAC;AACF,MAAM,CAAC,YAAY;AACnB,IAAI,IAAI,UAAU,GAAG,SAAS,EAAE;AAChC,IAAI,eAAe,CAAC,GAAG,CAAC,UAAU,CAAC;AACnC,CAAC,CAAC;AACF,IAAI,QAAQ,GAAG,QAAQ,CAAC,YAAY,EAAE,QAAQ;AAC9C,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,GAAG,CAAC,CAAC;AACxC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG;AACpB,CAAC,EAAE,CAAC,CAAC,CAAC;AACN,IAAI,SAAS,GAAG,QAAQ,CAAC,YAAY;AACrC,IAAI,IAAI,OAAO,GAAG,eAAe,EAAE;AACnC,IAAI,IAAI,KAAK,GAAG,YAAY,GAAG,OAAO;AACtC;AACA,IAAI,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,GAAG,WAAW,GAAG,CAAC,EAAE;AAChD,QAAQ,OAAO,WAAW,GAAG,CAAC;AAC9B,IAAI;AACJ,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC;AAC7B,CAAC,CAAC;AACF,IAAI,UAAU,GAAG,QAAQ,CAAC,YAAY;AACtC,IAAI,IAAI,OAAO,GAAG,SAAS,EAAE;AAC7B,IAAI,IAAI,OAAO,GAAG,GAAG,EAAE;AACvB,QAAQ,OAAO,QAAQ,CAAC;AACxB,IAAI;AACJ,SAAS,IAAI,OAAO,GAAG,GAAG,EAAE;AAC5B,QAAQ,OAAO,QAAQ,CAAC;AACxB,IAAI;AACJ,SAAS,IAAI,OAAO,GAAG,IAAI,EAAE;AAC7B,QAAQ,OAAO,QAAQ,CAAC;AACxB,IAAI;AACJ,SAAS;AACT,QAAQ,OAAO,QAAQ,CAAC;AACxB,IAAI;AACJ,CAAC,CAAC;AACF,IAAI,UAAU,GAAG,UAAU,CAAC,EAAE;AAC9B,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxD,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAC9C,CAAC;AACD,IAAI,cAAc,GAAG,UAAU,CAAC,EAAE;AAClC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxD,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAC1C,CAAC;AACD,IAAI,QAAQ,GAAG,UAAU,CAAC,EAAE;AAC5B,IAAI,IAAI,KAAK,GAAG,SAAS,EAAE;AAC3B,IAAI,IAAI,KAAK,GAAG,CAAC,EAAE;AACnB,QAAQ,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,CAAC;AACrE,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC;AACvC,IAAI;AACJ,CAAC;AACD,IAAI,aAAa,GAAG,UAAU,CAAC,EAAE;AACjC,IAAI,IAAI,KAAK,GAAG,SAAS,EAAE;AAC3B,IAAI,IAAI,KAAK,GAAG,CAAC,EAAE;AACnB,QAAQ,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,WAAW,CAAC;AAC1E,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAChD,IAAI;AACJ,CAAC;AACD,IAAI,UAAU,GAAG,UAAU,CAAC,EAAE;AAC9B,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxD,IAAI,CAAC,CAAC,MAAM,CAAC;AACb,QAAQ,KAAK,EAAE,WAAW;AAC1B,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,KAAK,EAAE;AACf,KAAK,CAAC;AACN,CAAC;AACD,QAAQ,IAAI,KAAK,GAAG,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,MAAM,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,MAAM,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;AAC1S,QAAQ,OAAO;AACf,MAAM;;;;"}