@rpgjs/client 5.0.0-beta.7 → 5.0.0-beta.8

package/src/components/player-components-utils.ts

@@ -0,0 +1,205 @@
+export const DEFAULT_HP_BAR_STYLE = { fillColor: '#ef4444' };
+export const DEFAULT_SP_BAR_STYLE = { fillColor: '#3b82f6' };
+
+const DEFAULT_CELL_HEIGHT = 16;
+const DEFAULT_CELL_WIDTH = 32;
+
+type NumberResolver = (value: any, fallback?: number) => number;
+
+const defaultToNumber: NumberResolver = (value, fallback = 0) => {
+  const num = typeof value === 'number' ? value : parseFloat(value);
+  return Number.isFinite(num) ? num : fallback;
+};
+
+export function getPointBounds(points: any[] = [], toNumber: NumberResolver = defaultToNumber) {
+  if (!Array.isArray(points) || points.length < 2) {
+    return { width: 1, height: 1 };
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (let i = 0; i < points.length; i += 2) {
+    const x = toNumber(points[i], 0);
+    const y = toNumber(points[i + 1], 0);
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+
+  return {
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY)
+  };
+}
+
+export function getComponentId(definition: any) {
+  if (!definition) return undefined;
+  if (definition.id) return definition.id;
+  if (definition.type === 'text') return 'rpg:text';
+  if (definition.type === 'hpBar') return 'rpg:hpBar';
+  if (definition.type === 'spBar') return 'rpg:spBar';
+  if (definition.type === 'bar') return 'rpg:bar';
+  if (definition.type === 'shape') return 'rpg:shape';
+  if (definition.type === 'image') return 'rpg:image';
+  if (definition.type === 'tile') return 'rpg:tile';
+  return definition.type;
+}
+
+export function getComponentProps(definition: any) {
+  if (definition.props) return definition.props;
+
+  if (definition.type === 'text') {
+    return { value: definition.value, style: definition.style };
+  }
+  if (definition.type === 'hpBar') {
+    return { current: '{hp}', max: '{param.maxHp}', style: { ...DEFAULT_HP_BAR_STYLE, ...definition.style }, text: definition.text };
+  }
+  if (definition.type === 'spBar') {
+    return { current: '{sp}', max: '{param.maxSp}', style: { ...DEFAULT_SP_BAR_STYLE, ...definition.style }, text: definition.text };
+  }
+  if (definition.type === 'bar') {
+    return { current: `{${definition.current}}`, max: `{${definition.max}}`, style: definition.style, text: definition.text };
+  }
+  if (definition.type === 'shape') {
+    return definition.value;
+  }
+  if (definition.type === 'image' || definition.type === 'tile') {
+    return { value: definition.value };
+  }
+
+  return {};
+}
+
+export function estimateComponentSize(
+  definition: any,
+  {
+    toNumber = defaultToNumber,
+    estimateTextWidth = (value: any) => String(value ?? '').length * 8
+  }: {
+    toNumber?: NumberResolver;
+    estimateTextWidth?: (value: any, style?: any) => number;
+  } = {}
+) {
+  const props = getComponentProps(definition);
+  const style = props?.style ?? definition?.style ?? {};
+
+  if (definition?.type === 'text' || definition?.id === 'rpg:text') {
+    return {
+      width: estimateTextWidth(props.value ?? definition.value, style),
+      height: toNumber(style.fontSize, 12)
+    };
+  }
+
+  if (definition?.type === 'hpBar' || definition?.type === 'spBar' || definition?.type === 'bar' || definition?.id === 'rpg:hpBar' || definition?.id === 'rpg:spBar' || definition?.id === 'rpg:bar') {
+    const barHeight = toNumber(style.height, 8);
+    const labelHeight = props.text != null && props.text !== '' ? toNumber(style.fontSize, 10) + 2 : 0;
+    return {
+      width: toNumber(style.width, 50),
+      height: barHeight + labelHeight
+    };
+  }
+
+  if (definition?.type === 'shape' || definition?.id === 'rpg:shape') {
+    const shape = props ?? {};
+    if (shape.type === 'circle') {
+      const radius = toNumber(shape.radius, 8);
+      return { width: radius * 2, height: radius * 2 };
+    }
+    if (shape.type === 'line') {
+      return {
+        width: Math.max(1, Math.abs(toNumber(shape.x2, 16) - toNumber(shape.x1, 0))),
+        height: Math.max(1, Math.abs(toNumber(shape.y2, 0) - toNumber(shape.y1, 0)))
+      };
+    }
+    if (shape.type === 'polygon') {
+      return getPointBounds(shape.points, toNumber);
+    }
+    return {
+      width: toNumber(shape.width, 16),
+      height: toNumber(shape.height, 16)
+    };
+  }
+
+  return {
+    width: toNumber(definition?.props?.width, DEFAULT_CELL_WIDTH),
+    height: toNumber(definition?.props?.height, DEFAULT_CELL_HEIGHT)
+  };
+}
+
+export function computeBlockSize({
+  position,
+  layout = {},
+  rowMetrics,
+  gap = { row: 0, column: 0 },
+  graphic,
+  hitbox
+}: {
+  position: string;
+  layout?: any;
+  rowMetrics: Array<{ width: number; height: number; cells: any[] }>;
+  gap?: { row: number; column: number };
+  graphic: { width: number; height: number };
+  hitbox: { w: number; h: number };
+}) {
+  const rowGapTotal = Math.max(0, rowMetrics.length - 1) * gap.row;
+  const maxColumns = rowMetrics.reduce((max, row) => Math.max(max, row.cells.length), 0);
+  const columnGapTotal = Math.max(0, maxColumns - 1) * gap.column;
+  const contentWidth = rowMetrics.reduce((max, row) => Math.max(max, row.width), 0) + columnGapTotal;
+  const contentHeight = rowMetrics.reduce((sum, row) => sum + row.height, 0) + rowGapTotal;
+  const width = layout.width ?? Math.max(contentWidth, position === 'bottom' ? hitbox.w : position === 'top' || position === 'center' ? graphic.width : contentWidth);
+  const height = layout.height ?? Math.max(contentHeight, position === 'bottom' ? hitbox.h : position === 'left' || position === 'right' || position === 'center' ? graphic.height : contentHeight);
+
+  return { width, height };
+}
+
+export function computeBlockPosition({
+  position,
+  size,
+  layout = {},
+  graphic,
+  hitbox
+}: {
+  position: string;
+  size: { width: number; height: number };
+  layout?: any;
+  graphic: { left: number; top: number; right: number; centerX: number; centerY: number };
+  hitbox: { w: number; h: number };
+}) {
+  const marginLeft = layout.marginLeft ?? 0;
+  const marginRight = layout.marginRight ?? 0;
+  const marginTop = layout.marginTop ?? 0;
+  const marginBottom = layout.marginBottom ?? 0;
+
+  switch (position) {
+    case 'bottom':
+      return {
+        x: (hitbox.w / 2) - (size.width / 2) + marginLeft - marginRight,
+        y: (hitbox.h / 2) - (size.height / 2) + marginBottom - marginTop
+      };
+    case 'center':
+      return {
+        x: graphic.centerX - (size.width / 2) + marginLeft - marginRight,
+        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom
+      };
+    case 'left':
+      return {
+        x: graphic.left - size.width + marginLeft - marginRight,
+        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom
+      };
+    case 'right':
+      return {
+        x: graphic.right + marginLeft - marginRight,
+        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom
+      };
+    case 'top':
+    default:
+      return {
+        x: graphic.centerX - (size.width / 2) + marginLeft - marginRight,
+        y: graphic.top - size.height + marginTop - marginBottom
+      };
+  }
+}

package/src/components/player-components.ce

@@ -0,0 +1,221 @@
+<Container
+  x={blockPosition().x}
+  y={blockPosition().y}
+  width={blockSize().width}
+  height={blockSize().height}
+  minWidth={blockSize().width}
+  minHeight={blockSize().height}
+  display="flex"
+  flexDirection="column"
+  justifyContent="center"
+  alignItems="center"
+  rowGap={gap().row}
+>
+  @for (row of renderedRows) {
+    <Container
+      width="100%"
+      height={row.height}
+      display="flex"
+      flexDirection="row"
+      justifyContent="center"
+      alignItems="center"
+      columnGap={gap().column}
+    >
+      @for (entry of row.entries) {
+        <Container
+          width={entry.width}
+          height={entry.height}
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <entry.component object ...entry.props />
+        </Container>
+      }
+    </Container>
+  }
+</Container>
+
+<script>
+import { computed } from "canvasengine";
+import { RpgClientEngine } from "../RpgClientEngine";
+import { inject } from "../core/inject";
+import { resolveDynamicProps, resolveDynamicValue } from "./dynamics/parse-value";
+import {
+  computeBlockPosition,
+  computeBlockSize,
+  estimateComponentSize,
+  getComponentId,
+  getComponentProps
+} from "./player-components-utils";
+
+const { object, position, graphicBounds } = defineProps({
+  position: {
+    default: 'top'
+  }
+});
+
+const client = inject(RpgClientEngine);
+const warnedComponents = new Set();
+
+const readPosition = computed(() => position?.() ?? 'top');
+
+const componentSource = computed(() => {
+  switch (readPosition()) {
+    case 'bottom':
+      return object.componentsBottom?.();
+    case 'center':
+      return object.componentsCenter?.();
+    case 'left':
+      return object.componentsLeft?.();
+    case 'right':
+      return object.componentsRight?.();
+    case 'top':
+    default:
+      return object.componentsTop?.();
+  }
+});
+
+const componentData = computed(() => {
+  const value = componentSource();
+  if (!value) {
+    return { components: [], layout: {} };
+  }
+
+  if (typeof value !== 'string') {
+    return value;
+  }
+
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
+      console.warn('[RPGJS] Invalid server sprite component payload', error);
+    }
+    return { components: [], layout: {} };
+  }
+});
+
+const layout = computed(() => componentData()?.layout ?? {});
+const rows = computed(() => componentData()?.components ?? []);
+const hitbox = object.hitbox;
+
+const toNumber = (value, fallback = 0) => {
+  const resolved = resolveDynamicValue(value, object);
+  const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);
+  return Number.isFinite(num) ? num : fallback;
+};
+
+const estimateTextWidth = (value, style = {}) => {
+  const text = String(resolveDynamicValue(value ?? '', object) ?? '');
+  const fontSize = toNumber(style.fontSize, 12);
+  return Math.max(1, Math.ceil(text.length * fontSize * 0.6));
+};
+
+const rowMetrics = computed(() => {
+  return rows().map((row) => {
+    const cells = row.map((definition) => {
+      const intrinsic = estimateComponentSize(definition, { toNumber, estimateTextWidth });
+      return {
+        definition,
+        width: intrinsic.width,
+        height: intrinsic.height
+      };
+    });
+
+    return {
+      cells,
+      width: cells.reduce((sum, cell) => sum + cell.width, 0),
+      height: cells.reduce((max, cell) => Math.max(max, cell.height), 0)
+    };
+  });
+});
+
+const gap = computed(() => ({
+  row: toNumber(layout().rowGap ?? layout().gap, 0),
+  column: toNumber(layout().columnGap ?? layout().gap, 0)
+}));
+
+const fallbackBounds = computed(() => {
+  const box = hitbox();
+  const width = box?.w ?? 0;
+  const height = box?.h ?? 0;
+
+  return {
+    left: 0,
+    top: 0,
+    right: width,
+    bottom: height,
+    width,
+    height,
+    centerX: width / 2,
+    centerY: height / 2
+  };
+});
+
+const bounds = computed(() => {
+  const resolvedBounds = typeof graphicBounds === 'function' ? graphicBounds() : undefined;
+  return resolvedBounds ?? fallbackBounds();
+});
+
+const blockSize = computed(() => {
+  const box = hitbox() ?? { w: 0, h: 0 };
+  const graphic = bounds();
+  return computeBlockSize({
+    position: readPosition(),
+    layout: layout(),
+    rowMetrics: rowMetrics(),
+    gap: gap(),
+    graphic,
+    hitbox: box
+  });
+});
+
+const blockPosition = computed(() => {
+  const box = hitbox() ?? { w: 0, h: 0 };
+  const graphic = bounds();
+  return computeBlockPosition({
+    position: readPosition(),
+    size: blockSize(),
+    layout: layout(),
+    graphic,
+    hitbox: box
+  });
+});
+
+const warnMissingComponent = (id) => {
+  if (!id || warnedComponents.has(id)) return;
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') return;
+  warnedComponents.add(id);
+  console.warn(`[RPGJS] Server sprite component "${id}" is not registered on the client.`);
+};
+
+const renderedRows = computed(() => {
+  return rowMetrics().map((row) => {
+    const entries = [];
+
+    row.cells.forEach((cell) => {
+      const definition = cell.definition;
+      const id = getComponentId(definition);
+      const component = client.getSpriteComponent(id);
+
+      if (!component) {
+        warnMissingComponent(id);
+        return;
+      }
+
+      entries.push({
+        component,
+        props: resolveDynamicProps(getComponentProps(definition), object),
+        width: cell.width,
+        height: cell.height
+      });
+    });
+
+    return {
+      height: row.height,
+      entries
+    };
+  });
+});
+</script>

package/src/core/setup.ts

@@ -14,7 +14,7 @@ export async function startGame(options: SetupOptions) {
 
   await injector(context, options.providers);
 
-  const engine = inject(context, RpgClientEngine);
+  const engine = inject<RpgClientEngine>(context, RpgClientEngine);
   await engine.start();
   return context;
-}
+}

package/src/module.ts

@@ -195,6 +195,11 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
                 engine.addSpriteComponentInFront(component);
               });
             }
+            if (sprite.components) {
+              Object.entries(sprite.components).forEach(([id, component]) => {
+                engine.registerSpriteComponent(id, component);
+              });
+            }
           },
         };
       }
@@ -226,4 +231,3 @@ export function provideClientGlobalConfig(config: any = {}) {
   }
   return provideGlobalConfig(config)
 }
-

package/src/services/loadMap.ts

@@ -20,6 +20,8 @@ type MapData = {
   height?: number;
   /** Optional map events data (NPCs, interactive objects, etc.) */
   events?: any;
+  /** Optional named positions, for example Tiled point objects used by changeMap("map", "name") */
+  positions?: Record<string, { x: number; y: number; z?: number }>;
   /** Optional map identifier, defaults to the mapId parameter if not provided */
   id?: string;
 }

package/dist/node_modules/.pnpm/@signe_reactive@2.9.2/node_modules/@signe/reactive/dist/index.js

@@ -1,227 +0,0 @@
-import { BehaviorSubject, filter } from "rxjs";
-//#region ../../node_modules/.pnpm/@signe+reactive@2.9.2/node_modules/@signe/reactive/dist/index.js
-var ArraySubject = class extends BehaviorSubject {
-	constructor(items = []) {
-		super({
-			type: "init",
-			items
-		});
-		this._items = [];
-		this.createProxy(items);
-	}
-	createProxy(items) {
-		this._items = new Proxy(items, {
-			get: (target, prop, receiver) => {
-				const origMethod = target[prop];
-				if (typeof origMethod === "function") return (...args) => {
-					let changeType = "update";
-					let index = void 0;
-					let isMutateFn = false;
-					let itemsToEmit = [];
-					let changeSplice = true;
-					switch (prop) {
-						case "push":
-							index = target.length;
-							changeType = "add";
-							isMutateFn = true;
-							break;
-						case "pop":
-							index = target.length - 1;
-							changeType = "remove";
-							isMutateFn = true;
-							break;
-						case "unshift":
-							index = 0;
-							changeType = "add";
-							isMutateFn = true;
-							break;
-						case "shift":
-							index = 0;
-							changeType = "remove";
-							isMutateFn = true;
-							break;
-						case "splice":
-							index = args[0];
-							const deleteCount = args[1];
-							const newItems = args.slice(2);
-							itemsToEmit = newItems;
-							if (deleteCount > 0 && newItems.length === 0) changeType = "remove";
-							else if (deleteCount === 0 && newItems.length > 0) changeType = "add";
-							else if (deleteCount === 0 && newItems.length === 0) changeSplice = false;
-							else changeType = "update";
-							isMutateFn = true;
-							break;
-					}
-					const result = origMethod.apply(target, args);
-					if (isMutateFn && changeSplice) if (prop === "splice") this.next({
-						type: changeType,
-						index,
-						items: itemsToEmit
-					});
-					else this.next({
-						type: changeType,
-						index,
-						items: args
-					});
-					return result;
-				};
-				return Reflect.get(target, prop, receiver);
-			},
-			set: (target, prop, value) => {
-				const index = !isNaN(Number(prop)) ? Number(prop) : void 0;
-				target[prop] = value;
-				this.next({
-					type: "update",
-					index,
-					items: [value]
-				});
-				return true;
-			}
-		});
-	}
-	get items() {
-		return this._items;
-	}
-	set items(newItems) {
-		this.createProxy(newItems);
-		this.next({
-			type: "reset",
-			items: newItems
-		});
-	}
-};
-var ObjectSubject = class extends BehaviorSubject {
-	constructor(obj = {}) {
-		super({
-			type: "init",
-			value: obj
-		});
-		this.createProxy(obj);
-	}
-	createProxy(obj) {
-		this._obj = new Proxy(obj, {
-			get: (target, prop, receiver) => {
-				return Reflect.get(target, prop, receiver);
-			},
-			set: (target, prop, value, receiver) => {
-				const key = prop;
-				const changeType = key in target ? "update" : "add";
-				target[key] = value;
-				this.next({
-					type: changeType,
-					key,
-					value
-				});
-				return true;
-			},
-			deleteProperty: (target, prop) => {
-				const key = prop;
-				if (key in target) {
-					const value = target[key];
-					delete target[key];
-					this.next({
-						type: "remove",
-						key,
-						value
-					});
-					return true;
-				}
-				return false;
-			}
-		});
-	}
-	get obj() {
-		return this._obj;
-	}
-	set obj(newObj) {
-		this.createProxy(newObj);
-		this.next({
-			type: "reset",
-			value: newObj
-		});
-	}
-};
-var getGlobalReactiveStore = () => {
-	const globalKey = "__REACTIVE_STORE__";
-	if (typeof globalThis !== "undefined") {
-		if (!globalThis[globalKey]) globalThis[globalKey] = {
-			currentDependencyTracker: null,
-			currentSubscriptionsTracker: null
-		};
-		return globalThis[globalKey];
-	}
-	let globalObj;
-	if (typeof window !== "undefined") globalObj = window;
-	else if (typeof self !== "undefined") globalObj = self;
-	else if (typeof Function !== "undefined") globalObj = Function("return this")();
-	else {
-		console.warn("Unable to find global object, using local instance");
-		return {
-			currentDependencyTracker: null,
-			currentSubscriptionsTracker: null
-		};
-	}
-	if (!globalObj[globalKey]) globalObj[globalKey] = {
-		currentDependencyTracker: null,
-		currentSubscriptionsTracker: null
-	};
-	return globalObj[globalKey];
-};
-var reactiveStore = getGlobalReactiveStore();
-var trackDependency = (signal2) => {
-	if (reactiveStore.currentDependencyTracker) reactiveStore.currentDependencyTracker(signal2);
-};
-function signal(defaultValue, options) {
-	let subject;
-	if (Array.isArray(defaultValue)) subject = new ArraySubject(defaultValue);
-	else if (typeof defaultValue === "object" && defaultValue !== null) subject = new ObjectSubject(defaultValue);
-	else subject = new BehaviorSubject(defaultValue);
-	const getValue = () => {
-		if (subject instanceof ArraySubject) return subject.items;
-		else if (subject instanceof ObjectSubject) return subject.obj;
-		return subject.value;
-	};
-	const fn = function() {
-		trackDependency(fn);
-		return getValue();
-	};
-	fn.set = (value) => {
-		const currentValue = getValue();
-		let shouldEmit = true;
-		if (options?.equal) shouldEmit = !options.equal(currentValue, value);
-		else shouldEmit = currentValue !== value;
-		if (shouldEmit) if (subject instanceof ArraySubject) subject.items = value;
-		else if (subject instanceof ObjectSubject) subject.obj = value;
-		else subject.next(value);
-	};
-	fn._isFrozen = false;
-	fn.freeze = () => {
-		fn._isFrozen = true;
-	};
-	fn.unfreeze = () => {
-		fn._isFrozen = false;
-		if (subject instanceof ArraySubject) subject.next({
-			type: "init",
-			items: subject.items
-		});
-		else if (subject instanceof ObjectSubject) subject.next({
-			type: "init",
-			value: subject.obj
-		});
-		else subject.next(subject.value);
-	};
-	fn.mutate = (mutateFn) => {
-		mutateFn(getValue());
-	};
-	fn.update = (updateFn) => {
-		const updatedValue = updateFn(getValue());
-		fn.set(updatedValue);
-	};
-	fn.observable = subject.asObservable().pipe(filter(() => !fn._isFrozen));
-	fn._subject = subject;
-	return fn;
-}
-//#endregion
-export { signal };
-
-//# sourceMappingURL=index.js.map