@rpgjs/client 5.0.0-beta.12 → 5.0.0-beta.14
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.
- package/CHANGELOG.md +18 -0
- package/dist/Game/Object.d.ts +2 -0
- package/dist/Game/Object.js +20 -6
- package/dist/Game/Object.js.map +1 -1
- package/dist/Gui/Gui.d.ts +3 -2
- package/dist/Gui/Gui.js +18 -6
- package/dist/Gui/Gui.js.map +1 -1
- package/dist/RpgClient.d.ts +21 -1
- package/dist/RpgClientEngine.d.ts +20 -2
- package/dist/RpgClientEngine.js +182 -17
- package/dist/RpgClientEngine.js.map +1 -1
- package/dist/components/character.ce.js +84 -9
- package/dist/components/character.ce.js.map +1 -1
- package/dist/components/gui/dialogbox/index.ce.js +27 -12
- package/dist/components/gui/dialogbox/index.ce.js.map +1 -1
- package/dist/components/gui/gameover.ce.js +4 -3
- package/dist/components/gui/gameover.ce.js.map +1 -1
- package/dist/components/gui/menu/equip-menu.ce.js +9 -8
- package/dist/components/gui/menu/equip-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/exit-menu.ce.js +7 -5
- package/dist/components/gui/menu/exit-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/items-menu.ce.js +8 -7
- package/dist/components/gui/menu/items-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/main-menu.ce.js +12 -11
- package/dist/components/gui/menu/main-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/options-menu.ce.js +7 -5
- package/dist/components/gui/menu/options-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/skills-menu.ce.js +4 -2
- package/dist/components/gui/menu/skills-menu.ce.js.map +1 -1
- package/dist/components/gui/notification/notification.ce.js +4 -1
- package/dist/components/gui/notification/notification.ce.js.map +1 -1
- package/dist/components/gui/save-load.ce.js +10 -9
- package/dist/components/gui/save-load.ce.js.map +1 -1
- package/dist/components/gui/shop/shop.ce.js +17 -16
- package/dist/components/gui/shop/shop.ce.js.map +1 -1
- package/dist/components/gui/title-screen.ce.js +4 -3
- package/dist/components/gui/title-screen.ce.js.map +1 -1
- package/dist/components/interaction-components.ce.js +20 -0
- package/dist/components/interaction-components.ce.js.map +1 -0
- package/dist/components/scenes/canvas.ce.js +66 -33
- package/dist/components/scenes/canvas.ce.js.map +1 -1
- package/dist/components/scenes/draw-map.ce.js +18 -13
- package/dist/components/scenes/draw-map.ce.js.map +1 -1
- package/dist/components/scenes/event-layer.ce.js +42 -3
- package/dist/components/scenes/event-layer.ce.js.map +1 -1
- package/dist/i18n.d.ts +55 -0
- package/dist/i18n.js +60 -0
- package/dist/i18n.js.map +1 -0
- package/dist/i18n.spec.d.ts +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +3 -1
- package/dist/module.js +23 -3
- package/dist/module.js.map +1 -1
- package/dist/services/interactions.d.ts +159 -0
- package/dist/services/interactions.js +460 -0
- package/dist/services/interactions.js.map +1 -0
- package/dist/services/interactions.spec.d.ts +1 -0
- package/dist/services/keyboardControls.d.ts +1 -0
- package/dist/services/keyboardControls.js +1 -0
- package/dist/services/keyboardControls.js.map +1 -1
- package/dist/services/loadMap.d.ts +3 -0
- package/dist/services/loadMap.js.map +1 -1
- package/package.json +4 -4
- package/src/Game/Object.spec.ts +14 -1
- package/src/Game/Object.ts +34 -10
- package/src/Gui/Gui.spec.ts +67 -0
- package/src/Gui/Gui.ts +24 -7
- package/src/RpgClient.ts +28 -1
- package/src/RpgClientEngine.ts +254 -29
- package/src/components/character.ce +92 -9
- package/src/components/gui/dialogbox/index.ce +35 -14
- package/src/components/gui/gameover.ce +4 -3
- package/src/components/gui/menu/equip-menu.ce +9 -8
- package/src/components/gui/menu/exit-menu.ce +4 -3
- package/src/components/gui/menu/items-menu.ce +8 -7
- package/src/components/gui/menu/main-menu.ce +12 -11
- package/src/components/gui/menu/options-menu.ce +4 -3
- package/src/components/gui/menu/skills-menu.ce +2 -1
- package/src/components/gui/notification/notification.ce +7 -1
- package/src/components/gui/save-load.ce +11 -10
- package/src/components/gui/shop/shop.ce +17 -16
- package/src/components/gui/title-screen.ce +4 -3
- package/src/components/interaction-components.ce +23 -0
- package/src/components/scenes/canvas.ce +68 -31
- package/src/components/scenes/draw-map.ce +16 -5
- package/src/components/scenes/event-layer.ce +54 -2
- package/src/i18n.spec.ts +39 -0
- package/src/i18n.ts +59 -0
- package/src/index.ts +2 -0
- package/src/module.ts +32 -10
- package/src/services/interactions.spec.ts +175 -0
- package/src/services/interactions.ts +722 -0
- package/src/services/keyboardControls.ts +2 -1
- package/src/services/loadMap.ts +3 -1
|
@@ -0,0 +1,460 @@
|
|
|
1
|
+
import { signal } from "canvasengine";
|
|
2
|
+
//#region src/services/interactions.ts
|
|
3
|
+
var DEFAULT_STATE = {
|
|
4
|
+
hovered: false,
|
|
5
|
+
pressed: false,
|
|
6
|
+
selected: false,
|
|
7
|
+
dragging: false,
|
|
8
|
+
data: {},
|
|
9
|
+
overlays: {}
|
|
10
|
+
};
|
|
11
|
+
function readValue(value) {
|
|
12
|
+
return typeof value === "function" ? value() : value;
|
|
13
|
+
}
|
|
14
|
+
function createBounds(value) {
|
|
15
|
+
const left = Number(value?.left ?? value?.x ?? 0);
|
|
16
|
+
const top = Number(value?.top ?? value?.y ?? 0);
|
|
17
|
+
const width = Number(value?.width ?? value?.w ?? 0);
|
|
18
|
+
const height = Number(value?.height ?? value?.h ?? 0);
|
|
19
|
+
const right = Number(value?.right ?? left + width);
|
|
20
|
+
const bottom = Number(value?.bottom ?? top + height);
|
|
21
|
+
const resolvedWidth = Number.isFinite(width) && width > 0 ? width : Math.max(0, right - left);
|
|
22
|
+
const resolvedHeight = Number.isFinite(height) && height > 0 ? height : Math.max(0, bottom - top);
|
|
23
|
+
return {
|
|
24
|
+
left,
|
|
25
|
+
top,
|
|
26
|
+
right,
|
|
27
|
+
bottom,
|
|
28
|
+
width: resolvedWidth,
|
|
29
|
+
height: resolvedHeight,
|
|
30
|
+
centerX: Number(value?.centerX ?? left + resolvedWidth / 2),
|
|
31
|
+
centerY: Number(value?.centerY ?? top + resolvedHeight / 2),
|
|
32
|
+
contains(point) {
|
|
33
|
+
if (!point) return false;
|
|
34
|
+
return point.x >= left && point.x <= right && point.y >= top && point.y <= bottom;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
function normalizeBounds(bounds) {
|
|
39
|
+
if (!bounds) return {};
|
|
40
|
+
return Object.entries(bounds).reduce((next, [key, value]) => {
|
|
41
|
+
if (value) next[key] = createBounds(value);
|
|
42
|
+
return next;
|
|
43
|
+
}, {});
|
|
44
|
+
}
|
|
45
|
+
function readNumber(value, fallback = 0) {
|
|
46
|
+
const resolved = readValue(value);
|
|
47
|
+
const number = Number(resolved);
|
|
48
|
+
return Number.isFinite(number) ? number : fallback;
|
|
49
|
+
}
|
|
50
|
+
function offsetBounds(bounds, x, y) {
|
|
51
|
+
return createBounds({
|
|
52
|
+
left: bounds.left + x,
|
|
53
|
+
top: bounds.top + y,
|
|
54
|
+
right: bounds.right + x,
|
|
55
|
+
bottom: bounds.bottom + y,
|
|
56
|
+
width: bounds.width,
|
|
57
|
+
height: bounds.height,
|
|
58
|
+
centerX: bounds.centerX + x,
|
|
59
|
+
centerY: bounds.centerY + y
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function toWorldBounds(sprite, bounds) {
|
|
63
|
+
const x = readNumber(sprite?.x);
|
|
64
|
+
const y = readNumber(sprite?.y);
|
|
65
|
+
return Object.entries(bounds).reduce((next, [key, value]) => {
|
|
66
|
+
if (value) next[key] = offsetBounds(value, x, y);
|
|
67
|
+
return next;
|
|
68
|
+
}, {});
|
|
69
|
+
}
|
|
70
|
+
function normalizeBehavior(behavior) {
|
|
71
|
+
if (typeof behavior === "function") return { component: behavior };
|
|
72
|
+
return behavior ?? {};
|
|
73
|
+
}
|
|
74
|
+
var RpgClientInteractions = class {
|
|
75
|
+
constructor(client) {
|
|
76
|
+
this.client = client;
|
|
77
|
+
this.registrations = signal([]);
|
|
78
|
+
this.states = signal({});
|
|
79
|
+
this.nextId = 0;
|
|
80
|
+
}
|
|
81
|
+
use(matcher, behavior) {
|
|
82
|
+
const registration = {
|
|
83
|
+
id: `interaction:${++this.nextId}`,
|
|
84
|
+
matcher,
|
|
85
|
+
behavior: normalizeBehavior(behavior)
|
|
86
|
+
};
|
|
87
|
+
this.registrations.update((registrations) => [...registrations, registration]);
|
|
88
|
+
return () => {
|
|
89
|
+
this.registrations.update((registrations) => registrations.filter((entry) => entry.id !== registration.id));
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
getState(sprite) {
|
|
93
|
+
const id = this.getSpriteId(sprite);
|
|
94
|
+
return {
|
|
95
|
+
...DEFAULT_STATE,
|
|
96
|
+
...id ? this.states()[id] : void 0,
|
|
97
|
+
data: id ? { ...this.states()[id]?.data ?? {} } : {},
|
|
98
|
+
overlays: id ? { ...this.states()[id]?.overlays ?? {} } : {}
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
getRenderedComponents(sprite, bounds) {
|
|
102
|
+
const normalizedBounds = normalizeBounds(bounds);
|
|
103
|
+
const matched = this.getMatches(sprite);
|
|
104
|
+
const state = this.getState(sprite);
|
|
105
|
+
const entries = [];
|
|
106
|
+
matched.forEach((registration) => {
|
|
107
|
+
if (!registration.behavior.component) return;
|
|
108
|
+
const ctx = this.createContext(sprite, registration, { bounds: normalizedBounds });
|
|
109
|
+
entries.push({
|
|
110
|
+
component: registration.behavior.component,
|
|
111
|
+
props: {
|
|
112
|
+
...this.defaultComponentProps(sprite, state, normalizedBounds),
|
|
113
|
+
...this.resolveProps(registration.behavior.props, ctx)
|
|
114
|
+
},
|
|
115
|
+
dependencies: this.resolveDependencies(registration.behavior.dependencies, ctx)
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
Object.entries(state.overlays).forEach(([id, overlay]) => {
|
|
119
|
+
entries.push({
|
|
120
|
+
component: overlay.component,
|
|
121
|
+
props: {
|
|
122
|
+
...this.defaultComponentProps(sprite, state, normalizedBounds),
|
|
123
|
+
...overlay.props ?? {},
|
|
124
|
+
overlayId: id
|
|
125
|
+
},
|
|
126
|
+
dependencies: []
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
return entries;
|
|
130
|
+
}
|
|
131
|
+
cursorFor(sprite, bounds) {
|
|
132
|
+
this.states();
|
|
133
|
+
for (const registration of this.getMatches(sprite)) {
|
|
134
|
+
const cursor = registration.behavior.cursor;
|
|
135
|
+
if (!cursor) continue;
|
|
136
|
+
const ctx = this.createContext(sprite, registration, { bounds: normalizeBounds(bounds) });
|
|
137
|
+
if (!this.passesHitTest(registration.behavior, ctx, "pointermove")) continue;
|
|
138
|
+
const resolved = typeof cursor === "function" ? cursor(ctx) : cursor;
|
|
139
|
+
if (resolved) return resolved;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
handle(sprite, type, input = {}) {
|
|
143
|
+
const matches = this.getMatches(sprite);
|
|
144
|
+
const bounds = normalizeBounds(input.bounds);
|
|
145
|
+
const entries = matches.map((registration) => ({
|
|
146
|
+
registration,
|
|
147
|
+
ctx: this.createContext(sprite, registration, {
|
|
148
|
+
event: input.event,
|
|
149
|
+
bounds
|
|
150
|
+
})
|
|
151
|
+
})).filter(({ registration, ctx }) => this.passesHitTest(registration.behavior, ctx, type));
|
|
152
|
+
if (type === "pointerover" || type === "pointerenter") {
|
|
153
|
+
if (entries.length > 0) this.patchState(sprite, { hovered: true });
|
|
154
|
+
}
|
|
155
|
+
if (type === "pointerout" || type === "pointerleave") {
|
|
156
|
+
if (matches.length > 0) this.patchState(sprite, {
|
|
157
|
+
hovered: false,
|
|
158
|
+
pressed: false
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
if (type === "pointerdown") {
|
|
162
|
+
if (entries.length > 0) this.patchState(sprite, { pressed: true });
|
|
163
|
+
}
|
|
164
|
+
if (type === "pointermove" && matches.length > 0) this.patchState(sprite, { hovered: entries.length > 0 });
|
|
165
|
+
if (type === "pointerup") {
|
|
166
|
+
if (matches.length > 0) this.patchState(sprite, { pressed: false });
|
|
167
|
+
}
|
|
168
|
+
entries.forEach(({ registration, ctx }) => {
|
|
169
|
+
this.callHandler(registration.behavior, type, ctx);
|
|
170
|
+
if (type === "pointerdown" && this.isDraggable(registration.behavior)) {
|
|
171
|
+
this.activeDrag = {
|
|
172
|
+
sprite,
|
|
173
|
+
behavior: registration.behavior,
|
|
174
|
+
behaviorId: registration.id,
|
|
175
|
+
bounds,
|
|
176
|
+
cancelled: false
|
|
177
|
+
};
|
|
178
|
+
this.patchState(sprite, { dragging: true });
|
|
179
|
+
this.callHandler(registration.behavior, "dragstart", ctx);
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
handlePointerMove(event) {
|
|
184
|
+
if (!this.activeDrag) return;
|
|
185
|
+
const drag = this.activeDrag;
|
|
186
|
+
const registration = {
|
|
187
|
+
id: drag.behaviorId,
|
|
188
|
+
matcher: "*",
|
|
189
|
+
behavior: drag.behavior
|
|
190
|
+
};
|
|
191
|
+
const ctx = this.createContext(drag.sprite, registration, {
|
|
192
|
+
event,
|
|
193
|
+
bounds: drag.bounds
|
|
194
|
+
});
|
|
195
|
+
this.callHandler(drag.behavior, "dragmove", ctx);
|
|
196
|
+
}
|
|
197
|
+
handlePointerUp(event) {
|
|
198
|
+
if (!this.activeDrag) return;
|
|
199
|
+
const drag = this.activeDrag;
|
|
200
|
+
this.activeDrag = void 0;
|
|
201
|
+
this.patchState(drag.sprite, {
|
|
202
|
+
dragging: false,
|
|
203
|
+
pressed: false
|
|
204
|
+
});
|
|
205
|
+
const registration = {
|
|
206
|
+
id: drag.behaviorId,
|
|
207
|
+
matcher: "*",
|
|
208
|
+
behavior: drag.behavior
|
|
209
|
+
};
|
|
210
|
+
const ctx = this.createContext(drag.sprite, registration, {
|
|
211
|
+
event,
|
|
212
|
+
bounds: drag.bounds
|
|
213
|
+
});
|
|
214
|
+
this.callHandler(drag.behavior, drag.cancelled ? "cancel" : "drop", ctx);
|
|
215
|
+
}
|
|
216
|
+
cancelDrag(event) {
|
|
217
|
+
if (!this.activeDrag) return;
|
|
218
|
+
this.activeDrag.cancelled = true;
|
|
219
|
+
this.handlePointerUp(event);
|
|
220
|
+
}
|
|
221
|
+
getMatches(sprite) {
|
|
222
|
+
return this.registrations().filter((registration) => this.matches(registration.matcher, sprite));
|
|
223
|
+
}
|
|
224
|
+
matches(matcher, sprite) {
|
|
225
|
+
if (typeof matcher === "function") return !!matcher({
|
|
226
|
+
client: this.client,
|
|
227
|
+
target: sprite,
|
|
228
|
+
sprite
|
|
229
|
+
});
|
|
230
|
+
if (matcher === "*") return true;
|
|
231
|
+
return [
|
|
232
|
+
readValue(sprite?.id),
|
|
233
|
+
readValue(sprite?.name),
|
|
234
|
+
readValue(sprite?._name),
|
|
235
|
+
readValue(sprite?.type),
|
|
236
|
+
readValue(sprite?._type),
|
|
237
|
+
sprite?.constructor?.name
|
|
238
|
+
].filter(Boolean).includes(matcher);
|
|
239
|
+
}
|
|
240
|
+
createContext(sprite, registration, input = {}) {
|
|
241
|
+
const bounds = toWorldBounds(sprite, normalizeBounds(input.bounds));
|
|
242
|
+
return {
|
|
243
|
+
client: this.client,
|
|
244
|
+
target: sprite,
|
|
245
|
+
sprite,
|
|
246
|
+
event: input.event,
|
|
247
|
+
behavior: registration.behavior,
|
|
248
|
+
behaviorId: registration.id,
|
|
249
|
+
pointer: {
|
|
250
|
+
screen: () => this.client.pointer.screen(),
|
|
251
|
+
world: () => this.client.pointer.world(),
|
|
252
|
+
tile: () => this.getPointerTile()
|
|
253
|
+
},
|
|
254
|
+
bounds: (kind = "bounds") => bounds[kind] ?? bounds.graphic ?? bounds.hitbox ?? bounds.bounds ?? createBounds({}),
|
|
255
|
+
state: {
|
|
256
|
+
value: () => this.getState(sprite),
|
|
257
|
+
get: (key) => this.getState(sprite).data[key],
|
|
258
|
+
set: (key, value) => this.patchStateData(sprite, { [key]: value }),
|
|
259
|
+
patch: (patch) => this.patchState(sprite, patch)
|
|
260
|
+
},
|
|
261
|
+
overlay: {
|
|
262
|
+
render: (component, props) => this.patchOverlay(sprite, registration.id, {
|
|
263
|
+
component,
|
|
264
|
+
props
|
|
265
|
+
}),
|
|
266
|
+
update: (props) => this.updateOverlay(sprite, registration.id, props),
|
|
267
|
+
clear: () => this.clearOverlay(sprite, registration.id)
|
|
268
|
+
},
|
|
269
|
+
select: (selected = true) => this.patchState(sprite, { selected }),
|
|
270
|
+
action: (action, data) => this.client.processAction(action, data),
|
|
271
|
+
cancel: () => {
|
|
272
|
+
const activeDrag = this.activeDrag;
|
|
273
|
+
if (activeDrag && activeDrag.sprite === sprite) activeDrag.cancelled = true;
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
}
|
|
277
|
+
callHandler(behavior, type, ctx) {
|
|
278
|
+
const handler = behavior[type];
|
|
279
|
+
handler?.(ctx);
|
|
280
|
+
if (type === "pointerover") behavior.pointerenter?.(ctx);
|
|
281
|
+
if (type === "pointerout") behavior.pointerleave?.(ctx);
|
|
282
|
+
}
|
|
283
|
+
passesHitTest(behavior, ctx, type) {
|
|
284
|
+
if (!behavior.hitTest) return true;
|
|
285
|
+
if (type === "pointerout" || type === "pointerleave" || type === "cancel" || type === "drop") return true;
|
|
286
|
+
return behavior.hitTest(ctx);
|
|
287
|
+
}
|
|
288
|
+
isDraggable(behavior) {
|
|
289
|
+
return !!(behavior.dragstart || behavior.dragmove || behavior.drop || behavior.cancel);
|
|
290
|
+
}
|
|
291
|
+
defaultComponentProps(sprite, state, bounds) {
|
|
292
|
+
return {
|
|
293
|
+
target: sprite,
|
|
294
|
+
sprite,
|
|
295
|
+
state,
|
|
296
|
+
bounds: bounds.bounds ?? bounds.graphic ?? bounds.hitbox ?? createBounds({}),
|
|
297
|
+
hitboxBounds: bounds.hitbox,
|
|
298
|
+
graphicBounds: bounds.graphic,
|
|
299
|
+
pointer: this.client.pointer,
|
|
300
|
+
client: this.client
|
|
301
|
+
};
|
|
302
|
+
}
|
|
303
|
+
resolveProps(props, ctx) {
|
|
304
|
+
if (!props) return {};
|
|
305
|
+
return typeof props === "function" ? props(ctx) : props;
|
|
306
|
+
}
|
|
307
|
+
resolveDependencies(dependencies, ctx) {
|
|
308
|
+
if (!dependencies) return [];
|
|
309
|
+
return typeof dependencies === "function" ? dependencies(ctx) : dependencies;
|
|
310
|
+
}
|
|
311
|
+
getSpriteId(sprite) {
|
|
312
|
+
const id = readValue(sprite?.id);
|
|
313
|
+
return id == null ? void 0 : String(id);
|
|
314
|
+
}
|
|
315
|
+
patchState(sprite, patch) {
|
|
316
|
+
const id = this.getSpriteId(sprite);
|
|
317
|
+
if (!id) return;
|
|
318
|
+
this.states.update((states) => ({
|
|
319
|
+
...states,
|
|
320
|
+
[id]: {
|
|
321
|
+
...DEFAULT_STATE,
|
|
322
|
+
...states[id] ?? {},
|
|
323
|
+
...patch,
|
|
324
|
+
data: states[id]?.data ?? {},
|
|
325
|
+
overlays: states[id]?.overlays ?? {}
|
|
326
|
+
}
|
|
327
|
+
}));
|
|
328
|
+
}
|
|
329
|
+
patchStateData(sprite, patch) {
|
|
330
|
+
const id = this.getSpriteId(sprite);
|
|
331
|
+
if (!id) return;
|
|
332
|
+
const current = this.getState(sprite);
|
|
333
|
+
this.states.update((states) => ({
|
|
334
|
+
...states,
|
|
335
|
+
[id]: {
|
|
336
|
+
...current,
|
|
337
|
+
data: {
|
|
338
|
+
...current.data,
|
|
339
|
+
...patch
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
}));
|
|
343
|
+
}
|
|
344
|
+
patchOverlay(sprite, id, overlay) {
|
|
345
|
+
const spriteId = this.getSpriteId(sprite);
|
|
346
|
+
if (!spriteId) return;
|
|
347
|
+
const current = this.getState(sprite);
|
|
348
|
+
this.states.update((states) => ({
|
|
349
|
+
...states,
|
|
350
|
+
[spriteId]: {
|
|
351
|
+
...current,
|
|
352
|
+
overlays: {
|
|
353
|
+
...current.overlays,
|
|
354
|
+
[id]: overlay
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
}));
|
|
358
|
+
}
|
|
359
|
+
updateOverlay(sprite, id, props) {
|
|
360
|
+
const overlay = this.getState(sprite).overlays[id];
|
|
361
|
+
if (!overlay) return;
|
|
362
|
+
this.patchOverlay(sprite, id, {
|
|
363
|
+
...overlay,
|
|
364
|
+
props: {
|
|
365
|
+
...overlay.props ?? {},
|
|
366
|
+
...props ?? {}
|
|
367
|
+
}
|
|
368
|
+
});
|
|
369
|
+
}
|
|
370
|
+
clearOverlay(sprite, id) {
|
|
371
|
+
const spriteId = this.getSpriteId(sprite);
|
|
372
|
+
if (!spriteId) return;
|
|
373
|
+
const current = this.getState(sprite);
|
|
374
|
+
const { [id]: _removed, ...overlays } = current.overlays;
|
|
375
|
+
this.states.update((states) => ({
|
|
376
|
+
...states,
|
|
377
|
+
[spriteId]: {
|
|
378
|
+
...current,
|
|
379
|
+
overlays
|
|
380
|
+
}
|
|
381
|
+
}));
|
|
382
|
+
}
|
|
383
|
+
getPointerTile() {
|
|
384
|
+
const world = this.client.pointer.world();
|
|
385
|
+
if (!world) return null;
|
|
386
|
+
const map = this.client.sceneMap;
|
|
387
|
+
const width = Number(map?.tileWidth ?? 32);
|
|
388
|
+
const height = Number(map?.tileHeight ?? 32);
|
|
389
|
+
const tileX = Math.floor(world.x / width);
|
|
390
|
+
const tileY = Math.floor(world.y / height);
|
|
391
|
+
return {
|
|
392
|
+
x: tileX,
|
|
393
|
+
y: tileY,
|
|
394
|
+
worldX: tileX * width,
|
|
395
|
+
worldY: tileY * height,
|
|
396
|
+
width,
|
|
397
|
+
height
|
|
398
|
+
};
|
|
399
|
+
}
|
|
400
|
+
};
|
|
401
|
+
function hoverPopover(component, props) {
|
|
402
|
+
return {
|
|
403
|
+
component,
|
|
404
|
+
props,
|
|
405
|
+
cursor: "pointer"
|
|
406
|
+
};
|
|
407
|
+
}
|
|
408
|
+
function selectable(options = {}) {
|
|
409
|
+
return {
|
|
410
|
+
cursor: options.cursor ?? "pointer",
|
|
411
|
+
click(ctx) {
|
|
412
|
+
ctx.select();
|
|
413
|
+
options.onSelect?.(ctx);
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
}
|
|
417
|
+
function draggable(options = {}) {
|
|
418
|
+
return {
|
|
419
|
+
cursor: options.cursor ?? "grab",
|
|
420
|
+
dragstart(ctx) {
|
|
421
|
+
ctx.state.patch({ dragging: true });
|
|
422
|
+
options.start?.(ctx);
|
|
423
|
+
},
|
|
424
|
+
dragmove: options.move,
|
|
425
|
+
drop(ctx) {
|
|
426
|
+
ctx.state.patch({
|
|
427
|
+
dragging: false,
|
|
428
|
+
pressed: false
|
|
429
|
+
});
|
|
430
|
+
options.drop?.(ctx);
|
|
431
|
+
},
|
|
432
|
+
cancel(ctx) {
|
|
433
|
+
ctx.state.patch({
|
|
434
|
+
dragging: false,
|
|
435
|
+
pressed: false
|
|
436
|
+
});
|
|
437
|
+
options.cancel?.(ctx);
|
|
438
|
+
}
|
|
439
|
+
};
|
|
440
|
+
}
|
|
441
|
+
function dragToTile(options) {
|
|
442
|
+
return draggable({
|
|
443
|
+
cursor: options.cursor,
|
|
444
|
+
drop(ctx) {
|
|
445
|
+
if (options.onDrop) {
|
|
446
|
+
options.onDrop(ctx);
|
|
447
|
+
return;
|
|
448
|
+
}
|
|
449
|
+
if (!options.action) return;
|
|
450
|
+
ctx.action(options.action, options.data ? options.data(ctx) : {
|
|
451
|
+
eventId: ctx.target.id,
|
|
452
|
+
position: ctx.pointer.tile()
|
|
453
|
+
});
|
|
454
|
+
}
|
|
455
|
+
});
|
|
456
|
+
}
|
|
457
|
+
//#endregion
|
|
458
|
+
export { RpgClientInteractions, dragToTile, draggable, hoverPopover, selectable };
|
|
459
|
+
|
|
460
|
+
//# sourceMappingURL=interactions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interactions.js","names":[],"sources":["../../src/services/interactions.ts"],"sourcesContent":["import { signal } from \"canvasengine\";\nimport type { RpgActionInput, RpgActionName } from \"@rpgjs/common\";\nimport type { RpgClientEngine } from \"../RpgClientEngine\";\n\nexport type RpgInteractionEventName =\n | \"pointerenter\"\n | \"pointerleave\"\n | \"pointerover\"\n | \"pointerout\"\n | \"pointerdown\"\n | \"pointerup\"\n | \"pointermove\"\n | \"click\"\n | \"dragstart\"\n | \"dragmove\"\n | \"drop\"\n | \"cancel\";\n\nexport type RpgInteractionPosition = {\n x: number;\n y: number;\n};\n\nexport type RpgInteractionBounds = {\n left: number;\n top: number;\n right: number;\n bottom: number;\n width: number;\n height: number;\n centerX: number;\n centerY: number;\n contains(point: RpgInteractionPosition | null | undefined): boolean;\n};\n\nexport type RpgInteractionBoundsSet = {\n bounds?: RpgInteractionBounds;\n hitbox?: RpgInteractionBounds;\n graphic?: RpgInteractionBounds;\n [key: string]: RpgInteractionBounds | undefined;\n};\n\nexport type RpgInteractionTile = {\n x: number;\n y: number;\n worldX: number;\n worldY: number;\n width: number;\n height: number;\n};\n\nexport type RpgInteractionState = {\n hovered: boolean;\n pressed: boolean;\n selected: boolean;\n dragging: boolean;\n data: Record<string, any>;\n overlays: Record<string, RpgInteractionOverlay>;\n};\n\nexport type RpgInteractionOverlay = {\n component: any;\n props?: Record<string, any>;\n};\n\nexport type RpgInteractionMatcher =\n | string\n | ((ctx: RpgInteractionMatcherContext) => boolean);\n\nexport type RpgInteractionMatcherContext = {\n client: RpgClientEngine;\n target: any;\n sprite: any;\n};\n\nexport type RpgInteractionHandler = (ctx: RpgInteractionContext) => void;\n\nexport type RpgInteractionBehavior = {\n component?: any;\n props?: Record<string, any> | ((ctx: RpgInteractionContext) => Record<string, any>);\n dependencies?: any[] | ((ctx: RpgInteractionContext) => any[]);\n cursor?: string | ((ctx: RpgInteractionContext) => string | undefined);\n hitTest?: (ctx: RpgInteractionContext) => boolean;\n pointerenter?: RpgInteractionHandler;\n pointerleave?: RpgInteractionHandler;\n pointerover?: RpgInteractionHandler;\n pointerout?: RpgInteractionHandler;\n pointerdown?: RpgInteractionHandler;\n pointerup?: RpgInteractionHandler;\n pointermove?: RpgInteractionHandler;\n click?: RpgInteractionHandler;\n dragstart?: RpgInteractionHandler;\n dragmove?: RpgInteractionHandler;\n drop?: RpgInteractionHandler;\n cancel?: RpgInteractionHandler;\n};\n\nexport type RpgInteractionComponentEntry = {\n component: any;\n props: Record<string, any>;\n dependencies: any[];\n};\n\nexport type RpgInteractionContext = {\n client: RpgClientEngine;\n target: any;\n sprite: any;\n event?: any;\n behavior: RpgInteractionBehavior;\n behaviorId: string;\n pointer: {\n screen(): RpgInteractionPosition | null;\n world(): RpgInteractionPosition | null;\n tile(): RpgInteractionTile | null;\n };\n bounds(kind?: string): RpgInteractionBounds;\n state: {\n value(): RpgInteractionState;\n get<T = any>(key: string): T | undefined;\n set(key: string, value: any): void;\n patch(patch: Partial<Omit<RpgInteractionState, \"data\" | \"overlays\">>): void;\n };\n overlay: {\n render(component: any, props?: Record<string, any>): void;\n update(props?: Record<string, any>): void;\n clear(): void;\n };\n select(selected?: boolean): void;\n action(action: RpgActionName, data?: any): void;\n action(input: RpgActionInput): void;\n cancel(): void;\n};\n\ntype InteractionRegistration = {\n id: string;\n matcher: RpgInteractionMatcher;\n behavior: RpgInteractionBehavior;\n};\n\ntype InteractionEventInput = {\n event?: any;\n bounds?: RpgInteractionBoundsSet;\n};\n\ntype ActiveDrag = {\n sprite: any;\n behavior: RpgInteractionBehavior;\n behaviorId: string;\n bounds?: RpgInteractionBoundsSet;\n cancelled: boolean;\n};\n\nconst DEFAULT_STATE: RpgInteractionState = {\n hovered: false,\n pressed: false,\n selected: false,\n dragging: false,\n data: {},\n overlays: {},\n};\n\nfunction readValue(value: any): any {\n return typeof value === \"function\" ? value() : value;\n}\n\nfunction createBounds(value: any): RpgInteractionBounds {\n const left = Number(value?.left ?? value?.x ?? 0);\n const top = Number(value?.top ?? value?.y ?? 0);\n const width = Number(value?.width ?? value?.w ?? 0);\n const height = Number(value?.height ?? value?.h ?? 0);\n const right = Number(value?.right ?? left + width);\n const bottom = Number(value?.bottom ?? top + height);\n const resolvedWidth = Number.isFinite(width) && width > 0 ? width : Math.max(0, right - left);\n const resolvedHeight = Number.isFinite(height) && height > 0 ? height : Math.max(0, bottom - top);\n\n return {\n left,\n top,\n right,\n bottom,\n width: resolvedWidth,\n height: resolvedHeight,\n centerX: Number(value?.centerX ?? left + resolvedWidth / 2),\n centerY: Number(value?.centerY ?? top + resolvedHeight / 2),\n contains(point) {\n if (!point) return false;\n return point.x >= left && point.x <= right && point.y >= top && point.y <= bottom;\n },\n };\n}\n\nfunction normalizeBounds(bounds?: RpgInteractionBoundsSet): RpgInteractionBoundsSet {\n if (!bounds) return {};\n\n return Object.entries(bounds).reduce<RpgInteractionBoundsSet>((next, [key, value]) => {\n if (value) next[key] = createBounds(value);\n return next;\n }, {});\n}\n\nfunction readNumber(value: any, fallback = 0): number {\n const resolved = readValue(value);\n const number = Number(resolved);\n return Number.isFinite(number) ? number : fallback;\n}\n\nfunction offsetBounds(bounds: RpgInteractionBounds, x: number, y: number): RpgInteractionBounds {\n return createBounds({\n left: bounds.left + x,\n top: bounds.top + y,\n right: bounds.right + x,\n bottom: bounds.bottom + y,\n width: bounds.width,\n height: bounds.height,\n centerX: bounds.centerX + x,\n centerY: bounds.centerY + y,\n });\n}\n\nfunction toWorldBounds(sprite: any, bounds: RpgInteractionBoundsSet): RpgInteractionBoundsSet {\n const x = readNumber(sprite?.x);\n const y = readNumber(sprite?.y);\n\n return Object.entries(bounds).reduce<RpgInteractionBoundsSet>((next, [key, value]) => {\n if (value) next[key] = offsetBounds(value, x, y);\n return next;\n }, {});\n}\n\nfunction normalizeBehavior(behavior: RpgInteractionBehavior | any): RpgInteractionBehavior {\n if (typeof behavior === \"function\") {\n return { component: behavior };\n }\n return behavior ?? {};\n}\n\nexport class RpgClientInteractions {\n private registrations = signal<InteractionRegistration[]>([]);\n private states = signal<Record<string, RpgInteractionState>>({});\n private activeDrag?: ActiveDrag;\n private nextId = 0;\n\n constructor(private client: RpgClientEngine) {}\n\n use(matcher: RpgInteractionMatcher, behavior: RpgInteractionBehavior | any): () => void {\n const registration = {\n id: `interaction:${++this.nextId}`,\n matcher,\n behavior: normalizeBehavior(behavior),\n };\n\n this.registrations.update((registrations) => [...registrations, registration]);\n\n return () => {\n this.registrations.update((registrations) =>\n registrations.filter((entry) => entry.id !== registration.id)\n );\n };\n }\n\n getState(sprite: any): RpgInteractionState {\n const id = this.getSpriteId(sprite);\n return {\n ...DEFAULT_STATE,\n ...(id ? this.states()[id] : undefined),\n data: id ? { ...(this.states()[id]?.data ?? {}) } : {},\n overlays: id ? { ...(this.states()[id]?.overlays ?? {}) } : {},\n };\n }\n\n getRenderedComponents(sprite: any, bounds?: RpgInteractionBoundsSet): RpgInteractionComponentEntry[] {\n const normalizedBounds = normalizeBounds(bounds);\n const matched = this.getMatches(sprite);\n const state = this.getState(sprite);\n const entries: RpgInteractionComponentEntry[] = [];\n\n matched.forEach((registration) => {\n if (!registration.behavior.component) return;\n const ctx = this.createContext(sprite, registration, { bounds: normalizedBounds });\n entries.push({\n component: registration.behavior.component,\n props: {\n ...this.defaultComponentProps(sprite, state, normalizedBounds),\n ...this.resolveProps(registration.behavior.props, ctx),\n },\n dependencies: this.resolveDependencies(registration.behavior.dependencies, ctx),\n });\n });\n\n Object.entries(state.overlays).forEach(([id, overlay]) => {\n entries.push({\n component: overlay.component,\n props: {\n ...this.defaultComponentProps(sprite, state, normalizedBounds),\n ...(overlay.props ?? {}),\n overlayId: id,\n },\n dependencies: [],\n });\n });\n\n return entries;\n }\n\n cursorFor(sprite: any, bounds?: RpgInteractionBoundsSet): string | undefined {\n this.states();\n for (const registration of this.getMatches(sprite)) {\n const cursor = registration.behavior.cursor;\n if (!cursor) continue;\n const ctx = this.createContext(sprite, registration, { bounds: normalizeBounds(bounds) });\n if (!this.passesHitTest(registration.behavior, ctx, \"pointermove\")) continue;\n const resolved = typeof cursor === \"function\" ? cursor(ctx) : cursor;\n if (resolved) return resolved;\n }\n return undefined;\n }\n\n handle(sprite: any, type: RpgInteractionEventName, input: InteractionEventInput = {}): void {\n const matches = this.getMatches(sprite);\n const bounds = normalizeBounds(input.bounds);\n const entries = matches\n .map((registration) => ({\n registration,\n ctx: this.createContext(sprite, registration, {\n event: input.event,\n bounds,\n }),\n }))\n .filter(({ registration, ctx }) =>\n this.passesHitTest(registration.behavior, ctx, type)\n );\n\n if (type === \"pointerover\" || type === \"pointerenter\") {\n if (entries.length > 0) {\n this.patchState(sprite, { hovered: true });\n }\n }\n if (type === \"pointerout\" || type === \"pointerleave\") {\n if (matches.length > 0) {\n this.patchState(sprite, { hovered: false, pressed: false });\n }\n }\n if (type === \"pointerdown\") {\n if (entries.length > 0) {\n this.patchState(sprite, { pressed: true });\n }\n }\n if (type === \"pointermove\" && matches.length > 0) {\n this.patchState(sprite, { hovered: entries.length > 0 });\n }\n if (type === \"pointerup\") {\n if (matches.length > 0) {\n this.patchState(sprite, { pressed: false });\n }\n }\n\n entries.forEach(({ registration, ctx }) => {\n this.callHandler(registration.behavior, type, ctx);\n\n if (type === \"pointerdown\" && this.isDraggable(registration.behavior)) {\n this.activeDrag = {\n sprite,\n behavior: registration.behavior,\n behaviorId: registration.id,\n bounds,\n cancelled: false,\n };\n this.patchState(sprite, { dragging: true });\n this.callHandler(registration.behavior, \"dragstart\", ctx);\n }\n });\n }\n\n handlePointerMove(event?: any): void {\n if (!this.activeDrag) return;\n const drag = this.activeDrag;\n const registration = {\n id: drag.behaviorId,\n matcher: \"*\",\n behavior: drag.behavior,\n };\n const ctx = this.createContext(drag.sprite, registration, {\n event,\n bounds: drag.bounds,\n });\n this.callHandler(drag.behavior, \"dragmove\", ctx);\n }\n\n handlePointerUp(event?: any): void {\n if (!this.activeDrag) return;\n const drag = this.activeDrag;\n this.activeDrag = undefined;\n this.patchState(drag.sprite, { dragging: false, pressed: false });\n\n const registration = {\n id: drag.behaviorId,\n matcher: \"*\",\n behavior: drag.behavior,\n };\n const ctx = this.createContext(drag.sprite, registration, {\n event,\n bounds: drag.bounds,\n });\n\n this.callHandler(drag.behavior, drag.cancelled ? \"cancel\" : \"drop\", ctx);\n }\n\n cancelDrag(event?: any): void {\n if (!this.activeDrag) return;\n this.activeDrag.cancelled = true;\n this.handlePointerUp(event);\n }\n\n private getMatches(sprite: any): InteractionRegistration[] {\n return this.registrations().filter((registration) =>\n this.matches(registration.matcher, sprite)\n );\n }\n\n private matches(matcher: RpgInteractionMatcher, sprite: any): boolean {\n if (typeof matcher === \"function\") {\n return !!matcher({ client: this.client, target: sprite, sprite });\n }\n\n if (matcher === \"*\") return true;\n\n const candidates = [\n readValue(sprite?.id),\n readValue(sprite?.name),\n readValue(sprite?._name),\n readValue(sprite?.type),\n readValue(sprite?._type),\n sprite?.constructor?.name,\n ].filter(Boolean);\n\n return candidates.includes(matcher);\n }\n\n private createContext(\n sprite: any,\n registration: Pick<InteractionRegistration, \"id\" | \"behavior\">,\n input: InteractionEventInput = {},\n ): RpgInteractionContext {\n const bounds = toWorldBounds(sprite, normalizeBounds(input.bounds));\n\n const ctx = {\n client: this.client,\n target: sprite,\n sprite,\n event: input.event,\n behavior: registration.behavior,\n behaviorId: registration.id,\n pointer: {\n screen: () => this.client.pointer.screen(),\n world: () => this.client.pointer.world(),\n tile: () => this.getPointerTile(),\n },\n bounds: (kind = \"bounds\") =>\n bounds[kind] ?? bounds.graphic ?? bounds.hitbox ?? bounds.bounds ?? createBounds({}),\n state: {\n value: () => this.getState(sprite),\n get: <T = any>(key: string) => this.getState(sprite).data[key] as T | undefined,\n set: (key: string, value: any) => this.patchStateData(sprite, { [key]: value }),\n patch: (patch: Partial<Omit<RpgInteractionState, \"data\" | \"overlays\">>) =>\n this.patchState(sprite, patch),\n },\n overlay: {\n render: (component: any, props?: Record<string, any>) =>\n this.patchOverlay(sprite, registration.id, { component, props }),\n update: (props?: Record<string, any>) =>\n this.updateOverlay(sprite, registration.id, props),\n clear: () => this.clearOverlay(sprite, registration.id),\n },\n select: (selected = true) => this.patchState(sprite, { selected }),\n action: (action: RpgActionName | RpgActionInput, data?: any) =>\n this.client.processAction(action as any, data),\n cancel: () => {\n const activeDrag = this.activeDrag;\n if (activeDrag && activeDrag.sprite === sprite) {\n activeDrag.cancelled = true;\n }\n },\n };\n\n return ctx;\n }\n\n private callHandler(\n behavior: RpgInteractionBehavior,\n type: RpgInteractionEventName,\n ctx: RpgInteractionContext,\n ): void {\n const handler = behavior[type];\n handler?.(ctx);\n\n if (type === \"pointerover\") {\n behavior.pointerenter?.(ctx);\n }\n if (type === \"pointerout\") {\n behavior.pointerleave?.(ctx);\n }\n }\n\n private passesHitTest(\n behavior: RpgInteractionBehavior,\n ctx: RpgInteractionContext,\n type: RpgInteractionEventName,\n ): boolean {\n if (!behavior.hitTest) return true;\n if (type === \"pointerout\" || type === \"pointerleave\" || type === \"cancel\" || type === \"drop\") {\n return true;\n }\n return behavior.hitTest(ctx);\n }\n\n private isDraggable(behavior: RpgInteractionBehavior): boolean {\n return !!(behavior.dragstart || behavior.dragmove || behavior.drop || behavior.cancel);\n }\n\n private defaultComponentProps(\n sprite: any,\n state: RpgInteractionState,\n bounds: RpgInteractionBoundsSet,\n ): Record<string, any> {\n return {\n target: sprite,\n sprite,\n state,\n bounds: bounds.bounds ?? bounds.graphic ?? bounds.hitbox ?? createBounds({}),\n hitboxBounds: bounds.hitbox,\n graphicBounds: bounds.graphic,\n pointer: this.client.pointer,\n client: this.client,\n };\n }\n\n private resolveProps(\n props: RpgInteractionBehavior[\"props\"],\n ctx: RpgInteractionContext,\n ): Record<string, any> {\n if (!props) return {};\n return typeof props === \"function\" ? props(ctx) : props;\n }\n\n private resolveDependencies(\n dependencies: RpgInteractionBehavior[\"dependencies\"],\n ctx: RpgInteractionContext,\n ): any[] {\n if (!dependencies) return [];\n return typeof dependencies === \"function\" ? dependencies(ctx) : dependencies;\n }\n\n private getSpriteId(sprite: any): string | undefined {\n const id = readValue(sprite?.id);\n return id == null ? undefined : String(id);\n }\n\n private patchState(\n sprite: any,\n patch: Partial<Omit<RpgInteractionState, \"data\" | \"overlays\">>,\n ): void {\n const id = this.getSpriteId(sprite);\n if (!id) return;\n this.states.update((states) => ({\n ...states,\n [id]: {\n ...DEFAULT_STATE,\n ...(states[id] ?? {}),\n ...patch,\n data: states[id]?.data ?? {},\n overlays: states[id]?.overlays ?? {},\n },\n }));\n }\n\n private patchStateData(sprite: any, patch: Record<string, any>): void {\n const id = this.getSpriteId(sprite);\n if (!id) return;\n const current = this.getState(sprite);\n this.states.update((states) => ({\n ...states,\n [id]: {\n ...current,\n data: {\n ...current.data,\n ...patch,\n },\n },\n }));\n }\n\n private patchOverlay(sprite: any, id: string, overlay: RpgInteractionOverlay): void {\n const spriteId = this.getSpriteId(sprite);\n if (!spriteId) return;\n const current = this.getState(sprite);\n this.states.update((states) => ({\n ...states,\n [spriteId]: {\n ...current,\n overlays: {\n ...current.overlays,\n [id]: overlay,\n },\n },\n }));\n }\n\n private updateOverlay(sprite: any, id: string, props?: Record<string, any>): void {\n const current = this.getState(sprite);\n const overlay = current.overlays[id];\n if (!overlay) return;\n this.patchOverlay(sprite, id, {\n ...overlay,\n props: {\n ...(overlay.props ?? {}),\n ...(props ?? {}),\n },\n });\n }\n\n private clearOverlay(sprite: any, id: string): void {\n const spriteId = this.getSpriteId(sprite);\n if (!spriteId) return;\n const current = this.getState(sprite);\n const { [id]: _removed, ...overlays } = current.overlays;\n this.states.update((states) => ({\n ...states,\n [spriteId]: {\n ...current,\n overlays,\n },\n }));\n }\n\n private getPointerTile(): RpgInteractionTile | null {\n const world = this.client.pointer.world();\n if (!world) return null;\n\n const map = (this.client as any).sceneMap;\n const width = Number(map?.tileWidth ?? 32);\n const height = Number(map?.tileHeight ?? 32);\n const tileX = Math.floor(world.x / width);\n const tileY = Math.floor(world.y / height);\n\n return {\n x: tileX,\n y: tileY,\n worldX: tileX * width,\n worldY: tileY * height,\n width,\n height,\n };\n }\n}\n\nexport function hoverPopover(component: any, props?: Record<string, any>): RpgInteractionBehavior {\n return {\n component,\n props,\n cursor: \"pointer\",\n };\n}\n\nexport function selectable(options: {\n cursor?: string;\n onSelect?: RpgInteractionHandler;\n} = {}): RpgInteractionBehavior {\n return {\n cursor: options.cursor ?? \"pointer\",\n click(ctx) {\n ctx.select();\n options.onSelect?.(ctx);\n },\n };\n}\n\nexport function draggable(options: {\n cursor?: string;\n start?: RpgInteractionHandler;\n move?: RpgInteractionHandler;\n drop?: RpgInteractionHandler;\n cancel?: RpgInteractionHandler;\n} = {}): RpgInteractionBehavior {\n return {\n cursor: options.cursor ?? \"grab\",\n dragstart(ctx) {\n ctx.state.patch({ dragging: true });\n options.start?.(ctx);\n },\n dragmove: options.move,\n drop(ctx) {\n ctx.state.patch({ dragging: false, pressed: false });\n options.drop?.(ctx);\n },\n cancel(ctx) {\n ctx.state.patch({ dragging: false, pressed: false });\n options.cancel?.(ctx);\n },\n };\n}\n\nexport function dragToTile(options: {\n action?: RpgActionName;\n data?: (ctx: RpgInteractionContext) => any;\n onDrop?: RpgInteractionHandler;\n cursor?: string;\n}): RpgInteractionBehavior {\n return draggable({\n cursor: options.cursor,\n drop(ctx) {\n if (options.onDrop) {\n options.onDrop(ctx);\n return;\n }\n if (!options.action) return;\n ctx.action(options.action, options.data ? options.data(ctx) : {\n eventId: ctx.target.id,\n position: ctx.pointer.tile(),\n });\n },\n });\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -4,6 +4,7 @@ var Control = /* @__PURE__ */ function(Control) {
|
|
|
4
4
|
Control["Attack"] = "attack";
|
|
5
5
|
Control["Defense"] = "defense";
|
|
6
6
|
Control["Skill"] = "skill";
|
|
7
|
+
Control["Dash"] = "dash";
|
|
7
8
|
Control["Back"] = "back";
|
|
8
9
|
Control[Control["Up"] = 1] = "Up";
|
|
9
10
|
Control[Control["Down"] = 3] = "Down";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboardControls.js","names":[],"sources":["../../src/services/keyboardControls.ts"],"sourcesContent":["import { KeyboardControls } from \"canvasengine\";\n\nexport enum Control {\n Action = 'action',\n Attack = 'attack',\n Defense = 'defense',\n Skill = 'skill',\n Back = 'back',\n Up = 1,\n Down = 3,\n Right = 2,\n Left = 4\n}\n\nexport function provideKeyboardControls() {\n return {\n provide: 'KeyboardControls',\n useValue: null,\n };\n}"],"mappings":";AAEA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;CACA,QAAA,aAAA;CACA,QAAA,WAAA;CACA,QAAA,UAAA;CACA,QAAA,QAAA,QAAA,KAAA;CACA,QAAA,QAAA,UAAA,KAAA;CACA,QAAA,QAAA,WAAA,KAAA;CACA,QAAA,QAAA,UAAA,KAAA;;AACF,EAAA,CAAA,CAAA;AAEA,SAAgB,0BAA0B;CACxC,OAAO;EACL,SAAS;EACT,UAAU;CACZ;AACF"}
|
|
1
|
+
{"version":3,"file":"keyboardControls.js","names":[],"sources":["../../src/services/keyboardControls.ts"],"sourcesContent":["import { KeyboardControls } from \"canvasengine\";\n\nexport enum Control {\n Action = 'action',\n Attack = 'attack',\n Defense = 'defense',\n Skill = 'skill',\n Dash = 'dash',\n Back = 'back',\n Up = 1,\n Down = 3,\n Right = 2,\n Left = 4\n}\n\nexport function provideKeyboardControls() {\n return {\n provide: 'KeyboardControls',\n useValue: null,\n };\n}\n"],"mappings":";AAEA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;CACA,QAAA,aAAA;CACA,QAAA,WAAA;CACA,QAAA,UAAA;CACA,QAAA,UAAA;CACA,QAAA,QAAA,QAAA,KAAA;CACA,QAAA,QAAA,UAAA,KAAA;CACA,QAAA,QAAA,WAAA,KAAA;CACA,QAAA,QAAA,UAAA,KAAA;;AACF,EAAA,CAAA,CAAA;AAEA,SAAgB,0BAA0B;CACxC,OAAO;EACL,SAAS;EACT,UAAU;CACZ;AACF"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Context } from '@signe/di';
|
|
2
|
+
import { LightingState } from '@rpgjs/common';
|
|
2
3
|
export declare const LoadMapToken = "LoadMapToken";
|
|
3
4
|
/**
|
|
4
5
|
* Represents the structure of map data that should be returned by the load map callback.
|
|
@@ -25,6 +26,8 @@ type MapData = {
|
|
|
25
26
|
}>;
|
|
26
27
|
/** Optional map identifier, defaults to the mapId parameter if not provided */
|
|
27
28
|
id?: string;
|
|
29
|
+
/** Optional initial lighting state for the loaded map */
|
|
30
|
+
lighting?: LightingState | null;
|
|
28
31
|
};
|
|
29
32
|
/**
|
|
30
33
|
* Callback function type for loading map data.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loadMap.js","names":[],"sources":["../../src/services/loadMap.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { UpdateMapToken, UpdateMapService } from \"@rpgjs/common\";\n\nexport const LoadMapToken = 'LoadMapToken'\n\n/**\n * Represents the structure of map data that should be returned by the load map callback.\n * This interface defines all the properties that can be provided when loading a custom map.\n * \n * @interface MapData\n */\ntype MapData = {\n /** Raw map data that will be passed to the map component */\n data: any;\n /** CanvasEngine component that will render the map */\n component: any;\n /** Optional map width in pixels, used for viewport calculations */\n width?: number;\n /** Optional map height in pixels, used for viewport calculations */\n height?: number;\n /** Optional map events data (NPCs, interactive objects, etc.) */\n events?: any;\n /** Optional named positions, for example Tiled point objects used by changeMap(\"map\", \"name\") */\n positions?: Record<string, { x: number; y: number; z?: number }>;\n /** Optional map identifier, defaults to the mapId parameter if not provided */\n id?: string;\n}\n\n/**\n * Callback function type for loading map data.\n * This function receives a map ID and should return either a MapData object directly\n * or a Promise that resolves to a MapData object.\n * \n * @callback LoadMapOptions\n * @param {string} mapId - The identifier of the map to load\n * @returns {Promise<MapData> | MapData} The map data object or a promise resolving to it\n */\nexport type LoadMapOptions = (mapId: string) => Promise<MapData> | MapData \n\nexport class LoadMapService {\n private updateMapService: UpdateMapService;\n\n constructor(private context: Context, private options: LoadMapOptions) {\n if (context['side'] === 'server') {\n return\n }\n this.updateMapService = inject(context, UpdateMapToken);\n }\n\n async load(mapId: string) {\n const map = await this.options(mapId.replace('map-', ''))\n await this.updateMapService.update(map);\n return map;\n }\n}\n\n/**\n * Creates a dependency injection configuration for custom map loading on the client side.\n * \n * This function allows you to customize how maps are loaded and displayed by providing\n * a callback that defines custom map data and rendering components. It's designed to work\n * with the RPG-JS dependency injection system and enables integration of custom map formats\n * like Tiled TMX files or any other map data structure.\n * \n * The function sets up the necessary service providers for map loading, including:\n * - UpdateMapToken: Handles map updates in the client context\n * - LoadMapToken: Provides the LoadMapService with your custom loading logic\n * \n * **Design Concept:**\n * The function follows the provider pattern, creating a modular way to inject custom\n * map loading behavior into the RPG-JS client engine. It separates the concern of\n * map data fetching from map rendering, allowing developers to focus on their specific\n * map format while leveraging the engine's rendering capabilities.\n * \n * @param {LoadMapOptions} options - Callback function that handles map loading logic\n * @returns {Array<Object>} Array of dependency injection provider configurations\n * \n * @example\n * ```typescript\n * import { provideLoadMap } from '@rpgjs/client'\n * import { createModule } from '@rpgjs/common'\n * import MyTiledMapComponent from './MyTiledMapComponent.ce'\n * \n * // Basic usage with JSON map data\n * export function provideCustomMap() {\n * return createModule(\"CustomMap\", [\n * provideLoadMap(async (mapId) => {\n * const response = await fetch(`/maps/${mapId}.json`)\n * const mapData = await response.json()\n * \n * return {\n * data: mapData,\n * component: MyTiledMapComponent,\n * width: mapData.width,\n * height: mapData.height,\n * events: mapData.events\n * }\n * })\n * ])\n * }\n * \n * // Advanced usage with Tiled TMX files\n * export function provideTiledMap() {\n * return createModule(\"TiledMap\", [\n * provideLoadMap(async (mapId) => {\n * // Load TMX file\n * const tmxResponse = await fetch(`/tiled/${mapId}.tmx`)\n * const tmxData = await tmxResponse.text()\n * \n * // Parse TMX data (using a TMX parser)\n * const parsedMap = parseTMX(tmxData)\n * \n * return {\n * data: parsedMap,\n * component: TiledMapRenderer,\n * width: parsedMap.width * parsedMap.tilewidth,\n * height: parsedMap.height * parsedMap.tileheight,\n * events: parsedMap.objectGroups?.find(g => g.name === 'events')?.objects\n * }\n * })\n * ])\n * }\n * \n * // Synchronous usage for static maps\n * export function provideStaticMap() {\n * return createModule(\"StaticMap\", [\n * provideLoadMap((mapId) => {\n * const staticMaps = {\n * 'town': { tiles: [...], npcs: [...] },\n * 'dungeon': { tiles: [...], monsters: [...] }\n * }\n * \n * return {\n * data: staticMaps[mapId],\n * component: StaticMapComponent,\n * width: 800,\n * height: 600\n * }\n * })\n * ])\n * }\n * ```\n * \n * @since 4.0.0\n * @see {@link LoadMapOptions} for callback function signature\n * @see {@link MapData} for return data structure\n */\nexport function provideLoadMap(options: LoadMapOptions) {\n return [\n {\n provide: UpdateMapToken,\n useFactory: (context: Context) => {\n if (context['side'] === 'client') {\n console.warn('UpdateMapToken is not overridden')\n }\n return\n },\n },\n {\n provide: LoadMapToken,\n useFactory: (context: Context) => new LoadMapService(context, options),\n },\n ];\n}\n"],"mappings":";;;AAGA,IAAa,eAAe;
|
|
1
|
+
{"version":3,"file":"loadMap.js","names":[],"sources":["../../src/services/loadMap.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { UpdateMapToken, UpdateMapService, type LightingState } from \"@rpgjs/common\";\n\nexport const LoadMapToken = 'LoadMapToken'\n\n/**\n * Represents the structure of map data that should be returned by the load map callback.\n * This interface defines all the properties that can be provided when loading a custom map.\n * \n * @interface MapData\n */\ntype MapData = {\n /** Raw map data that will be passed to the map component */\n data: any;\n /** CanvasEngine component that will render the map */\n component: any;\n /** Optional map width in pixels, used for viewport calculations */\n width?: number;\n /** Optional map height in pixels, used for viewport calculations */\n height?: number;\n /** Optional map events data (NPCs, interactive objects, etc.) */\n events?: any;\n /** Optional named positions, for example Tiled point objects used by changeMap(\"map\", \"name\") */\n positions?: Record<string, { x: number; y: number; z?: number }>;\n /** Optional map identifier, defaults to the mapId parameter if not provided */\n id?: string;\n /** Optional initial lighting state for the loaded map */\n lighting?: LightingState | null;\n}\n\n/**\n * Callback function type for loading map data.\n * This function receives a map ID and should return either a MapData object directly\n * or a Promise that resolves to a MapData object.\n * \n * @callback LoadMapOptions\n * @param {string} mapId - The identifier of the map to load\n * @returns {Promise<MapData> | MapData} The map data object or a promise resolving to it\n */\nexport type LoadMapOptions = (mapId: string) => Promise<MapData> | MapData \n\nexport class LoadMapService {\n private updateMapService: UpdateMapService;\n\n constructor(private context: Context, private options: LoadMapOptions) {\n if (context['side'] === 'server') {\n return\n }\n this.updateMapService = inject(context, UpdateMapToken);\n }\n\n async load(mapId: string) {\n const map = await this.options(mapId.replace('map-', ''))\n await this.updateMapService.update(map);\n return map;\n }\n}\n\n/**\n * Creates a dependency injection configuration for custom map loading on the client side.\n * \n * This function allows you to customize how maps are loaded and displayed by providing\n * a callback that defines custom map data and rendering components. It's designed to work\n * with the RPG-JS dependency injection system and enables integration of custom map formats\n * like Tiled TMX files or any other map data structure.\n * \n * The function sets up the necessary service providers for map loading, including:\n * - UpdateMapToken: Handles map updates in the client context\n * - LoadMapToken: Provides the LoadMapService with your custom loading logic\n * \n * **Design Concept:**\n * The function follows the provider pattern, creating a modular way to inject custom\n * map loading behavior into the RPG-JS client engine. It separates the concern of\n * map data fetching from map rendering, allowing developers to focus on their specific\n * map format while leveraging the engine's rendering capabilities.\n * \n * @param {LoadMapOptions} options - Callback function that handles map loading logic\n * @returns {Array<Object>} Array of dependency injection provider configurations\n * \n * @example\n * ```typescript\n * import { provideLoadMap } from '@rpgjs/client'\n * import { createModule } from '@rpgjs/common'\n * import MyTiledMapComponent from './MyTiledMapComponent.ce'\n * \n * // Basic usage with JSON map data\n * export function provideCustomMap() {\n * return createModule(\"CustomMap\", [\n * provideLoadMap(async (mapId) => {\n * const response = await fetch(`/maps/${mapId}.json`)\n * const mapData = await response.json()\n * \n * return {\n * data: mapData,\n * component: MyTiledMapComponent,\n * width: mapData.width,\n * height: mapData.height,\n * events: mapData.events\n * }\n * })\n * ])\n * }\n * \n * // Advanced usage with Tiled TMX files\n * export function provideTiledMap() {\n * return createModule(\"TiledMap\", [\n * provideLoadMap(async (mapId) => {\n * // Load TMX file\n * const tmxResponse = await fetch(`/tiled/${mapId}.tmx`)\n * const tmxData = await tmxResponse.text()\n * \n * // Parse TMX data (using a TMX parser)\n * const parsedMap = parseTMX(tmxData)\n * \n * return {\n * data: parsedMap,\n * component: TiledMapRenderer,\n * width: parsedMap.width * parsedMap.tilewidth,\n * height: parsedMap.height * parsedMap.tileheight,\n * events: parsedMap.objectGroups?.find(g => g.name === 'events')?.objects\n * }\n * })\n * ])\n * }\n * \n * // Synchronous usage for static maps\n * export function provideStaticMap() {\n * return createModule(\"StaticMap\", [\n * provideLoadMap((mapId) => {\n * const staticMaps = {\n * 'town': { tiles: [...], npcs: [...] },\n * 'dungeon': { tiles: [...], monsters: [...] }\n * }\n * \n * return {\n * data: staticMaps[mapId],\n * component: StaticMapComponent,\n * width: 800,\n * height: 600\n * }\n * })\n * ])\n * }\n * ```\n * \n * @since 4.0.0\n * @see {@link LoadMapOptions} for callback function signature\n * @see {@link MapData} for return data structure\n */\nexport function provideLoadMap(options: LoadMapOptions) {\n return [\n {\n provide: UpdateMapToken,\n useFactory: (context: Context) => {\n if (context['side'] === 'client') {\n console.warn('UpdateMapToken is not overridden')\n }\n return\n },\n },\n {\n provide: LoadMapToken,\n useFactory: (context: Context) => new LoadMapService(context, options),\n },\n ];\n}\n"],"mappings":";;;AAGA,IAAa,eAAe;AAsC5B,IAAa,iBAAb,MAA4B;CAG1B,YAAY,SAA0B,SAAiC;EAAnD,KAAA,UAAA;EAA0B,KAAA,UAAA;EAC5C,IAAI,QAAQ,YAAY,UACtB;EAEF,KAAK,mBAAmB,OAAO,SAAS,cAAc;CACxD;CAEA,MAAM,KAAK,OAAe;EACxB,MAAM,MAAM,MAAM,KAAK,QAAQ,MAAM,QAAQ,QAAQ,EAAE,CAAC;EACxD,MAAM,KAAK,iBAAiB,OAAO,GAAG;EACtC,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA,SAAgB,eAAe,SAAyB;CACtD,OAAO,CACL;EACE,SAAS;EACT,aAAa,YAAqB;GAChC,IAAI,QAAQ,YAAY,UACtB,QAAQ,KAAK,kCAAkC;EAGnD;CACF,GACA;EACE,SAAS;EACT,aAAa,YAAqB,IAAI,eAAe,SAAS,OAAO;CACvE,CACF;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rpgjs/client",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.14",
|
|
4
4
|
"description": "RPGJS is a framework for creating RPG/MMORPG games",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"pixi.js": "^8.9.2"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@rpgjs/common": "5.0.0-beta.
|
|
26
|
-
"@rpgjs/server": "5.0.0-beta.
|
|
27
|
-
"@rpgjs/ui-css": "5.0.0-beta.
|
|
25
|
+
"@rpgjs/common": "5.0.0-beta.14",
|
|
26
|
+
"@rpgjs/server": "5.0.0-beta.14",
|
|
27
|
+
"@rpgjs/ui-css": "5.0.0-beta.12",
|
|
28
28
|
"@signe/di": "3.0.1",
|
|
29
29
|
"@signe/room": "3.0.1",
|
|
30
30
|
"@signe/sync": "3.0.1",
|
package/src/Game/Object.spec.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { describe, expect, test, vi } from "vitest";
|
|
2
2
|
import { signal } from "canvasengine";
|
|
3
|
-
import { RpgClientObject } from "./Object";
|
|
3
|
+
import { appendFramePayload, RpgClientObject, withGraphicDisplayScale } from "./Object";
|
|
4
4
|
|
|
5
5
|
vi.mock("../RpgClientEngine", () => ({
|
|
6
6
|
RpgClientEngine: class RpgClientEngine {},
|
|
@@ -20,6 +20,19 @@ function createObject() {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
describe("RpgClientObject animations", () => {
|
|
23
|
+
test("accepts a single frame payload without requiring iterable spread", () => {
|
|
24
|
+
expect(
|
|
25
|
+
appendFramePayload({ stale: true }, { x: 10, y: 20, ts: 1 }),
|
|
26
|
+
).toEqual([{ x: 10, y: 20, ts: 1 }]);
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
test("keeps instance scale outside the spritesheet transform scale", () => {
|
|
30
|
+
expect(withGraphicDisplayScale({ id: "hero" }, 0.5)).toEqual({
|
|
31
|
+
id: "hero",
|
|
32
|
+
displayScale: 0.5,
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
|
|
23
36
|
test("marks temporary animation as finished before restoring locomotion animation", async () => {
|
|
24
37
|
const object = createObject();
|
|
25
38
|
const animationChanges: Array<{ name: string; isPlaying: boolean }> = [];
|