@rpgjs/client 5.0.0-alpha.3 → 5.0.0-alpha.30

package/dist/components/prebuilt/hp-bar.ce.js

@@ -0,0 +1,106 @@
+import { useProps, useDefineProps, computed, animatedSignal, effect, h, Container, Graphics } from 'canvasengine';
+
+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: position.x, y: 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 { component as default };
+//# sourceMappingURL=hp-bar.ce.js.map

package/dist/components/prebuilt/hp-bar.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hp-bar.ce.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":"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"}

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

@@ -0,0 +1,19 @@
+/**
+ * Prebuilt sprite components for common UI elements
+ *
+ * This module exports ready-to-use components that can be attached
+ * to sprites using componentsInFront or componentsBehind configuration.
+ *
+ * @example
+ * ```ts
+ * import { HpBar } from '@rpgjs/client/components/prebuilt';
+ *
+ * export default defineModule<RpgClient>({
+ *   sprite: {
+ *     componentsInFront: [HpBar]
+ *   }
+ * })
+ * ```
+ */
+export { default as HpBar } from './hp-bar.ce';
+export { default as LightHalo } from './light-halo.ce';

package/dist/components/prebuilt/light-halo.ce.js

@@ -0,0 +1,76 @@
+import { useProps, useDefineProps, computed, signal, tick, h, Container, Graphics } from 'canvasengine';
+import { BlurFilter } from 'pixi.js';
+
+function component($$props) {
+        useProps($$props);
+        const defineProps = useDefineProps($$props);
+        var _a = defineProps(), object = _a.object, baseRadius = _a.baseRadius, radiusVariation = _a.radiusVariation, baseOpacity = _a.baseOpacity, opacityVariation = _a.opacityVariation, sizeSpeed = _a.sizeSpeed, opacitySpeed = _a.opacitySpeed, lightColor = _a.lightColor;
+var getBaseRadius = computed(function () { var _a; return (_a = baseRadius === null || baseRadius === void 0 ? void 0 : baseRadius()) !== null && _a !== void 0 ? _a : 30; });
+var getRadiusVariation = computed(function () { var _a; return (_a = radiusVariation === null || radiusVariation === void 0 ? void 0 : radiusVariation()) !== null && _a !== void 0 ? _a : 10; });
+var getBaseOpacity = computed(function () { var _a; return (_a = baseOpacity === null || baseOpacity === void 0 ? void 0 : baseOpacity()) !== null && _a !== void 0 ? _a : 0.6; });
+var getOpacityVariation = computed(function () { var _a; return (_a = opacityVariation === null || opacityVariation === void 0 ? void 0 : opacityVariation()) !== null && _a !== void 0 ? _a : 0.3; });
+var getSizeSpeed = computed(function () { var _a; return (_a = sizeSpeed === null || sizeSpeed === void 0 ? void 0 : sizeSpeed()) !== null && _a !== void 0 ? _a : 0.002; });
+var getOpacitySpeed = computed(function () { var _a; return (_a = opacitySpeed === null || opacitySpeed === void 0 ? void 0 : opacitySpeed()) !== null && _a !== void 0 ? _a : 0.003; });
+var getLightColor = computed(function () { var _a; return (_a = lightColor === null || lightColor === void 0 ? void 0 : lightColor()) !== null && _a !== void 0 ? _a : 0xffffaa; });
+var time = signal(0);
+var currentRadius = computed(function () {
+    var t = time();
+    var base = getBaseRadius();
+    var variation = getRadiusVariation();
+    var speed = getSizeSpeed();
+    // Combine two sine waves for less predictable pulsing
+    var pulse1 = Math.sin(t * speed);
+    var pulse2 = Math.sin(t * speed * 1.5) * 0.5;
+    var combinedPulse = (pulse1 + pulse2) / 1.5;
+    return base + (combinedPulse * variation);
+});
+var currentOpacity = computed(function () {
+    var t = time();
+    var base = getBaseOpacity();
+    var variation = getOpacityVariation();
+    var speed = getOpacitySpeed();
+    // Main breathing cycle
+    var fade = Math.sin(t * speed);
+    // Subtle high-frequency flicker (candle-like)
+    var flicker = (Math.random() - 0.5) * 0.1;
+    return Math.max(0, Math.min(1, base + (fade * variation) + flicker));
+});
+var hitbox = object.hitbox;
+var position = computed(function () { return ({
+    x: hitbox().w / 2,
+    y: hitbox().h / 2
+}); });
+var blurFilter = new BlurFilter({ strength: 20, quality: 3 });
+var drawHalo = function (g) {
+    var radius = currentRadius();
+    var opacity = currentOpacity();
+    var color = getLightColor();
+    if (opacity <= 0 || radius <= 0)
+        return;
+    // Set blend mode to ADD for glowing light effect
+    g.blendMode = 'add';
+    // Apply blur filter for soft light diffusion
+    g.filters = [blurFilter];
+    // Draw main light source
+    // The blur filter will spread this out into a nice gradient
+    g.circle(0, 0, radius);
+    g.fill({
+        color: color,
+        alpha: opacity
+    });
+    // Draw a smaller, brighter core
+    g.circle(0, 0, radius * 0.4);
+    g.fill({
+        color: 0xffffff,
+        alpha: opacity * 0.5
+    });
+};
+tick(function () {
+    time.update(function (t) { return t + 1; });
+});
+        let $this = h(Container, { x: position.x, y: position.y }, h(Graphics, { draw: drawHalo }));
+        return $this
+      }
+
+export { component as default };
+//# sourceMappingURL=light-halo.ce.js.map

package/dist/components/prebuilt/light-halo.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"light-halo.ce.js","sources":["../../../src/components/prebuilt/light-halo.ce"],"sourcesContent":["<Container x={position.x} y={position.y}>\n  <Graphics draw={drawHalo}  />\n</Container>\n\n<script>\nimport { computed, signal, tick, mount } from \"canvasengine\";\nimport { BlurFilter } from \"pixi.js\";\n\n/**\n * Component props for LightHalo\n * \n * All props are signals (even static ones) and must be read with `()`.\n * Props are optional and will use default values if not provided.\n * \n * @property {Object} object - The sprite object (required)\n * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)\n * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)\n * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)\n * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)\n * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)\n * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)\n * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)\n */\nconst { \n  object, \n  baseRadius,\n  radiusVariation,\n  baseOpacity,\n  opacityVariation,\n  sizeSpeed,\n  opacitySpeed,\n  lightColor\n} = defineProps();\n\n// ====================\n// Props with default values\n// ====================\n\nconst getBaseRadius = computed(() => baseRadius?.() ?? 30);\nconst getRadiusVariation = computed(() => radiusVariation?.() ?? 10);\nconst getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);\nconst getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);\nconst getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);\nconst getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);\nconst getLightColor = computed(() => lightColor?.() ?? 0xffffaa);\n\n// ====================\n// Animation state\n// ====================\n\n/** Time counter for animations */\nconst time = signal(0);\n\n/**\n * Current radius of the halo with pulsing animation\n * Uses multiple sine waves for more organic movement\n */\nconst currentRadius = computed(() => {\n  const t = time();\n  const base = getBaseRadius();\n  const variation = getRadiusVariation();\n  const speed = getSizeSpeed();\n  \n  // Combine two sine waves for less predictable pulsing\n  const pulse1 = Math.sin(t * speed);\n  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;\n  const combinedPulse = (pulse1 + pulse2) / 1.5;\n  \n  return base + (combinedPulse * variation);\n});\n\n/**\n * Current opacity of the halo with fading animation\n * Includes a subtle flicker effect\n */\nconst currentOpacity = computed(() => {\n  const t = time();\n  const base = getBaseOpacity();\n  const variation = getOpacityVariation();\n  const speed = getOpacitySpeed();\n  \n  // Main breathing cycle\n  const fade = Math.sin(t * speed);\n  \n  // Subtle high-frequency flicker (candle-like)\n  const flicker = (Math.random() - 0.5) * 0.1;\n  \n  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));\n});\n\n// ====================\n// Position calculations\n// ====================\n\nconst hitbox = object.hitbox;\n\nconst position = computed(() => ({\n  x: hitbox().w / 2,\n  y: hitbox().h / 2\n}));\n\n// ====================\n// Drawing function\n// ====================\n\n// Create filters once to avoid recreation on every frame\nconst blurFilter = new BlurFilter({ strength: 20, quality: 3 });\n\n/**\n * Draws the light halo effect with realistic diffusion\n */\nconst drawHalo = (g) => {\n  const radius = currentRadius();\n  const opacity = currentOpacity();\n  const color = getLightColor();\n  \n  if (opacity <= 0 || radius <= 0) return;\n\n  // Set blend mode to ADD for glowing light effect\n  g.blendMode = 'add';\n  \n  // Apply blur filter for soft light diffusion\n  g.filters = [blurFilter];\n  \n  // Draw main light source\n  // The blur filter will spread this out into a nice gradient\n  g.circle(0, 0, radius);\n  g.fill({ \n    color: color, \n    alpha: opacity \n  });\n  \n  // Draw a smaller, brighter core\n  g.circle(0, 0, radius * 0.4);\n  g.fill({ \n    color: 0xffffff, \n    alpha: opacity * 0.5 \n  });\n};\n\n// ====================\n// Animation loop\n// ====================\ntick(() => {\n  time.update(t => t + 1);\n});\n</script>\n\n"],"names":[],"mappings":"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"}

package/dist/components/scenes/canvas.ce.js

@@ -0,0 +1,44 @@
+import { useProps, useDefineProps, computed, effect, h, Canvas, loop, Viewport, cond, Container } from 'canvasengine';
+import { inject } from '../../core/inject.js';
+import { RpgClientEngine } from '../../RpgClientEngine.js';
+import component$1 from './draw-map.ce.js';
+import { RpgGui } from '../../Gui/Gui.js';
+import { delay } from '@rpgjs/common';
+
+function component($$props) {
+        useProps($$props);
+        useDefineProps($$props);
+        var engine = inject(RpgClientEngine);
+var guiService = inject(RpgGui);
+var sceneData = engine.sceneMap.data;
+var guiList = computed(function () {
+    return Object.values(guiService.gui()).filter(function (gui) { return !gui.attachToSprite; });
+});
+var worldWidth = computed(function () { var _a; return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.width; });
+var worldHeight = computed(function () { var _a; return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.height; });
+effect(function () {
+    if (sceneData() && !sceneData().component) {
+        throw new Error("Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.");
+    }
+});
+var onGuiFinish = function (gui, data) {
+    delay(function () {
+        guiService.guiClose(gui.name, data);
+    });
+};
+var onGuiInteraction = function (gui, name, data) {
+    guiService.guiInteraction(gui.name, name, data);
+};
+var clamp = {
+    direction: "all"
+};
+        let $this = h(Canvas, { width: engine.width, height: engine.height }, [h(Viewport, { worldWidth, worldHeight, clamp }, cond(sceneData, () => h(component$1))), loop(guiList, gui => h(Container, { display: 'flex' }, cond(gui.display, () => h(gui.component, { data: gui.data, dependencies: gui.dependencies, onFinish: (data) => {
+            onGuiFinish(gui, data);
+          }, onInteraction: (name, data) => {
+            onGuiInteraction(gui, name, data);
+          } }))))]);
+        return $this
+      }
+
+export { component as default };
+//# sourceMappingURL=canvas.ce.js.map

package/dist/components/scenes/canvas.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.ce.js","sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp>\n    @if (sceneData) {\n      <SceneMap />\n    }\n  </Viewport>\n  @for (gui of guiList) {\n      <Container display=\"flex\">\n        @if (gui.display) {\n          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {\n            onGuiFinish(gui, data)\n          }} onInteraction={(name, data) => {\n            onGuiInteraction(gui, name, data)\n          }} /> \n        }\n      </Container>\n  }\n</Canvas>\n\n<script>\n  import { signal, computed, effect } from \"canvasengine\";\n  import { inject } from \"../../core/inject\";\n  import { RpgClientEngine } from \"../../RpgClientEngine\";\n  import SceneMap from './draw-map.ce'\n  import { RpgGui } from \"../../Gui/Gui\";\n  import { delay } from \"@rpgjs/common\";\n\n  const engine = inject(RpgClientEngine);\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => sceneData()?.width)\n  const worldHeight = computed(() => sceneData()?.height)\n\n  effect(() => {\n     if (sceneData() && !sceneData().component) {\n       throw new Error(\"Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.\")\n     }\n  })\n\n  const onGuiFinish = (gui, data) => {\n    delay(() => {\n      guiService.guiClose(gui.name, data)\n    })\n  }\n\n  const onGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data)\n  }\n  \n  const clamp = {\n    direction: \"all\"\n  }\n</script>\n"],"names":["SceneMap"],"mappings":";;;;;;;AAaqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAA4B,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AAC5C,IAAI,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC;AAC/B,IAAI,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI;AACpC,IAAI,OAAO,GAAG,QAAQ,CAAC,YAAY;AACnC,IAAI,OAAO,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AACjG,CAAC,CAAC;AACF,IAAI,UAAU,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,SAAS,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3H,IAAI,WAAW,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,SAAS,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAC7H,MAAM,CAAC,YAAY;AACnB,IAAI,IAAI,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE;AAC/C,QAAQ,MAAM,IAAI,KAAK,CAAC,mHAAmH,CAAC;AAC5I,IAAI;AACJ,CAAC,CAAC;AACF,IAAI,WAAW,GAAG,UAAU,GAAG,EAAE,IAAI,EAAE;AACvC,IAAI,KAAK,CAAC,YAAY;AACtB,QAAQ,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;AAC3C,IAAI,CAAC,CAAC;AACN,CAAC;AACD,IAAI,gBAAgB,GAAG,UAAU,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE;AAClD,IAAI,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AACnD,CAAC;AACD,IAAI,KAAK,GAAG;AACZ,IAAI,SAAS,EAAE;AACf;AACA,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAACA,WAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAK;AAC1U,YAAY,WAAW,CAAC,GAAG,EAAE,IAAI;AACjC,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK;AAC5C,YAAY,gBAAgB,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI;AAC5C,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAClB,QAAQ,OAAO;AACf,MAAM;;;;"}

package/dist/components/scenes/draw-map.ce.js

@@ -0,0 +1,34 @@
+import { useProps, useDefineProps, computed, signal, h, Container, loop } from 'canvasengine';
+import { inject } from '../../core/inject.js';
+import { RpgClientEngine } from '../../RpgClientEngine.js';
+
+function component($$props) {
+        useProps($$props);
+        useDefineProps($$props);
+        var _a, _b, _c, _d;
+var engine = inject(RpgClientEngine);
+var componentAnimations = engine.componentAnimations;
+var map = (_a = engine.sceneMap) === null || _a === void 0 ? void 0 : _a.data;
+var sceneComponent = computed(function () { var _a; return (_a = map()) === null || _a === void 0 ? void 0 : _a.component; });
+(_b = map()) === null || _b === void 0 ? void 0 : _b.params;
+var mapParams = (_c = map()) === null || _c === void 0 ? void 0 : _c.params;
+engine.sceneMap.animations;
+var backgroundMusic = { src: mapParams === null || mapParams === void 0 ? void 0 : mapParams.backgroundMusic, autoplay: true, loop: true };
+var backgroundAmbientSound = { src: mapParams === null || mapParams === void 0 ? void 0 : mapParams.backgroundAmbientSound, autoplay: true, loop: true };
+signal((_d = map()) === null || _d === void 0 ? void 0 : _d.data);
+var scale = (mapParams === null || mapParams === void 0 ? void 0 : mapParams.scale) || 1;
+((mapParams === null || mapParams === void 0 ? void 0 : mapParams.width) || 2048) * scale;
+((mapParams === null || mapParams === void 0 ? void 0 : mapParams.height) || 2048) * scale;
+var shakeConfig = {
+    trigger: engine.mapShakeTrigger,
+    intensity: 10,
+    duration: 500,
+    frequency: 10,
+    direction: 'both'
+};
+        let $this = h(Container, { sound: backgroundMusic, shake: shakeConfig }, [h(Container, { sound: backgroundAmbientSound }), h(sceneComponent(), { data: computed(() => map().data), params: computed(() => map().params) }), loop(componentAnimations, componentAnimation => h(Container, null, loop(componentAnimation.current, animation => h(componentAnimation.component, animation))))]);
+        return $this
+      }
+
+export { component as default };
+//# sourceMappingURL=draw-map.ce.js.map

package/dist/components/scenes/draw-map.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw-map.ce.js","sources":["../../../src/components/scenes/draw-map.ce"],"sourcesContent":["<Container sound={backgroundMusic} shake={shakeConfig}>\n  <Container sound={backgroundAmbientSound} />\n\n  <sceneComponent() data={map().data} params={map().params} />\n\n  @for (componentAnimation of componentAnimations) {\n    <Container>\n      @for (animation of componentAnimation.current) {\n        <componentAnimation.component ...animation />\n      }\n    </Container>\n  }\n</Container>\n\n<script>\n    import { NoiseFilter } from 'pixi-filters';\n    import { effect, signal, computed, mount, on, tick } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n\n    const engine = inject(RpgClientEngine);\n    const componentAnimations = engine.componentAnimations\n    const map = engine.sceneMap?.data\n    const sceneComponent = computed(() => map()?.component)\n    const sceneParams = map()?.params\n    const mapParams = map()?.params\n    const animations = engine.sceneMap.animations\n    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }\n    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }\n\n    const data = signal(map()?.data)\n\n    const scale = mapParams?.scale || 1\n    const worldWidth = (mapParams?.width || 2048) * scale\n    const worldHeight = (mapParams?.height || 2048) * scale\n   \n    const clamp = {\n      direction: \"all\"\n    }\n\n    const shakeConfig = {\n      trigger: engine.mapShakeTrigger,\n      intensity: 10,\n      duration: 500,\n      frequency: 10,\n      direction: 'both'\n    }\n</script>"],"names":[],"mappings":"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"}

package/dist/{index13.js → components/scenes/event-layer.ce.js}

@@ -1,17 +1,18 @@
 import { useProps, useDefineProps, h, Container, loop } from 'canvasengine';
-import { inject } from './index6.js';
-import { RpgClientEngine } from './index2.js';
-import component$1 from './index35.js';
+import { inject } from '../../core/inject.js';
+import { RpgClientEngine } from '../../RpgClientEngine.js';
+import component$1 from '../character.ce.js';
 
 function component($$props) {
         useProps($$props);
-        useDefineProps($$props);
+        const defineProps = useDefineProps($$props);
         var engine = inject(RpgClientEngine);
+var children = defineProps().children;
 var players = engine.sceneMap.players;
 var events = engine.sceneMap.events;
-        let $this = h(Container, { sortableChildren: true }, [loop(events, (event, id) => h(component$1, { id: id, object: event, isMe: false })), loop(players, (player, id) => h(component$1, { id: id, object: player, isMe: true }))]);
+        let $this = h(Container, { sortableChildren: true }, [loop(events, (event, id) => h(component$1, { id: id, object: event })), loop(players, (player, id) => h(component$1, { id: id, object: player })), loop(children, child => h(child))]);
         return $this
       }
 
 export { component as default };
-//# sourceMappingURL=index13.js.map
+//# sourceMappingURL=event-layer.ce.js.map

package/dist/components/scenes/event-layer.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-layer.ce.js","sources":["../../../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n    @for ((event,id) of events) {\n        <Character id={id} object={event}  />\n    }\n\n    @for ((player,id) of players) {\n        <Character id={id} object={player} />\n    }\n\n    @for (child of children) {\n        <child />\n    }\n</Container>\n\n<script>\n    import { effect, signal } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import Character from \"../character.ce\";\n    import LightHalo from \"../prebuilt/light-halo.ce\";\n   \n    const engine = inject(RpgClientEngine);\n    const { children } = defineProps()\n    \n    const players = engine.sceneMap.players\n    const events = engine.sceneMap.events\n</script>"],"names":["Character"],"mappings":";;;;;AAQqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AAC5C,IAAI,QAAQ,GAAG,WAAW,EAAE,CAAC,QAAQ;AACrC,IAAI,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO;AACrC,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC7B,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AAC/O,QAAQ,OAAO;AACf,MAAM;;;;"}

package/dist/{index6.js → core/inject.js}

@@ -1,4 +1,4 @@
-import { inject as inject$1 } from './index15.js';
+import { inject as inject$1 } from '../node_modules/.pnpm/@signe_di@2.8.2/node_modules/@signe/di/dist/index.js';
 
 let context = null;
 function inject(service, _context) {
@@ -14,4 +14,4 @@ function clearInject() {
 }
 
 export { clearInject, context, inject, setInject };
-//# sourceMappingURL=index6.js.map
+//# sourceMappingURL=inject.js.map

package/dist/core/inject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject.js","sources":["../../src/core/inject.ts"],"sourcesContent":["import { Context, inject as injector } from \"@signe/di\";\n\nexport let context: Context | null = null\n\nexport function inject<T>(service: (new (...args: any[]) => T) | string, _context?: Context): T {\n    const c = _context ?? context\n    if (!c) throw new Error(\"Context is not set. use setInject() to set the context\");\n    return injector(c, service);\n}\n\nexport function setInject(_context: Context) {\n    context = _context;\n}\n\nexport function clearInject() {\n    context = null\n}"],"names":["injector"],"mappings":";;AAEO,IAAI,OAAA,GAA0B;AAE9B,SAAS,MAAA,CAAU,SAA+C,QAAA,EAAuB;AAC5F,EAAA,MAAM,IAAI,QAAA,IAAY,OAAA;AACtB,EAAA,IAAI,CAAC,CAAA,EAAG,MAAM,IAAI,MAAM,wDAAwD,CAAA;AAChF,EAAA,OAAOA,QAAA,CAAS,GAAG,OAAO,CAAA;AAC9B;AAEO,SAAS,UAAU,QAAA,EAAmB;AACzC,EAAA,OAAA,GAAU,QAAA;AACd;AAEO,SAAS,WAAA,GAAc;AAC1B,EAAA,OAAA,GAAU,IAAA;AACd;;;;"}

package/dist/core/setup.js

@@ -0,0 +1,16 @@
+import { Context, injector, inject } from '../node_modules/.pnpm/@signe_di@2.8.2/node_modules/@signe/di/dist/index.js';
+import { RpgClientEngine } from '../RpgClientEngine.js';
+import { setInject } from './inject.js';
+
+async function startGame(options) {
+  const context = new Context();
+  context["side"] = "client";
+  setInject(context);
+  await injector(context, options.providers);
+  const engine = inject(context, RpgClientEngine);
+  await engine.start();
+  return context;
+}
+
+export { startGame };
+//# sourceMappingURL=setup.js.map

package/dist/core/setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.js","sources":["../../src/core/setup.ts"],"sourcesContent":["import { Context, FactoryProvider, findProvider, findProviders, inject, injector, Providers } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { setInject } from \"./inject\";\n\ninterface SetupOptions {\n  providers: Providers;\n}\n\n\nexport async function startGame(options: SetupOptions) {\n  const context = new Context();\n  context['side'] = 'client'\n  setInject(context);\n\n  await injector(context, options.providers);\n\n  const engine = inject(context, RpgClientEngine);\n  await engine.start();\n  return context;\n}"],"names":[],"mappings":";;;;AASA,eAAsB,UAAU,OAAA,EAAuB;AACrD,EAAA,MAAM,OAAA,GAAU,IAAI,OAAA,EAAQ;AAC5B,EAAA,OAAA,CAAQ,MAAM,CAAA,GAAI,QAAA;AAClB,EAAA,SAAA,CAAU,OAAO,CAAA;AAEjB,EAAA,MAAM,QAAA,CAAS,OAAA,EAAS,OAAA,CAAQ,SAAS,CAAA;AAEzC,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,OAAA,EAAS,eAAe,CAAA;AAC9C,EAAA,MAAM,OAAO,KAAA,EAAM;AACnB,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist/index.d.ts

@@ -2,12 +2,26 @@ export * from './RpgClientEngine';
 export type * from './RpgClient';
 export * from './services/standalone';
 export * from './services/mmorpg';
+export * from './services/save';
 export * from './core/setup';
 export * from './core/inject';
 export * from './services/loadMap';
 export * from './module';
 export * from './Gui/Gui';
 export * from './components/gui';
-export * from './components/effects';
+export * from './components/animations';
+export * from './components/prebuilt';
 export * from './presets';
 export * from './components';
+export * from './components/gui';
+export * from './Sound';
+export * from './Resource';
+export * from './utils/getEntityProp';
+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';
+export * from './services/AbstractSocket';

package/dist/index.js

@@ -1,13 +1,41 @@
-export { RpgClientEngine } from './index2.js';
-export { provideRpg } from './index3.js';
-export { provideMmorpg } from './index4.js';
-export { startGame } from './index5.js';
-export { clearInject, context, inject, setInject } from './index6.js';
-export { LoadMapService, LoadMapToken, provideLoadMap } from './index7.js';
-export { GlobalConfigToken, provideClientGlobalConfig, provideClientModules, provideGlobalConfig } from './index8.js';
-export { RpgGui } from './index9.js';
-export { PrebuiltGui } from './index10.js';
-export { PrebuiltEffects } from './index11.js';
-export { Presets } from './index12.js';
-export { default as EventLayerComponent } from './index13.js';
+export { RpgClientEngine } from './RpgClientEngine.js';
+export { provideRpg } from './services/standalone.js';
+export { provideMmorpg } from './services/mmorpg.js';
+export { SaveClientService, SaveClientToken, provideSaveClient } from './services/save.js';
+export { startGame } from './core/setup.js';
+export { clearInject, context, inject, setInject } from './core/inject.js';
+export { LoadMapService, LoadMapToken, provideLoadMap } from './services/loadMap.js';
+export { GlobalConfigToken, provideClientGlobalConfig, provideClientModules, provideGlobalConfig } from './module.js';
+export { RpgGui } from './Gui/Gui.js';
+export { default as DialogboxComponent } from './components/gui/dialogbox/index.ce.js';
+export { default as BoxComponent } from './components/gui/box.ce.js';
+export { default as ShopComponent } from './components/gui/shop/shop.ce.js';
+export { default as HudComponent } from './components/gui/hud/hud.ce.js';
+export { default as SaveLoadComponent } from './components/gui/save-load.ce.js';
+export { default as MainMenuComponent } from './components/gui/menu/main-menu.ce.js';
+export { default as ItemsMenuComponent } from './components/gui/menu/items-menu.ce.js';
+export { default as SkillsMenuComponent } from './components/gui/menu/skills-menu.ce.js';
+export { default as EquipMenuComponent } from './components/gui/menu/equip-menu.ce.js';
+export { default as OptionsMenuComponent } from './components/gui/menu/options-menu.ce.js';
+export { default as ExitMenuComponent } from './components/gui/menu/exit-menu.ce.js';
+export { default as NotificationComponent } from './components/gui/notification/notification.ce.js';
+export { default as TitleScreenComponent } from './components/gui/title-screen.ce.js';
+export { default as GameoverComponent } from './components/gui/gameover.ce.js';
+export { PrebuiltComponentAnimations } from './components/animations/index.js';
+export { default as HpBar } from './components/prebuilt/hp-bar.ce.js';
+export { default as LightHalo } from './components/prebuilt/light-halo.ce.js';
+export { Presets } from './presets/index.js';
+export { default as EventLayerComponent } from './components/scenes/event-layer.ce.js';
+export { default as CharacterComponent } from './components/character.ce.js';
+export { RpgSound, Sound, getSoundMetadata } from './Sound.js';
+export { RpgResource } from './Resource.js';
+export { getEntityProp } from './utils/getEntityProp.js';
+export { Context } from './node_modules/.pnpm/@signe_di@2.8.2/node_modules/@signe/di/dist/index.js';
+export { Input, KeyboardControls } from 'canvasengine';
+export { Control } from './services/keyboardControls.js';
+export { RpgClientObject } from './Game/Object.js';
+export { RpgClientPlayer } from './Game/Player.js';
+export { RpgClientEvent } from './Game/Event.js';
+export { withMobile } from './components/gui/mobile/index.js';
+export { AbstractWebsocket, WebSocketToken } from './services/AbstractSocket.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/module.d.ts

@@ -1,8 +1,47 @@
+import { FactoryProvider } from '@signe/di';
 import { RpgClient } from './RpgClient';
-export declare function provideClientModules(modules: RpgClient[]): {
-    provide: string;
-    useFactory: (context: import('@signe/di').Context) => import('@rpgjs/common').Hooks;
-};
+/**
+ * Type for client modules that can be either:
+ * - An object implementing RpgClient interface
+ * - A class decorated with @RpgModule decorator
+ */
+export type RpgClientModule = RpgClient | (new () => any);
+/**
+ * Provides client modules configuration to Dependency Injection
+ *
+ * This function accepts an array of client modules that can be either:
+ * - Objects implementing the RpgClient interface
+ * - Classes decorated with the @RpgModule decorator (which will be instantiated)
+ *
+ * @param modules - Array of client modules (objects or classes)
+ * @returns FactoryProvider configuration for DI
+ * @example
+ * ```ts
+ * // Using an object
+ * provideClientModules([
+ *   {
+ *     engine: {
+ *       onConnected(engine) {
+ *         console.log('Client connected')
+ *       }
+ *     }
+ *   }
+ * ])
+ *
+ * // Using a decorated class
+ * @RpgModule<RpgClient>({
+ *   engine: {
+ *     onStart(engine) {
+ *       console.log('Client started')
+ *     }
+ *   }
+ * })
+ * class MyClientModule {}
+ *
+ * provideClientModules([MyClientModule])
+ * ```
+ */
+export declare function provideClientModules(modules: RpgClientModule[]): FactoryProvider;
 export declare const GlobalConfigToken = "GlobalConfigToken";
 export declare function provideGlobalConfig(config: any): {
     provide: string;