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

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

@@ -0,0 +1,109 @@
+import { describe, expect, test } from "vitest";
+import {
+  computeBlockPosition,
+  computeBlockSize,
+  estimateComponentSize,
+  getComponentProps
+} from "./player-components-utils";
+
+const graphic = {
+  left: -8,
+  top: -24,
+  right: 40,
+  bottom: 48,
+  width: 48,
+  height: 72,
+  centerX: 16,
+  centerY: 12
+};
+
+describe("player component layout utilities", () => {
+  test("bottom layout uses the hitbox as positioning rectangle", () => {
+    const rowMetrics = [
+      {
+        cells: [{ width: 32, height: 32 }],
+        width: 32,
+        height: 32
+      }
+    ];
+
+    const size = computeBlockSize({
+      position: "bottom",
+      rowMetrics,
+      graphic,
+      hitbox: { w: 32, h: 32 }
+    });
+
+    expect(size).toEqual({ width: 32, height: 32 });
+    expect(
+      computeBlockPosition({
+        position: "bottom",
+        size,
+        graphic,
+        hitbox: { w: 32, h: 32 }
+      })
+    ).toEqual({ x: 0, y: 0 });
+  });
+
+  test("bottom layout centers smaller content in the hitbox rectangle", () => {
+    const size = computeBlockSize({
+      position: "bottom",
+      rowMetrics: [
+        {
+          cells: [{ width: 16, height: 8 }],
+          width: 16,
+          height: 8
+        }
+      ],
+      graphic,
+      hitbox: { w: 32, h: 32 }
+    });
+
+    expect(size).toEqual({ width: 32, height: 32 });
+    expect(
+      computeBlockPosition({
+        position: "bottom",
+        size,
+        graphic,
+        hitbox: { w: 32, h: 32 }
+      })
+    ).toEqual({ x: 0, y: 0 });
+  });
+
+  test("bottom margins move from the hitbox-centered position", () => {
+    const position = computeBlockPosition({
+      position: "bottom",
+      size: { width: 32, height: 32 },
+      layout: { marginLeft: 3, marginRight: 1, marginBottom: 16, marginTop: 4 },
+      graphic,
+      hitbox: { w: 32, h: 32 }
+    });
+
+    expect(position).toEqual({ x: 2, y: 12 });
+  });
+
+  test("top layout remains anchored above graphic bounds", () => {
+    const position = computeBlockPosition({
+      position: "top",
+      size: { width: 50, height: 12 },
+      graphic,
+      hitbox: { w: 32, h: 32 }
+    });
+
+    expect(position).toEqual({ x: -9, y: -36 });
+  });
+
+  test("estimates bar labels, shape aliases, circles, lines and polygons", () => {
+    expect(estimateComponentSize({ type: "hpBar", style: { width: 60, height: 6 }, text: "{$percent}%" })).toEqual({ width: 60, height: 18 });
+    expect(estimateComponentSize({ type: "shape", value: { type: "rect", width: 32, height: 24 } })).toEqual({ width: 32, height: 24 });
+    expect(estimateComponentSize({ type: "shape", value: { type: "circle", radius: 7 } })).toEqual({ width: 14, height: 14 });
+    expect(estimateComponentSize({ type: "shape", value: { type: "line", x1: -4, y1: 2, x2: 6, y2: 2 } })).toEqual({ width: 10, height: 1 });
+    expect(estimateComponentSize({ type: "shape", value: { type: "polygon", points: [-5, 2, 15, 2, 5, 12] } })).toEqual({ width: 20, height: 10 });
+  });
+
+  test("legacy hp and sp bars receive default fill colors", () => {
+    expect(getComponentProps({ type: "hpBar" }).style.fillColor).toBe("#ef4444");
+    expect(getComponentProps({ type: "spBar" }).style.fillColor).toBe("#3b82f6");
+    expect(getComponentProps({ type: "hpBar", style: { fillColor: "#111111" } }).style.fillColor).toBe("#111111");
+  });
+});

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>