@rpgjs/client 5.0.0-beta.12 → 5.0.0-beta.13

package/dist/services/interactions.js

@@ -0,0 +1,460 @@
+import { signal } from "canvasengine";
+//#region src/services/interactions.ts
+var DEFAULT_STATE = {
+	hovered: false,
+	pressed: false,
+	selected: false,
+	dragging: false,
+	data: {},
+	overlays: {}
+};
+function readValue(value) {
+	return typeof value === "function" ? value() : value;
+}
+function createBounds(value) {
+	const left = Number(value?.left ?? value?.x ?? 0);
+	const top = Number(value?.top ?? value?.y ?? 0);
+	const width = Number(value?.width ?? value?.w ?? 0);
+	const height = Number(value?.height ?? value?.h ?? 0);
+	const right = Number(value?.right ?? left + width);
+	const bottom = Number(value?.bottom ?? top + height);
+	const resolvedWidth = Number.isFinite(width) && width > 0 ? width : Math.max(0, right - left);
+	const resolvedHeight = Number.isFinite(height) && height > 0 ? height : Math.max(0, bottom - top);
+	return {
+		left,
+		top,
+		right,
+		bottom,
+		width: resolvedWidth,
+		height: resolvedHeight,
+		centerX: Number(value?.centerX ?? left + resolvedWidth / 2),
+		centerY: Number(value?.centerY ?? top + resolvedHeight / 2),
+		contains(point) {
+			if (!point) return false;
+			return point.x >= left && point.x <= right && point.y >= top && point.y <= bottom;
+		}
+	};
+}
+function normalizeBounds(bounds) {
+	if (!bounds) return {};
+	return Object.entries(bounds).reduce((next, [key, value]) => {
+		if (value) next[key] = createBounds(value);
+		return next;
+	}, {});
+}
+function readNumber(value, fallback = 0) {
+	const resolved = readValue(value);
+	const number = Number(resolved);
+	return Number.isFinite(number) ? number : fallback;
+}
+function offsetBounds(bounds, x, y) {
+	return createBounds({
+		left: bounds.left + x,
+		top: bounds.top + y,
+		right: bounds.right + x,
+		bottom: bounds.bottom + y,
+		width: bounds.width,
+		height: bounds.height,
+		centerX: bounds.centerX + x,
+		centerY: bounds.centerY + y
+	});
+}
+function toWorldBounds(sprite, bounds) {
+	const x = readNumber(sprite?.x);
+	const y = readNumber(sprite?.y);
+	return Object.entries(bounds).reduce((next, [key, value]) => {
+		if (value) next[key] = offsetBounds(value, x, y);
+		return next;
+	}, {});
+}
+function normalizeBehavior(behavior) {
+	if (typeof behavior === "function") return { component: behavior };
+	return behavior ?? {};
+}
+var RpgClientInteractions = class {
+	constructor(client) {
+		this.client = client;
+		this.registrations = signal([]);
+		this.states = signal({});
+		this.nextId = 0;
+	}
+	use(matcher, behavior) {
+		const registration = {
+			id: `interaction:${++this.nextId}`,
+			matcher,
+			behavior: normalizeBehavior(behavior)
+		};
+		this.registrations.update((registrations) => [...registrations, registration]);
+		return () => {
+			this.registrations.update((registrations) => registrations.filter((entry) => entry.id !== registration.id));
+		};
+	}
+	getState(sprite) {
+		const id = this.getSpriteId(sprite);
+		return {
+			...DEFAULT_STATE,
+			...id ? this.states()[id] : void 0,
+			data: id ? { ...this.states()[id]?.data ?? {} } : {},
+			overlays: id ? { ...this.states()[id]?.overlays ?? {} } : {}
+		};
+	}
+	getRenderedComponents(sprite, bounds) {
+		const normalizedBounds = normalizeBounds(bounds);
+		const matched = this.getMatches(sprite);
+		const state = this.getState(sprite);
+		const entries = [];
+		matched.forEach((registration) => {
+			if (!registration.behavior.component) return;
+			const ctx = this.createContext(sprite, registration, { bounds: normalizedBounds });
+			entries.push({
+				component: registration.behavior.component,
+				props: {
+					...this.defaultComponentProps(sprite, state, normalizedBounds),
+					...this.resolveProps(registration.behavior.props, ctx)
+				},
+				dependencies: this.resolveDependencies(registration.behavior.dependencies, ctx)
+			});
+		});
+		Object.entries(state.overlays).forEach(([id, overlay]) => {
+			entries.push({
+				component: overlay.component,
+				props: {
+					...this.defaultComponentProps(sprite, state, normalizedBounds),
+					...overlay.props ?? {},
+					overlayId: id
+				},
+				dependencies: []
+			});
+		});
+		return entries;
+	}
+	cursorFor(sprite, bounds) {
+		this.states();
+		for (const registration of this.getMatches(sprite)) {
+			const cursor = registration.behavior.cursor;
+			if (!cursor) continue;
+			const ctx = this.createContext(sprite, registration, { bounds: normalizeBounds(bounds) });
+			if (!this.passesHitTest(registration.behavior, ctx, "pointermove")) continue;
+			const resolved = typeof cursor === "function" ? cursor(ctx) : cursor;
+			if (resolved) return resolved;
+		}
+	}
+	handle(sprite, type, input = {}) {
+		const matches = this.getMatches(sprite);
+		const bounds = normalizeBounds(input.bounds);
+		const entries = matches.map((registration) => ({
+			registration,
+			ctx: this.createContext(sprite, registration, {
+				event: input.event,
+				bounds
+			})
+		})).filter(({ registration, ctx }) => this.passesHitTest(registration.behavior, ctx, type));
+		if (type === "pointerover" || type === "pointerenter") {
+			if (entries.length > 0) this.patchState(sprite, { hovered: true });
+		}
+		if (type === "pointerout" || type === "pointerleave") {
+			if (matches.length > 0) this.patchState(sprite, {
+				hovered: false,
+				pressed: false
+			});
+		}
+		if (type === "pointerdown") {
+			if (entries.length > 0) this.patchState(sprite, { pressed: true });
+		}
+		if (type === "pointermove" && matches.length > 0) this.patchState(sprite, { hovered: entries.length > 0 });
+		if (type === "pointerup") {
+			if (matches.length > 0) this.patchState(sprite, { pressed: false });
+		}
+		entries.forEach(({ registration, ctx }) => {
+			this.callHandler(registration.behavior, type, ctx);
+			if (type === "pointerdown" && this.isDraggable(registration.behavior)) {
+				this.activeDrag = {
+					sprite,
+					behavior: registration.behavior,
+					behaviorId: registration.id,
+					bounds,
+					cancelled: false
+				};
+				this.patchState(sprite, { dragging: true });
+				this.callHandler(registration.behavior, "dragstart", ctx);
+			}
+		});
+	}
+	handlePointerMove(event) {
+		if (!this.activeDrag) return;
+		const drag = this.activeDrag;
+		const registration = {
+			id: drag.behaviorId,
+			matcher: "*",
+			behavior: drag.behavior
+		};
+		const ctx = this.createContext(drag.sprite, registration, {
+			event,
+			bounds: drag.bounds
+		});
+		this.callHandler(drag.behavior, "dragmove", ctx);
+	}
+	handlePointerUp(event) {
+		if (!this.activeDrag) return;
+		const drag = this.activeDrag;
+		this.activeDrag = void 0;
+		this.patchState(drag.sprite, {
+			dragging: false,
+			pressed: false
+		});
+		const registration = {
+			id: drag.behaviorId,
+			matcher: "*",
+			behavior: drag.behavior
+		};
+		const ctx = this.createContext(drag.sprite, registration, {
+			event,
+			bounds: drag.bounds
+		});
+		this.callHandler(drag.behavior, drag.cancelled ? "cancel" : "drop", ctx);
+	}
+	cancelDrag(event) {
+		if (!this.activeDrag) return;
+		this.activeDrag.cancelled = true;
+		this.handlePointerUp(event);
+	}
+	getMatches(sprite) {
+		return this.registrations().filter((registration) => this.matches(registration.matcher, sprite));
+	}
+	matches(matcher, sprite) {
+		if (typeof matcher === "function") return !!matcher({
+			client: this.client,
+			target: sprite,
+			sprite
+		});
+		if (matcher === "*") return true;
+		return [
+			readValue(sprite?.id),
+			readValue(sprite?.name),
+			readValue(sprite?._name),
+			readValue(sprite?.type),
+			readValue(sprite?._type),
+			sprite?.constructor?.name
+		].filter(Boolean).includes(matcher);
+	}
+	createContext(sprite, registration, input = {}) {
+		const bounds = toWorldBounds(sprite, normalizeBounds(input.bounds));
+		return {
+			client: this.client,
+			target: sprite,
+			sprite,
+			event: input.event,
+			behavior: registration.behavior,
+			behaviorId: registration.id,
+			pointer: {
+				screen: () => this.client.pointer.screen(),
+				world: () => this.client.pointer.world(),
+				tile: () => this.getPointerTile()
+			},
+			bounds: (kind = "bounds") => bounds[kind] ?? bounds.graphic ?? bounds.hitbox ?? bounds.bounds ?? createBounds({}),
+			state: {
+				value: () => this.getState(sprite),
+				get: (key) => this.getState(sprite).data[key],
+				set: (key, value) => this.patchStateData(sprite, { [key]: value }),
+				patch: (patch) => this.patchState(sprite, patch)
+			},
+			overlay: {
+				render: (component, props) => this.patchOverlay(sprite, registration.id, {
+					component,
+					props
+				}),
+				update: (props) => this.updateOverlay(sprite, registration.id, props),
+				clear: () => this.clearOverlay(sprite, registration.id)
+			},
+			select: (selected = true) => this.patchState(sprite, { selected }),
+			action: (action, data) => this.client.processAction(action, data),
+			cancel: () => {
+				const activeDrag = this.activeDrag;
+				if (activeDrag && activeDrag.sprite === sprite) activeDrag.cancelled = true;
+			}
+		};
+	}
+	callHandler(behavior, type, ctx) {
+		const handler = behavior[type];
+		handler?.(ctx);
+		if (type === "pointerover") behavior.pointerenter?.(ctx);
+		if (type === "pointerout") behavior.pointerleave?.(ctx);
+	}
+	passesHitTest(behavior, ctx, type) {
+		if (!behavior.hitTest) return true;
+		if (type === "pointerout" || type === "pointerleave" || type === "cancel" || type === "drop") return true;
+		return behavior.hitTest(ctx);
+	}
+	isDraggable(behavior) {
+		return !!(behavior.dragstart || behavior.dragmove || behavior.drop || behavior.cancel);
+	}
+	defaultComponentProps(sprite, state, bounds) {
+		return {
+			target: sprite,
+			sprite,
+			state,
+			bounds: bounds.bounds ?? bounds.graphic ?? bounds.hitbox ?? createBounds({}),
+			hitboxBounds: bounds.hitbox,
+			graphicBounds: bounds.graphic,
+			pointer: this.client.pointer,
+			client: this.client
+		};
+	}
+	resolveProps(props, ctx) {
+		if (!props) return {};
+		return typeof props === "function" ? props(ctx) : props;
+	}
+	resolveDependencies(dependencies, ctx) {
+		if (!dependencies) return [];
+		return typeof dependencies === "function" ? dependencies(ctx) : dependencies;
+	}
+	getSpriteId(sprite) {
+		const id = readValue(sprite?.id);
+		return id == null ? void 0 : String(id);
+	}
+	patchState(sprite, patch) {
+		const id = this.getSpriteId(sprite);
+		if (!id) return;
+		this.states.update((states) => ({
+			...states,
+			[id]: {
+				...DEFAULT_STATE,
+				...states[id] ?? {},
+				...patch,
+				data: states[id]?.data ?? {},
+				overlays: states[id]?.overlays ?? {}
+			}
+		}));
+	}
+	patchStateData(sprite, patch) {
+		const id = this.getSpriteId(sprite);
+		if (!id) return;
+		const current = this.getState(sprite);
+		this.states.update((states) => ({
+			...states,
+			[id]: {
+				...current,
+				data: {
+					...current.data,
+					...patch
+				}
+			}
+		}));
+	}
+	patchOverlay(sprite, id, overlay) {
+		const spriteId = this.getSpriteId(sprite);
+		if (!spriteId) return;
+		const current = this.getState(sprite);
+		this.states.update((states) => ({
+			...states,
+			[spriteId]: {
+				...current,
+				overlays: {
+					...current.overlays,
+					[id]: overlay
+				}
+			}
+		}));
+	}
+	updateOverlay(sprite, id, props) {
+		const overlay = this.getState(sprite).overlays[id];
+		if (!overlay) return;
+		this.patchOverlay(sprite, id, {
+			...overlay,
+			props: {
+				...overlay.props ?? {},
+				...props ?? {}
+			}
+		});
+	}
+	clearOverlay(sprite, id) {
+		const spriteId = this.getSpriteId(sprite);
+		if (!spriteId) return;
+		const current = this.getState(sprite);
+		const { [id]: _removed, ...overlays } = current.overlays;
+		this.states.update((states) => ({
+			...states,
+			[spriteId]: {
+				...current,
+				overlays
+			}
+		}));
+	}
+	getPointerTile() {
+		const world = this.client.pointer.world();
+		if (!world) return null;
+		const map = this.client.sceneMap;
+		const width = Number(map?.tileWidth ?? 32);
+		const height = Number(map?.tileHeight ?? 32);
+		const tileX = Math.floor(world.x / width);
+		const tileY = Math.floor(world.y / height);
+		return {
+			x: tileX,
+			y: tileY,
+			worldX: tileX * width,
+			worldY: tileY * height,
+			width,
+			height
+		};
+	}
+};
+function hoverPopover(component, props) {
+	return {
+		component,
+		props,
+		cursor: "pointer"
+	};
+}
+function selectable(options = {}) {
+	return {
+		cursor: options.cursor ?? "pointer",
+		click(ctx) {
+			ctx.select();
+			options.onSelect?.(ctx);
+		}
+	};
+}
+function draggable(options = {}) {
+	return {
+		cursor: options.cursor ?? "grab",
+		dragstart(ctx) {
+			ctx.state.patch({ dragging: true });
+			options.start?.(ctx);
+		},
+		dragmove: options.move,
+		drop(ctx) {
+			ctx.state.patch({
+				dragging: false,
+				pressed: false
+			});
+			options.drop?.(ctx);
+		},
+		cancel(ctx) {
+			ctx.state.patch({
+				dragging: false,
+				pressed: false
+			});
+			options.cancel?.(ctx);
+		}
+	};
+}
+function dragToTile(options) {
+	return draggable({
+		cursor: options.cursor,
+		drop(ctx) {
+			if (options.onDrop) {
+				options.onDrop(ctx);
+				return;
+			}
+			if (!options.action) return;
+			ctx.action(options.action, options.data ? options.data(ctx) : {
+				eventId: ctx.target.id,
+				position: ctx.pointer.tile()
+			});
+		}
+	});
+}
+//#endregion
+export { RpgClientInteractions, dragToTile, draggable, hoverPopover, selectable };
+
+//# sourceMappingURL=interactions.js.map

package/dist/services/interactions.js.map

@@ -0,0 +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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"}

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

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

package/dist/services/keyboardControls.d.ts

@@ -3,6 +3,7 @@ export declare enum Control {
     Attack = "attack",
     Defense = "defense",
     Skill = "skill",
+    Dash = "dash",
     Back = "back",
     Up = 1,
     Down = 3,

package/dist/services/keyboardControls.js

@@ -4,6 +4,7 @@ var Control = /* @__PURE__ */ function(Control) {
 	Control["Attack"] = "attack";
 	Control["Defense"] = "defense";
 	Control["Skill"] = "skill";
+	Control["Dash"] = "dash";
 	Control["Back"] = "back";
 	Control[Control["Up"] = 1] = "Up";
 	Control[Control["Down"] = 3] = "Down";

package/dist/services/keyboardControls.js.map

@@ -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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-beta.12",
+  "version": "5.0.0-beta.13",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,9 +22,9 @@
     "pixi.js": "^8.9.2"
   },
   "dependencies": {
-    "@rpgjs/common": "5.0.0-beta.12",
-    "@rpgjs/server": "5.0.0-beta.12",
-    "@rpgjs/ui-css": "5.0.0-beta.11",
+    "@rpgjs/common": "5.0.0-beta.13",
+    "@rpgjs/server": "5.0.0-beta.13",
+    "@rpgjs/ui-css": "5.0.0-beta.12",
     "@signe/di": "3.0.1",
     "@signe/room": "3.0.1",
     "@signe/sync": "3.0.1",

package/src/Game/Object.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from "vitest";
 import { signal } from "canvasengine";
-import { RpgClientObject } from "./Object";
+import { appendFramePayload, RpgClientObject, withGraphicDisplayScale } from "./Object";
 
 vi.mock("../RpgClientEngine", () => ({
   RpgClientEngine: class RpgClientEngine {},
@@ -20,6 +20,19 @@ function createObject() {
 }
 
 describe("RpgClientObject animations", () => {
+  test("accepts a single frame payload without requiring iterable spread", () => {
+    expect(
+      appendFramePayload({ stale: true }, { x: 10, y: 20, ts: 1 }),
+    ).toEqual([{ x: 10, y: 20, ts: 1 }]);
+  });
+
+  test("keeps instance scale outside the spritesheet transform scale", () => {
+    expect(withGraphicDisplayScale({ id: "hero" }, 0.5)).toEqual({
+      id: "hero",
+      displayScale: 0.5,
+    });
+  });
+
   test("marks temporary animation as finished before restoring locomotion animation", async () => {
     const object = createObject();
     const animationChanges: Array<{ name: string; isPlaying: boolean }> = [];

package/src/Game/Object.ts

@@ -1,6 +1,6 @@
 import { Hooks, ModulesToken, RpgCommonPlayer } from "@rpgjs/common";
 import { trigger, signal, type Trigger } from "canvasengine";
-import { from, map, of, Subscription, switchMap } from "rxjs";
+import { combineLatest, from, map, of, startWith, Subscription, switchMap } from "rxjs";
 import { inject } from "../core/inject";
 import { RpgClientEngine } from "../RpgClientEngine";
 type Frame = { x: number; y: number; ts: number };
@@ -29,6 +29,24 @@ type ConfigurableTrigger<T> = Omit<Trigger<T>, "start"> & {
   start(config?: T): Promise<void>;
 };
 
+export const withGraphicDisplayScale = (spritesheet: any, scale: unknown): any => {
+  if (!spritesheet || typeof spritesheet !== "object") return spritesheet;
+  if (scale === undefined || scale === null) return spritesheet;
+  return {
+    ...spritesheet,
+    displayScale: scale,
+  };
+};
+
+export const appendFramePayload = (current: unknown, items: unknown): Frame[] => {
+  const frameItems = Array.isArray(items) ? items : items ? [items] : [];
+  const nextFrames = frameItems.flatMap((item): Frame[] =>
+    Array.isArray(item) ? item : [item as Frame]
+  );
+  const currentFrames = Array.isArray(current) ? current as Frame[] : [];
+  return currentFrames.concat(nextFrames);
+};
+
 export abstract class RpgClientObject extends RpgCommonPlayer {
   abstract _type: string;
   emitParticleTrigger = trigger();
@@ -51,18 +69,24 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     this._frames.observable.subscribe(({ items }) => {
       if (!this.id) return;
       //if (this.id == this.engine.playerIdSignal()!) return;
-      const nextFrames = items.flatMap((item): Frame[] =>
-        Array.isArray(item) ? item : [item]
-      );
-      this.frames = [...this.frames, ...nextFrames];
+      this.frames = appendFramePayload(this.frames, items);
     });
 
-    this.graphics.observable
+    const graphics$ = this.graphics.observable.pipe(map(({ items }) => items));
+    const graphicScale$ = this._graphicScale.observable.pipe(
+      startWith({ value: this._graphicScale() }),
+      map((payload: any) => payload?.value ?? payload),
+    );
+
+    combineLatest([graphics$, graphicScale$])
     .pipe(
-      map(({ items }) => items),
-      switchMap(graphics => {
-        if (graphics.length === 0) return of([]);
-        return from(Promise.all(graphics.map(graphic => this.engine.getSpriteSheet(graphic))));
+      switchMap(([graphics, scale]) => {
+        const graphicRefs = Array.isArray(graphics) ? graphics : [];
+        if (graphicRefs.length === 0) return of([]);
+        return from(Promise.all(graphicRefs.map(async (graphic) => {
+          const spritesheet = await this.engine.getSpriteSheet(graphic);
+          return withGraphicDisplayScale(spritesheet, scale);
+        })));
       })
     )
     .subscribe((sheets) => {