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

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 (245) hide show
  1. package/CHANGELOG.md +49 -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/Game/ProjectileManager.d.ts +89 -0
  16. package/dist/Game/ProjectileManager.js +179 -0
  17. package/dist/Game/ProjectileManager.js.map +1 -0
  18. package/dist/Game/ProjectileManager.spec.d.ts +1 -0
  19. package/dist/Gui/Gui.d.ts +17 -4
  20. package/dist/Gui/Gui.js +78 -48
  21. package/dist/Gui/Gui.js.map +1 -1
  22. package/dist/Gui/Gui.spec.d.ts +1 -0
  23. package/dist/Gui/NotificationManager.js.map +1 -1
  24. package/dist/Resource.js +1 -1
  25. package/dist/Resource.js.map +1 -1
  26. package/dist/RpgClient.d.ts +110 -15
  27. package/dist/RpgClientEngine.d.ts +86 -10
  28. package/dist/RpgClientEngine.js +306 -49
  29. package/dist/RpgClientEngine.js.map +1 -1
  30. package/dist/Sound.js.map +1 -1
  31. package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.130.0}/helpers/decorate.js +1 -1
  32. package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.130.0}/helpers/decorateMetadata.js +1 -1
  33. package/dist/components/animations/animation.ce.js +4 -5
  34. package/dist/components/animations/animation.ce.js.map +1 -1
  35. package/dist/components/animations/hit.ce.js +19 -25
  36. package/dist/components/animations/hit.ce.js.map +1 -1
  37. package/dist/components/animations/index.js +4 -4
  38. package/dist/components/animations/index.js.map +1 -1
  39. package/dist/components/character.ce.js +422 -240
  40. package/dist/components/character.ce.js.map +1 -1
  41. package/dist/components/dynamics/bar.ce.js +97 -0
  42. package/dist/components/dynamics/bar.ce.js.map +1 -0
  43. package/dist/components/dynamics/image.ce.js +24 -0
  44. package/dist/components/dynamics/image.ce.js.map +1 -0
  45. package/dist/components/dynamics/parse-value.d.ts +3 -0
  46. package/dist/components/dynamics/parse-value.js +54 -35
  47. package/dist/components/dynamics/parse-value.js.map +1 -1
  48. package/dist/components/dynamics/parse-value.spec.d.ts +1 -0
  49. package/dist/components/dynamics/shape-utils.d.ts +16 -0
  50. package/dist/components/dynamics/shape-utils.js +73 -0
  51. package/dist/components/dynamics/shape-utils.js.map +1 -0
  52. package/dist/components/dynamics/shape-utils.spec.d.ts +1 -0
  53. package/dist/components/dynamics/shape.ce.js +84 -0
  54. package/dist/components/dynamics/shape.ce.js.map +1 -0
  55. package/dist/components/dynamics/text.ce.js +34 -56
  56. package/dist/components/dynamics/text.ce.js.map +1 -1
  57. package/dist/components/gui/box.ce.js +6 -8
  58. package/dist/components/gui/box.ce.js.map +1 -1
  59. package/dist/components/gui/dialogbox/index.ce.js +56 -62
  60. package/dist/components/gui/dialogbox/index.ce.js.map +1 -1
  61. package/dist/components/gui/gameover.ce.js +42 -65
  62. package/dist/components/gui/gameover.ce.js.map +1 -1
  63. package/dist/components/gui/hud/hud.ce.js +21 -30
  64. package/dist/components/gui/hud/hud.ce.js.map +1 -1
  65. package/dist/components/gui/menu/equip-menu.ce.js +112 -165
  66. package/dist/components/gui/menu/equip-menu.ce.js.map +1 -1
  67. package/dist/components/gui/menu/exit-menu.ce.js +8 -6
  68. package/dist/components/gui/menu/exit-menu.ce.js.map +1 -1
  69. package/dist/components/gui/menu/items-menu.ce.js +52 -69
  70. package/dist/components/gui/menu/items-menu.ce.js.map +1 -1
  71. package/dist/components/gui/menu/main-menu.ce.js +75 -92
  72. package/dist/components/gui/menu/main-menu.ce.js.map +1 -1
  73. package/dist/components/gui/menu/options-menu.ce.js +5 -4
  74. package/dist/components/gui/menu/options-menu.ce.js.map +1 -1
  75. package/dist/components/gui/menu/skills-menu.ce.js +12 -17
  76. package/dist/components/gui/menu/skills-menu.ce.js.map +1 -1
  77. package/dist/components/gui/mobile/index.js +2 -2
  78. package/dist/components/gui/mobile/index.js.map +1 -1
  79. package/dist/components/gui/mobile/mobile.ce.js +5 -4
  80. package/dist/components/gui/mobile/mobile.ce.js.map +1 -1
  81. package/dist/components/gui/notification/notification.ce.js +22 -24
  82. package/dist/components/gui/notification/notification.ce.js.map +1 -1
  83. package/dist/components/gui/save-load.ce.js +72 -249
  84. package/dist/components/gui/save-load.ce.js.map +1 -1
  85. package/dist/components/gui/shop/shop.ce.js +90 -127
  86. package/dist/components/gui/shop/shop.ce.js.map +1 -1
  87. package/dist/components/gui/title-screen.ce.js +45 -70
  88. package/dist/components/gui/title-screen.ce.js.map +1 -1
  89. package/dist/components/index.d.ts +2 -1
  90. package/dist/components/index.js +1 -0
  91. package/dist/components/player-components-utils.d.ts +67 -0
  92. package/dist/components/player-components-utils.js +162 -0
  93. package/dist/components/player-components-utils.js.map +1 -0
  94. package/dist/components/player-components-utils.spec.d.ts +1 -0
  95. package/dist/components/player-components.ce.js +189 -0
  96. package/dist/components/player-components.ce.js.map +1 -0
  97. package/dist/components/prebuilt/hp-bar.ce.js +42 -44
  98. package/dist/components/prebuilt/hp-bar.ce.js.map +1 -1
  99. package/dist/components/prebuilt/light-halo.ce.js +36 -59
  100. package/dist/components/prebuilt/light-halo.ce.js.map +1 -1
  101. package/dist/components/scenes/canvas.ce.js +165 -21
  102. package/dist/components/scenes/canvas.ce.js.map +1 -1
  103. package/dist/components/scenes/draw-map.ce.js +25 -32
  104. package/dist/components/scenes/draw-map.ce.js.map +1 -1
  105. package/dist/components/scenes/event-layer.ce.js +9 -8
  106. package/dist/components/scenes/event-layer.ce.js.map +1 -1
  107. package/dist/core/inject.js +1 -1
  108. package/dist/core/inject.js.map +1 -1
  109. package/dist/core/setup.js +1 -1
  110. package/dist/core/setup.js.map +1 -1
  111. package/dist/decorators/spritesheet.d.ts +1 -0
  112. package/dist/decorators/spritesheet.js +11 -0
  113. package/dist/decorators/spritesheet.js.map +1 -0
  114. package/dist/index.d.ts +4 -0
  115. package/dist/index.js +26 -21
  116. package/dist/module.js +15 -1
  117. package/dist/module.js.map +1 -1
  118. package/dist/node_modules/.pnpm/{@signe_di@2.9.0 → @signe_di@3.0.1}/node_modules/@signe/di/dist/index.js +7 -117
  119. package/dist/node_modules/.pnpm/@signe_di@3.0.1/node_modules/@signe/di/dist/index.js.map +1 -0
  120. package/dist/node_modules/.pnpm/@signe_reactive@3.0.1/node_modules/@signe/reactive/dist/index.js +239 -0
  121. package/dist/node_modules/.pnpm/@signe_reactive@3.0.1/node_modules/@signe/reactive/dist/index.js.map +1 -0
  122. package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/chunk-EUXUH3YW.js +13 -0
  123. package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/chunk-EUXUH3YW.js.map +1 -0
  124. package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/index.js +696 -0
  125. package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/index.js.map +1 -0
  126. package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/client/index.js +44 -0
  127. package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/client/index.js.map +1 -0
  128. package/dist/node_modules/.pnpm/{@signe_sync@2.9.0 → @signe_sync@3.0.1}/node_modules/@signe/sync/dist/index.js +57 -141
  129. package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/index.js.map +1 -0
  130. package/dist/node_modules/.pnpm/partysocket@1.1.3/node_modules/partysocket/dist/chunk-HAC622V3.js.map +1 -1
  131. package/dist/node_modules/.pnpm/partysocket@1.1.3/node_modules/partysocket/dist/chunk-S74YV6PU.js.map +1 -1
  132. package/dist/node_modules/.pnpm/zod@3.24.2/node_modules/zod/lib/index.js +27 -27
  133. package/dist/node_modules/.pnpm/zod@3.24.2/node_modules/zod/lib/index.js.map +1 -1
  134. package/dist/presets/animation.js.map +1 -1
  135. package/dist/presets/faceset.js.map +1 -1
  136. package/dist/presets/icon.js.map +1 -1
  137. package/dist/presets/index.js.map +1 -1
  138. package/dist/presets/lpc.js.map +1 -1
  139. package/dist/presets/rmspritesheet.js.map +1 -1
  140. package/dist/services/AbstractSocket.js.map +1 -1
  141. package/dist/services/actionInput.d.ts +12 -0
  142. package/dist/services/actionInput.js +27 -0
  143. package/dist/services/actionInput.js.map +1 -0
  144. package/dist/services/actionInput.spec.d.ts +1 -0
  145. package/dist/services/keyboardControls.js.map +1 -1
  146. package/dist/services/loadMap.d.ts +6 -0
  147. package/dist/services/loadMap.js +1 -1
  148. package/dist/services/loadMap.js.map +1 -1
  149. package/dist/services/mmorpg-connection.d.ts +5 -0
  150. package/dist/services/mmorpg-connection.js +50 -0
  151. package/dist/services/mmorpg-connection.js.map +1 -0
  152. package/dist/services/mmorpg-connection.spec.d.ts +1 -0
  153. package/dist/services/mmorpg.d.ts +10 -4
  154. package/dist/services/mmorpg.js +56 -33
  155. package/dist/services/mmorpg.js.map +1 -1
  156. package/dist/services/pointerContext.d.ts +11 -0
  157. package/dist/services/pointerContext.js +48 -0
  158. package/dist/services/pointerContext.js.map +1 -0
  159. package/dist/services/pointerContext.spec.d.ts +1 -0
  160. package/dist/services/save.js.map +1 -1
  161. package/dist/services/save.spec.d.ts +1 -0
  162. package/dist/services/standalone-message.d.ts +1 -0
  163. package/dist/services/standalone-message.js +9 -0
  164. package/dist/services/standalone-message.js.map +1 -0
  165. package/dist/services/standalone.js +4 -3
  166. package/dist/services/standalone.js.map +1 -1
  167. package/dist/services/standalone.spec.d.ts +1 -0
  168. package/dist/utils/getEntityProp.js +4 -3
  169. package/dist/utils/getEntityProp.js.map +1 -1
  170. package/dist/utils/getEntityProp.spec.d.ts +1 -0
  171. package/dist/utils/readPropValue.d.ts +2 -0
  172. package/dist/utils/readPropValue.js +13 -0
  173. package/dist/utils/readPropValue.js.map +1 -0
  174. package/package.json +13 -14
  175. package/src/Game/AnimationManager.spec.ts +30 -0
  176. package/src/Game/AnimationManager.ts +22 -10
  177. package/src/Game/Map.ts +91 -2
  178. package/src/Game/Object.ts +148 -69
  179. package/src/Game/ProjectileManager.spec.ts +338 -0
  180. package/src/Game/ProjectileManager.ts +324 -0
  181. package/src/Gui/Gui.spec.ts +273 -0
  182. package/src/Gui/Gui.ts +105 -50
  183. package/src/Resource.ts +1 -2
  184. package/src/RpgClient.ts +125 -17
  185. package/src/RpgClientEngine.ts +457 -87
  186. package/src/components/character.ce +441 -32
  187. package/src/components/dynamics/bar.ce +88 -0
  188. package/src/components/dynamics/image.ce +21 -0
  189. package/src/components/dynamics/parse-value.spec.ts +83 -0
  190. package/src/components/dynamics/parse-value.ts +111 -37
  191. package/src/components/dynamics/shape-utils.spec.ts +46 -0
  192. package/src/components/dynamics/shape-utils.ts +61 -0
  193. package/src/components/dynamics/shape.ce +90 -0
  194. package/src/components/dynamics/text.ce +35 -149
  195. package/src/components/gui/dialogbox/index.ce +18 -8
  196. package/src/components/gui/gameover.ce +2 -1
  197. package/src/components/gui/menu/equip-menu.ce +2 -1
  198. package/src/components/gui/menu/exit-menu.ce +2 -1
  199. package/src/components/gui/menu/items-menu.ce +3 -2
  200. package/src/components/gui/menu/main-menu.ce +2 -1
  201. package/src/components/gui/save-load.ce +2 -1
  202. package/src/components/gui/shop/shop.ce +3 -2
  203. package/src/components/gui/title-screen.ce +2 -1
  204. package/src/components/index.ts +2 -1
  205. package/src/components/player-components-utils.spec.ts +109 -0
  206. package/src/components/player-components-utils.ts +205 -0
  207. package/src/components/player-components.ce +222 -0
  208. package/src/components/prebuilt/hp-bar.ce +4 -3
  209. package/src/components/prebuilt/light-halo.ce +2 -2
  210. package/src/components/scenes/canvas.ce +175 -8
  211. package/src/components/scenes/draw-map.ce +18 -17
  212. package/src/components/scenes/event-layer.ce +1 -2
  213. package/src/core/setup.ts +2 -2
  214. package/src/decorators/spritesheet.ts +8 -0
  215. package/src/index.ts +4 -0
  216. package/src/module.ts +18 -1
  217. package/src/services/actionInput.spec.ts +101 -0
  218. package/src/services/actionInput.ts +53 -0
  219. package/src/services/loadMap.ts +2 -0
  220. package/src/services/mmorpg-connection.spec.ts +99 -0
  221. package/src/services/mmorpg-connection.ts +69 -0
  222. package/src/services/mmorpg.ts +68 -36
  223. package/src/services/pointerContext.spec.ts +36 -0
  224. package/src/services/pointerContext.ts +84 -0
  225. package/src/services/save.spec.ts +127 -0
  226. package/src/services/standalone-message.ts +7 -0
  227. package/src/services/standalone.spec.ts +34 -0
  228. package/src/services/standalone.ts +3 -2
  229. package/src/utils/getEntityProp.spec.ts +96 -0
  230. package/src/utils/getEntityProp.ts +4 -3
  231. package/src/utils/readPropValue.ts +16 -0
  232. package/dist/node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js.map +0 -1
  233. package/dist/node_modules/.pnpm/@signe_reactive@2.8.3/node_modules/@signe/reactive/dist/index.js +0 -457
  234. package/dist/node_modules/.pnpm/@signe_reactive@2.8.3/node_modules/@signe/reactive/dist/index.js.map +0 -1
  235. package/dist/node_modules/.pnpm/@signe_reactive@2.9.0/node_modules/@signe/reactive/dist/index.js +0 -463
  236. package/dist/node_modules/.pnpm/@signe_reactive@2.9.0/node_modules/@signe/reactive/dist/index.js.map +0 -1
  237. package/dist/node_modules/.pnpm/@signe_room@2.9.0/node_modules/@signe/room/dist/index.js +0 -2191
  238. package/dist/node_modules/.pnpm/@signe_room@2.9.0/node_modules/@signe/room/dist/index.js.map +0 -1
  239. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/chunk-7QVYU63E.js +0 -10
  240. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/chunk-7QVYU63E.js.map +0 -1
  241. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/client/index.js +0 -91
  242. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/client/index.js.map +0 -1
  243. package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/index.js.map +0 -1
  244. package/dist/node_modules/.pnpm/dset@3.1.4/node_modules/dset/dist/index.js +0 -14
  245. package/dist/node_modules/.pnpm/dset@3.1.4/node_modules/dset/dist/index.js.map +0 -1
@@ -0,0 +1,84 @@
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 sprite = object();
10
+ const read = (prop, fallback) => prop ? prop() : fallback;
11
+ const toNumber = (value, fallback = 0) => {
12
+ const resolved = resolveDynamicValue(value, sprite);
13
+ const num = typeof resolved === "number" ? resolved : parseFloat(resolved);
14
+ return Number.isFinite(num) ? num : fallback;
15
+ };
16
+ const toColor = (value, fallback) => {
17
+ const resolved = resolveDynamicValue(value, sprite);
18
+ if (typeof resolved === "number") return resolved;
19
+ if (typeof resolved === "string" && resolved.startsWith("#")) return parseInt(resolved.slice(1), 16);
20
+ return resolved ?? fallback;
21
+ };
22
+ const config = computed(() => ({
23
+ type: read(props.type, "rectangle"),
24
+ fill: toColor(read(props.fill, "#ffffff"), 16777215),
25
+ radius: toNumber(read(props.radius, 8), 8),
26
+ width: toNumber(read(props.width, 16), 16),
27
+ height: toNumber(read(props.height, 16), 16),
28
+ x1: toNumber(read(props.x1, 0), 0),
29
+ y1: toNumber(read(props.y1, 0), 0),
30
+ x2: toNumber(read(props.x2, 16), 16),
31
+ y2: toNumber(read(props.y2, 0), 0),
32
+ opacity: Math.max(0, Math.min(1, toNumber(read(props.opacity, 1), 1))),
33
+ points: read(props.points, []),
34
+ line: read(props.line, null)
35
+ }));
36
+ const shapeBox = computed(() => getShapeBox(config(), toNumber));
37
+ const shapeWidth = computed(() => shapeBox().width);
38
+ const shapeHeight = computed(() => shapeBox().height);
39
+ const drawShape = (g) => {
40
+ const cfg = config();
41
+ const box = shapeBox();
42
+ if (cfg.type === "circle") g.circle(cfg.radius, cfg.radius, cfg.radius);
43
+ else if (cfg.type === "ellipse") g.ellipse(box.width / 2, box.height / 2, box.width / 2, box.height / 2);
44
+ else if (cfg.type === "line") {
45
+ g.moveTo(cfg.x1 + box.offsetX, cfg.y1 + box.offsetY);
46
+ g.lineTo(cfg.x2 + box.offsetX, cfg.y2 + box.offsetY);
47
+ } else if (cfg.type === "polygon" && Array.isArray(cfg.points)) g.poly(translatePolygonPoints(cfg.points, box, toNumber));
48
+ else if (cfg.type === "rounded-rectangle") g.roundRect(0, 0, box.width, box.height, toNumber(read(props.radius, 4), 4));
49
+ else g.rect(0, 0, box.width, box.height);
50
+ if (cfg.type === "line") {
51
+ const line = cfg.line ?? {};
52
+ g.stroke({
53
+ color: toColor(line.color, cfg.fill),
54
+ width: toNumber(line.width, 1),
55
+ alpha: toNumber(line.alpha, cfg.opacity)
56
+ });
57
+ return;
58
+ }
59
+ g.fill({
60
+ color: cfg.fill,
61
+ alpha: cfg.opacity
62
+ });
63
+ if (cfg.line) g.stroke({
64
+ color: toColor(cfg.line.color, cfg.fill),
65
+ width: toNumber(cfg.line.width, 1),
66
+ alpha: toNumber(cfg.line.alpha, cfg.opacity)
67
+ });
68
+ };
69
+ return h(Container, {
70
+ width: shapeWidth,
71
+ height: shapeHeight,
72
+ minWidth: shapeWidth,
73
+ minHeight: shapeHeight
74
+ }, h(Graphics, {
75
+ width: shapeWidth,
76
+ height: shapeHeight,
77
+ draw: drawShape
78
+ }));
79
+ }
80
+ var __ce_component = component;
81
+ //#endregion
82
+ export { __ce_component as default };
83
+
84
+ //# 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;\nconst sprite = object();\n\nconst read = (prop, fallback) => prop ? prop() : fallback;\n\nconst toNumber = (value, fallback = 0) => {\n const resolved = resolveDynamicValue(value, sprite);\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, sprite);\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,51 @@
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 sprite = object();
8
+ const read = (prop, fallback) => prop ? prop() : fallback;
9
+ const parseNumericStyleValue = (value, object) => {
10
+ value = resolveDynamicValue(value, sprite);
11
+ if (value === void 0 || value === null) return void 0;
21
12
  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;
13
+ const num = parseFloat(value);
14
+ return isNaN(num) ? void 0 : num;
34
15
  };
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;
16
+ const getTextStyle = (style) => {
17
+ if (!style) return {};
18
+ const textStyle = {};
19
+ if (style.fontStyle !== void 0) textStyle.fontStyle = resolveDynamicValue(style.fontStyle, sprite);
20
+ if (style.fontWeight !== void 0) textStyle.fontWeight = resolveDynamicValue(style.fontWeight, sprite);
21
+ if (style.stroke !== void 0) textStyle.stroke = resolveDynamicValue(style.stroke, sprite);
55
22
  if (style.opacity !== void 0) {
56
- var opacityValue = parseNumericStyleValue(style.opacity, object);
23
+ const opacityValue = parseNumericStyleValue(style.opacity, object);
57
24
  if (opacityValue !== void 0) textStyle.opacity = opacityValue;
58
25
  }
59
26
  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;
27
+ if (style.align !== void 0) textStyle.align = resolveDynamicValue(style.align, sprite);
28
+ return textStyle;
64
29
  };
65
30
  return h(Text, {
66
- text: computed(() => parseDynamicValue(component.value, object)),
67
- ...getComponentStyle(component)
31
+ text: computed(() => String(resolveDynamicValue(read(value, ""), sprite) ?? "")),
32
+ color: computed(() => {
33
+ const currentStyle = read(style, {});
34
+ return currentStyle.fill !== void 0 ? resolveDynamicValue(currentStyle.fill, sprite) : void 0;
35
+ }),
36
+ size: computed(() => {
37
+ const currentStyle = read(style, {});
38
+ return currentStyle.fontSize !== void 0 ? parseNumericStyleValue(currentStyle.fontSize, object) : void 0;
39
+ }),
40
+ fontFamily: computed(() => {
41
+ const currentStyle = read(style, {});
42
+ return currentStyle.fontFamily !== void 0 ? resolveDynamicValue(currentStyle.fontFamily, sprite) : void 0;
43
+ }),
44
+ style: computed(() => getTextStyle(read(style, {})))
68
45
  });
69
46
  }
47
+ var __ce_component = component;
70
48
  //#endregion
71
- export { component as default };
49
+ export { __ce_component as default };
72
50
 
73
51
  //# 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":"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"}
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();\nconst sprite = object();\n\nconst read = (prop, fallback) => prop ? prop() : fallback;\n\nconst parseNumericStyleValue = (value, object) => {\n value = resolveDynamicValue(value, sprite);\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, sprite);\n }\n\n if (style.fontWeight !== undefined) {\n textStyle.fontWeight = resolveDynamicValue(style.fontWeight, sprite);\n }\n\n if (style.stroke !== undefined) {\n textStyle.stroke = resolveDynamicValue(style.stroke, sprite);\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, sprite);\n }\n\n return textStyle;\n};\n\nconst textValue = computed(() => String(resolveDynamicValue(read(value, ''), sprite) ?? ''));\nconst textColor = computed(() => {\n const currentStyle = read(style, {});\n return currentStyle.fill !== undefined ? resolveDynamicValue(currentStyle.fill, sprite) : 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, sprite) : undefined;\n});\nconst textStyle = computed(() => getTextStyle(read(style, {})));\n</script>\n"],"mappings":";;;AAOM,SAAS,UAAQ,SAAA;;kCAEK,eAAY,OAAA,EAAA;CAExC,MAAM,SAAA,OAAA;CACN,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,iBAAuB"}
@@ -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"}
@@ -1,4 +1,5 @@
1
1
  import { inject } from "../../../core/inject.js";
2
+ import { getKeyboardControlBind } from "../../../services/actionInput.js";
2
3
  import { RpgClientEngine } from "../../../RpgClientEngine.js";
3
4
  import { DOMContainer, DOMElement, DOMSprite, Navigation, computed, cond, createTabindexNavigator, effect, h, loop, mount, signal, useDefineProps, useProps } from "canvasengine";
4
5
  import { delay } from "@rpgjs/common";
@@ -6,45 +7,38 @@ import { delay } from "@rpgjs/common";
6
7
  function component($$props) {
7
8
  useProps($$props);
8
9
  const defineProps = useDefineProps($$props);
9
- var engine = inject(RpgClientEngine);
10
+ const engine = inject(RpgClientEngine);
10
11
  engine.scene.currentPlayer;
11
- var keyboardControls = engine.globalConfig.keyboardControls;
12
+ const keyboardControls = engine.globalConfig.keyboardControls;
12
13
  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);
14
+ const selectedItem = signal(0);
15
+ const { data, onFinish, onInteraction } = defineProps();
16
+ const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();
17
+ const fullWidth = computed(() => data().fullWidth || false);
18
+ const resolveProp = (value) => typeof value === "function" ? value() : value;
19
+ const speakerName = computed(() => {
20
+ const value = resolveProp(speaker);
25
21
  return value ? String(value) : "";
26
22
  });
27
- var dialogPosition = computed(function() {
28
- return resolveProp(position) || "bottom";
29
- });
30
- var isFullWidth = computed(function() {
31
- return resolveProp(fullWidth) !== false;
23
+ const dialogPosition = computed(() => resolveProp(position) || "bottom");
24
+ const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
25
+ const dialogFace = computed(() => resolveProp(face));
26
+ const hasFace = computed(() => {
27
+ const value = dialogFace();
28
+ return !!(value && value.id);
32
29
  });
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) {
30
+ const displayMessage = signal("");
31
+ const fullMessage = signal("");
32
+ const isTyping = signal(false);
33
+ let typewriterTimer = null;
34
+ mount((element) => {});
35
+ const startTypewriter = (text) => {
42
36
  if (typewriterTimer) clearInterval(typewriterTimer);
43
37
  displayMessage.set("");
44
38
  if (!text) return;
45
- var index = 0;
39
+ let index = 0;
46
40
  isTyping.set(true);
47
- typewriterTimer = setInterval(function() {
41
+ typewriterTimer = setInterval(() => {
48
42
  index += 1;
49
43
  displayMessage.set(text.slice(0, index));
50
44
  if (index >= text.length) {
@@ -54,14 +48,14 @@ function component($$props) {
54
48
  }
55
49
  }, 20);
56
50
  };
57
- var finishTyping = function() {
51
+ const finishTyping = () => {
58
52
  if (typewriterTimer) clearInterval(typewriterTimer);
59
53
  typewriterTimer = null;
60
54
  displayMessage.set(fullMessage());
61
55
  isTyping.set(false);
62
56
  };
63
- effect(function() {
64
- var text = resolveProp(message) || "";
57
+ effect(() => {
58
+ const text = resolveProp(message) || "";
65
59
  fullMessage.set(text);
66
60
  if (!(resolveProp(typewriterEffect) !== false)) {
67
61
  finishTyping();
@@ -69,15 +63,9 @@ function component($$props) {
69
63
  }
70
64
  startTypewriter(text);
71
65
  });
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");
66
+ const hasChoices = computed(() => choices.length > 0);
67
+ const showIndicator = computed(() => !hasChoices() && !isTyping());
68
+ const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, "wrap");
81
69
  function selectChoice(index) {
82
70
  return function() {
83
71
  selectedItem.set(index);
@@ -87,15 +75,15 @@ function component($$props) {
87
75
  function _onFinish(value) {
88
76
  if (onFinish) onFinish(value);
89
77
  }
90
- var onSelect = function(index) {
78
+ const onSelect = (index) => {
91
79
  _onFinish(index);
92
80
  };
93
- var controls = signal({
81
+ const controls = signal({
94
82
  up: {
95
83
  repeat: true,
96
84
  bind: keyboardControls.up,
97
85
  throttle: 150,
98
- keyDown: function() {
86
+ keyDown() {
99
87
  if (!hasChoices()) return;
100
88
  nav.next(-1);
101
89
  }
@@ -104,14 +92,14 @@ function component($$props) {
104
92
  repeat: true,
105
93
  bind: keyboardControls.down,
106
94
  throttle: 150,
107
- keyDown: function() {
95
+ keyDown() {
108
96
  if (!hasChoices()) return;
109
97
  nav.next(1);
110
98
  }
111
99
  },
112
100
  action: {
113
- bind: keyboardControls.action,
114
- keyDown: function() {
101
+ bind: getKeyboardControlBind(keyboardControls.action),
102
+ keyDown() {
115
103
  if (isTyping()) {
116
104
  finishTyping();
117
105
  return;
@@ -122,9 +110,9 @@ function component($$props) {
122
110
  },
123
111
  gamepad: { enabled: true }
124
112
  });
125
- var dialogControls = signal({ action: {
126
- bind: keyboardControls.action,
127
- keyDown: function() {
113
+ const dialogControls = signal({ action: {
114
+ bind: getKeyboardControlBind(keyboardControls.action),
115
+ keyDown() {
128
116
  if (isTyping()) {
129
117
  finishTyping();
130
118
  return;
@@ -133,15 +121,15 @@ function component($$props) {
133
121
  _onFinish();
134
122
  }
135
123
  } });
136
- var faceSheet = function(graphicId, animationName) {
124
+ const faceSheet = (faceValue) => {
137
125
  return {
138
- definition: engine.getSpriteSheet(graphicId),
139
- playing: animationName
126
+ definition: engine.getSpriteSheet(faceValue.id),
127
+ playing: faceValue.expression || "default"
140
128
  };
141
129
  };
142
- mount(function(element) {
143
- return function() {
144
- delay(function() {
130
+ mount((element) => {
131
+ return () => {
132
+ delay(() => {
145
133
  engine.stopProcessingInput = false;
146
134
  });
147
135
  };
@@ -165,7 +153,7 @@ function component($$props) {
165
153
  element: "div",
166
154
  attrs: { class: "rpg-ui-dialog-body" }
167
155
  }, [h(DOMElement, { element: "div" }, [
168
- cond(speakerName(), () => h(DOMElement, {
156
+ cond(computed(() => speakerName()), () => h(DOMElement, {
169
157
  element: "div",
170
158
  attrs: { class: "rpg-ui-dialog-speaker" },
171
159
  textContent: computed(() => speakerName())
@@ -175,7 +163,7 @@ function component($$props) {
175
163
  attrs: { class: "rpg-ui-dialog-content" },
176
164
  textContent: computed(() => displayMessage())
177
165
  }),
178
- cond(hasChoices(), () => h(Navigation, {
166
+ cond(computed(() => hasChoices()), () => h(Navigation, {
179
167
  tabindex: selectedItem,
180
168
  controls
181
169
  }, h(DOMElement, {
@@ -191,15 +179,21 @@ function component($$props) {
191
179
  },
192
180
  textContent: choice.text
193
181
  })))))
194
- ]), cond(hasFace(), () => h(DOMElement, {
182
+ ]), cond(computed(() => hasFace()), () => h(DOMElement, {
195
183
  element: "div",
196
184
  attrs: { class: "rpg-ui-dialog-face" }
197
- }, h(DOMSprite, { sheet: computed(() => faceSheet(face.id, face.expression)) })))]), cond(showIndicator, () => h(DOMElement, {
185
+ }, h(DOMSprite, {
186
+ sheet: computed(() => faceSheet(dialogFace())),
187
+ width: "100%",
188
+ height: "100%",
189
+ objectFit: "contain"
190
+ })))]), cond(showIndicator, () => h(DOMElement, {
198
191
  element: "div",
199
192
  attrs: { class: "rpg-ui-dialog-indicator" }
200
193
  }))])));
201
194
  }
195
+ var __ce_component = component;
202
196
  //#endregion
203
- export { component as default };
197
+ export { __ce_component as default };
204
198
 
205
199
  //# 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 import { getKeyboardControlBind } from \"../../../services/actionInput\";\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: getKeyboardControlBind(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: getKeyboardControlBind(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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"}