@rpgjs/client 5.0.0-alpha.9 → 5.0.0-beta.10

package/src/components/dynamics/bar.ce

@@ -0,0 +1,87 @@
+<Container width={width} height={containerHeight} minWidth={width} minHeight={containerHeight}>
+  <Graphics width={width} height={containerHeight} draw={drawBar} />
+  @if (hasLabel) {
+    <Text text={labelText} x={labelPosition.x} y={labelPosition.y} size={labelSize} color={labelColor} />
+  }
+</Container>
+
+<script>
+import { computed } from "canvasengine";
+import { resolveDynamicValue } from "./parse-value";
+
+const { object, current, max, style, text } = defineProps();
+
+const read = (prop, fallback) => prop ? prop() : fallback;
+
+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 toColor = (value, fallback) => {
+  const resolved = resolveDynamicValue(value, object);
+  if (typeof resolved === 'number') return resolved;
+  if (typeof resolved === 'string' && resolved.startsWith('#')) {
+    return parseInt(resolved.slice(1), 16);
+  }
+  return resolved ?? fallback;
+};
+
+const config = computed(() => read(style, {}) ?? {});
+const width = computed(() => toNumber(config().width, 50));
+const height = computed(() => toNumber(config().height, 8));
+const borderRadius = computed(() => toNumber(config().borderRadius, 3));
+const borderWidth = computed(() => toNumber(config().borderWidth, 1));
+const backgroundColor = computed(() => toColor(config().bgColor, 0x16213e));
+const fillColor = computed(() => toColor(config().fillColor, 0x4ade80));
+const borderColor = computed(() => toColor(config().borderColor, 0x4a5568));
+const opacity = computed(() => Math.max(0, Math.min(1, toNumber(config().opacity, 1))));
+
+const currentValue = computed(() => toNumber(read(current, 0), 0));
+const maxValue = computed(() => Math.max(0, toNumber(read(max, 0), 0)));
+const percent = computed(() => {
+  const max = maxValue();
+  if (max <= 0) return 0;
+  return Math.max(0, Math.min(1, currentValue() / max));
+});
+
+const fillWidth = computed(() => Math.max(0, width() * percent()));
+const labelTemplate = computed(() => read(text, null));
+const labelText = computed(() => {
+  const template = labelTemplate();
+  if (template == null || template === '') return '';
+
+  const value = String(template)
+    .replace(/\{\$current\}/g, String(currentValue()))
+    .replace(/\{\$max\}/g, String(maxValue()))
+    .replace(/\{\$percent\}/g, String(Math.round(percent() * 100)));
+
+  return String(resolveDynamicValue(value, object) ?? '');
+});
+const labelSize = computed(() => toNumber(config().fontSize, 10));
+const hasLabel = computed(() => labelText().length > 0);
+const labelOffset = computed(() => hasLabel() ? labelSize() + 2 : 0);
+const containerHeight = computed(() => labelOffset() + height());
+const labelColor = computed(() => toColor(config().textColor, 0xffffff));
+const labelPosition = computed(() => ({
+  x: 0,
+  y: 0
+}));
+
+const drawBar = (g) => {
+  g.roundRect(0, labelOffset(), width(), height(), borderRadius());
+  g.fill({ color: backgroundColor(), alpha: opacity() });
+
+  const currentWidth = fillWidth();
+  if (currentWidth > 0) {
+    g.roundRect(0, labelOffset(), currentWidth, height(), borderRadius());
+    g.fill({ color: fillColor(), alpha: opacity() });
+  }
+  
+  const strokeWidth = borderWidth();
+  if (strokeWidth <= 0) return;
+  g.roundRect(0, labelOffset(), width(), height(), borderRadius());
+  g.stroke({ color: borderColor(), width: strokeWidth, alpha: opacity() });
+};
+</script>

package/src/components/dynamics/image.ce

@@ -0,0 +1,20 @@
+<Sprite sheet={sheet} />
+
+<script>
+import { computed } from "canvasengine";
+import { RpgClientEngine } from "../../RpgClientEngine";
+import { inject } from "../../core/inject";
+import { resolveDynamicValue } from "./parse-value";
+
+const { object, value } = defineProps();
+const client = inject(RpgClientEngine);
+
+const sheet = computed(() => {
+  const id = resolveDynamicValue(value?.(), object);
+  if (!id) return null;
+  return {
+    definition: client.getSpriteSheet(id),
+    playing: 'default'
+  };
+});
+</script>

package/src/components/dynamics/parse-value.spec.ts

@@ -0,0 +1,83 @@
+import { describe, expect, test } from "vitest";
+import { signal } from "canvasengine";
+import { resolveDynamicProps, resolveDynamicValue } from "./parse-value";
+
+describe("dynamic component values", () => {
+  test("resolves player properties and keeps bar placeholders for the bar renderer", () => {
+    const object = {
+      _name: signal("Alex"),
+      _speed: signal(4),
+      _canMove: signal(true),
+      hpSignal: signal(100),
+      _param: signal({ maxHp: 120 }),
+      get name() {
+        return this._name();
+      },
+      set name(value: string) {
+        this._name.set(value);
+      },
+      get speed() {
+        return this._speed();
+      },
+      set speed(value: number) {
+        this._speed.set(value);
+      },
+      get canMove() {
+        return this._canMove();
+      },
+      set canMove(value: boolean) {
+        this._canMove.set(value);
+      }
+    };
+
+    expect(resolveDynamicValue("HP: {hp}/{param.maxHp} {name} {speed} {canMove} {$current}", object)).toBe("HP: 100/120 Alex 4 true {$current}");
+  });
+
+  test("keeps resolved props reactive", () => {
+    const object = {
+      _name: signal("Alex"),
+      _speed: signal(4),
+      _canMove: signal(true),
+      hpSignal: signal(100),
+      _param: signal({ maxHp: 120 }),
+      get name() {
+        return this._name();
+      },
+      set name(value: string) {
+        this._name.set(value);
+      },
+      get speed() {
+        return this._speed();
+      },
+      set speed(value: number) {
+        this._speed.set(value);
+      },
+      get canMove() {
+        return this._canMove();
+      },
+      set canMove(value: boolean) {
+        this._canMove.set(value);
+      }
+    };
+    const props: any = resolveDynamicProps({
+      value: "HP: {hp} {name} {speed} {canMove}",
+      text: "{$current}/{$max} {name}",
+      style: {
+        width: "{hp}"
+      }
+    }, object);
+
+    expect(props.value()).toBe("HP: 100 Alex 4 true");
+    expect(props.text()).toBe("{$current}/{$max} Alex");
+    expect(props.style()).toEqual({ width: "100" });
+
+    object.hpSignal.set(10);
+    object.name = "Sam";
+    object.speed = 6;
+    object.canMove = false;
+
+    expect(props.value()).toBe("HP: 10 Sam 6 false");
+    expect(props.text()).toBe("{$current}/{$max} Sam");
+    expect(props.style()).toEqual({ width: "10" });
+  });
+});

package/src/components/dynamics/parse-value.ts

@@ -0,0 +1,154 @@
+import { computed } from "canvasengine";
+
+interface MatchResult {
+    property: string;
+    fullMatch: string;
+    index: number;
+}
+
+const readSignal = (value: any) => typeof value === 'function' ? value() : value;
+const DYNAMIC_VALUE_PATTERN = /\{([^}]+)\}/g;
+
+const hasDynamicValue = (value: any) => {
+    value = readSignal(value);
+    if (typeof value !== 'string') return false;
+    DYNAMIC_VALUE_PATTERN.lastIndex = 0;
+    return DYNAMIC_VALUE_PATTERN.test(value);
+};
+
+const resolveDynamicSnapshot = (value: any, object?: any): any => {
+    value = readSignal(value);
+
+    if (Array.isArray(value)) {
+        return value.map((entry) => resolveDynamicSnapshot(entry, object));
+    }
+
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(
+            Object.entries(value).map(([key, entry]) => [key, resolveDynamicSnapshot(entry, object)])
+        );
+    }
+
+    return resolveDynamicValue(value, object);
+};
+
+export const getDynamicValue = (property: string, object?: any) => {
+    try {
+        const propertyPath = property.split('.');
+        let currentValue = object;
+
+        for (let j = 0; j < propertyPath.length; j++) {
+            let prop = propertyPath[j];
+
+            currentValue = readSignal(currentValue);
+
+            if (j === 0) {
+                if (prop === 'hp') prop = 'hpSignal';
+                if (prop === 'sp') prop = 'spSignal';
+                if (prop === 'param') prop = '_param';
+                if (prop === 'name' && currentValue && typeof currentValue === 'object' && '_name' in currentValue) {
+                    prop = '_name';
+                }
+                if (prop === 'speed' && currentValue && typeof currentValue === 'object' && '_speed' in currentValue) {
+                    prop = '_speed';
+                }
+                if (prop === 'canMove' && currentValue && typeof currentValue === 'object' && '_canMove' in currentValue) {
+                    prop = '_canMove';
+                }
+            }
+
+            if (currentValue && typeof currentValue === 'object' && prop in currentValue) {
+                currentValue = currentValue[prop];
+            } else {
+                return undefined;
+            }
+        }
+
+        return readSignal(currentValue);
+    } catch (error) {
+        return undefined;
+    }
+};
+
+export const resolveDynamicValue = (value: any, object?: any): any => {
+    value = readSignal(value);
+
+    if (typeof value !== 'string') {
+        return value;
+    }
+
+    return value.replace(DYNAMIC_VALUE_PATTERN, (fullMatch, property) => {
+        const propertyValue = getDynamicValue(property, object);
+        if (propertyValue == null && property.startsWith('$')) return fullMatch;
+        return propertyValue != null ? String(propertyValue) : '';
+    });
+};
+
+const resolveDynamicProp = (value: any, object?: any): any => {
+    if (Array.isArray(value) || (value && typeof value === 'object' && typeof value !== 'function')) {
+        return computed(() => resolveDynamicSnapshot(value, object));
+    }
+
+    if (typeof value === 'function' || hasDynamicValue(value)) {
+        return computed(() => resolveDynamicValue(value, object));
+    }
+
+    return value;
+};
+
+export const resolveDynamicProps = (props: any, object?: any): any => {
+    props = readSignal(props);
+
+    if (Array.isArray(props)) {
+        return computed(() => resolveDynamicSnapshot(props, object));
+    }
+
+    if (props && typeof props === 'object') {
+        return Object.fromEntries(
+            Object.entries(props).map(([key, value]) => [key, resolveDynamicProp(value, object)])
+        );
+    }
+
+    return resolveDynamicProp(props, object);
+};
+
+export const parseDynamicValue = (value: any, object?: any) => {
+    if (typeof value !== 'string') {
+        return computed(() => String(value ?? ''));
+    }
+
+    // Find all dynamic references like {propertyName}
+    const matches: MatchResult[] = [];
+    let match;
+
+    DYNAMIC_VALUE_PATTERN.lastIndex = 0;
+    while ((match = DYNAMIC_VALUE_PATTERN.exec(value)) !== null) {
+        matches.push({
+            property: match[1],
+            fullMatch: match[0],
+            index: match.index!
+        });
+    }
+
+    // If no dynamic references found, return simple computed
+    if (matches.length === 0) {
+        return computed(() => value);
+    }
+
+    // Create computed that tracks all referenced signals
+    return computed(() => {
+        let result = value;
+        
+        // Replace from end to start to preserve indices
+        for (let i = matches.length - 1; i >= 0; i--) {
+            const { property, fullMatch } = matches[i];
+            
+            const currentValue = getDynamicValue(property, object);
+            const propertyValue = currentValue != null ? String(currentValue) : property.startsWith('$') ? fullMatch : '';
+            
+            result = result.replace(fullMatch, propertyValue);
+        }
+        
+        return result;
+    });
+};

package/src/components/dynamics/shape-utils.spec.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from "vitest";
+import { getShapeBox, getShapePointBounds, translatePolygonPoints } from "./shape-utils";
+
+describe("shape utilities", () => {
+  test("normalizes rectangles and circles around their rendered bounds", () => {
+    expect(getShapeBox({ type: "rect", width: 32, height: 32 })).toEqual({
+      width: 32,
+      height: 32,
+      offsetX: 0,
+      offsetY: 0
+    });
+    expect(getShapeBox({ type: "circle", radius: 8 })).toEqual({
+      width: 16,
+      height: 16,
+      offsetX: 0,
+      offsetY: 0
+    });
+  });
+
+  test("normalizes line bounds with negative coordinates", () => {
+    expect(getShapeBox({ type: "line", x1: -4, y1: 6, x2: 12, y2: -2 })).toEqual({
+      width: 16,
+      height: 8,
+      offsetX: 4,
+      offsetY: 2
+    });
+  });
+
+  test("normalizes polygon bounds and translated points", () => {
+    const box = getShapeBox({ type: "polygon", points: [-5, 2, 15, 2, 5, 12] });
+
+    expect(getShapePointBounds([-5, 2, 15, 2, 5, 12])).toEqual({
+      minX: -5,
+      minY: 2,
+      maxX: 15,
+      maxY: 12
+    });
+    expect(box).toEqual({
+      width: 20,
+      height: 10,
+      offsetX: 5,
+      offsetY: -2
+    });
+    expect(translatePolygonPoints([-5, 2, 15, 2, 5, 12], box)).toEqual([0, 0, 20, 0, 10, 10]);
+  });
+});

package/src/components/dynamics/shape-utils.ts

@@ -0,0 +1,61 @@
+const defaultToNumber = (value: any, fallback = 0) => {
+  const num = typeof value === 'number' ? value : parseFloat(value);
+  return Number.isFinite(num) ? num : fallback;
+};
+
+export function getShapePointBounds(points: any[] = [], toNumber = defaultToNumber) {
+  if (!Array.isArray(points) || points.length < 2) {
+    return { minX: 0, minY: 0, maxX: 1, maxY: 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 { minX, minY, maxX, maxY };
+}
+
+export function getShapeBox(cfg: any, toNumber = defaultToNumber) {
+  if (cfg.type === 'circle') {
+    return { width: cfg.radius * 2, height: cfg.radius * 2, offsetX: 0, offsetY: 0 };
+  }
+
+  if (cfg.type === 'line') {
+    const minX = Math.min(cfg.x1, cfg.x2);
+    const minY = Math.min(cfg.y1, cfg.y2);
+    const maxX = Math.max(cfg.x1, cfg.x2);
+    const maxY = Math.max(cfg.y1, cfg.y2);
+    return {
+      width: Math.max(1, maxX - minX),
+      height: Math.max(1, maxY - minY),
+      offsetX: -minX,
+      offsetY: -minY
+    };
+  }
+
+  if (cfg.type === 'polygon') {
+    const bounds = getShapePointBounds(cfg.points, toNumber);
+    return {
+      width: Math.max(1, bounds.maxX - bounds.minX),
+      height: Math.max(1, bounds.maxY - bounds.minY),
+      offsetX: -bounds.minX,
+      offsetY: -bounds.minY
+    };
+  }
+
+  return { width: cfg.width, height: cfg.height, offsetX: 0, offsetY: 0 };
+}
+
+export function translatePolygonPoints(points: any[] = [], box: { offsetX: number; offsetY: number }, toNumber = defaultToNumber) {
+  return points.map((point, index) => toNumber(point, 0) + (index % 2 === 0 ? box.offsetX : box.offsetY));
+}

package/src/components/dynamics/shape.ce

@@ -0,0 +1,89 @@
+<Container width={shapeWidth} height={shapeHeight} minWidth={shapeWidth} minHeight={shapeHeight}>
+  <Graphics width={shapeWidth} height={shapeHeight} draw={drawShape} />
+</Container>
+
+<script>
+import { computed } from "canvasengine";
+import { resolveDynamicValue } from "./parse-value";
+import { getShapeBox, translatePolygonPoints } from "./shape-utils";
+
+const props = defineProps();
+const { object } = props;
+
+const read = (prop, fallback) => prop ? prop() : fallback;
+
+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 toColor = (value, fallback) => {
+  const resolved = resolveDynamicValue(value, object);
+  if (typeof resolved === 'number') return resolved;
+  if (typeof resolved === 'string' && resolved.startsWith('#')) {
+    return parseInt(resolved.slice(1), 16);
+  }
+  return resolved ?? fallback;
+};
+
+const config = computed(() => ({
+  type: read(props.type, 'rectangle'),
+  fill: toColor(read(props.fill, '#ffffff'), 0xffffff),
+  radius: toNumber(read(props.radius, 8), 8),
+  width: toNumber(read(props.width, 16), 16),
+  height: toNumber(read(props.height, 16), 16),
+  x1: toNumber(read(props.x1, 0), 0),
+  y1: toNumber(read(props.y1, 0), 0),
+  x2: toNumber(read(props.x2, 16), 16),
+  y2: toNumber(read(props.y2, 0), 0),
+  opacity: Math.max(0, Math.min(1, toNumber(read(props.opacity, 1), 1))),
+  points: read(props.points, []),
+  line: read(props.line, null)
+}));
+
+const shapeBox = computed(() => getShapeBox(config(), toNumber));
+
+const shapeWidth = computed(() => shapeBox().width);
+const shapeHeight = computed(() => shapeBox().height);
+
+const drawShape = (g) => {
+  const cfg = config();
+  const box = shapeBox();
+
+  if (cfg.type === 'circle') {
+    g.circle(cfg.radius, cfg.radius, cfg.radius);
+  } else if (cfg.type === 'ellipse') {
+    g.ellipse(box.width / 2, box.height / 2, box.width / 2, box.height / 2);
+  } else if (cfg.type === 'line') {
+    g.moveTo(cfg.x1 + box.offsetX, cfg.y1 + box.offsetY);
+    g.lineTo(cfg.x2 + box.offsetX, cfg.y2 + box.offsetY);
+  } else if (cfg.type === 'polygon' && Array.isArray(cfg.points)) {
+    g.poly(translatePolygonPoints(cfg.points, box, toNumber));
+  } else if (cfg.type === 'rounded-rectangle') {
+    g.roundRect(0, 0, box.width, box.height, toNumber(read(props.radius, 4), 4));
+  } else {
+    g.rect(0, 0, box.width, box.height);
+  }
+
+  if (cfg.type === 'line') {
+    const line = cfg.line ?? {};
+    g.stroke({
+      color: toColor(line.color, cfg.fill),
+      width: toNumber(line.width, 1),
+      alpha: toNumber(line.alpha, cfg.opacity)
+    });
+    return;
+  }
+
+  g.fill({ color: cfg.fill, alpha: cfg.opacity });
+
+  if (cfg.line) {
+    g.stroke({
+      color: toColor(cfg.line.color, cfg.fill),
+      width: toNumber(cfg.line.width, 1),
+      alpha: toNumber(cfg.line.alpha, cfg.opacity)
+    });
+  }
+};
+</script>

package/src/components/dynamics/text.ce

@@ -0,0 +1,68 @@
+<Text text={textValue} color={textColor} size={textSize} fontFamily={textFontFamily} style={textStyle} />
+
+<script>
+import { computed } from "canvasengine";
+import { resolveDynamicValue } from "./parse-value";
+
+const { object, value, style } = defineProps();
+
+const read = (prop, fallback) => prop ? prop() : fallback;
+
+const parseNumericStyleValue = (value, object) => {
+    value = resolveDynamicValue(value, object);
+    if (value === undefined || value === null) return undefined;
+    if (typeof value === 'number') return value;
+
+    const num = parseFloat(value);
+    return isNaN(num) ? undefined : num;
+};
+
+const getTextStyle = (style) => {
+    if (!style) return {};
+    const textStyle = {};
+
+    if (style.fontStyle !== undefined) {
+        textStyle.fontStyle = resolveDynamicValue(style.fontStyle, object);
+    }
+
+    if (style.fontWeight !== undefined) {
+        textStyle.fontWeight = resolveDynamicValue(style.fontWeight, object);
+    }
+
+    if (style.stroke !== undefined) {
+        textStyle.stroke = resolveDynamicValue(style.stroke, object);
+    }
+
+    if (style.opacity !== undefined) {
+        const opacityValue = parseNumericStyleValue(style.opacity, object);
+        if (opacityValue !== undefined) {
+            textStyle.opacity = opacityValue;
+        }
+    }
+
+    if (style.wordWrap !== undefined) {
+        textStyle.wordWrap = style.wordWrap;
+    }
+
+    if (style.align !== undefined) {
+        textStyle.align = resolveDynamicValue(style.align, object);
+    }
+
+    return textStyle;
+};
+
+const textValue = computed(() => String(resolveDynamicValue(read(value, ''), object) ?? ''));
+const textColor = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fill !== undefined ? resolveDynamicValue(currentStyle.fill, object) : undefined;
+});
+const textSize = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fontSize !== undefined ? parseNumericStyleValue(currentStyle.fontSize, object) : undefined;
+});
+const textFontFamily = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fontFamily !== undefined ? resolveDynamicValue(currentStyle.fontFamily, object) : undefined;
+});
+const textStyle = computed(() => getTextStyle(read(style, {})));
+</script>

package/src/components/gui/box.ce

@@ -0,0 +1,17 @@
+<Container positionType="absolute" top={top} left={left}>
+    <Container
+      anchor={[0.5, 0.5]}
+    >
+    <Rect width height color={_color} />
+    <Container attach={child}></Container>
+  </Container>  
+</Container>
+
+<script>
+  import { RpgClientEngine, inject } from "../../index";
+
+  const { width, height, children, color, top, left } = defineProps();
+  const engine = inject(RpgClientEngine)
+  const child = children[0]
+  const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || "#1a1a2e")
+</script>