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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/LICENSE +19 -0
  3. package/dist/Game/AnimationManager.d.ts +1 -1
  4. package/dist/Game/AnimationManager.js +18 -9
  5. package/dist/Game/AnimationManager.js.map +1 -1
  6. package/dist/Game/AnimationManager.spec.d.ts +1 -0
  7. package/dist/Game/Event.js.map +1 -1
  8. package/dist/Game/Map.d.ts +9 -1
  9. package/dist/Game/Map.js +63 -5
  10. package/dist/Game/Map.js.map +1 -1
  11. package/dist/Game/Object.d.ts +47 -15
  12. package/dist/Game/Object.js +82 -38
  13. package/dist/Game/Object.js.map +1 -1
  14. package/dist/Game/Player.js.map +1 -1
  15. package/dist/Gui/Gui.d.ts +17 -4
  16. package/dist/Gui/Gui.js +78 -48
  17. package/dist/Gui/Gui.js.map +1 -1
  18. package/dist/Gui/Gui.spec.d.ts +1 -0
  19. package/dist/Gui/NotificationManager.js.map +1 -1
  20. package/dist/Resource.js +1 -1
  21. package/dist/Resource.js.map +1 -1
  22. package/dist/RpgClient.d.ts +57 -2
  23. package/dist/RpgClientEngine.d.ts +61 -6
  24. package/dist/RpgClientEngine.js +122 -14
  25. package/dist/RpgClientEngine.js.map +1 -1
  26. package/dist/Sound.js.map +1 -1
  27. package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.130.0}/helpers/decorate.js +1 -1
  28. package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.130.0}/helpers/decorateMetadata.js +1 -1
  29. package/dist/components/animations/animation.ce.js +4 -5
  30. package/dist/components/animations/animation.ce.js.map +1 -1
  31. package/dist/components/animations/hit.ce.js +19 -25
  32. package/dist/components/animations/hit.ce.js.map +1 -1
  33. package/dist/components/animations/index.js +4 -4
  34. package/dist/components/animations/index.js.map +1 -1
  35. package/dist/components/character.ce.js +406 -226
  36. package/dist/components/character.ce.js.map +1 -1
  37. package/dist/components/dynamics/bar.ce.js +96 -0
  38. package/dist/components/dynamics/bar.ce.js.map +1 -0
  39. package/dist/components/dynamics/image.ce.js +23 -0
  40. package/dist/components/dynamics/image.ce.js.map +1 -0
  41. package/dist/components/dynamics/parse-value.d.ts +3 -0
  42. package/dist/components/dynamics/parse-value.js +54 -35
  43. package/dist/components/dynamics/parse-value.js.map +1 -1
  44. package/dist/components/dynamics/parse-value.spec.d.ts +1 -0
  45. package/dist/components/dynamics/shape-utils.d.ts +16 -0
  46. package/dist/components/dynamics/shape-utils.js +73 -0
  47. package/dist/components/dynamics/shape-utils.js.map +1 -0
  48. package/dist/components/dynamics/shape-utils.spec.d.ts +1 -0
  49. package/dist/components/dynamics/shape.ce.js +83 -0
  50. package/dist/components/dynamics/shape.ce.js.map +1 -0
  51. package/dist/components/dynamics/text.ce.js +33 -56
  52. package/dist/components/dynamics/text.ce.js.map +1 -1
  53. package/dist/components/gui/box.ce.js +6 -8
  54. package/dist/components/gui/box.ce.js.map +1 -1
  55. package/dist/components/gui/dialogbox/index.ce.js +53 -60
  56. package/dist/components/gui/dialogbox/index.ce.js.map +1 -1
  57. package/dist/components/gui/gameover.ce.js +39 -63
  58. package/dist/components/gui/gameover.ce.js.map +1 -1
  59. package/dist/components/gui/hud/hud.ce.js +21 -30
  60. package/dist/components/gui/hud/hud.ce.js.map +1 -1
  61. package/dist/components/gui/menu/equip-menu.ce.js +110 -164
  62. package/dist/components/gui/menu/equip-menu.ce.js.map +1 -1
  63. package/dist/components/gui/menu/exit-menu.ce.js +6 -5
  64. package/dist/components/gui/menu/exit-menu.ce.js.map +1 -1
  65. package/dist/components/gui/menu/items-menu.ce.js +49 -67
  66. package/dist/components/gui/menu/items-menu.ce.js.map +1 -1
  67. package/dist/components/gui/menu/main-menu.ce.js +72 -90
  68. package/dist/components/gui/menu/main-menu.ce.js.map +1 -1
  69. package/dist/components/gui/menu/options-menu.ce.js +5 -4
  70. package/dist/components/gui/menu/options-menu.ce.js.map +1 -1
  71. package/dist/components/gui/menu/skills-menu.ce.js +12 -17
  72. package/dist/components/gui/menu/skills-menu.ce.js.map +1 -1
  73. package/dist/components/gui/mobile/index.js +2 -2
  74. package/dist/components/gui/mobile/index.js.map +1 -1
  75. package/dist/components/gui/mobile/mobile.ce.js +5 -4
  76. package/dist/components/gui/mobile/mobile.ce.js.map +1 -1
  77. package/dist/components/gui/notification/notification.ce.js +22 -24
  78. package/dist/components/gui/notification/notification.ce.js.map +1 -1
  79. package/dist/components/gui/save-load.ce.js +70 -248
  80. package/dist/components/gui/save-load.ce.js.map +1 -1
  81. package/dist/components/gui/shop/shop.ce.js +87 -125
  82. package/dist/components/gui/shop/shop.ce.js.map +1 -1
  83. package/dist/components/gui/title-screen.ce.js +42 -68
  84. package/dist/components/gui/title-screen.ce.js.map +1 -1
  85. package/dist/components/player-components-utils.d.ts +67 -0
  86. package/dist/components/player-components-utils.js +162 -0
  87. package/dist/components/player-components-utils.js.map +1 -0
  88. package/dist/components/player-components-utils.spec.d.ts +1 -0
  89. package/dist/components/player-components.ce.js +188 -0
  90. package/dist/components/player-components.ce.js.map +1 -0
  91. package/dist/components/prebuilt/hp-bar.ce.js +41 -44
  92. package/dist/components/prebuilt/hp-bar.ce.js.map +1 -1
  93. package/dist/components/prebuilt/light-halo.ce.js +35 -59
  94. package/dist/components/prebuilt/light-halo.ce.js.map +1 -1
  95. package/dist/components/scenes/canvas.ce.js +157 -21
  96. package/dist/components/scenes/canvas.ce.js.map +1 -1
  97. package/dist/components/scenes/draw-map.ce.js +19 -29
  98. package/dist/components/scenes/draw-map.ce.js.map +1 -1
  99. package/dist/components/scenes/event-layer.ce.js +9 -8
  100. package/dist/components/scenes/event-layer.ce.js.map +1 -1
  101. package/dist/core/inject.js +1 -1
  102. package/dist/core/inject.js.map +1 -1
  103. package/dist/core/setup.js +1 -1
  104. package/dist/core/setup.js.map +1 -1
  105. package/dist/decorators/spritesheet.d.ts +1 -0
  106. package/dist/decorators/spritesheet.js +11 -0
  107. package/dist/decorators/spritesheet.js.map +1 -0
  108. package/dist/index.d.ts +1 -0
  109. package/dist/index.js +21 -20
  110. package/dist/module.js +4 -1
  111. package/dist/module.js.map +1 -1
  112. package/dist/node_modules/.pnpm/{@signe_di@2.9.0 → @signe_di@3.0.1}/node_modules/@signe/di/dist/index.js +7 -117
  113. package/dist/node_modules/.pnpm/@signe_di@3.0.1/node_modules/@signe/di/dist/index.js.map +1 -0
  114. package/dist/node_modules/.pnpm/@signe_reactive@3.0.1/node_modules/@signe/reactive/dist/index.js +239 -0
  115. package/dist/node_modules/.pnpm/@signe_reactive@3.0.1/node_modules/@signe/reactive/dist/index.js.map +1 -0
  116. package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/chunk-EUXUH3YW.js +13 -0
  117. package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/chunk-EUXUH3YW.js.map +1 -0
  118. package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/index.js +696 -0
  119. package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/index.js.map +1 -0
  120. package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/client/index.js +44 -0
  121. package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/client/index.js.map +1 -0
  122. package/dist/node_modules/.pnpm/{@signe_sync@2.9.0 → @signe_sync@3.0.1}/node_modules/@signe/sync/dist/index.js +57 -141
  123. package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/index.js.map +1 -0
  124. package/dist/node_modules/.pnpm/partysocket@1.1.3/node_modules/partysocket/dist/chunk-HAC622V3.js.map +1 -1
  125. package/dist/node_modules/.pnpm/partysocket@1.1.3/node_modules/partysocket/dist/chunk-S74YV6PU.js.map +1 -1
  126. package/dist/node_modules/.pnpm/zod@3.24.2/node_modules/zod/lib/index.js +27 -27
  127. package/dist/node_modules/.pnpm/zod@3.24.2/node_modules/zod/lib/index.js.map +1 -1
  128. package/dist/presets/animation.js.map +1 -1
  129. package/dist/presets/faceset.js.map +1 -1
  130. package/dist/presets/icon.js.map +1 -1
  131. package/dist/presets/index.js.map +1 -1
  132. package/dist/presets/lpc.js.map +1 -1
  133. package/dist/presets/rmspritesheet.js.map +1 -1
  134. package/dist/services/AbstractSocket.js.map +1 -1
  135. package/dist/services/keyboardControls.js.map +1 -1
  136. package/dist/services/loadMap.d.ts +6 -0
  137. package/dist/services/loadMap.js +1 -1
  138. package/dist/services/loadMap.js.map +1 -1
  139. package/dist/services/mmorpg.js +9 -4
  140. package/dist/services/mmorpg.js.map +1 -1
  141. package/dist/services/save.js.map +1 -1
  142. package/dist/services/save.spec.d.ts +1 -0
  143. package/dist/services/standalone.js +1 -1
  144. package/dist/services/standalone.js.map +1 -1
  145. package/dist/utils/getEntityProp.js +4 -3
  146. package/dist/utils/getEntityProp.js.map +1 -1
  147. package/dist/utils/getEntityProp.spec.d.ts +1 -0
  148. package/dist/utils/readPropValue.d.ts +2 -0
  149. package/dist/utils/readPropValue.js +13 -0
  150. package/dist/utils/readPropValue.js.map +1 -0
  151. package/package.json +13 -14
  152. package/src/Game/AnimationManager.spec.ts +30 -0
  153. package/src/Game/AnimationManager.ts +22 -10
  154. package/src/Game/Map.ts +91 -2
  155. package/src/Game/Object.ts +148 -69
  156. package/src/Gui/Gui.spec.ts +273 -0
  157. package/src/Gui/Gui.ts +105 -50
  158. package/src/Resource.ts +1 -2
  159. package/src/RpgClient.ts +63 -2
  160. package/src/RpgClientEngine.ts +173 -25
  161. package/src/components/character.ce +422 -15
  162. package/src/components/dynamics/bar.ce +87 -0
  163. package/src/components/dynamics/image.ce +20 -0
  164. package/src/components/dynamics/parse-value.spec.ts +83 -0
  165. package/src/components/dynamics/parse-value.ts +111 -37
  166. package/src/components/dynamics/shape-utils.spec.ts +46 -0
  167. package/src/components/dynamics/shape-utils.ts +61 -0
  168. package/src/components/dynamics/shape.ce +89 -0
  169. package/src/components/dynamics/text.ce +34 -149
  170. package/src/components/gui/dialogbox/index.ce +15 -6
  171. package/src/components/player-components-utils.spec.ts +109 -0
  172. package/src/components/player-components-utils.ts +205 -0
  173. package/src/components/player-components.ce +221 -0
  174. package/src/components/scenes/canvas.ce +165 -6
  175. package/src/components/scenes/draw-map.ce +2 -15
  176. package/src/components/scenes/event-layer.ce +1 -2
  177. package/src/core/setup.ts +2 -2
  178. package/src/decorators/spritesheet.ts +8 -0
  179. package/src/index.ts +1 -0
  180. package/src/module.ts +5 -1
  181. package/src/services/loadMap.ts +2 -0
  182. package/src/services/mmorpg.ts +8 -2
  183. package/src/services/save.spec.ts +127 -0
  184. package/src/utils/getEntityProp.spec.ts +96 -0
  185. package/src/utils/getEntityProp.ts +4 -3
  186. package/src/utils/readPropValue.ts +16 -0
  187. package/dist/node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js.map +0 -1
  188. package/dist/node_modules/.pnpm/@signe_reactive@2.8.3/node_modules/@signe/reactive/dist/index.js +0 -457
  189. package/dist/node_modules/.pnpm/@signe_reactive@2.8.3/node_modules/@signe/reactive/dist/index.js.map +0 -1
  190. package/dist/node_modules/.pnpm/@signe_reactive@2.9.0/node_modules/@signe/reactive/dist/index.js +0 -463
  191. package/dist/node_modules/.pnpm/@signe_reactive@2.9.0/node_modules/@signe/reactive/dist/index.js.map +0 -1
  192. package/dist/node_modules/.pnpm/@signe_room@2.9.0/node_modules/@signe/room/dist/index.js +0 -2191
  193. package/dist/node_modules/.pnpm/@signe_room@2.9.0/node_modules/@signe/room/dist/index.js.map +0 -1
  194. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/chunk-7QVYU63E.js +0 -10
  195. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/chunk-7QVYU63E.js.map +0 -1
  196. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/client/index.js +0 -91
  197. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/client/index.js.map +0 -1
  198. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/index.js.map +0 -1
  199. package/dist/node_modules/.pnpm/dset@3.1.4/node_modules/dset/dist/index.js +0 -14
  200. package/dist/node_modules/.pnpm/dset@3.1.4/node_modules/dset/dist/index.js.map +0 -1
@@ -0,0 +1,83 @@
1
+ import { resolveDynamicValue } from "./parse-value.js";
2
+ import { getShapeBox, translatePolygonPoints } from "./shape-utils.js";
3
+ import { Container, Graphics, computed, h, useDefineProps, useProps } from "canvasengine";
4
+ //#region src/components/dynamics/shape.ce
5
+ function component($$props) {
6
+ useProps($$props);
7
+ const props = useDefineProps($$props)();
8
+ const { object } = props;
9
+ const read = (prop, fallback) => prop ? prop() : fallback;
10
+ const toNumber = (value, fallback = 0) => {
11
+ const resolved = resolveDynamicValue(value, object);
12
+ const num = typeof resolved === "number" ? resolved : parseFloat(resolved);
13
+ return Number.isFinite(num) ? num : fallback;
14
+ };
15
+ const toColor = (value, fallback) => {
16
+ const resolved = resolveDynamicValue(value, object);
17
+ if (typeof resolved === "number") return resolved;
18
+ if (typeof resolved === "string" && resolved.startsWith("#")) return parseInt(resolved.slice(1), 16);
19
+ return resolved ?? fallback;
20
+ };
21
+ const config = computed(() => ({
22
+ type: read(props.type, "rectangle"),
23
+ fill: toColor(read(props.fill, "#ffffff"), 16777215),
24
+ radius: toNumber(read(props.radius, 8), 8),
25
+ width: toNumber(read(props.width, 16), 16),
26
+ height: toNumber(read(props.height, 16), 16),
27
+ x1: toNumber(read(props.x1, 0), 0),
28
+ y1: toNumber(read(props.y1, 0), 0),
29
+ x2: toNumber(read(props.x2, 16), 16),
30
+ y2: toNumber(read(props.y2, 0), 0),
31
+ opacity: Math.max(0, Math.min(1, toNumber(read(props.opacity, 1), 1))),
32
+ points: read(props.points, []),
33
+ line: read(props.line, null)
34
+ }));
35
+ const shapeBox = computed(() => getShapeBox(config(), toNumber));
36
+ const shapeWidth = computed(() => shapeBox().width);
37
+ const shapeHeight = computed(() => shapeBox().height);
38
+ const drawShape = (g) => {
39
+ const cfg = config();
40
+ const box = shapeBox();
41
+ if (cfg.type === "circle") g.circle(cfg.radius, cfg.radius, cfg.radius);
42
+ else if (cfg.type === "ellipse") g.ellipse(box.width / 2, box.height / 2, box.width / 2, box.height / 2);
43
+ else if (cfg.type === "line") {
44
+ g.moveTo(cfg.x1 + box.offsetX, cfg.y1 + box.offsetY);
45
+ g.lineTo(cfg.x2 + box.offsetX, cfg.y2 + box.offsetY);
46
+ } else if (cfg.type === "polygon" && Array.isArray(cfg.points)) g.poly(translatePolygonPoints(cfg.points, box, toNumber));
47
+ else if (cfg.type === "rounded-rectangle") g.roundRect(0, 0, box.width, box.height, toNumber(read(props.radius, 4), 4));
48
+ else g.rect(0, 0, box.width, box.height);
49
+ if (cfg.type === "line") {
50
+ const line = cfg.line ?? {};
51
+ g.stroke({
52
+ color: toColor(line.color, cfg.fill),
53
+ width: toNumber(line.width, 1),
54
+ alpha: toNumber(line.alpha, cfg.opacity)
55
+ });
56
+ return;
57
+ }
58
+ g.fill({
59
+ color: cfg.fill,
60
+ alpha: cfg.opacity
61
+ });
62
+ if (cfg.line) g.stroke({
63
+ color: toColor(cfg.line.color, cfg.fill),
64
+ width: toNumber(cfg.line.width, 1),
65
+ alpha: toNumber(cfg.line.alpha, cfg.opacity)
66
+ });
67
+ };
68
+ return h(Container, {
69
+ width: shapeWidth,
70
+ height: shapeHeight,
71
+ minWidth: shapeWidth,
72
+ minHeight: shapeHeight
73
+ }, h(Graphics, {
74
+ width: shapeWidth,
75
+ height: shapeHeight,
76
+ draw: drawShape
77
+ }));
78
+ }
79
+ var __ce_component = component;
80
+ //#endregion
81
+ export { __ce_component as default };
82
+
83
+ //# sourceMappingURL=shape.ce.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"shape.ce.js","names":[],"sources":["../../../src/components/dynamics/shape.ce"],"sourcesContent":["<Container width={shapeWidth} height={shapeHeight} minWidth={shapeWidth} minHeight={shapeHeight}>\n <Graphics width={shapeWidth} height={shapeHeight} draw={drawShape} />\n</Container>\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { resolveDynamicValue } from \"./parse-value\";\nimport { getShapeBox, translatePolygonPoints } from \"./shape-utils\";\n\nconst props = defineProps();\nconst { object } = props;\n\nconst read = (prop, fallback) => prop ? prop() : fallback;\n\nconst toNumber = (value, fallback = 0) => {\n const resolved = resolveDynamicValue(value, object);\n const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);\n return Number.isFinite(num) ? num : fallback;\n};\n\nconst toColor = (value, fallback) => {\n const resolved = resolveDynamicValue(value, object);\n if (typeof resolved === 'number') return resolved;\n if (typeof resolved === 'string' && resolved.startsWith('#')) {\n return parseInt(resolved.slice(1), 16);\n }\n return resolved ?? fallback;\n};\n\nconst config = computed(() => ({\n type: read(props.type, 'rectangle'),\n fill: toColor(read(props.fill, '#ffffff'), 0xffffff),\n radius: toNumber(read(props.radius, 8), 8),\n width: toNumber(read(props.width, 16), 16),\n height: toNumber(read(props.height, 16), 16),\n x1: toNumber(read(props.x1, 0), 0),\n y1: toNumber(read(props.y1, 0), 0),\n x2: toNumber(read(props.x2, 16), 16),\n y2: toNumber(read(props.y2, 0), 0),\n opacity: Math.max(0, Math.min(1, toNumber(read(props.opacity, 1), 1))),\n points: read(props.points, []),\n line: read(props.line, null)\n}));\n\nconst shapeBox = computed(() => getShapeBox(config(), toNumber));\n\nconst shapeWidth = computed(() => shapeBox().width);\nconst shapeHeight = computed(() => shapeBox().height);\n\nconst drawShape = (g) => {\n const cfg = config();\n const box = shapeBox();\n\n if (cfg.type === 'circle') {\n g.circle(cfg.radius, cfg.radius, cfg.radius);\n } else if (cfg.type === 'ellipse') {\n g.ellipse(box.width / 2, box.height / 2, box.width / 2, box.height / 2);\n } else if (cfg.type === 'line') {\n g.moveTo(cfg.x1 + box.offsetX, cfg.y1 + box.offsetY);\n g.lineTo(cfg.x2 + box.offsetX, cfg.y2 + box.offsetY);\n } else if (cfg.type === 'polygon' && Array.isArray(cfg.points)) {\n g.poly(translatePolygonPoints(cfg.points, box, toNumber));\n } else if (cfg.type === 'rounded-rectangle') {\n g.roundRect(0, 0, box.width, box.height, toNumber(read(props.radius, 4), 4));\n } else {\n g.rect(0, 0, box.width, box.height);\n }\n\n if (cfg.type === 'line') {\n const line = cfg.line ?? {};\n g.stroke({\n color: toColor(line.color, cfg.fill),\n width: toNumber(line.width, 1),\n alpha: toNumber(line.alpha, cfg.opacity)\n });\n return;\n }\n\n g.fill({ color: cfg.fill, alpha: cfg.opacity });\n\n if (cfg.line) {\n g.stroke({\n color: toColor(cfg.line.color, cfg.fill),\n width: toNumber(cfg.line.width, 1),\n alpha: toNumber(cfg.line.alpha, cfg.opacity)\n });\n }\n};\n</script>\n"],"mappings":"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"}
@@ -1,73 +1,50 @@
1
- import { parseDynamicValue } from "./parse-value.js";
1
+ import { resolveDynamicValue } from "./parse-value.js";
2
2
  import { Text, computed, h, useDefineProps, useProps } from "canvasengine";
3
3
  //#region src/components/dynamics/text.ce
4
4
  function component($$props) {
5
5
  useProps($$props);
6
- const defineProps = useDefineProps($$props);
7
- var __assign = this && this.__assign || function() {
8
- __assign = Object.assign || function(t) {
9
- for (var s, i = 1, n = arguments.length; i < n; i++) {
10
- s = arguments[i];
11
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var object = defineProps().object;
18
- var component = object._component;
19
- var parseNumericStyleValue = function(value, object) {
20
- if (value === void 0 || value === null) return;
6
+ const { object, value, style } = useDefineProps($$props)();
7
+ const read = (prop, fallback) => prop ? prop() : fallback;
8
+ const parseNumericStyleValue = (value, object) => {
9
+ value = resolveDynamicValue(value, object);
10
+ if (value === void 0 || value === null) return void 0;
21
11
  if (typeof value === "number") return value;
22
- if (typeof value === "string") if (value.includes("{")) {
23
- var parsed_1 = parseDynamicValue(value, object);
24
- return computed(function() {
25
- var str = parsed_1();
26
- var num = parseFloat(str);
27
- return isNaN(num) ? 0 : num;
28
- });
29
- } else {
30
- var num = parseFloat(value);
31
- return isNaN(num) ? void 0 : num;
32
- }
33
- return value;
12
+ const num = parseFloat(value);
13
+ return isNaN(num) ? void 0 : num;
34
14
  };
35
- var getComponentStyle = function(component) {
36
- if (!component.style) return {};
37
- var style = component.style;
38
- var result = {};
39
- if (style.fill !== void 0) if (typeof style.fill === "string" && style.fill.includes("{")) result.color = parseDynamicValue(style.fill, object);
40
- else result.color = style.fill;
41
- if (style.fontSize !== void 0) {
42
- var fontSizeValue = parseNumericStyleValue(style.fontSize, object);
43
- if (fontSizeValue !== void 0) result.size = fontSizeValue;
44
- }
45
- if (style.fontFamily !== void 0) if (typeof style.fontFamily === "string" && style.fontFamily.includes("{")) result.fontFamily = parseDynamicValue(style.fontFamily, object);
46
- else result.fontFamily = style.fontFamily;
47
- var textStyle = {};
48
- if (style.fontStyle !== void 0) if (typeof style.fontStyle === "string" && style.fontStyle.includes("{")) textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);
49
- else textStyle.fontStyle = style.fontStyle;
50
- if (style.fontWeight !== void 0) if (typeof style.fontWeight === "string" && style.fontWeight.includes("{")) textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);
51
- else if (typeof style.fontWeight === "number") textStyle.fontWeight = style.fontWeight;
52
- else textStyle.fontWeight = style.fontWeight;
53
- if (style.stroke !== void 0) if (typeof style.stroke === "string" && style.stroke.includes("{")) textStyle.stroke = parseDynamicValue(style.stroke, object);
54
- else textStyle.stroke = style.stroke;
15
+ const getTextStyle = (style) => {
16
+ if (!style) return {};
17
+ const textStyle = {};
18
+ if (style.fontStyle !== void 0) textStyle.fontStyle = resolveDynamicValue(style.fontStyle, object);
19
+ if (style.fontWeight !== void 0) textStyle.fontWeight = resolveDynamicValue(style.fontWeight, object);
20
+ if (style.stroke !== void 0) textStyle.stroke = resolveDynamicValue(style.stroke, object);
55
21
  if (style.opacity !== void 0) {
56
- var opacityValue = parseNumericStyleValue(style.opacity, object);
22
+ const opacityValue = parseNumericStyleValue(style.opacity, object);
57
23
  if (opacityValue !== void 0) textStyle.opacity = opacityValue;
58
24
  }
59
25
  if (style.wordWrap !== void 0) textStyle.wordWrap = style.wordWrap;
60
- if (style.align !== void 0) if (typeof style.align === "string" && style.align.includes("{")) textStyle.align = parseDynamicValue(style.align, object);
61
- else textStyle.align = style.align;
62
- if (Object.keys(textStyle).length > 0) result.style = textStyle;
63
- return result;
26
+ if (style.align !== void 0) textStyle.align = resolveDynamicValue(style.align, object);
27
+ return textStyle;
64
28
  };
65
29
  return h(Text, {
66
- text: computed(() => parseDynamicValue(component.value, object)),
67
- ...getComponentStyle(component)
30
+ text: computed(() => String(resolveDynamicValue(read(value, ""), object) ?? "")),
31
+ color: computed(() => {
32
+ const currentStyle = read(style, {});
33
+ return currentStyle.fill !== void 0 ? resolveDynamicValue(currentStyle.fill, object) : void 0;
34
+ }),
35
+ size: computed(() => {
36
+ const currentStyle = read(style, {});
37
+ return currentStyle.fontSize !== void 0 ? parseNumericStyleValue(currentStyle.fontSize, object) : void 0;
38
+ }),
39
+ fontFamily: computed(() => {
40
+ const currentStyle = read(style, {});
41
+ return currentStyle.fontFamily !== void 0 ? resolveDynamicValue(currentStyle.fontFamily, object) : void 0;
42
+ }),
43
+ style: computed(() => getTextStyle(read(style, {})))
68
44
  });
69
45
  }
46
+ var __ce_component = component;
70
47
  //#endregion
71
- export { component as default };
48
+ export { __ce_component as default };
72
49
 
73
50
  //# sourceMappingURL=text.ce.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"text.ce.js","names":[],"sources":["../../../src/components/dynamics/text.ce"],"sourcesContent":["<Text text={parseDynamicValue(component.value, object)} ...getComponentStyle(component) />\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { parseDynamicValue } from \"./parse-value\";\n\nconst { object } = defineProps();\nconst component = object._component;\n\n/**\n * Parses a numeric style value that can be a number or a string\n * \n * If the value is a string, it may contain dynamic references like {hp}\n * which need to be parsed using parseDynamicValue. If it's a number,\n * it's returned as-is wrapped in a computed.\n * \n * @param value - Numeric value (number or string)\n * @param object - Object to resolve dynamic references from\n * @returns Computed signal with the numeric value\n */\nconst parseNumericStyleValue = (value, object) => {\n if (value === undefined || value === null) {\n return undefined;\n }\n \n if (typeof value === 'number') {\n return value;\n }\n \n if (typeof value === 'string') {\n // Check if it contains dynamic references\n if (value.includes('{')) {\n // Parse dynamic value and convert to number\n const parsed = parseDynamicValue(value, object);\n return computed(() => {\n const str = parsed();\n const num = parseFloat(str);\n return isNaN(num) ? 0 : num;\n });\n } else {\n // Simple string number, convert directly\n const num = parseFloat(value);\n return isNaN(num) ? undefined : num;\n }\n }\n \n return value;\n};\n\n/**\n * Maps component style properties to Canvas Engine Text component props\n * \n * Converts TextComponentOptions from the server to the format expected\n * by the Canvas Engine Text component. Supports all text styling properties\n * including fill, fontSize, fontFamily, fontStyle, fontWeight, stroke,\n * opacity, wordWrap, and align. Also supports dynamic values (number | string)\n * for numeric properties like fontSize and opacity.\n * \n * @param component - Component definition with style property\n * @returns Object with Text component props\n * \n * @example\n * ```ts\n * // Component with style\n * const component = {\n * style: {\n * fill: '#000000',\n * fontSize: 20,\n * fontFamily: 'Arial',\n * fontWeight: 'bold'\n * }\n * };\n * \n * const props = getComponentStyle(component);\n * // Returns: { color: '#000000', size: 20, fontFamily: 'Arial', style: { fontWeight: 'bold' } }\n * \n * // Component with dynamic fontSize\n * const component2 = {\n * style: {\n * fill: '#000000',\n * fontSize: '{hp}', // Will be resolved from object.hp\n * opacity: '0.8'\n * }\n * };\n * ```\n */\nconst getComponentStyle = (component) => {\n if (!component.style) {\n return {};\n }\n\n const style = component.style;\n const result = {};\n\n // Map fill to color (shortcut property)\n // fill can be a string (hex color) or a dynamic string\n if (style.fill !== undefined) {\n if (typeof style.fill === 'string' && style.fill.includes('{')) {\n result.color = parseDynamicValue(style.fill, object);\n } else {\n result.color = style.fill;\n }\n }\n\n // Map fontSize to size (shortcut property)\n // fontSize can be number or string (with dynamic references)\n if (style.fontSize !== undefined) {\n const fontSizeValue = parseNumericStyleValue(style.fontSize, object);\n if (fontSizeValue !== undefined) {\n result.size = fontSizeValue;\n }\n }\n\n // Map fontFamily (shortcut property)\n if (style.fontFamily !== undefined) {\n if (typeof style.fontFamily === 'string' && style.fontFamily.includes('{')) {\n result.fontFamily = parseDynamicValue(style.fontFamily, object);\n } else {\n result.fontFamily = style.fontFamily;\n }\n }\n\n // Build style object for PixiJS Text properties\n const textStyle = {};\n\n // Font style properties\n if (style.fontStyle !== undefined) {\n if (typeof style.fontStyle === 'string' && style.fontStyle.includes('{')) {\n textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);\n } else {\n textStyle.fontStyle = style.fontStyle;\n }\n }\n\n if (style.fontWeight !== undefined) {\n if (typeof style.fontWeight === 'string' && style.fontWeight.includes('{')) {\n textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);\n } else if (typeof style.fontWeight === 'number') {\n textStyle.fontWeight = style.fontWeight;\n } else {\n textStyle.fontWeight = style.fontWeight;\n }\n }\n\n // Stroke properties\n if (style.stroke !== undefined) {\n if (typeof style.stroke === 'string' && style.stroke.includes('{')) {\n textStyle.stroke = parseDynamicValue(style.stroke, object);\n } else {\n textStyle.stroke = style.stroke;\n }\n }\n\n // Opacity (can be number or string)\n if (style.opacity !== undefined) {\n const opacityValue = parseNumericStyleValue(style.opacity, object);\n if (opacityValue !== undefined) {\n textStyle.opacity = opacityValue;\n }\n }\n\n // Word wrap\n if (style.wordWrap !== undefined) {\n textStyle.wordWrap = style.wordWrap;\n }\n\n // Text alignment\n if (style.align !== undefined) {\n if (typeof style.align === 'string' && style.align.includes('{')) {\n textStyle.align = parseDynamicValue(style.align, object);\n } else {\n textStyle.align = style.align;\n }\n }\n\n // Only add style prop if there are style properties\n if (Object.keys(textStyle).length > 0) {\n result.style = textStyle;\n }\n\n return result;\n}\n</script>"],"mappings":";;;AAOM,SAAmB,UAAU,SAAA;;CAEjC,MAAA,cAAA,eAAA,QAAA;CACC,IAAS,WAAQ,QAAY,KAAK,YAAS,WAAY;AACxD,aAAA,OAAA,UAAA,SAAA,GAAA;AACI,QAAI,IAAM,GAAI,IAAC,GAAM,IAAI,UAAK,QAAQ,IAAQ,GAAA,KAAA;AAC3C,QAAO,UAAU;AAClB,SAAS,IAAG,KAAG,EAAA,KAAU,OAAG,UAAQ,eAAA,KAAA,GAAA,EAAA,CAC1C,GAAA,KAAA,EAAA;;AAEE,UAAM;;AAER,SAAA,SAAA,MAAA,MAAA,UAAA;;CAEF,IAAI,SAAS,aAAK,CAAS;CAC3B,IAAI,YAAW,OAAA;CACf,IAAI,yBAAA,SAAA,OAAA,QAAA;AACD,MAAA,UAAA,KAAA,KAAA,UAAA,KACK;AAEJ,MAAA,OAAA,UAAA,SACD,QAAA;AAEC,MAAI,OAAG,UAAY,SAEf,KAAI,MAAG,SAAM,IAAQ,EAAA;GAEjB,IAAA,WAAe,kBAAO,OAAA,OAAA;AACtB,UAAI,SAAY,WAAQ;IACpB,IAAA,MAAU,UAAE;IACZ,IAAA,MAAO,WAAc,IAAG;AAC1B,WAAA,MAAA,IAAA,GAAA,IAAA;KACA;SAEF;GAEJ,IAAA,MAAA,WAAA,MAAA;AACJ,UAAA,MAAA,IAAA,GAAA,KAAA,IAAA;;AAGH,SAAA;;CAED,IAAE,oBAAA,SAAA,WAAA;AACC,MAAK,CAAA,UAAU,MAChB,QAAA,EAAA;EAEC,IAAG,QAAU,UAAQ;EACrB,IAAA,SAAc,EAAE;AAGjB,MAAA,MAAA,SAAA,KAAA,EACE,KAAM,OAAS,MAAG,SAAU,YAAW,MAAK,KAAM,SAAA,IAAA,CAC1C,QAAO,QAAK,kBAAe,MAAA,MAAA,OAAA;MAGjC,QAAA,QAAA,MAAA;AAKF,MAAG,MAAA,aAAY,KAAA,GAAA;GACZ,IAAA,gBAAmB,uBAAA,MAAA,UAAA,OAAA;AACnB,OAAA,kBAAiB,KAAA,EACnB,QAAA,OAAA;;AAID,MAAE,MAAQ,eAAY,KAAA,EACxB,KAAA,OAAA,MAAA,eAAA,YAAA,MAAA,WAAA,SAAA,IAAA,CACI,QAAU,aAAa,kBAAA,MAAA,YAAA,OAAA;MAGjB,QAAG,aAAO,MAAA;EAIlB,IAAA,YAAA,EAAA;AAEF,MAAA,MAAA,cAAA,KAAA,EACI,KAAA,OAAA,MAAmB,cAAc,YAAE,MAAA,UAAA,SAAA,IAAA,CAChC,WAAU,YAAO,kBAAA,MAAA,WAAA,OAAA;;kCAOnB,KAAI,OAAQ,MAAM,eAAU,YAAQ,MAAA,WAAA,SAAA,IAAA,CAC/B,WAAS,aAAY,kBAAoB,MAAA,YAAA,OAAA;WAEzC,OAAY,MAAM,eAAe,SACjC,WAAO,aAAQ,MAAA;MAGnB,WAAA,aAAA,MAAA;AAIJ,MAAG,MAAA,WAAgB,KAAA,EACf,KAAA,OAAM,MAAW,WAAW,YAAE,MAAA,OAAA,SAAA,IAAA,CAC9B,WAAM,SAAgB,kBAAA,MAAuB,QAAM,OAAU;MAG7D,WAAA,SAAA,MAAA;AAIJ,MAAI,MAAM,YAAY,KAAA,GAAG;GACrB,IAAI,eAAa,uBAAyB,MAAE,SAAM,OAAW;AAC7D,OAAI,iBAAiB,KAAA,EACnB,WAAK,UAAA;;gCAKR,WAAW,WAAW,MAAC;AAG1B,MAAG,MAAK,UAAM,KAAA,EACV,KAAA,OAAM,MAAW,UAAG,YAAW,MAAA,MAAA,SAAA,IAAA,CAC3B,WAAO,QAAM,kBAAuB,MAAG,OAAM,OAAU;MAGvD,WAAU,QAAA,MAAY;AAI9B,MAAI,OAAM,KAAA,UAAe,CAAA,SAAW,EAChC,QAAI,QAAO;AAEf,SAAM;;AAGF,QADO,EAAA,MAAA;EAAA,MAAA,eAAA,kBAAA,UAAA,OAAA,OAAA,CAAA;EAAA,GAAA,kBAAA,UAAA;EAAA,CAAA"}
1
+ {"version":3,"file":"text.ce.js","names":[],"sources":["../../../src/components/dynamics/text.ce"],"sourcesContent":["<Text text={textValue} color={textColor} size={textSize} fontFamily={textFontFamily} style={textStyle} />\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { resolveDynamicValue } from \"./parse-value\";\n\nconst { object, value, style } = defineProps();\n\nconst read = (prop, fallback) => prop ? prop() : fallback;\n\nconst parseNumericStyleValue = (value, object) => {\n value = resolveDynamicValue(value, object);\n if (value === undefined || value === null) return undefined;\n if (typeof value === 'number') return value;\n\n const num = parseFloat(value);\n return isNaN(num) ? undefined : num;\n};\n\nconst getTextStyle = (style) => {\n if (!style) return {};\n const textStyle = {};\n\n if (style.fontStyle !== undefined) {\n textStyle.fontStyle = resolveDynamicValue(style.fontStyle, object);\n }\n\n if (style.fontWeight !== undefined) {\n textStyle.fontWeight = resolveDynamicValue(style.fontWeight, object);\n }\n\n if (style.stroke !== undefined) {\n textStyle.stroke = resolveDynamicValue(style.stroke, object);\n }\n\n if (style.opacity !== undefined) {\n const opacityValue = parseNumericStyleValue(style.opacity, object);\n if (opacityValue !== undefined) {\n textStyle.opacity = opacityValue;\n }\n }\n\n if (style.wordWrap !== undefined) {\n textStyle.wordWrap = style.wordWrap;\n }\n\n if (style.align !== undefined) {\n textStyle.align = resolveDynamicValue(style.align, object);\n }\n\n return textStyle;\n};\n\nconst textValue = computed(() => String(resolveDynamicValue(read(value, ''), object) ?? ''));\nconst textColor = computed(() => {\n const currentStyle = read(style, {});\n return currentStyle.fill !== undefined ? resolveDynamicValue(currentStyle.fill, object) : undefined;\n});\nconst textSize = computed(() => {\n const currentStyle = read(style, {});\n return currentStyle.fontSize !== undefined ? parseNumericStyleValue(currentStyle.fontSize, object) : undefined;\n});\nconst textFontFamily = computed(() => {\n const currentStyle = read(style, {});\n return currentStyle.fontFamily !== undefined ? resolveDynamicValue(currentStyle.fontFamily, object) : undefined;\n});\nconst textStyle = computed(() => getTextStyle(read(style, {})));\n</script>\n"],"mappings":";;;;CAQoB,SAAY,OAAO;CAEjC,MAAA,EAAA,QAAA,OAAyB,UAAA,eAAA,OAAmB,EAAA;CAClD,MAAI,QAAQ,MAAA,aAAoB,OAAO,KAAM,IAAC;CAC9C,MAAM,0BAAyB,OAAQ,WAAQ;EAC3C,QAAI,oBAAwB,OAAG,MAAO;0CAEtC,OAAW,KAAA;EACX,IAAA,OAAO,UAAa,UACvB,OAAA;;EAED,OAAM,MAAA,GAAc,IAAE,KAAA,IAAU;CAChC;CACA,MAAI,gBAAkB,UAAE;cAEhB,OAAM,CAAA;EACV,MAAI,YAAU,CAAA;EACd,IAAA,MAAA,cAAA,KAAA,GAAA,UAAA,YAAA,oBAAA,MAAA,WAAA,MAAA;EAGA,IAAI,MAAA,eAAqB,KAAA,GACzB,UAAA,aAAA,oBAAA,MAAA,YAAA,MAAA;EAEA,IAAI,MAAM,WAAW,KAAA,GACjB,UAAU,SAAS,oBAAoB,MAAM,QAAQ,MAAM;;GAG3D,MAAM,eAAY,uBAAW,MAAA,SAAA,MAAA;GAC7B,IAAA,iBAAqB,KAAA,GACjB,UAAA,UAAiB;EAEzB;EACA,IAAA,MAAA,aAAA,KAAA,GAAA,UAAA,WAAA,MAAA;EAGA,IAAI,MAAA,UAAU,KAAA,GACd,UAAA,QAAA,oBAAA,MAAA,OAAA,MAAA;EAEA,OAAI;CACR;CAgBI,OADgB,EAAE,MAAC;EAAA,MAdnB,eAAA,OAAA,oBAAA,KAAA,OAAA,EAAA,GAAA,MAAA,KAAA,EAAA,CAckC;EAAA,OAAA,eAAA;GAZlC,MAAM,eAAU,KAAA,OAAA,CAAA,CAAA;GACnB,OAAA,aAAA,SAAA,KAAA,IAAA,oBAAA,aAAA,MAAA,MAAA,IAAA,KAAA;GAWqC;EAAA,MATrB,eAAe;GAChC,MAAM,eAAY,KAAY,OAAG,CAAA,CAAA;GAC7B,OAAM,aAAc,aAAa,KAAA,IAAG,uBAAA,aAAA,UAAA,MAAA,IAAA,KAAA;EACxC,CAMsC;EAAA,YALpC,eAAA;GACF,MAAM,eAAmB,KAAK,OAAE,CAAA,CAAA;GAC5B,OAAM,aAAc,eAAe,KAAA,IAAC,oBAAA,aAAA,YAAA,MAAA,IAAA,KAAA;EACxC,CAEsC;EAAA,OADpC,eAAA,aAAA,KAAA,OAAA,CAAA,CAAA,CAAA,CACoC;CAAA,CAC5B;AACN;AAEE,IAAA,iBAAA"}
@@ -5,13 +5,10 @@ import { Container, Rect, computed, h, useDefineProps, useProps } from "canvasen
5
5
  //#region src/components/gui/box.ce
6
6
  function component($$props) {
7
7
  useProps($$props);
8
- var _a = useDefineProps($$props)(), width = _a.width, height = _a.height, children = _a.children, color = _a.color, top = _a.top, left = _a.left;
9
- var engine = inject(RpgClientEngine);
10
- var child = children[0];
11
- var _color = computed(function() {
12
- var _a;
13
- return ((_a = engine.globalConfig.gui) === null || _a === void 0 ? void 0 : _a.windowColor) || (color === null || color === void 0 ? void 0 : color()) || "#1a1a2e";
14
- });
8
+ const { width, height, children, color, top, left } = useDefineProps($$props)();
9
+ const engine = inject(RpgClientEngine);
10
+ const child = children[0];
11
+ const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || "#1a1a2e");
15
12
  return h(Container, {
16
13
  positionType: "absolute",
17
14
  top,
@@ -22,7 +19,8 @@ function component($$props) {
22
19
  color: _color
23
20
  }), h(Container, { attach: child })]));
24
21
  }
22
+ var __ce_component = component;
25
23
  //#endregion
26
- export { component as default };
24
+ export { __ce_component as default };
27
25
 
28
26
  //# sourceMappingURL=box.ce.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"box.ce.js","names":[],"sources":["../../../src/components/gui/box.ce"],"sourcesContent":["<Container positionType=\"absolute\" top={top} left={left}>\n <Container\n anchor={[0.5, 0.5]}\n >\n <Rect width height color={_color} />\n <Container attach={child}></Container>\n </Container> \n</Container>\n\n<script>\n import { RpgClientEngine, inject } from \"../../index\";\n\n const { width, height, children, color, top, left } = defineProps();\n const engine = inject(RpgClientEngine)\n const child = children[0]\n const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || \"#1a1a2e\")\n</script>"],"mappings":";;;;;AAOE,SAAS,UAAA,SAAA;;CAGH,IAAG,KADJ,eAAA,QAAA,EACqB,EAAA,QAAS,GAAM,OAAM,SAAM,GAAA,QAAA,WAAA,GAAA,UAAA,QAAA,GAAA,OAAA,MAAA,GAAA,KAAA,OAAA,GAAA;;CAEvD,IAAE,QAAQ,SAAO;CACjB,IAAE,SAAM,SAAS,WAAO;EAAA,IAAe;AAAA,WAAA,KAAA,OAAA,aAAA,SAAA,QAAA,OAAA,KAAA,IAAA,KAAA,IAAA,GAAA,iBAAA,UAAA,QAAA,UAAA,KAAA,IAAA,KAAA,IAAA,OAAA,KAAA;GAAA;AAE/B,QADQ,EAAA,WAAU;EAAA,cAAA;EAAA;EAAA;EAAA,EAAA,EAAA,WAAA,EAAA,QAAA,CAAA,IAAA,GAAA,EAAA,EAAA,CAAA,EAAA,MAAA;EAAA;EAAA;EAAA,OAAA;EAAA,CAAA,EAAA,EAAA,WAAA,EAAA,QAAA,OAAA,CAAA,CAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"box.ce.js","names":[],"sources":["../../../src/components/gui/box.ce"],"sourcesContent":["<Container positionType=\"absolute\" top={top} left={left}>\n <Container\n anchor={[0.5, 0.5]}\n >\n <Rect width height color={_color} />\n <Container attach={child}></Container>\n </Container> \n</Container>\n\n<script>\n import { RpgClientEngine, inject } from \"../../index\";\n\n const { width, height, children, color, top, left } = defineProps();\n const engine = inject(RpgClientEngine)\n const child = children[0]\n const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || \"#1a1a2e\")\n</script>"],"mappings":";;;;;AAOE,SAAS,UAAA,SAAA;;CAGH,MAAG,EAAA,OAAA,QAAiB,UAAa,OAAO,KAAC,SAD1C,eAAA,OACgD,EAAA;;CAEvD,MAAE,QAAQ,SAAa;CACvB,MAAE,SAAa,eAAS,OAAA,aAAe,KAAA,eAAA,QAAA,KAAA,SAAA;CAE/B,OADQ,EAAA,WAAU;EAAA,cAAA;EAAA;EAAA;CAAA,GAAA,EAAA,WAAA,EAAA,QAAA,CAAA,IAAA,EAAA,EAAA,GAAA,CAAA,EAAA,MAAA;EAAA;EAAA;EAAA,OAAA;CAAA,CAAA,GAAA,EAAA,WAAA,EAAA,QAAA,MAAA,CAAA,CAAA,CAAA,CACT;AACf"}
@@ -6,45 +6,38 @@ import { delay } from "@rpgjs/common";
6
6
  function component($$props) {
7
7
  useProps($$props);
8
8
  const defineProps = useDefineProps($$props);
9
- var engine = inject(RpgClientEngine);
9
+ const engine = inject(RpgClientEngine);
10
10
  engine.scene.currentPlayer;
11
- var keyboardControls = engine.globalConfig.keyboardControls;
11
+ const keyboardControls = engine.globalConfig.keyboardControls;
12
12
  engine.stopProcessingInput = true;
13
- var selectedItem = signal(0), _a = defineProps(), data = _a.data, onFinish = _a.onFinish;
14
- _a.onInteraction;
15
- var _b = data(), message = _b.message, choices = _b.choices, face = _b.face, speaker = _b.speaker, position = _b.position, typewriterEffect = _b.typewriterEffect;
16
- _b.autoClose;
17
- var fullWidth = computed(function() {
18
- return data().fullWidth || false;
19
- });
20
- var resolveProp = function(value) {
21
- return typeof value === "function" ? value() : value;
22
- };
23
- var speakerName = computed(function() {
24
- var value = resolveProp(speaker);
13
+ const selectedItem = signal(0);
14
+ const { data, onFinish, onInteraction } = defineProps();
15
+ const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();
16
+ const fullWidth = computed(() => data().fullWidth || false);
17
+ const resolveProp = (value) => typeof value === "function" ? value() : value;
18
+ const speakerName = computed(() => {
19
+ const value = resolveProp(speaker);
25
20
  return value ? String(value) : "";
26
21
  });
27
- var dialogPosition = computed(function() {
28
- return resolveProp(position) || "bottom";
29
- });
30
- var isFullWidth = computed(function() {
31
- return resolveProp(fullWidth) !== false;
22
+ const dialogPosition = computed(() => resolveProp(position) || "bottom");
23
+ const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
24
+ const dialogFace = computed(() => resolveProp(face));
25
+ const hasFace = computed(() => {
26
+ const value = dialogFace();
27
+ return !!(value && value.id);
32
28
  });
33
- var hasFace = computed(function() {
34
- return !!resolveProp(face);
35
- });
36
- var displayMessage = signal("");
37
- var fullMessage = signal("");
38
- var isTyping = signal(false);
39
- var typewriterTimer = null;
40
- mount(function(element) {});
41
- var startTypewriter = function(text) {
29
+ const displayMessage = signal("");
30
+ const fullMessage = signal("");
31
+ const isTyping = signal(false);
32
+ let typewriterTimer = null;
33
+ mount((element) => {});
34
+ const startTypewriter = (text) => {
42
35
  if (typewriterTimer) clearInterval(typewriterTimer);
43
36
  displayMessage.set("");
44
37
  if (!text) return;
45
- var index = 0;
38
+ let index = 0;
46
39
  isTyping.set(true);
47
- typewriterTimer = setInterval(function() {
40
+ typewriterTimer = setInterval(() => {
48
41
  index += 1;
49
42
  displayMessage.set(text.slice(0, index));
50
43
  if (index >= text.length) {
@@ -54,14 +47,14 @@ function component($$props) {
54
47
  }
55
48
  }, 20);
56
49
  };
57
- var finishTyping = function() {
50
+ const finishTyping = () => {
58
51
  if (typewriterTimer) clearInterval(typewriterTimer);
59
52
  typewriterTimer = null;
60
53
  displayMessage.set(fullMessage());
61
54
  isTyping.set(false);
62
55
  };
63
- effect(function() {
64
- var text = resolveProp(message) || "";
56
+ effect(() => {
57
+ const text = resolveProp(message) || "";
65
58
  fullMessage.set(text);
66
59
  if (!(resolveProp(typewriterEffect) !== false)) {
67
60
  finishTyping();
@@ -69,15 +62,9 @@ function component($$props) {
69
62
  }
70
63
  startTypewriter(text);
71
64
  });
72
- var hasChoices = computed(function() {
73
- return choices.length > 0;
74
- });
75
- var showIndicator = computed(function() {
76
- return !hasChoices() && !isTyping();
77
- });
78
- var nav = createTabindexNavigator(selectedItem, { count: function() {
79
- return choices.length;
80
- } }, "wrap");
65
+ const hasChoices = computed(() => choices.length > 0);
66
+ const showIndicator = computed(() => !hasChoices() && !isTyping());
67
+ const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, "wrap");
81
68
  function selectChoice(index) {
82
69
  return function() {
83
70
  selectedItem.set(index);
@@ -87,15 +74,15 @@ function component($$props) {
87
74
  function _onFinish(value) {
88
75
  if (onFinish) onFinish(value);
89
76
  }
90
- var onSelect = function(index) {
77
+ const onSelect = (index) => {
91
78
  _onFinish(index);
92
79
  };
93
- var controls = signal({
80
+ const controls = signal({
94
81
  up: {
95
82
  repeat: true,
96
83
  bind: keyboardControls.up,
97
84
  throttle: 150,
98
- keyDown: function() {
85
+ keyDown() {
99
86
  if (!hasChoices()) return;
100
87
  nav.next(-1);
101
88
  }
@@ -104,14 +91,14 @@ function component($$props) {
104
91
  repeat: true,
105
92
  bind: keyboardControls.down,
106
93
  throttle: 150,
107
- keyDown: function() {
94
+ keyDown() {
108
95
  if (!hasChoices()) return;
109
96
  nav.next(1);
110
97
  }
111
98
  },
112
99
  action: {
113
100
  bind: keyboardControls.action,
114
- keyDown: function() {
101
+ keyDown() {
115
102
  if (isTyping()) {
116
103
  finishTyping();
117
104
  return;
@@ -122,9 +109,9 @@ function component($$props) {
122
109
  },
123
110
  gamepad: { enabled: true }
124
111
  });
125
- var dialogControls = signal({ action: {
112
+ const dialogControls = signal({ action: {
126
113
  bind: keyboardControls.action,
127
- keyDown: function() {
114
+ keyDown() {
128
115
  if (isTyping()) {
129
116
  finishTyping();
130
117
  return;
@@ -133,15 +120,15 @@ function component($$props) {
133
120
  _onFinish();
134
121
  }
135
122
  } });
136
- var faceSheet = function(graphicId, animationName) {
123
+ const faceSheet = (faceValue) => {
137
124
  return {
138
- definition: engine.getSpriteSheet(graphicId),
139
- playing: animationName
125
+ definition: engine.getSpriteSheet(faceValue.id),
126
+ playing: faceValue.expression || "default"
140
127
  };
141
128
  };
142
- mount(function(element) {
143
- return function() {
144
- delay(function() {
129
+ mount((element) => {
130
+ return () => {
131
+ delay(() => {
145
132
  engine.stopProcessingInput = false;
146
133
  });
147
134
  };
@@ -165,7 +152,7 @@ function component($$props) {
165
152
  element: "div",
166
153
  attrs: { class: "rpg-ui-dialog-body" }
167
154
  }, [h(DOMElement, { element: "div" }, [
168
- cond(speakerName(), () => h(DOMElement, {
155
+ cond(computed(() => speakerName()), () => h(DOMElement, {
169
156
  element: "div",
170
157
  attrs: { class: "rpg-ui-dialog-speaker" },
171
158
  textContent: computed(() => speakerName())
@@ -175,7 +162,7 @@ function component($$props) {
175
162
  attrs: { class: "rpg-ui-dialog-content" },
176
163
  textContent: computed(() => displayMessage())
177
164
  }),
178
- cond(hasChoices(), () => h(Navigation, {
165
+ cond(computed(() => hasChoices()), () => h(Navigation, {
179
166
  tabindex: selectedItem,
180
167
  controls
181
168
  }, h(DOMElement, {
@@ -191,15 +178,21 @@ function component($$props) {
191
178
  },
192
179
  textContent: choice.text
193
180
  })))))
194
- ]), cond(hasFace(), () => h(DOMElement, {
181
+ ]), cond(computed(() => hasFace()), () => h(DOMElement, {
195
182
  element: "div",
196
183
  attrs: { class: "rpg-ui-dialog-face" }
197
- }, h(DOMSprite, { sheet: computed(() => faceSheet(face.id, face.expression)) })))]), cond(showIndicator, () => h(DOMElement, {
184
+ }, h(DOMSprite, {
185
+ sheet: computed(() => faceSheet(dialogFace())),
186
+ width: "100%",
187
+ height: "100%",
188
+ objectFit: "contain"
189
+ })))]), cond(showIndicator, () => h(DOMElement, {
198
190
  element: "div",
199
191
  attrs: { class: "rpg-ui-dialog-indicator" }
200
192
  }))])));
201
193
  }
194
+ var __ce_component = component;
202
195
  //#endregion
203
- export { component as default };
196
+ export { __ce_component as default };
204
197
 
205
198
  //# sourceMappingURL=index.ce.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n <div\n class=\"rpg-ui-dialog-container\"\n data-position={dialogPosition()}\n data-full-width={isFullWidth() ? \"true\" : \"false\"}\n data-has-face={hasFace() ? \"true\" : \"false\"}\n >\n <div class=\"rpg-ui-dialog rpg-anim-fade-in\">\n <div class=\"rpg-ui-dialog-body\">\n <div>\n @if (speakerName()) {\n <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n }\n <div class=\"rpg-ui-dialog-content\">\n {displayMessage()}\n </div>\n @if (hasChoices()) {\n <Navigation tabindex={selectedItem} controls={controls}>\n <div class=\"rpg-ui-dialog-choices\">\n @for ((choice,index) of choices) {\n <div\n class=\"rpg-ui-dialog-choice\"\n class={{active: selectedItem() === index}}\n tabindex={index}\n data-choice-index={index}\n click={selectChoice(index)}\n >{{ choice.text }}</div>\n }\n </div>\n </Navigation>\n }\n </div>\n @if (hasFace()) {\n <div class=\"rpg-ui-dialog-face\">\n <DOMSprite sheet={faceSheet(face.id, face.expression)} />\n </div>\n }\n </div>\n @if (showIndicator) {\n <div class=\"rpg-ui-dialog-indicator\"></div>\n }\n </div>\n </div>\n</DOMContainer>\n \n<script>\n import { effect, signal, computed, createTabindexNavigator, mount } from \"canvasengine\";\n import { inject } from \"../../../core/inject\";\n import { RpgClientEngine } from \"../../../RpgClientEngine\";\n import { delay } from \"@rpgjs/common\";\n\n const engine = inject(RpgClientEngine);\n const currentPlayer = engine.scene.currentPlayer\n const keyboardControls = engine.globalConfig.keyboardControls;\n\n engine.stopProcessingInput = true;\n\n const selectedItem = signal(0)\n let isDestroyed = false;\n\n const {\n data,\n onFinish,\n onInteraction\n } = defineProps();\n\n const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();\n const fullWidth = computed(() => data().fullWidth || false);\n\n const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n\n const speakerName = computed(() => {\n const value = resolveProp(speaker);\n return value ? String(value) : \"\";\n });\n\n const dialogPosition = computed(() => resolveProp(position) || \"bottom\");\n const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n const hasFace = computed(() => !!resolveProp(face));\n\n const displayMessage = signal(\"\");\n const fullMessage = signal(\"\");\n const isTyping = signal(false);\n let typewriterTimer = null;\n let rootElement = null;\n\n mount((element) => {\n rootElement = element;\n });\n\n const startTypewriter = (text) => {\n if (typewriterTimer) clearInterval(typewriterTimer);\n displayMessage.set(\"\");\n if (!text) return;\n let index = 0;\n isTyping.set(true);\n typewriterTimer = setInterval(() => {\n index += 1;\n displayMessage.set(text.slice(0, index));\n if (index >= text.length) {\n clearInterval(typewriterTimer);\n typewriterTimer = null;\n isTyping.set(false);\n }\n }, 20);\n };\n\n const finishTyping = () => {\n if (typewriterTimer) clearInterval(typewriterTimer);\n typewriterTimer = null;\n displayMessage.set(fullMessage());\n isTyping.set(false);\n };\n\n effect(() => {\n const text = resolveProp(message) || \"\";\n fullMessage.set(text);\n const useTypewriter = resolveProp(typewriterEffect) !== false;\n if (!useTypewriter) {\n finishTyping();\n return;\n }\n startTypewriter(text);\n });\n\n\n const hasChoices = computed(() => choices.length > 0);\n const showIndicator = computed(() => !hasChoices() && !isTyping());\n const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');\n\n function selectChoice(index) {\n return function() {\n selectedItem.set(index);\n onSelect(index);\n }\n }\n\n function _onFinish(value) {\n if (onFinish) onFinish(value);\n }\n\n const onSelect = (index) => {\n _onFinish(index);\n };\n\n const controls = signal({\n up: {\n repeat: true,\n bind: keyboardControls.up,\n throttle: 150,\n keyDown() {\n if (!hasChoices()) return;\n nav.next(-1);\n }\n },\n down: {\n repeat: true,\n bind: keyboardControls.down,\n throttle: 150,\n keyDown() {\n if (!hasChoices()) return;\n nav.next(1);\n }\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (isTyping()) {\n finishTyping();\n return;\n }\n if (!hasChoices()) return;\n onSelect(selectedItem());\n }\n },\n gamepad: {\n enabled: true\n }\n });\n \n const dialogControls = signal({\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (isTyping()) {\n finishTyping();\n return;\n }\n if (hasChoices()) return;\n _onFinish();\n }\n },\n })\n\n const faceSheet = (graphicId, animationName) => {\n return {\n definition: engine.getSpriteSheet(graphicId),\n playing: animationName,\n };\n }\n\n mount((element) => {\n return () => {\n isDestroyed = true;\n // Wait destroy is finished before start processing input\n delay(() => {\n engine.stopProcessingInput = false;\n })\n }\n })\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n <div\n class=\"rpg-ui-dialog-container\"\n data-position={dialogPosition()}\n data-full-width={isFullWidth() ? \"true\" : \"false\"}\n data-has-face={hasFace() ? \"true\" : \"false\"}\n >\n <div class=\"rpg-ui-dialog rpg-anim-fade-in\">\n <div class=\"rpg-ui-dialog-body\">\n <div>\n @if (speakerName()) {\n <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n }\n <div class=\"rpg-ui-dialog-content\">\n {displayMessage()}\n </div>\n @if (hasChoices()) {\n <Navigation tabindex={selectedItem} controls={controls}>\n <div class=\"rpg-ui-dialog-choices\">\n @for ((choice,index) of choices) {\n <div\n class=\"rpg-ui-dialog-choice\"\n class={{active: selectedItem() === index}}\n tabindex={index}\n data-choice-index={index}\n click={selectChoice(index)}\n >{{ choice.text }}</div>\n }\n </div>\n </Navigation>\n }\n </div>\n @if (hasFace()) {\n <div class=\"rpg-ui-dialog-face\">\n <DOMSprite\n sheet={faceSheet(dialogFace())}\n width=\"100%\"\n height=\"100%\"\n objectFit=\"contain\"\n />\n </div>\n }\n </div>\n @if (showIndicator) {\n <div class=\"rpg-ui-dialog-indicator\"></div>\n }\n </div>\n </div>\n</DOMContainer>\n \n<script>\n import { effect, signal, computed, createTabindexNavigator, mount } from \"canvasengine\";\n import { inject } from \"../../../core/inject\";\n import { RpgClientEngine } from \"../../../RpgClientEngine\";\n import { delay } from \"@rpgjs/common\";\n\n const engine = inject(RpgClientEngine);\n const currentPlayer = engine.scene.currentPlayer\n const keyboardControls = engine.globalConfig.keyboardControls;\n\n engine.stopProcessingInput = true;\n\n const selectedItem = signal(0)\n let isDestroyed = false;\n\n const {\n data,\n onFinish,\n onInteraction\n } = defineProps();\n\n const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();\n const fullWidth = computed(() => data().fullWidth || false);\n\n const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n\n const speakerName = computed(() => {\n const value = resolveProp(speaker);\n return value ? String(value) : \"\";\n });\n\n const dialogPosition = computed(() => resolveProp(position) || \"bottom\");\n const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n const dialogFace = computed(() => resolveProp(face));\n const hasFace = computed(() => {\n const value = dialogFace();\n return !!(value && value.id);\n });\n\n const displayMessage = signal(\"\");\n const fullMessage = signal(\"\");\n const isTyping = signal(false);\n let typewriterTimer = null;\n let rootElement = null;\n\n mount((element) => {\n rootElement = element;\n });\n\n const startTypewriter = (text) => {\n if (typewriterTimer) clearInterval(typewriterTimer);\n displayMessage.set(\"\");\n if (!text) return;\n let index = 0;\n isTyping.set(true);\n typewriterTimer = setInterval(() => {\n index += 1;\n displayMessage.set(text.slice(0, index));\n if (index >= text.length) {\n clearInterval(typewriterTimer);\n typewriterTimer = null;\n isTyping.set(false);\n }\n }, 20);\n };\n\n const finishTyping = () => {\n if (typewriterTimer) clearInterval(typewriterTimer);\n typewriterTimer = null;\n displayMessage.set(fullMessage());\n isTyping.set(false);\n };\n\n effect(() => {\n const text = resolveProp(message) || \"\";\n fullMessage.set(text);\n const useTypewriter = resolveProp(typewriterEffect) !== false;\n if (!useTypewriter) {\n finishTyping();\n return;\n }\n startTypewriter(text);\n });\n\n\n const hasChoices = computed(() => choices.length > 0);\n const showIndicator = computed(() => !hasChoices() && !isTyping());\n const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');\n\n function selectChoice(index) {\n return function() {\n selectedItem.set(index);\n onSelect(index);\n }\n }\n\n function _onFinish(value) {\n if (onFinish) onFinish(value);\n }\n\n const onSelect = (index) => {\n _onFinish(index);\n };\n\n const controls = signal({\n up: {\n repeat: true,\n bind: keyboardControls.up,\n throttle: 150,\n keyDown() {\n if (!hasChoices()) return;\n nav.next(-1);\n }\n },\n down: {\n repeat: true,\n bind: keyboardControls.down,\n throttle: 150,\n keyDown() {\n if (!hasChoices()) return;\n nav.next(1);\n }\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (isTyping()) {\n finishTyping();\n return;\n }\n if (!hasChoices()) return;\n onSelect(selectedItem());\n }\n },\n gamepad: {\n enabled: true\n }\n });\n \n const dialogControls = signal({\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (isTyping()) {\n finishTyping();\n return;\n }\n if (hasChoices()) return;\n _onFinish();\n }\n },\n })\n\n const faceSheet = (faceValue) => {\n return {\n definition: engine.getSpriteSheet(faceValue.id),\n playing: faceValue.expression || \"default\",\n };\n }\n\n mount((element) => {\n return () => {\n isDestroyed = true;\n // Wait destroy is finished before start processing input\n delay(() => {\n engine.stopProcessingInput = false;\n })\n }\n })\n</script>\n"],"mappings":"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"}