@rpgjs/client 5.0.0-beta.10 → 5.0.0-beta.11

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

@@ -1 +1 @@
-{"version":3,"file":"hp-bar.ce.js","names":[],"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"],"mappings":";;AAOC,SAAA,UAAA,SAAA;CACsB,SAAC,OAAY;CAEhC,MAAS,EAAA,WADe,eAAe,OACN,EAAC;CACtC,MAAI,WAAS;CACb,MAAI,YAAc;CAClB,MAAC,eAAA;CACD,MAAG,cAAA;CACH,MAAK,UAAA;CACL,MAAE,UAAa;CACf,MAAC,cAAA;CACD,MAAK,cAAU;CACf,MAAE,eAAe,WAAa,UAAW;CACzC,MAAI,aAAQ,YAAA,UAAA;CACZ,MAAM,kBAAkB,KAAE,MAAK,aAAA,CAAA;CAC/B,MAAI,SAAA,OAAA;CACJ,MAAG,YAAA,eAAA;EACC,OAAA,OAAA,WAAA,KAAA;CACJ,CAAC;;EAGG,QADU,OAAY,SAAG,KAAW,CAAA,GACtB,SAAO;CACzB,CAAC;CACD,MAAC,YAAA,eAAA;EACG,MAAG,MAAK,MAAU;EACnB,IAAA,OAAS,GACX,OAAA;EACG,MAAM,UAAU,UAAC,IAAA;EAClB,OAAQ,KAAK,IAAE,GAAA,KAAU,IAAC,GAAA,OAAA,CAAA;CAC7B,CAAC;CACD,MAAM,kBAAkB,eAAe,UAAE,GAAA;EACtC,UAAS;EACX,QAAA;CACD,CAAC;CACD,aAAY;EACV,MAAA,aAAS,UAAA;;CAEX,CAAC;CACD,MAAM,WAAW,gBAAgB;;EAEjC,GAAO,CAAC,YAAW;;CAEnB,MAAM,YAAY,eAAI;EACnB,MAAA,UAAA,gBAAA;EACC,MAAM,QAAQ,eAAI;EAElB,IAAA,UAAc,KAAK,QAAO,cAAW,GACnC,OAAS,cAAI;EAEf,OAAM,KAAM,IAAI,GAAG,KAAI;CAC3B,CAAA;;EAEI,MAAM,UAAQ,UAAY;EAC9B,IAAM,UAAY,IAAA,OAAA;OAGZ,IAAA,UAAe,IAAA,OAAA;OAGf,IAAO,UAAI,KAAA,OAAA;;CAMjB,CAAA;;EAEI,EAAA,UAAY,GAAE,GAAA,UAAA,WAAA,YAAA;EAClB,EAAM,KAAA;GAAA,OAAc;GAAQ,OAAA;EAAA,CAAA;;CAE5B,MAAM,kBAAgB,MAAA;EACnB,EAAA,UAAW,GAAA,GAAA,UAAA,WAAA,YAAA;EACV,EAAE,KAAK;GAAE,OAAO;GAAE,OAAA;EAAA,CAAA;;CAEtB,MAAI,YAAa,MAAO;EACxB,MAAM,QAAY,UAAG;;GAEb,EAAC,UAAQ,SAAA,SAAA,OAAA,YAAA,WAAA;GACX,EAAA,KAAA,EAAW,OAAE,WAAa,EAAA,CAAA;;CAEhC;CACA,MAAM,iBAAiB,MAAM;;EAEzB,IAAI,QAAQ,GAAG;GAChB,EAAA,UAAY,SAAA,SAAA,OAAA,iBAAA,WAAA;GACP,EAAE,KAAK;IAAE,OAAK;IAAA,OAAA;GAAA,CAAA;;CAEtB;CACA,MAAM,cAAS,MAAO;;EAEpB,EAAA,OAAA;GACM,OAAI;GACJ,OAAA;GACN,OAAA;EACF,CAAK;CACL;WACE,EAAA,WAAA;EAAA,GAAA,SAAA;EAAA,GAAA,SAAA;CAAA,GAAA;EAAA,EAAA,UAAA;GAAA,MAAA;GAAA,GAAA;GAAA,GAAA;EAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,eAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,SAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,cAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,WAAA,CAAA;CAAA,CAAA,CAAA;AAEA;AAEC,IAAM,iBAEH"}
+{"version":3,"file":"hp-bar.ce.js","names":[],"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();\nconst sprite = object();\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 = sprite.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 sprite.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 = sprite._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"],"mappings":";;AAOC,SAAA,UAAA,SAAA;CACsB,SAAC,OAAY;CAEhC,MAAS,EAAA,WADe,eAAe,OACN,EAAC;CACtC,MAAI,SAAS,OAAQ;CACrB,MAAI,WAAa;CACjB,MAAC,YAAA;CACD,MAAG,eAAA;CACH,MAAK,cAAA;CACL,MAAE,UAAa;CACf,MAAC,UAAA;CACD,MAAK,cAAU;CACf,MAAE,cAAe;CACjB,MAAI,eAAQ,WAAA,UAAA;CACZ,MAAM,aAAA,YAAyB,UAAA;CAC/B,MAAI,kBAAA,KAAA,MAAA,aAAA,CAAA;CACJ,MAAG,SAAA,OAAA;CACH,MAAI,YAAA,eAAA;EACF,OAAA,OAAA,WAAA,KAAA;;CAEF,MAAC,QAAa,eAAe;EAE1B,QADe,OAAO,SAAU,KAAA,CAAM,GACvB,SAAA;CAClB,CAAC;CACD,MAAM,YAAM,eAAa;EACtB,MAAA,MAAa,MAAE;EACjB,IAAA,OAAA,GACM,OAAQ;EACZ,MAAA,UAAe,UAAW,IAAA;EAC5B,OAAA,KAAA,IAAA,GAAA,KAAA,IAAA,GAAA,OAAA,CAAA;CACD,CAAC;CACD,MAAG,kBAAe,eAAgB,UAAA,GAAA;EACjC,UAAA;EACG,QAAG;CACP,CAAC;CACD,aAAW;;EAEV,gBAAM,IAAA,UAAA;CACP,CAAA;;EAEA,GAAQ,OAAO,EAAE,IAAE,IAAA,WAAa;EAChC,GAAM,CAAA,YAAS;;CAEf,MAAM,YAAY,eAAI;EACnB,MAAA,UAAA,gBAAA;EACC,MAAM,QAAQ,eAAI;EAElB,IAAA,UAAc,KAAK,QAAO,cAAW,GACnC,OAAS,cAAI;EAEf,OAAM,KAAM,IAAI,GAAG,KAAI;CAC3B,CAAA;;EAEI,MAAM,UAAQ,UAAY;EAC9B,IAAM,UAAY,IAAA,OAAA;OAGZ,IAAA,UAAe,IAAA,OAAA;OAGf,IAAO,UAAI,KAAA,OAAA;;CAMjB,CAAA;;EAEI,EAAA,UAAY,GAAE,GAAA,UAAA,WAAA,YAAA;EAClB,EAAM,KAAA;GAAA,OAAc;GAAQ,OAAA;EAAA,CAAA;;CAE5B,MAAM,kBAAgB,MAAA;EACnB,EAAA,UAAW,GAAA,GAAA,UAAA,WAAA,YAAA;EACV,EAAE,KAAK;GAAE,OAAO;GAAE,OAAA;EAAA,CAAA;;CAEtB,MAAI,YAAa,MAAO;EACxB,MAAM,QAAY,UAAG;;GAEb,EAAC,UAAQ,SAAA,SAAA,OAAA,YAAA,WAAA;GACX,EAAA,KAAA,EAAW,OAAE,WAAa,EAAA,CAAA;;CAEhC;CACA,MAAM,iBAAiB,MAAM;;EAEzB,IAAI,QAAQ,GAAG;GAChB,EAAA,UAAY,SAAA,SAAA,OAAA,iBAAA,WAAA;GACP,EAAE,KAAK;IAAE,OAAK;IAAA,OAAA;GAAA,CAAA;;CAEtB;CACA,MAAM,cAAS,MAAO;;EAEpB,EAAA,OAAA;GACM,OAAI;GACJ,OAAA;GACN,OAAA;EACF,CAAK;CACL;WACE,EAAA,WAAA;EAAA,GAAA,SAAA;EAAA,GAAA,SAAA;CAAA,GAAA;EAAA,EAAA,UAAA;GAAA,MAAA;GAAA,GAAA;GAAA,GAAA;EAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,eAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,SAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,cAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,WAAA,CAAA;CAAA,CAAA,CAAA;AAEA;AAEC,IAAM,iBAAkB"}

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

@@ -4,6 +4,7 @@ import { BlurFilter } from "pixi.js";
 function component($$props) {
 	useProps($$props);
 	const { object, baseRadius, radiusVariation, baseOpacity, opacityVariation, sizeSpeed, opacitySpeed, lightColor } = useDefineProps($$props)();
+	const sprite = object();
 	const getBaseRadius = computed(() => baseRadius?.() ?? 30);
 	const getRadiusVariation = computed(() => radiusVariation?.() ?? 10);
 	const getBaseOpacity = computed(() => baseOpacity?.() ?? .6);
@@ -28,7 +29,7 @@ function component($$props) {
 		const flicker = (Math.random() - .5) * .1;
 		return Math.max(0, Math.min(1, base + fade * variation + flicker));
 	});
-	const hitbox = object.hitbox;
+	const hitbox = sprite.hitbox;
 	const position = computed(() => ({
 		x: hitbox().w / 2,
 		y: hitbox().h / 2

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

@@ -1 +1 @@
-{"version":3,"file":"light-halo.ce.js","names":[],"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"],"mappings":";;;AAQE,SAAA,UAAA,SAAA;CACqB,SAAA,OAAA;CAEhB,MAAM,EAAG,QAAQ,YAAO,iBAAsB,aAAa,kBAAI,WAAA,cAAA,eADpE,eAAA,OACoE,EAAA;CACtE,MAAG,gBAAmB,eAAa,aAAe,KAAG,EAAI;CACzD,MAAE,qBAAA,eAAA,kBAAA,KAAA,EAAA;CACF,MAAI,iBAAkB,eAAa,cAAe,KAAA,EAAQ;CAC1D,MAAI,sBAAwB,eAAU,mBAAmB,KAAU,EAAG;CACtE,MAAI,eAAiB,eAAe,YAAE,KAAe,IAAI;CACzD,MAAI,kBAAiB,eAAiB,eAAe,KAAK,IAAA;CAC1D,MAAI,gBAAiB,eAAgB,aAAC,KAAiB,QAAG;CAC1D,MAAI,OAAS,OAAO,CAAC;CACrB,MAAI,gBAAiB,eAAgB;EACjC,MAAA,IAAU,KAAA;EACZ,MAAA,OAAA,cAAA;EACF,MAAO,YAAA,mBAAA;EACL,MAAO,QAAA,aAAA;EAKP,OAAS,QAHM,KAAA,IAAA,IAAA,KAEC,IADL,KAAA,IAAA,IAAA,QAAA,GAAA,IAAA,MACK,MACP;CACX,CAAC;CACD,MAAE,iBAAA,eAAA;EACE,MAAA,IAAA,KAAa;;EAEb,MAAM,YAAY,oBAAA;EACnB,MAAM,QAAK,gBAAQ;;EAItB,MAAM,WAAA,KAAoB,OAAC,IAAU,MAAK;EAC1C,OAAM,KAAA,IAAc,GAAG,KAAA,IAAS,GAAG,OAAG,OAAY,YAAW,OAAA,CAAA;CAC7D,CAAA;CACA,MAAM,SAAA,OAAe;CACrB,MAAM,WAAA,gBAA2B;EACjC,GAAM,OAAA,EAAA,IAAc;;CAEpB,EAAE;CACF,MAAG,aAAU,IAAA,WAAA;EAAA,UAAA;EAAA,SAAA;CAAA,CAAA;CACb,MAAM,YAAY,MAAI;;EAElB,MAAK,UAAW,eAAa;EACjC,MAAU,QAAG,cAAS;mCAEpB;EAEC,EAAA,YAAc;EAEjB,EAAM,UAAA,CAAA,UAAgB;EAGpB,EAAA,OAAM,GAAA,GAAW,MAAC;EAClB,EAAA,KAAM;GACP;GACI,OAAQ;EACX,CAAA;EAEA,EAAA,OAAM,GAAA,GAAA,SAAiB,EAAM;EAC9B,EAAA,KAAA;GACO,OAAO;GACb,OAAA,UAAA;;CAEF;CACA,WAAW;EACR,KAAA,QAAW,MAAO,IAAA,CAAA;CACrB,CAAC;CAEO,OADY,EAAE,WAAW;EAAE,GAAG,SAAA;EAAA,GAAA,SAAA;CAAA,GAAA,EAAA,UAAA,EAAA,MAAA,SAAA,CAAA,CACpB;AAChB;AAEA,IAAM,iBAEE"}
+{"version":3,"file":"light-halo.ce.js","names":[],"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();\nconst sprite = object();\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 = sprite.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"],"mappings":";;;AAQE,SAAA,UAAA,SAAA;CACqB,SAAA,OAAA;CAEhB,MAAM,EAAG,QAAQ,YAAO,iBAAsB,aAAa,kBAAI,WAAA,cAAA,eADpE,eAAA,OACoE,EAAA;CACtE,MAAG,SAAU,OAAS;CACtB,MAAE,gBAAA,eAAA,aAAA,KAAA,EAAA;CACF,MAAI,qBAAkB,eAAoB,kBAAgB,KAAA,EAAA;CAC1D,MAAI,iBAAiB,eAAiB,cAAc,KAAK,EAAA;CACzD,MAAI,sBAAwB,eAAU,mBAAmB,KAAO,EAAA;CAChE,MAAI,eAAiB,eAAe,YAAE,KAAe,IAAK;CAC1D,MAAI,kBAAiB,eAAiB,eAAgB,KAAI,IAAA;CAC1D,MAAI,gBAAiB,eAAgB,aAAa,KAAC,QAAU;CAC7D,MAAI,OAAS,OAAO,CAAC;CACrB,MAAI,gBAAiB,eAAgB;EACnC,MAAA,IAAA,KAAA;EACF,MAAO,OAAA,cAAA;EACL,MAAO,YAAA,mBAAA;EACP,MAAA,QAAU,aAAA;EAKV,OAAA,QAHW,KAAA,IAAA,IAAA,KAEF,IADO,KAAA,IAAA,IAAA,QAAA,GAAA,IAAA,MACP,MACG;CACd,CAAC;CACD,MAAI,iBAAa,eAAA;EACjB,MAAM,IAAQ,KAAC;;EAEX,MAAM,YAAY,oBAAA;EACnB,MAAM,QAAK,gBAAQ;;EAItB,MAAM,WAAA,KAAoB,OAAC,IAAU,MAAK;EAC1C,OAAM,KAAA,IAAc,GAAG,KAAA,IAAS,GAAG,OAAG,OAAY,YAAW,OAAA,CAAA;CAC7D,CAAA;CACA,MAAM,SAAA,OAAe;CACrB,MAAM,WAAA,gBAA2B;EACjC,GAAM,OAAA,EAAA,IAAc;;CAEpB,EAAE;CACF,MAAG,aAAU,IAAA,WAAA;EAAA,UAAA;EAAA,SAAA;CAAA,CAAA;CACb,MAAM,YAAY,MAAI;;EAElB,MAAK,UAAW,eAAa;EACjC,MAAU,QAAG,cAAS;mCAEpB;EAEC,EAAA,YAAc;EAEjB,EAAM,UAAA,CAAA,UAAgB;EAGpB,EAAA,OAAM,GAAA,GAAW,MAAC;EAClB,EAAA,KAAM;GACP;GACI,OAAQ;EACX,CAAA;EAEA,EAAA,OAAM,GAAA,GAAA,SAAiB,EAAM;EAC9B,EAAA,KAAA;GACO,OAAO;GACb,OAAA,UAAA;;CAEF;CACA,WAAW;EACR,KAAA,QAAW,MAAO,IAAA,CAAA;CACrB,CAAC;CAEO,OADY,EAAE,WAAW;EAAE,GAAG,SAAA;EAAA,GAAA,SAAA;CAAA,GAAA,EAAA,UAAA,EAAA,MAAA,SAAA,CAAA,CACpB;AAChB;AAEA,IAAM,iBAAQ"}

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

@@ -1,15 +1,15 @@
 import { inject } from "../../core/inject.js";
-import __ce_component$1 from "./draw-map.ce.js";
 import { RpgGui } from "../../Gui/Gui.js";
 import { RpgClientEngine } from "../../RpgClientEngine.js";
 import { Canvas, Container, Viewport, computed, cond, effect, h, loop, useDefineProps, useProps } from "canvasengine";
-import { NightAmbiant, SpriteShadows } from "@canvasengine/presets";
 import { delay } from "@rpgjs/common";
+import { NightAmbiant, SpriteShadows } from "@canvasengine/presets";
 //#region src/components/scenes/canvas.ce
 function component($$props) {
 	useProps($$props);
 	useDefineProps($$props);
 	const engine = inject(RpgClientEngine);
+	const SceneMap = engine.sceneMapComponent;
 	const guiService = inject(RpgGui);
 	const sceneData = engine.sceneMap.data;
 	const lighting = engine.sceneMap.lighting;
@@ -177,8 +177,16 @@ function component($$props) {
 			cullToViewport: shadowCullToViewport,
 			shadowColor
 		})),
-		h(__ce_component$1)
-	]), loop(guiList, (gui) => h(Container, { display: "flex" }, cond(gui.display, () => h(gui.component, {
+		h(SceneMap)
+	]), loop(guiList, (gui) => h(Container, {
+		positionType: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		width: engine.width,
+		height: engine.height
+	}, cond(gui.display, () => h(gui.component, {
 		data: gui.data,
 		dependencies: gui.dependencies,
 		onFinish: (data) => {

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

@@ -1 +1 @@
-{"version":3,"file":"canvas.ce.js","names":[],"sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp sortableChildren={true}>\n    @if (lightingAmbientEnabled()) {\n      <NightAmbiant\n        spots={nightLights}\n        darkness={lightingDarknessProps}\n        haze={lightingHaze}\n      />\n    }\n    @if (shadowEnabled()) {\n      <SpriteShadows\n        lights={shadowLights}\n        ambientLight={shadowAmbientLight}\n        minInfluence={shadowMinInfluence}\n        falloffPower={shadowFalloffPower}\n        mode={shadowMode}\n        updateHz={shadowUpdateHz}\n        scanHz={shadowScanHz}\n        cullToViewport={shadowCullToViewport}\n        shadowColor={shadowColor}\n      />\n    }\n    <SceneMap />\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 { 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  import { NightAmbiant, SpriteShadows } from '@canvasengine/presets'\n\n  const engine = inject(RpgClientEngine);\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const lighting = engine.sceneMap.lighting\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => {\n    const data = sceneData?.()\n    const scale = Number(data?.params?.scale ?? 1) || 1\n    return Number(data?.width ?? data?.params?.width ?? 2048) * scale\n  })\n  const worldHeight = computed(() => {\n    const data = sceneData?.()\n    const scale = Number(data?.params?.scale ?? 1) || 1\n    return Number(data?.height ?? data?.params?.height ?? 2048) * scale\n  })\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  const NIGHT_SPOT_RADIUS_SCALE = 4.25\n  const NIGHT_SPOT_MIN_RADIUS = 170\n  const NIGHT_SPOT_MIN_INTENSITY = 1\n  const SHADOW_SPOT_RADIUS_SCALE = 12\n  const SHADOW_SPOT_MIN_RADIUS = 480\n  const SHADOW_SPOT_MIN_INTENSITY = 1.35\n\n  const nightSpotRadius = (radius) => Math.max(radius * NIGHT_SPOT_RADIUS_SCALE, NIGHT_SPOT_MIN_RADIUS)\n  const shadowSpotRadius = (radius) => Math.max(radius * SHADOW_SPOT_RADIUS_SCALE, SHADOW_SPOT_MIN_RADIUS)\n  const nightSpotIntensity = (intensity, fallback) => Math.max(intensity ?? fallback, NIGHT_SPOT_MIN_INTENSITY)\n  const shadowSpotIntensity = (intensity) => Math.max(intensity ?? 1.3, SHADOW_SPOT_MIN_INTENSITY)\n\n  const lightingAmbient = computed(() => {\n    const state = lighting?.()\n    return state?.ambient ?? {}\n  })\n\n  const nightLights = computed(() => {\n    const state = lighting?.()\n    return (state?.spots ?? []).map((spot, index) => {\n      const radius = spot.radius ?? 180\n      return {\n        x: spot.x,\n        y: spot.y,\n        radius: nightSpotRadius(radius),\n        intensity: nightSpotIntensity(spot.intensity, index === 0 ? 1 : 0.92),\n        flicker: spot.flicker,\n        flickerSpeed: spot.flickerSpeed ?? 14,\n        pulse: spot.pulse,\n        pulseSpeed: spot.pulseSpeed,\n        phase: spot.phase,\n      }\n    })\n  })\n  const hasLightSpots = computed(() => {\n    const state = lighting?.()\n    return (state?.spots?.length ?? 0) > 0\n  })\n\n  const lightingDarkness = computed(() => {\n    const darkness = lightingAmbient().darkness\n    return typeof darkness === \"number\" ? darkness : 0\n  })\n\n  const lightingAmbientEnabled = computed(() => {\n    const state = lighting?.()\n    return Boolean(state && lightingDarkness() > 0)\n  })\n\n  const lightingDarknessProps = computed(() => ({\n    opacity: lightingDarkness(),\n    color: lightingAmbient().darkColor ?? \"#080a12\",\n  }))\n  const lightingHaze = computed(() => ({\n    color: lightingAmbient().fogColor ?? \"#12182a\",\n    radius: lightingAmbient().fogRadius ?? 0.44,\n    softness: lightingAmbient().fogSoftness ?? 0.3,\n    opacity: lightingAmbient().fogOpacity ?? 0.35,\n  }))\n\n  const defaultSunLight = () => {\n    const data = sceneData?.()\n    const width = Number(data?.width ?? data?.params?.width ?? 2048)\n    const height = Number(data?.height ?? data?.params?.height ?? 2048)\n    const scale = Number(data?.params?.scale ?? 1) || 1\n    const mapWidth = width * scale\n    const mapHeight = height * scale\n\n    return {\n      x: -mapWidth * 0.35,\n      y: -mapHeight * 0.45,\n      z: 520,\n      radius: Math.max(mapWidth, mapHeight) * 2.5,\n      intensity: 0.85,\n      shadowWeight: lightingDarkness() > 0 ? 2.2 : 1,\n      enabled: true,\n    }\n  }\n\n  const shadowState = computed(() => {\n    const state = lighting?.()\n    return state?.shadows ?? null\n  })\n\n  const shadowLights = computed(() => {\n    const state = lighting?.()\n    const defaultSun = defaultSunLight()\n    const sun = {\n      ...defaultSun,\n      ...(state?.sun ?? {}),\n      shadowWeight: state?.sun?.shadowWeight ?? defaultSun.shadowWeight,\n    }\n    const spotLights = (state?.spots ?? []).map((spot) => {\n      const radius = spot.radius ?? 180\n      return {\n        x: spot.x,\n        y: spot.y,\n        z: 170,\n        radius: shadowSpotRadius(radius),\n        intensity: shadowSpotIntensity(spot.intensity),\n        shadowWeight: 2.4,\n        enabled: true,\n      }\n    })\n\n    return [\n      ...((sun.enabled === false || sun.intensity <= 0) ? [] : [sun]),\n      ...spotLights,\n    ]\n  })\n\n  const shadowAmbientLight = computed(() => {\n    const shadows = shadowState()\n    if (shadows?.ambientLight === null || shadows?.ambientLight?.enabled === false) {\n      return null\n    }\n    return shadows?.ambientLight ?? { x: -0.18, y: -1, z: 420, intensity: 0.32, shadowWeight: 1 }\n  })\n\n  const shadowEnabled = computed(() => {\n    const shadows = shadowState()\n    return Boolean((shadows?.enabled || hasLightSpots()) && (shadowLights().length > 0 || shadowAmbientLight()))\n  })\n\n  const shadowMode = computed(() => shadowState()?.mode ?? \"strongest\")\n  const shadowUpdateHz = computed(() => shadowState()?.updateHz ?? 60)\n  const shadowScanHz = computed(() => shadowState()?.scanHz ?? 8)\n  const shadowCullToViewport = computed(() => shadowState()?.cullToViewport ?? true)\n  const shadowMinInfluence = computed(() => shadowState()?.minInfluence ?? 0.24)\n  const shadowFalloffPower = computed(() => shadowState()?.falloffPower ?? 0.85)\n  const shadowColor = computed(() => shadowState()?.shadowColor ?? \"#05070d\")\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"canvas.ce.js","names":[],"sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp sortableChildren={true}>\n    @if (lightingAmbientEnabled()) {\n      <NightAmbiant\n        spots={nightLights}\n        darkness={lightingDarknessProps}\n        haze={lightingHaze}\n      />\n    }\n    @if (shadowEnabled()) {\n      <SpriteShadows\n        lights={shadowLights}\n        ambientLight={shadowAmbientLight}\n        minInfluence={shadowMinInfluence}\n        falloffPower={shadowFalloffPower}\n        mode={shadowMode}\n        updateHz={shadowUpdateHz}\n        scanHz={shadowScanHz}\n        cullToViewport={shadowCullToViewport}\n        shadowColor={shadowColor}\n      />\n    }\n    <SceneMap />\n  </Viewport>\n  @for (gui of guiList) {\n      <Container\n        positionType=\"absolute\"\n        top={0}\n        left={0}\n        right={0}\n        bottom={0}\n        width={engine.width}\n        height={engine.height}\n      >\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 { computed, effect } from \"canvasengine\";\n  import { inject } from \"../../core/inject\";\n  import { RpgClientEngine } from \"../../RpgClientEngine\";\n  import { RpgGui } from \"../../Gui/Gui\";\n  import { delay } from \"@rpgjs/common\";\n  import { NightAmbiant, SpriteShadows } from '@canvasengine/presets'\n\n  const engine = inject(RpgClientEngine);\n  const SceneMap = engine.sceneMapComponent;\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const lighting = engine.sceneMap.lighting\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => {\n    const data = sceneData?.()\n    const scale = Number(data?.params?.scale ?? 1) || 1\n    return Number(data?.width ?? data?.params?.width ?? 2048) * scale\n  })\n  const worldHeight = computed(() => {\n    const data = sceneData?.()\n    const scale = Number(data?.params?.scale ?? 1) || 1\n    return Number(data?.height ?? data?.params?.height ?? 2048) * scale\n  })\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  const NIGHT_SPOT_RADIUS_SCALE = 4.25\n  const NIGHT_SPOT_MIN_RADIUS = 170\n  const NIGHT_SPOT_MIN_INTENSITY = 1\n  const SHADOW_SPOT_RADIUS_SCALE = 12\n  const SHADOW_SPOT_MIN_RADIUS = 480\n  const SHADOW_SPOT_MIN_INTENSITY = 1.35\n\n  const nightSpotRadius = (radius) => Math.max(radius * NIGHT_SPOT_RADIUS_SCALE, NIGHT_SPOT_MIN_RADIUS)\n  const shadowSpotRadius = (radius) => Math.max(radius * SHADOW_SPOT_RADIUS_SCALE, SHADOW_SPOT_MIN_RADIUS)\n  const nightSpotIntensity = (intensity, fallback) => Math.max(intensity ?? fallback, NIGHT_SPOT_MIN_INTENSITY)\n  const shadowSpotIntensity = (intensity) => Math.max(intensity ?? 1.3, SHADOW_SPOT_MIN_INTENSITY)\n\n  const lightingAmbient = computed(() => {\n    const state = lighting?.()\n    return state?.ambient ?? {}\n  })\n\n  const nightLights = computed(() => {\n    const state = lighting?.()\n    return (state?.spots ?? []).map((spot, index) => {\n      const radius = spot.radius ?? 180\n      return {\n        x: spot.x,\n        y: spot.y,\n        radius: nightSpotRadius(radius),\n        intensity: nightSpotIntensity(spot.intensity, index === 0 ? 1 : 0.92),\n        flicker: spot.flicker,\n        flickerSpeed: spot.flickerSpeed ?? 14,\n        pulse: spot.pulse,\n        pulseSpeed: spot.pulseSpeed,\n        phase: spot.phase,\n      }\n    })\n  })\n  const hasLightSpots = computed(() => {\n    const state = lighting?.()\n    return (state?.spots?.length ?? 0) > 0\n  })\n\n  const lightingDarkness = computed(() => {\n    const darkness = lightingAmbient().darkness\n    return typeof darkness === \"number\" ? darkness : 0\n  })\n\n  const lightingAmbientEnabled = computed(() => {\n    const state = lighting?.()\n    return Boolean(state && lightingDarkness() > 0)\n  })\n\n  const lightingDarknessProps = computed(() => ({\n    opacity: lightingDarkness(),\n    color: lightingAmbient().darkColor ?? \"#080a12\",\n  }))\n  const lightingHaze = computed(() => ({\n    color: lightingAmbient().fogColor ?? \"#12182a\",\n    radius: lightingAmbient().fogRadius ?? 0.44,\n    softness: lightingAmbient().fogSoftness ?? 0.3,\n    opacity: lightingAmbient().fogOpacity ?? 0.35,\n  }))\n\n  const defaultSunLight = () => {\n    const data = sceneData?.()\n    const width = Number(data?.width ?? data?.params?.width ?? 2048)\n    const height = Number(data?.height ?? data?.params?.height ?? 2048)\n    const scale = Number(data?.params?.scale ?? 1) || 1\n    const mapWidth = width * scale\n    const mapHeight = height * scale\n\n    return {\n      x: -mapWidth * 0.35,\n      y: -mapHeight * 0.45,\n      z: 520,\n      radius: Math.max(mapWidth, mapHeight) * 2.5,\n      intensity: 0.85,\n      shadowWeight: lightingDarkness() > 0 ? 2.2 : 1,\n      enabled: true,\n    }\n  }\n\n  const shadowState = computed(() => {\n    const state = lighting?.()\n    return state?.shadows ?? null\n  })\n\n  const shadowLights = computed(() => {\n    const state = lighting?.()\n    const defaultSun = defaultSunLight()\n    const sun = {\n      ...defaultSun,\n      ...(state?.sun ?? {}),\n      shadowWeight: state?.sun?.shadowWeight ?? defaultSun.shadowWeight,\n    }\n    const spotLights = (state?.spots ?? []).map((spot) => {\n      const radius = spot.radius ?? 180\n      return {\n        x: spot.x,\n        y: spot.y,\n        z: 170,\n        radius: shadowSpotRadius(radius),\n        intensity: shadowSpotIntensity(spot.intensity),\n        shadowWeight: 2.4,\n        enabled: true,\n      }\n    })\n\n    return [\n      ...((sun.enabled === false || sun.intensity <= 0) ? [] : [sun]),\n      ...spotLights,\n    ]\n  })\n\n  const shadowAmbientLight = computed(() => {\n    const shadows = shadowState()\n    if (shadows?.ambientLight === null || shadows?.ambientLight?.enabled === false) {\n      return null\n    }\n    return shadows?.ambientLight ?? { x: -0.18, y: -1, z: 420, intensity: 0.32, shadowWeight: 1 }\n  })\n\n  const shadowEnabled = computed(() => {\n    const shadows = shadowState()\n    return Boolean((shadows?.enabled || hasLightSpots()) && (shadowLights().length > 0 || shadowAmbientLight()))\n  })\n\n  const shadowMode = computed(() => shadowState()?.mode ?? \"strongest\")\n  const shadowUpdateHz = computed(() => shadowState()?.updateHz ?? 60)\n  const shadowScanHz = computed(() => shadowState()?.scanHz ?? 8)\n  const shadowCullToViewport = computed(() => shadowState()?.cullToViewport ?? true)\n  const shadowMinInfluence = computed(() => shadowState()?.minInfluence ?? 0.24)\n  const shadowFalloffPower = computed(() => shadowState()?.falloffPower ?? 0.85)\n  const shadowColor = computed(() => shadowState()?.shadowColor ?? \"#05070d\")\n</script>\n"],"mappings":"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"}

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

@@ -5,9 +5,10 @@ import { Weather } from "@canvasengine/presets";
 //#region src/components/scenes/draw-map.ce
 function component($$props) {
 	useProps($$props);
-	useDefineProps($$props);
+	const { children } = useDefineProps($$props)();
 	const engine = inject(RpgClientEngine);
 	const componentAnimations = engine.componentAnimations;
+	const projectiles = engine.projectiles.current;
 	const map = engine.sceneMap?.data;
 	const sceneComponent = computed(() => map()?.component);
 	const mapParams = map()?.params;
@@ -64,11 +65,13 @@ function component($$props) {
 		freeze: engine.gamePause
 	}, [
 		h(Container, { sound: backgroundAmbientSound }),
-		cond(computed(() => map() && sceneComponent()), () => h(sceneComponent(), {
+		h(Container, null, cond(computed(() => map() && sceneComponent()), () => h(sceneComponent(), {
 			data: computed(() => map().data),
 			params: computed(() => map().params)
-		})),
+		}))),
+		loop(children, (child) => h(child)),
 		loop(componentAnimations, (componentAnimation) => h(Container, null, loop(componentAnimation.current, (animation) => h(componentAnimation.component, animation)))),
+		h(Container, { sortableChildren: true }, loop(computed(() => projectiles()), (projectile) => h(projectile.component, projectile.props), { track: (projectile) => projectile.props.id })),
 		cond(computed(() => weatherProps()), () => h(Weather, weatherProps()))
 	]);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"draw-map.ce.js","names":[],"sources":["../../../src/components/scenes/draw-map.ce"],"sourcesContent":["<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>\n  <Container sound={backgroundAmbientSound} />\n\n  @if (map() && sceneComponent()) {\n    <sceneComponent() data={map().data} params={map().params} />\n  }\n\n  @for (componentAnimation of componentAnimations) {\n    <Container>\n      @for (animation of componentAnimation.current) {\n        <componentAnimation.component ...animation />\n      }\n    </Container>\n  }\n\n  @if (weatherProps()) {\n    <Weather ...weatherProps() />\n  }\n</Container>\n\n<script>\n    import { computed } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { Weather } from '@canvasengine/presets'\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 mapParams = map()?.params\n    const weather = engine.sceneMap.weather\n    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }\n    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }\n\n    const shakeConfig = {\n      trigger: engine.mapShakeTrigger,\n      intensity: 10,\n      duration: 500,\n      frequency: 10,\n      direction: 'both'\n    }\n\n    const weatherProps = computed(() => {\n      const state = weather?.()\n      if (!state) {\n        return null\n      }\n      const validEffects = ['rain', 'snow', 'fog', 'cloud']\n      if (!validEffects.includes(state.effect)) {\n        return null\n      }\n      const params = state.params ?? {}\n      return {\n        effect: state.effect,\n        speed: params.speed,\n        windDirection: params.windDirection,\n        windStrength: params.windStrength,\n        density: params.density,\n        maxDrops: params.maxDrops,\n        height: params.height,\n        scale: params.scale,\n        sunIntensity: params.sunIntensity,\n        sunAngle: params.sunAngle,\n        raySpread: params.raySpread,\n        rayTwinkle: params.rayTwinkle,\n        rayTwinkleSpeed: params.rayTwinkleSpeed,\n        zIndex: params.zIndex ?? 1000,\n        alpha: params.alpha,\n        blendMode: params.blendMode,\n      }\n    })\n</script>\n"],"mappings":";;;;;AASM,SAAM,UAAa,SAAA;CAChB,SAAmB,OAAW;CACjC,eAAA,OAAA;CACA,MAAA,SAAS,OAAA,eAAA;CACf,MAAE,sBAAA,OAAA;;CAEF,MAAM,iBAAiB,eAAA,IAAA,GAAA,SAAA;CACvB,MAAK,YAAW,IAAA,GAAA;CAChB,MAAE,UAAA,OAAA,SAAA;CACF,MAAE,kBAAS;EAAA,KAAA,WAAA;EAAA,UAAA;EAAA,MAAA;CAAA;;;;;;CAEX,MAAC,cAAM;EACH,SAAS,OAAA;EACT,WAAS;EACT,UAAS;EACT,WAAS;;CAEb;CACA,MAAI,eAAM,eAAsB;EAC5B,MAAM,QAAM,UAAO;EACnB,IAAA,CAAK,OACL,OAAM;EAGN,IAAA,CAAK;GADiB;GAAQ;GAAC;GAAW;EACpC,EAAA,SAAA,MAA2B,MAAK,GAAA,OAAA;EAGtC,MAAE,SAAS,MAAO,UAAA,CAAA;EAClB,OAAE;GACA,QAAU,MAAG;GACb,OAAS,OAAI;GACb,eAAgB,OAAA;GAClB,cAAA,OAAA;;GAEA,UAAM,OAAe;GACnB,QAAM,OAAQ;GACZ,OAAG,OAAO;GACV,cAAO,OAAA;GACT,UAAA,OAAA;GACA,WAAM,OAAc;GAClB,YAAG,OAAa;GAChB,iBAAO,OAAA;GACT,QAAA,OAAA,UAAA;GACA,OAAM,OAAS;GACf,WAAO,OAAA;EACT;CACJ,CAAC;CAEO,OADA,EAAc,WAAQ;EAAA,OAAA;EAAa,OAAA;EAAA,QAAA,OAAA;CAAA,GAAA;EAAA,EAAA,WAAA,EAAA,OAAA,uBAAA,CAAA;EAAA,KAAA,eAAA,IAAA,KAAA,eAAA,CAAA,SAAA,EAAA,eAAA,GAAA;GAAA,MAAA,eAAA,IAAA,EAAA,IAAA;GAAA,QAAA,eAAA,IAAA,EAAA,MAAA;EAAA,CAAA,CAAA;EAAA,KAAA,sBAAA,uBAAA,EAAA,WAAA,MAAA,KAAA,mBAAA,UAAA,cAAA,EAAA,mBAAA,WAAA,SAAA,CAAA,CAAA,CAAA;EAAA,KAAA,eAAA,aAAA,CAAA,SAAA,EAAA,SAAA,aAAA,CAAA,CAAA;CAAA,CACnC;AACF;AAEA,IAAE,iBAEA"}
+{"version":3,"file":"draw-map.ce.js","names":[],"sources":["../../../src/components/scenes/draw-map.ce"],"sourcesContent":["<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>\n  <Container sound={backgroundAmbientSound} />\n\n  <Container>\n    @if (map() && sceneComponent()) {\n      <sceneComponent() data={map().data} params={map().params} />\n    }\n  </Container>\n\n  @for (child of children) {\n    <child />\n  }\n\n  @for (componentAnimation of componentAnimations) {\n    <Container>\n      @for (animation of componentAnimation.current) {\n        <componentAnimation.component ...animation />\n      }\n    </Container>\n  }\n\n  <Container sortableChildren={true}>\n    @for (projectile of projectiles() ; track projectile.props.id) {\n      <projectile.component ...projectile.props />\n    }\n  </Container>\n\n  @if (weatherProps()) {\n    <Weather ...weatherProps() />\n  }\n</Container>\n\n<script>\n    import { computed, effect } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { Weather } from '@canvasengine/presets'\n\n    const { children } = defineProps()\n    const engine = inject(RpgClientEngine);\n    const componentAnimations = engine.componentAnimations\n    const projectiles = engine.projectiles.current\n    const map = engine.sceneMap?.data\n    const sceneComponent = computed(() => map()?.component)\n    const mapParams = map()?.params\n    const weather = engine.sceneMap.weather\n    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }\n    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }\n\n    const shakeConfig = {\n      trigger: engine.mapShakeTrigger,\n      intensity: 10,\n      duration: 500,\n      frequency: 10,\n      direction: 'both'\n    }\n\n    const weatherProps = computed(() => {\n      const state = weather?.()\n      if (!state) {\n        return null\n      }\n      const validEffects = ['rain', 'snow', 'fog', 'cloud']\n      if (!validEffects.includes(state.effect)) {\n        return null\n      }\n      const params = state.params ?? {}\n      return {\n        effect: state.effect,\n        speed: params.speed,\n        windDirection: params.windDirection,\n        windStrength: params.windStrength,\n        density: params.density,\n        maxDrops: params.maxDrops,\n        height: params.height,\n        scale: params.scale,\n        sunIntensity: params.sunIntensity,\n        sunAngle: params.sunAngle,\n        raySpread: params.raySpread,\n        rayTwinkle: params.rayTwinkle,\n        rayTwinkleSpeed: params.rayTwinkleSpeed,\n        zIndex: params.zIndex ?? 1000,\n        alpha: params.alpha,\n        blendMode: params.blendMode,\n      }\n    })\n</script>\n"],"mappings":";;;;;AASM,SAAQ,UAAW,SAAE;CACf,SAAA,OAAA;sBACV,eAAA,OAAA,EAAA;CAEF,MAAM,SAAE,OAAA,eAAsB;CAC9B,MAAK,sBAAS,OAAA;CACd,MAAM,cAAM,OAAa,YAAA;CACzB,MAAM,MAAG,OAAA,UAAmB;CAC5B,MAAM,iBAAA,eAAA,IAAA,GAAA,SAAA;CACN,MAAM,YAAS,IAAA,GAAA;CACf,MAAE,UAAA,OAAA,SAAA;;;;;;CAEF,MAAG,yBAA4B;EAAA,KAAK,WAAA;EAAA,UAAA;EAAA,MAAA;CAAA;CACpC,MAAK,cAAe;EAChB,SAAG,OAAW;EACd,WAAA;EACA,UAAS;;EAEV,WAAI;CACP;CACA,MAAE,eAAA,eAAA;EACA,MAAA,QAAS,UAAA;cAEJ,OAAA;EAGH,IAAA,CAAA;GADsB;GAAQ;GAAK;GAAO;EACjC,EAAA,SAAkB,MAAM,MAAM,GACvC,OAAS;EAET,MAAM,SAAE,MAAa,UAAA,CAAW;EAChC,OAAM;GACN,QAAM,MAAA;GACN,OAAM,OAAY;GAClB,eAAmB,OAAA;GACnB,cAAM,OAAiB;GACvB,SAAM,OAAY;GAClB,UAAc,OAAE;GAChB,QAAM,OAAA;GACN,OAAM,OAAA;;GAEN,UAAM,OAAc;GAClB,WAAS,OAAO;GAChB,YAAa,OAAA;GACb,iBAAa,OAAA;GACb,QAAU,OAAG,UAAA;GACb,OAAS,OAAO;GAClB,WAAA,OAAA;;CAEJ,CAAC;CAEO,OADY,EAAA,WAAU;EAAA,OAAA;EAAA,OAAA;EAAA,QAAA,OAAA;CAAA,GAAA;EAAA,EAAA,WAAA,EAAA,OAAA,uBAAA,CAAA;EAAA,EAAA,WAAA,MAAA,KAAA,eAAA,IAAA,KAAA,eAAA,CAAA,SAAA,EAAA,eAAA,GAAA;GAAA,MAAA,eAAA,IAAA,EAAA,IAAA;GAAA,QAAA,eAAA,IAAA,EAAA,MAAA;EAAA,CAAA,CAAA,CAAA;EAAA,KAAA,WAAA,UAAA,EAAA,KAAA,CAAA;EAAA,KAAA,sBAAA,uBAAA,EAAA,WAAA,MAAA,KAAA,mBAAA,UAAA,cAAA,EAAA,mBAAA,WAAA,SAAA,CAAA,CAAA,CAAA;EAAA,EAAA,WAAA,EAAA,kBAAA,KAAA,GAAA,KAAA,eAAA,YAAA,CAAA,IAAA,eAAA,EAAA,WAAA,WAAA,WAAA,KAAA,GAAA,EAAA,QAAA,eAAA,WAAA,MAAA,GAAA,CAAA,CAAA;EAAA,KAAA,eAAA,aAAA,CAAA,SAAA,EAAA,SAAA,aAAA,CAAA,CAAA;CAAA,CACZ;AACZ;AAEA,IAAM,iBAAiB"}

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

@@ -1 +1 @@
-{"version":3,"file":"event-layer.ce.js","names":[],"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 { 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>\n"],"mappings":";;;;;;CASmB,SAAU,OAAA;CACrB,MAAM,cAAE,eAAA,OAAA;CACZ,MAAA,SAAA,OAAA,eAAA;CACJ,MAAE,EAAA,aAAS,YAAA;;CAEX,MAAC,SAAM,OAAA,SAAA;CAEH,OADgB,EAAE,WAAW,EAAC,kBAAY,KAAA,GAAA;EAAA,KAAA,SAAA,OAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;EAAA,CAAA,CAAA;EAAA,KAAA,UAAA,QAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;EAAA,CAAA,CAAA;EAAA,KAAA,WAAA,UAAA,EAAA,KAAA,CAAA;CAAA,CACjC;AACT;AAEF,IAAA,iBAEQ"}
+{"version":3,"file":"event-layer.ce.js","names":[],"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 { 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>\n"],"mappings":";;;;;;CASmB,SAAU,OAAA;CACrB,MAAM,cAAE,eAAA,OAAA;CACZ,MAAA,SAAA,OAAA,eAAA;CACJ,MAAE,EAAA,aAAS,YAAA;;CAEX,MAAC,SAAM,OAAA,SAAA;CAEH,OADgB,EAAE,WAAW,EAAC,kBAAY,KAAA,GAAA;EAAA,KAAA,SAAA,OAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;EAAA,CAAA,CAAA;EAAA,KAAA,UAAA,QAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;EAAA,CAAA,CAAA;EAAA,KAAA,WAAA,UAAA,EAAA,KAAA,CAAA;CAAA,CACjC;AACT;AAEF,IAAA,iBAAA"}

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export * from './services/save';
 export * from './core/setup';
 export * from './core/inject';
 export * from './services/loadMap';
+export * from './services/actionInput';
+export * from './services/pointerContext';
 export * from './module';
 export * from './Gui/Gui';
 export * from './components/gui';
@@ -24,5 +26,6 @@ export { Control } from './services/keyboardControls';
 export { RpgClientObject } from './Game/Object';
 export { RpgClientPlayer } from './Game/Player';
 export { RpgClientEvent } from './Game/Event';
+export * from './Game/ProjectileManager';
 export { withMobile } from './components/gui/mobile';
 export * from './services/AbstractSocket';

package/dist/index.js

@@ -1,24 +1,26 @@
 import { Context } from "./node_modules/.pnpm/@signe_di@3.0.1/node_modules/@signe/di/dist/index.js";
 import { clearInject, context, inject, setInject } from "./core/inject.js";
 import { AbstractWebsocket, WebSocketToken } from "./services/AbstractSocket.js";
+import { getKeyboardControlBind, isKeyboardActionConfig, normalizeActionInput, resolveKeyboardActionInput } from "./services/actionInput.js";
 import __ce_component$2 from "./components/gui/dialogbox/index.ce.js";
 import __ce_component from "./components/gui/box.ce.js";
-import __ce_component$15 from "./components/gui/shop/shop.ce.js";
+import __ce_component$16 from "./components/gui/shop/shop.ce.js";
 import { getEntityProp } from "./utils/getEntityProp.js";
 import __ce_component$8 from "./components/gui/hud/hud.ce.js";
 import { SaveClientService, SaveClientToken, provideSaveClient } from "./services/save.js";
 import __ce_component$14 from "./components/gui/save-load.ce.js";
 import __ce_component$9 from "./components/gui/menu/items-menu.ce.js";
-import __ce_component$16 from "./components/gui/menu/skills-menu.ce.js";
+import __ce_component$17 from "./components/gui/menu/skills-menu.ce.js";
 import __ce_component$3 from "./components/gui/menu/equip-menu.ce.js";
 import __ce_component$13 from "./components/gui/menu/options-menu.ce.js";
 import __ce_component$5 from "./components/gui/menu/exit-menu.ce.js";
 import __ce_component$11 from "./components/gui/menu/main-menu.ce.js";
 import __ce_component$12 from "./components/gui/notification/notification.ce.js";
-import __ce_component$17 from "./components/gui/title-screen.ce.js";
+import __ce_component$18 from "./components/gui/title-screen.ce.js";
 import __ce_component$6 from "./components/gui/gameover.ce.js";
 import "./components/gui/index.js";
 import { RpgGui } from "./Gui/Gui.js";
+import __ce_component$15 from "./components/scenes/draw-map.ce.js";
 import { LoadMapService, LoadMapToken, provideLoadMap } from "./services/loadMap.js";
 import { RpgSound, Sound, getSoundMetadata } from "./Sound.js";
 import { RpgResource } from "./Resource.js";
@@ -27,10 +29,12 @@ import { RpgClientPlayer } from "./Game/Player.js";
 import { RpgClientEvent } from "./Game/Event.js";
 import { GlobalConfigToken, provideClientGlobalConfig, provideClientModules, provideGlobalConfig } from "./module.js";
 import { PrebuiltComponentAnimations } from "./components/animations/index.js";
+import { ProjectileManager } from "./Game/ProjectileManager.js";
+import { createClientPointerContext } from "./services/pointerContext.js";
 import { RpgClientEngine } from "./RpgClientEngine.js";
 import { Control } from "./services/keyboardControls.js";
 import { provideRpg } from "./services/standalone.js";
-import { provideMmorpg } from "./services/mmorpg.js";
+import { BridgeWebsocket, provideMmorpg } from "./services/mmorpg.js";
 import { startGame } from "./core/setup.js";
 import __ce_component$7 from "./components/prebuilt/hp-bar.ce.js";
 import __ce_component$10 from "./components/prebuilt/light-halo.ce.js";
@@ -42,4 +46,4 @@ import "./components/index.js";
 import { Spritesheet } from "./decorators/spritesheet.js";
 import { withMobile } from "./components/gui/mobile/index.js";
 import { Input, KeyboardControls } from "canvasengine";
-export { AbstractWebsocket, __ce_component as BoxComponent, __ce_component$1 as CharacterComponent, Context, Control, __ce_component$2 as DialogboxComponent, __ce_component$3 as EquipMenuComponent, __ce_component$4 as EventLayerComponent, __ce_component$5 as ExitMenuComponent, __ce_component$6 as GameoverComponent, GlobalConfigToken, __ce_component$7 as HpBar, __ce_component$8 as HudComponent, Input, __ce_component$9 as ItemsMenuComponent, KeyboardControls, __ce_component$10 as LightHalo, LoadMapService, LoadMapToken, __ce_component$11 as MainMenuComponent, __ce_component$12 as NotificationComponent, __ce_component$13 as OptionsMenuComponent, PrebuiltComponentAnimations, Presets, RpgClientEngine, RpgClientEvent, RpgClientObject, RpgClientPlayer, RpgGui, RpgResource, RpgSound, SaveClientService, SaveClientToken, __ce_component$14 as SaveLoadComponent, __ce_component$15 as ShopComponent, __ce_component$16 as SkillsMenuComponent, Sound, Spritesheet, __ce_component$17 as TitleScreenComponent, WebSocketToken, clearInject, context, getEntityProp, getSoundMetadata, inject, provideClientGlobalConfig, provideClientModules, provideGlobalConfig, provideLoadMap, provideMmorpg, provideRpg, provideSaveClient, setInject, startGame, withMobile };
+export { AbstractWebsocket, __ce_component as BoxComponent, BridgeWebsocket, __ce_component$1 as CharacterComponent, Context, Control, __ce_component$2 as DialogboxComponent, __ce_component$3 as EquipMenuComponent, __ce_component$4 as EventLayerComponent, __ce_component$5 as ExitMenuComponent, __ce_component$6 as GameoverComponent, GlobalConfigToken, __ce_component$7 as HpBar, __ce_component$8 as HudComponent, Input, __ce_component$9 as ItemsMenuComponent, KeyboardControls, __ce_component$10 as LightHalo, LoadMapService, LoadMapToken, __ce_component$11 as MainMenuComponent, __ce_component$12 as NotificationComponent, __ce_component$13 as OptionsMenuComponent, PrebuiltComponentAnimations, Presets, ProjectileManager, RpgClientEngine, RpgClientEvent, RpgClientObject, RpgClientPlayer, RpgGui, RpgResource, RpgSound, SaveClientService, SaveClientToken, __ce_component$14 as SaveLoadComponent, __ce_component$15 as SceneMap, __ce_component$16 as ShopComponent, __ce_component$17 as SkillsMenuComponent, Sound, Spritesheet, __ce_component$18 as TitleScreenComponent, WebSocketToken, clearInject, context, createClientPointerContext, getEntityProp, getKeyboardControlBind, getSoundMetadata, inject, isKeyboardActionConfig, normalizeActionInput, provideClientGlobalConfig, provideClientModules, provideGlobalConfig, provideLoadMap, provideMmorpg, provideRpg, provideSaveClient, resolveKeyboardActionInput, setInject, startGame, withMobile };

package/dist/module.js

@@ -112,6 +112,17 @@ function provideClientModules(modules) {
 					});
 				} };
 			}
+			if (module.projectiles) {
+				const projectiles = { ...module.projectiles };
+				module.projectiles = {
+					...projectiles,
+					load: (engine) => {
+						if (projectiles.components) Object.entries(projectiles.components).forEach(([type, component]) => {
+							engine.registerProjectileComponent(type, component);
+						});
+					}
+				};
+			}
 			if (module.transitions) {
 				const transitions = [...module.transitions];
 				module.transitions = { load: (engine) => {

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","names":[],"sources":["../src/module.ts"],"sourcesContent":["import { findModules, provideModules } from \"@rpgjs/common\";\nimport { FactoryProvider } from \"@signe/di\";\nimport { RpgClientEngine } from \"./RpgClientEngine\";\nimport { RpgClient } from \"./RpgClient\";\nimport { inject } from \"@signe/di\";\nimport { RpgGui } from \"./Gui/Gui\";\nimport { getSoundMetadata } from \"./Sound\";\n\n/**\n * Type for client modules that can be either:\n * - An object implementing RpgClient interface\n * - A class decorated with @RpgModule decorator\n */\nexport type RpgClientModule = RpgClient | (new () => any);\n\n/**\n * Provides client modules configuration to Dependency Injection\n * \n * This function accepts an array of client modules that can be either:\n * - Objects implementing the RpgClient interface\n * - Classes decorated with the @RpgModule decorator (which will be instantiated)\n * \n * @param modules - Array of client modules (objects or classes)\n * @returns FactoryProvider configuration for DI\n * @example\n * ```ts\n * // Using an object\n * provideClientModules([\n *   {\n *     engine: {\n *       onConnected(engine) {\n *         console.log('Client connected')\n *       }\n *     }\n *   }\n * ])\n * \n * // Using a decorated class\n * @RpgModule<RpgClient>({\n *   engine: {\n *     onStart(engine) {\n *       console.log('Client started')\n *     }\n *   }\n * })\n * class MyClientModule {}\n * \n * provideClientModules([MyClientModule])\n * ```\n */\nexport function provideClientModules(modules: RpgClientModule[]): FactoryProvider {\n  return provideModules(modules, \"client\", (modules, context) => {\n    const mainModuleClient = findModules(context, 'Client')\n    modules = [...mainModuleClient, ...modules]\n    modules = modules.map((module) => {\n      // If module is a class (constructor function), instantiate it\n      // The RpgModule decorator adds properties to the prototype, which will be accessible via the instance\n      if (typeof module === 'function') {\n        const instance = new module() as any;\n        // Copy all enumerable properties (including from prototype) to a plain object\n        const moduleObj: any = {};\n        for (const key in instance) {\n          moduleObj[key] = instance[key];\n        }\n        module = moduleObj;\n      }\n      if ('client' in module) {\n        module = module.client as any;\n      }\n      if (module.spritesheets) {\n        const spritesheets = [...module.spritesheets];\n        module.spritesheets = {\n          load: (engine: RpgClientEngine) => {\n            spritesheets.forEach((spritesheet) => {\n              engine.addSpriteSheet(spritesheet);\n            });\n          },\n        };\n      }\n      if (module.spritesheetResolver) {\n        const resolver = module.spritesheetResolver;\n        module.spritesheetResolver = {\n          load: (engine: RpgClientEngine) => {\n            engine.setSpritesheetResolver(resolver);\n          },\n        };\n      }\n      if (module.sounds) {\n        const sounds = [...module.sounds];\n        module.sounds = {\n          load: (engine: RpgClientEngine) => {\n            sounds.forEach((sound) => {\n              // Check if it's a class decorated with @Sound\n              if (typeof sound === 'function' || (sound && sound.constructor && sound.constructor !== Object)) {\n                const metadata = getSoundMetadata(sound);\n                if (metadata) {\n                  // Handle single sound\n                  if (metadata.id && metadata.sound) {\n                    engine.addSound({\n                      id: metadata.id,\n                      src: metadata.sound,\n                      loop: metadata.loop,\n                      volume: metadata.volume,\n                    });\n                  }\n                  // Handle multiple sounds\n                  if (metadata.sounds) {\n                    Object.entries(metadata.sounds).forEach(([soundId, soundSrc]) => {\n                      engine.addSound({\n                        id: soundId,\n                        src: soundSrc,\n                        loop: metadata.loop,\n                        volume: metadata.volume,\n                      });\n                    });\n                  }\n                } else {\n                  // Not a decorated class, treat as regular sound object\n                  engine.addSound(sound);\n                }\n              } else {\n                // Regular sound object\n                engine.addSound(sound);\n              }\n            });\n          },\n        };\n      }\n      if (module.soundResolver) {\n        const resolver = module.soundResolver;\n        module.soundResolver = {\n          load: (engine: RpgClientEngine) => {\n            engine.setSoundResolver(resolver);\n          },\n        };\n      }\n      if (module.gui) {\n        const gui = [...module.gui];\n        module.gui = {\n          load: (engine: RpgClientEngine) => {\n            const guiService = inject(engine.context, RpgGui) as RpgGui;\n            gui.forEach((gui) => {\n              guiService.add(gui);\n            });\n          },\n        };\n      }\n      if (module.componentAnimations) {\n        const componentAnimations = [...module.componentAnimations];\n        module.componentAnimations = {\n          load: (engine: RpgClientEngine) => {\n            componentAnimations.forEach((componentAnimation) => {\n              engine.addComponentAnimation(componentAnimation);\n            });\n          },\n        };\n      }\n      if (module.transitions) {\n        const transitions = [...module.transitions];\n        module.transitions = {\n          load: (engine: RpgClientEngine) => {\n            const guiService = inject(engine.context, RpgGui) as RpgGui;\n            transitions.forEach((transition) => {\n              guiService.add({\n                name: transition.id,\n                component: transition.component,\n                data: transition.props || {}\n              });\n            });\n          },\n        };\n      }\n      if (module.particles) {\n        const particles = [...module.particles];\n        module.particles = {\n          load: (engine: RpgClientEngine) => {\n            particles.forEach((particle) => {\n              engine.addParticle(particle);\n            });\n          },\n        };\n      }\n      if (module.sprite) {\n        const sprite = {...module.sprite};\n        module.sprite = {\n          ...sprite,\n          load: (engine: RpgClientEngine) => {\n            if (sprite.componentsBehind) {\n              sprite.componentsBehind.forEach((component) => {\n                engine.addSpriteComponentBehind(component);\n              });\n            }\n            if (sprite.componentsInFront) {\n              sprite.componentsInFront.forEach((component) => {\n                engine.addSpriteComponentInFront(component);\n              });\n            }\n            if (sprite.components) {\n              Object.entries(sprite.components).forEach(([id, component]) => {\n                engine.registerSpriteComponent(id, component);\n              });\n            }\n          },\n        };\n      }\n      return module;\n    });\n    return modules\n  });\n}\n\nexport const GlobalConfigToken = \"GlobalConfigToken\";\n\nexport function provideGlobalConfig(config: any) {\n  return {\n    provide: GlobalConfigToken,\n    useValue: config ?? {},\n  };\n}\n\nexport function provideClientGlobalConfig(config: any = {}) {\n  if (!config.keyboardControls) {\n    config.keyboardControls = {\n      up: 'up',\n      down: 'down',\n      left: 'left',\n      right: 'right',\n      action: 'space',\n      escape: 'escape'\n    }\n  }\n  return provideGlobalConfig(config)\n}\n"],"mappings":"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"}
+{"version":3,"file":"module.js","names":[],"sources":["../src/module.ts"],"sourcesContent":["import { findModules, provideModules } from \"@rpgjs/common\";\nimport { FactoryProvider } from \"@signe/di\";\nimport { RpgClientEngine } from \"./RpgClientEngine\";\nimport { RpgClient } from \"./RpgClient\";\nimport { inject } from \"@signe/di\";\nimport { RpgGui } from \"./Gui/Gui\";\nimport { getSoundMetadata } from \"./Sound\";\n\n/**\n * Type for client modules that can be either:\n * - An object implementing RpgClient interface\n * - A class decorated with @RpgModule decorator\n */\nexport type RpgClientModule = RpgClient | (new () => any);\n\n/**\n * Provides client modules configuration to Dependency Injection\n * \n * This function accepts an array of client modules that can be either:\n * - Objects implementing the RpgClient interface\n * - Classes decorated with the @RpgModule decorator (which will be instantiated)\n * \n * @param modules - Array of client modules (objects or classes)\n * @returns FactoryProvider configuration for DI\n * @example\n * ```ts\n * // Using an object\n * provideClientModules([\n *   {\n *     engine: {\n *       onConnected(engine) {\n *         console.log('Client connected')\n *       }\n *     }\n *   }\n * ])\n * \n * // Using a decorated class\n * @RpgModule<RpgClient>({\n *   engine: {\n *     onStart(engine) {\n *       console.log('Client started')\n *     }\n *   }\n * })\n * class MyClientModule {}\n * \n * provideClientModules([MyClientModule])\n * ```\n */\nexport function provideClientModules(modules: RpgClientModule[]): FactoryProvider {\n  return provideModules(modules, \"client\", (modules, context) => {\n    const mainModuleClient = findModules(context, 'Client')\n    modules = [...mainModuleClient, ...modules]\n    modules = modules.map((module) => {\n      // If module is a class (constructor function), instantiate it\n      // The RpgModule decorator adds properties to the prototype, which will be accessible via the instance\n      if (typeof module === 'function') {\n        const instance = new module() as any;\n        // Copy all enumerable properties (including from prototype) to a plain object\n        const moduleObj: any = {};\n        for (const key in instance) {\n          moduleObj[key] = instance[key];\n        }\n        module = moduleObj;\n      }\n      if ('client' in module) {\n        module = module.client as any;\n      }\n      if (module.spritesheets) {\n        const spritesheets = [...module.spritesheets];\n        module.spritesheets = {\n          load: (engine: RpgClientEngine) => {\n            spritesheets.forEach((spritesheet) => {\n              engine.addSpriteSheet(spritesheet);\n            });\n          },\n        };\n      }\n      if (module.spritesheetResolver) {\n        const resolver = module.spritesheetResolver;\n        module.spritesheetResolver = {\n          load: (engine: RpgClientEngine) => {\n            engine.setSpritesheetResolver(resolver);\n          },\n        };\n      }\n      if (module.sounds) {\n        const sounds = [...module.sounds];\n        module.sounds = {\n          load: (engine: RpgClientEngine) => {\n            sounds.forEach((sound) => {\n              // Check if it's a class decorated with @Sound\n              if (typeof sound === 'function' || (sound && sound.constructor && sound.constructor !== Object)) {\n                const metadata = getSoundMetadata(sound);\n                if (metadata) {\n                  // Handle single sound\n                  if (metadata.id && metadata.sound) {\n                    engine.addSound({\n                      id: metadata.id,\n                      src: metadata.sound,\n                      loop: metadata.loop,\n                      volume: metadata.volume,\n                    });\n                  }\n                  // Handle multiple sounds\n                  if (metadata.sounds) {\n                    Object.entries(metadata.sounds).forEach(([soundId, soundSrc]) => {\n                      engine.addSound({\n                        id: soundId,\n                        src: soundSrc,\n                        loop: metadata.loop,\n                        volume: metadata.volume,\n                      });\n                    });\n                  }\n                } else {\n                  // Not a decorated class, treat as regular sound object\n                  engine.addSound(sound);\n                }\n              } else {\n                // Regular sound object\n                engine.addSound(sound);\n              }\n            });\n          },\n        };\n      }\n      if (module.soundResolver) {\n        const resolver = module.soundResolver;\n        module.soundResolver = {\n          load: (engine: RpgClientEngine) => {\n            engine.setSoundResolver(resolver);\n          },\n        };\n      }\n      if (module.gui) {\n        const gui = [...module.gui];\n        module.gui = {\n          load: (engine: RpgClientEngine) => {\n            const guiService = inject(engine.context, RpgGui) as RpgGui;\n            gui.forEach((gui) => {\n              guiService.add(gui);\n            });\n          },\n        };\n      }\n      if (module.componentAnimations) {\n        const componentAnimations = [...module.componentAnimations];\n        module.componentAnimations = {\n          load: (engine: RpgClientEngine) => {\n            componentAnimations.forEach((componentAnimation) => {\n              engine.addComponentAnimation(componentAnimation);\n            });\n          },\n        };\n      }\n      if (module.projectiles) {\n        const projectiles = { ...module.projectiles };\n        module.projectiles = {\n          ...projectiles,\n          load: (engine: RpgClientEngine) => {\n            if (projectiles.components) {\n              Object.entries(projectiles.components).forEach(([type, component]) => {\n                engine.registerProjectileComponent(type, component);\n              });\n            }\n          },\n        };\n      }\n      if (module.transitions) {\n        const transitions = [...module.transitions];\n        module.transitions = {\n          load: (engine: RpgClientEngine) => {\n            const guiService = inject(engine.context, RpgGui) as RpgGui;\n            transitions.forEach((transition) => {\n              guiService.add({\n                name: transition.id,\n                component: transition.component,\n                data: transition.props || {}\n              });\n            });\n          },\n        };\n      }\n      if (module.particles) {\n        const particles = [...module.particles];\n        module.particles = {\n          load: (engine: RpgClientEngine) => {\n            particles.forEach((particle) => {\n              engine.addParticle(particle);\n            });\n          },\n        };\n      }\n      if (module.sprite) {\n        const sprite = {...module.sprite};\n        module.sprite = {\n          ...sprite,\n          load: (engine: RpgClientEngine) => {\n            if (sprite.componentsBehind) {\n              sprite.componentsBehind.forEach((component) => {\n                engine.addSpriteComponentBehind(component);\n              });\n            }\n            if (sprite.componentsInFront) {\n              sprite.componentsInFront.forEach((component) => {\n                engine.addSpriteComponentInFront(component);\n              });\n            }\n            if (sprite.components) {\n              Object.entries(sprite.components).forEach(([id, component]) => {\n                engine.registerSpriteComponent(id, component);\n              });\n            }\n          },\n        };\n      }\n      return module;\n    });\n    return modules\n  });\n}\n\nexport const GlobalConfigToken = \"GlobalConfigToken\";\n\nexport function provideGlobalConfig(config: any) {\n  return {\n    provide: GlobalConfigToken,\n    useValue: config ?? {},\n  };\n}\n\nexport function provideClientGlobalConfig(config: any = {}) {\n  if (!config.keyboardControls) {\n    config.keyboardControls = {\n      up: 'up',\n      down: 'down',\n      left: 'left',\n      right: 'right',\n      action: 'space',\n      escape: 'escape'\n    }\n  }\n  return provideGlobalConfig(config)\n}\n"],"mappings":"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"}

package/dist/services/actionInput.d.ts

@@ -0,0 +1,12 @@
+import { RpgActionInput, RpgActionName } from '@rpgjs/common';
+export type KeyboardActionDataResolver<TClient = any, TSprite = any> = (client: TClient, sprite: TSprite) => any;
+export interface KeyboardActionConfig<TClient = any, TSprite = any> {
+    bind: any;
+    action?: RpgActionName;
+    data?: any | KeyboardActionDataResolver<TClient, TSprite>;
+}
+export declare function normalizeActionInput(action: RpgActionName, data?: any): RpgActionInput;
+export declare function normalizeActionInput(action: RpgActionInput): RpgActionInput;
+export declare function isKeyboardActionConfig(value: any): value is KeyboardActionConfig;
+export declare function getKeyboardControlBind(control: any): any;
+export declare function resolveKeyboardActionInput(control: any, client: any, sprite: any, defaultAction?: RpgActionName): RpgActionInput;

package/dist/services/actionInput.js

@@ -0,0 +1,27 @@
+//#region src/services/actionInput.ts
+function normalizeActionInput(action, data) {
+	if (typeof action === "object") return action;
+	return data === void 0 ? { action } : {
+		action,
+		data
+	};
+}
+function isKeyboardActionConfig(value) {
+	return value !== null && typeof value === "object" && Object.prototype.hasOwnProperty.call(value, "bind");
+}
+function getKeyboardControlBind(control) {
+	return isKeyboardActionConfig(control) ? control.bind : control;
+}
+function resolveKeyboardActionInput(control, client, sprite, defaultAction = "action") {
+	if (!isKeyboardActionConfig(control)) return { action: defaultAction };
+	const action = control.action ?? defaultAction;
+	const data = typeof control.data === "function" ? control.data(client, sprite) : control.data;
+	return data === void 0 ? { action } : {
+		action,
+		data
+	};
+}
+//#endregion
+export { getKeyboardControlBind, isKeyboardActionConfig, normalizeActionInput, resolveKeyboardActionInput };
+
+//# sourceMappingURL=actionInput.js.map

package/dist/services/actionInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actionInput.js","names":[],"sources":["../../src/services/actionInput.ts"],"sourcesContent":["import type { RpgActionInput, RpgActionName } from \"@rpgjs/common\";\n\nexport type KeyboardActionDataResolver<TClient = any, TSprite = any> = (\n  client: TClient,\n  sprite: TSprite,\n) => any;\n\nexport interface KeyboardActionConfig<TClient = any, TSprite = any> {\n  bind: any;\n  action?: RpgActionName;\n  data?: any | KeyboardActionDataResolver<TClient, TSprite>;\n}\n\nexport function normalizeActionInput(action: RpgActionName, data?: any): RpgActionInput;\nexport function normalizeActionInput(action: RpgActionInput): RpgActionInput;\nexport function normalizeActionInput(action: RpgActionName | RpgActionInput, data?: any): RpgActionInput {\n  if (typeof action === \"object\") {\n    return action;\n  }\n  return data === undefined\n    ? { action }\n    : { action, data };\n}\n\nexport function isKeyboardActionConfig(value: any): value is KeyboardActionConfig {\n  return value !== null\n    && typeof value === \"object\"\n    && Object.prototype.hasOwnProperty.call(value, \"bind\");\n}\n\nexport function getKeyboardControlBind(control: any): any {\n  return isKeyboardActionConfig(control) ? control.bind : control;\n}\n\nexport function resolveKeyboardActionInput(\n  control: any,\n  client: any,\n  sprite: any,\n  defaultAction: RpgActionName = \"action\",\n): RpgActionInput {\n  if (!isKeyboardActionConfig(control)) {\n    return { action: defaultAction };\n  }\n\n  const action = control.action ?? defaultAction;\n  const data = typeof control.data === \"function\"\n    ? control.data(client, sprite)\n    : control.data;\n\n  return data === undefined\n    ? { action }\n    : { action, data };\n}\n"],"mappings":";AAeA,SAAgB,qBAAqB,QAAwC,MAA4B;CACvG,IAAI,OAAO,WAAW,UACpB,OAAO;CAET,OAAO,SAAS,KAAA,IACZ,EAAE,OAAO,IACT;EAAE;EAAQ;CAAK;AACrB;AAEA,SAAgB,uBAAuB,OAA2C;CAChF,OAAO,UAAU,QACZ,OAAO,UAAU,YACjB,OAAO,UAAU,eAAe,KAAK,OAAO,MAAM;AACzD;AAEA,SAAgB,uBAAuB,SAAmB;CACxD,OAAO,uBAAuB,OAAO,IAAI,QAAQ,OAAO;AAC1D;AAEA,SAAgB,2BACd,SACA,QACA,QACA,gBAA+B,UACf;CAChB,IAAI,CAAC,uBAAuB,OAAO,GACjC,OAAO,EAAE,QAAQ,cAAc;CAGjC,MAAM,SAAS,QAAQ,UAAU;CACjC,MAAM,OAAO,OAAO,QAAQ,SAAS,aACjC,QAAQ,KAAK,QAAQ,MAAM,IAC3B,QAAQ;CAEZ,OAAO,SAAS,KAAA,IACZ,EAAE,OAAO,IACT;EAAE;EAAQ;CAAK;AACrB"}

package/dist/services/actionInput.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/services/mmorpg-connection.d.ts

@@ -0,0 +1,5 @@
+export declare function parseSocketMessage(data: any): any;
+export declare function isNativeSocketEvent(event: string): event is "error" | "open" | "close";
+export declare function waitForRpgjsConnected(conn: any, timeoutMs?: number, options?: {
+    ignoreCleanClose?: boolean;
+}): Promise<void>;

package/dist/services/mmorpg-connection.js

@@ -0,0 +1,50 @@
+//#region src/services/mmorpg-connection.ts
+function parseSocketMessage(data) {
+	if (typeof data !== "string") return data;
+	try {
+		return JSON.parse(data);
+	} catch {
+		return;
+	}
+}
+function isNativeSocketEvent(event) {
+	return event === "open" || event === "close" || event === "error";
+}
+function waitForRpgjsConnected(conn, timeoutMs = 1e4, options = {}) {
+	return new Promise((resolve, reject) => {
+		let timeoutId;
+		const cleanup = () => {
+			conn.removeEventListener("message", onMessage);
+			conn.removeEventListener("close", onClose);
+			conn.removeEventListener("error", onError);
+			if (timeoutId !== void 0) window.clearTimeout(timeoutId);
+		};
+		const rejectWith = (error) => {
+			cleanup();
+			reject(error);
+		};
+		const onMessage = (event) => {
+			if (parseSocketMessage(event.data)?.type !== "connected") return;
+			cleanup();
+			resolve();
+		};
+		const onClose = (event) => {
+			const rawReason = event.reason;
+			if (options.ignoreCleanClose && (event.code === 1e3 || rawReason instanceof Event || typeof rawReason !== "string")) return;
+			rejectWith(new Error(typeof rawReason === "string" && rawReason ? rawReason : "WebSocket closed before RPGJS connection was accepted"));
+		};
+		const onError = (event) => {
+			rejectWith(new Error(event.message || "WebSocket connection failed"));
+		};
+		conn.addEventListener("message", onMessage);
+		conn.addEventListener("close", onClose);
+		conn.addEventListener("error", onError);
+		timeoutId = window.setTimeout(() => {
+			rejectWith(/* @__PURE__ */ new Error("RPGJS connection timeout"));
+		}, timeoutMs);
+	});
+}
+//#endregion
+export { isNativeSocketEvent, waitForRpgjsConnected };
+
+//# sourceMappingURL=mmorpg-connection.js.map

package/dist/services/mmorpg-connection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mmorpg-connection.js","names":[],"sources":["../../src/services/mmorpg-connection.ts"],"sourcesContent":["export function parseSocketMessage(data: any) {\n  if (typeof data !== \"string\") {\n    return data;\n  }\n  try {\n    return JSON.parse(data);\n  }\n  catch {\n    return undefined;\n  }\n}\n\nexport function isNativeSocketEvent(event: string) {\n  return event === \"open\" || event === \"close\" || event === \"error\";\n}\n\nexport function waitForRpgjsConnected(\n  conn: any,\n  timeoutMs = 10000,\n  options: { ignoreCleanClose?: boolean } = {},\n): Promise<void> {\n  return new Promise((resolve, reject) => {\n    let timeoutId: number | undefined;\n\n    const cleanup = () => {\n      conn.removeEventListener(\"message\", onMessage);\n      conn.removeEventListener(\"close\", onClose);\n      conn.removeEventListener(\"error\", onError);\n      if (timeoutId !== undefined) {\n        window.clearTimeout(timeoutId);\n      }\n    };\n    const rejectWith = (error: Error) => {\n      cleanup();\n      reject(error);\n    };\n    const onMessage = (event: MessageEvent) => {\n      const data = parseSocketMessage(event.data);\n      if (data?.type !== \"connected\") {\n        return;\n      }\n      cleanup();\n      resolve();\n    };\n    const onClose = (event: CloseEvent) => {\n      const rawReason: unknown = (event as any).reason;\n      if (\n        options.ignoreCleanClose\n        && (event.code === 1000 || rawReason instanceof Event || typeof rawReason !== \"string\")\n      ) {\n        return;\n      }\n      const reason = typeof rawReason === \"string\" && rawReason\n        ? rawReason\n        : \"WebSocket closed before RPGJS connection was accepted\";\n      rejectWith(new Error(reason));\n    };\n    const onError = (event: ErrorEvent) => {\n      rejectWith(new Error(event.message || \"WebSocket connection failed\"));\n    };\n\n    conn.addEventListener(\"message\", onMessage);\n    conn.addEventListener(\"close\", onClose);\n    conn.addEventListener(\"error\", onError);\n    timeoutId = window.setTimeout(() => {\n      rejectWith(new Error(\"RPGJS connection timeout\"));\n    }, timeoutMs);\n  });\n}\n"],"mappings":";AAAA,SAAgB,mBAAmB,MAAW;CAC5C,IAAI,OAAO,SAAS,UAClB,OAAO;CAET,IAAI;EACF,OAAO,KAAK,MAAM,IAAI;CACxB,QACM;EACJ;CACF;AACF;AAEA,SAAgB,oBAAoB,OAAe;CACjD,OAAO,UAAU,UAAU,UAAU,WAAW,UAAU;AAC5D;AAEA,SAAgB,sBACd,MACA,YAAY,KACZ,UAA0C,CAAC,GAC5B;CACf,OAAO,IAAI,SAAS,SAAS,WAAW;EACtC,IAAI;EAEJ,MAAM,gBAAgB;GACpB,KAAK,oBAAoB,WAAW,SAAS;GAC7C,KAAK,oBAAoB,SAAS,OAAO;GACzC,KAAK,oBAAoB,SAAS,OAAO;GACzC,IAAI,cAAc,KAAA,GAChB,OAAO,aAAa,SAAS;EAEjC;EACA,MAAM,cAAc,UAAiB;GACnC,QAAQ;GACR,OAAO,KAAK;EACd;EACA,MAAM,aAAa,UAAwB;GAEzC,IADa,mBAAmB,MAAM,IAClC,GAAM,SAAS,aACjB;GAEF,QAAQ;GACR,QAAQ;EACV;EACA,MAAM,WAAW,UAAsB;GACrC,MAAM,YAAsB,MAAc;GAC1C,IACE,QAAQ,qBACJ,MAAM,SAAS,OAAQ,qBAAqB,SAAS,OAAO,cAAc,WAE9E;GAKF,WAAW,IAAI,MAHA,OAAO,cAAc,YAAY,YAC5C,YACA,uDACuB,CAAC;EAC9B;EACA,MAAM,WAAW,UAAsB;GACrC,WAAW,IAAI,MAAM,MAAM,WAAW,6BAA6B,CAAC;EACtE;EAEA,KAAK,iBAAiB,WAAW,SAAS;EAC1C,KAAK,iBAAiB,SAAS,OAAO;EACtC,KAAK,iBAAiB,SAAS,OAAO;EACtC,YAAY,OAAO,iBAAiB;GAClC,2BAAW,IAAI,MAAM,0BAA0B,CAAC;EAClD,GAAG,SAAS;CACd,CAAC;AACH"}

package/dist/services/mmorpg-connection.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/services/mmorpg.d.ts

@@ -1,28 +1,34 @@
 import { Context } from '@signe/di';
 import { RpgGui } from '../Gui/Gui';
 import { RpgClientEngine } from '../RpgClientEngine';
-import { AbstractWebsocket, SocketUpdateProperties } from './AbstractSocket';
+import { AbstractWebsocket, SocketQuery, SocketUpdateProperties } from './AbstractSocket';
 import { UpdateMapService } from '@rpgjs/common';
-interface MmorpgOptions {
+export interface MmorpgOptions {
     host?: string;
     connectionId?: string;
     connectionIdScope?: "local" | "session" | "ephemeral";
+    query?: SocketQuery | (() => SocketQuery | undefined);
+    socketOptions?: Record<string, any>;
 }
-declare class BridgeWebsocket extends AbstractWebsocket {
+export declare class BridgeWebsocket extends AbstractWebsocket {
     protected context: Context;
     private options;
     private socket;
     private privateId;
     private pendingOn;
+    private acceptedOpenListeners;
     private targetRoom;
     constructor(context: Context, options?: MmorpgOptions);
     private resolveConnectionId;
+    private resolveQuery;
     connection(listeners?: (data: any) => void): Promise<void>;
     on(key: string, callback: (data: any) => void): void;
     off(event: string, callback: (data: any) => void): void;
     emit(event: string, data: any): void;
+    private attachEvent;
+    private emitAcceptedOpen;
     updateProperties({ room, host, query }: SocketUpdateProperties): void;
-    private waitForNextOpen;
+    private isNativeSocketEvent;
     reconnect(_listeners?: (data: any) => void): Promise<void>;
     getCurrentRoom(): string;
 }