@rpgjs/client 5.0.0-alpha.8 → 5.0.0-beta.1

package/src/components/dynamics/text.ce

@@ -0,0 +1,183 @@
+<Text text={parseDynamicValue(component.value, object)} ...getComponentStyle(component) />
+
+<script>
+import { computed } from "canvasengine";
+import { parseDynamicValue } from "./parse-value";
+
+const { object } = defineProps();
+const component = object._component;
+
+/**
+ * Parses a numeric style value that can be a number or a string
+ * 
+ * If the value is a string, it may contain dynamic references like {hp}
+ * which need to be parsed using parseDynamicValue. If it's a number,
+ * it's returned as-is wrapped in a computed.
+ * 
+ * @param value - Numeric value (number or string)
+ * @param object - Object to resolve dynamic references from
+ * @returns Computed signal with the numeric value
+ */
+const parseNumericStyleValue = (value, object) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    
+    if (typeof value === 'number') {
+        return value;
+    }
+    
+    if (typeof value === 'string') {
+        // Check if it contains dynamic references
+        if (value.includes('{')) {
+            // Parse dynamic value and convert to number
+            const parsed = parseDynamicValue(value, object);
+            return computed(() => {
+                const str = parsed();
+                const num = parseFloat(str);
+                return isNaN(num) ? 0 : num;
+            });
+        } else {
+            // Simple string number, convert directly
+            const num = parseFloat(value);
+            return isNaN(num) ? undefined : num;
+        }
+    }
+    
+    return value;
+};
+
+/**
+ * Maps component style properties to Canvas Engine Text component props
+ * 
+ * Converts TextComponentOptions from the server to the format expected
+ * by the Canvas Engine Text component. Supports all text styling properties
+ * including fill, fontSize, fontFamily, fontStyle, fontWeight, stroke,
+ * opacity, wordWrap, and align. Also supports dynamic values (number | string)
+ * for numeric properties like fontSize and opacity.
+ * 
+ * @param component - Component definition with style property
+ * @returns Object with Text component props
+ * 
+ * @example
+ * ```ts
+ * // Component with style
+ * const component = {
+ *   style: {
+ *     fill: '#000000',
+ *     fontSize: 20,
+ *     fontFamily: 'Arial',
+ *     fontWeight: 'bold'
+ *   }
+ * };
+ * 
+ * const props = getComponentStyle(component);
+ * // Returns: { color: '#000000', size: 20, fontFamily: 'Arial', style: { fontWeight: 'bold' } }
+ * 
+ * // Component with dynamic fontSize
+ * const component2 = {
+ *   style: {
+ *     fill: '#000000',
+ *     fontSize: '{hp}', // Will be resolved from object.hp
+ *     opacity: '0.8'
+ *   }
+ * };
+ * ```
+ */
+const getComponentStyle = (component) => {
+    if (!component.style) {
+        return {};
+    }
+
+    const style = component.style;
+    const result = {};
+
+    // Map fill to color (shortcut property)
+    // fill can be a string (hex color) or a dynamic string
+    if (style.fill !== undefined) {
+        if (typeof style.fill === 'string' && style.fill.includes('{')) {
+            result.color = parseDynamicValue(style.fill, object);
+        } else {
+            result.color = style.fill;
+        }
+    }
+
+    // Map fontSize to size (shortcut property)
+    // fontSize can be number or string (with dynamic references)
+    if (style.fontSize !== undefined) {
+        const fontSizeValue = parseNumericStyleValue(style.fontSize, object);
+        if (fontSizeValue !== undefined) {
+            result.size = fontSizeValue;
+        }
+    }
+
+    // Map fontFamily (shortcut property)
+    if (style.fontFamily !== undefined) {
+        if (typeof style.fontFamily === 'string' && style.fontFamily.includes('{')) {
+            result.fontFamily = parseDynamicValue(style.fontFamily, object);
+        } else {
+            result.fontFamily = style.fontFamily;
+        }
+    }
+
+    // Build style object for PixiJS Text properties
+    const textStyle = {};
+
+    // Font style properties
+    if (style.fontStyle !== undefined) {
+        if (typeof style.fontStyle === 'string' && style.fontStyle.includes('{')) {
+            textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);
+        } else {
+            textStyle.fontStyle = style.fontStyle;
+        }
+    }
+
+    if (style.fontWeight !== undefined) {
+        if (typeof style.fontWeight === 'string' && style.fontWeight.includes('{')) {
+            textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);
+        } else if (typeof style.fontWeight === 'number') {
+            textStyle.fontWeight = style.fontWeight;
+        } else {
+            textStyle.fontWeight = style.fontWeight;
+        }
+    }
+
+    // Stroke properties
+    if (style.stroke !== undefined) {
+        if (typeof style.stroke === 'string' && style.stroke.includes('{')) {
+            textStyle.stroke = parseDynamicValue(style.stroke, object);
+        } else {
+            textStyle.stroke = style.stroke;
+        }
+    }
+
+    // Opacity (can be number or string)
+    if (style.opacity !== undefined) {
+        const opacityValue = parseNumericStyleValue(style.opacity, object);
+        if (opacityValue !== undefined) {
+            textStyle.opacity = opacityValue;
+        }
+    }
+
+    // Word wrap
+    if (style.wordWrap !== undefined) {
+        textStyle.wordWrap = style.wordWrap;
+    }
+
+    // Text alignment
+    if (style.align !== undefined) {
+        if (typeof style.align === 'string' && style.align.includes('{')) {
+            textStyle.align = parseDynamicValue(style.align, object);
+        } else {
+            textStyle.align = style.align;
+        }
+    }
+
+    // Only add style prop if there are style properties
+    if (Object.keys(textStyle).length > 0) {
+        result.style = textStyle;
+    }
+
+    return result;
+}
+</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>

package/src/components/gui/dialogbox/index.ce

@@ -1,194 +1,211 @@
-<Container justifyContent="center" alignItems="center" width="100%" height="100%">
-  <Container
-    ref="dialogbox"
-    scale={{ x: scaleX }}
-    anchor={[0.5, 0.5]}
-    width={700}
-    height
-    controls
-    positionType="absolute"
-    bottom={10}
-  >
-  <Rect width={700} height={250} color="#1a1a2e" />
-    <Rect
-      x={0}
-      y={0}
-      width={700}
-      height
-      color="#1a1a2e"
-      alpha={0.9}
-      borderRadius={10}
-      border
-      shadow
-    />
-      <Container
-        flexDirection="row"
-        width={700}
-        height
-        alpha={contentOpacity}
-      >
-        <Container flexDirection="column">
-          <Text
-            text
-            color="#fff"
-            fontSize={18}
-            margin={40}
-            typewriter
-            style={textStyle}
-          />
-          @if (visibleSelection) {
-            <Selection selectedIndex={0} items={choices} onSelect />
-          }
-        </Container>
-    </Container>
-</Container>  
-
-  
-</Container>
+<DOMContainer width="100%" height="100%" controls={dialogControls}>
+    <div
+        class="rpg-ui-dialog-container"
+        data-position={dialogPosition()}
+        data-full-width={isFullWidth() ? "true" : "false"}
+        data-has-face={hasFace() ? "true" : "false"}
+    >
+        <div class="rpg-ui-dialog rpg-anim-fade-in">
+            <div class="rpg-ui-dialog-body">
+               <div>
+                    @if (speakerName()) {
+                        <div class="rpg-ui-dialog-speaker">{speakerName()}</div>
+                    }
+                    <div class="rpg-ui-dialog-content">
+                        {displayMessage()}
+                    </div>
+                    @if (hasChoices()) {
+                        <Navigation tabindex={selectedItem} controls={controls}>
+                            <div class="rpg-ui-dialog-choices">
+                                @for ((choice,index) of choices) {
+                                    <div
+                                        class="rpg-ui-dialog-choice"
+                                        class={{active: selectedItem() === index}}
+                                        tabindex={index}
+                                        data-choice-index={index}
+                                        click={selectChoice(index)}
+                                    >{{ choice.text }}</div>
+                                }
+                            </div>
+                        </Navigation>
+                    }
+               </div>
+                @if (hasFace()) {
+                    <div class="rpg-ui-dialog-face">
+                        <DOMSprite sheet={faceSheet(face.id, face.expression)} />
+                    </div>
+                }
+            </div>
+            @if (showIndicator) {
+                <div class="rpg-ui-dialog-indicator"></div>
+            }
+        </div>
+    </div>
+</DOMContainer>
+    
 <script>
-  import Selection from './selection.ce'
-
-  import {
-    animatedSignal,
-    computed,
-    effect,
-    signal,
-    trigger,
-    mount
-  } from "canvasengine";
-
-  import { inject } from "../../../core/inject";
-  import { RpgClientEngine } from "../../../RpgClientEngine";
-
-  const {
-    message,
-    choices: _choices,
-    onFinish,
-    onInteraction
-  } = defineProps();
-
-  const client = inject(RpgClientEngine);
-  const keyboardControls = client.globalConfig.keyboardControls;
-
-  client.stopProcessingInput = true;
-  let isDestroyed = false;
-
-  const texts = [message()]
-  const height = signal(250);
-  const isTextCompleted = signal(false);
-
-  const drawSpeaker = (g) => {
-    g.beginFill(0xffa500); // Orange color
-    g.lineStyle(2, 0x000000); // Black border
-    g.moveTo(0, 0);
-    g.lineTo(70, 0);
-    g.lineTo(80, 15);
-    g.lineTo(70, 30);
-    g.lineTo(0, 30);
-    g.lineTo(0, 0);
-    g.endFill();
-  };
-
-  const border = signal({ width: 5, color: "#595971" });
-  const shadow = signal({ color: "#000", blur: 10, offsetX: 10, offsetY: 10 });
-
-  const contentOpacity = animatedSignal(0, {
-    duration: 1000,
-  });
-
-  const scaleX = animatedSignal(0, {
-    duration: 500,
-  });
-
-  scaleX.set(1);
-  contentOpacity.set(1);
-
-  const currentTextIndex = signal(0);
-  const currentText = computed(() => texts?.[currentTextIndex()] ?? '');
-  const isChoiceDisplayed = signal(false);
-
-  const text = computed(() => {
-    const current = currentText();
-    return typeof current === "string" ? current : current.text;
-  });
-
-  const choices = computed(() => {
-    //const current = currentText();
-    //return typeof current === "string" ? null : current.choices;
-    return _choices;
-  });
-
-  const visibleSelection = computed(() => isChoiceDisplayed() && choices().length != 0)
-
-  const triggerSkip = trigger();
-
-  const typewriter = {
-    speed: 0.3,
-    skip: triggerSkip,
-    onComplete: () => {
-      isTextCompleted.set(true);
-    }
-  }
-
-  const textStyle = {
-    wordWrap: true,
-    wordWrapWidth: 700 - 256 - 80
-  }
-
-  const face = signal({ x: 0, y: 0, width: 256, height: 256 });
-
-  mount((element) => {
-    const [dialogbox] = element.props.children
-    return () => {
-      dialogbox.directives.controls.onDestroy()
-      isDestroyed = true;
-      // Wait destroy is finished before start processing input
-      setTimeout(() => {
-        client.stopProcessingInput = false;
-      }, 500)
-    }
-  })
-
-  const controls = signal({
-    next: {
-      bind: keyboardControls.action,
-      keyDown(e) {
-        if (isDestroyed) return;
-        if (isChoiceDisplayed()) {
-          // If choices are displayed, do nothing (wait for selection)
-          return;
+    import { effect, signal, computed, createTabindexNavigator, mount } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { delay } from "@rpgjs/common";
+
+    const engine = inject(RpgClientEngine);
+    const currentPlayer = engine.scene.currentPlayer
+    const keyboardControls = engine.globalConfig.keyboardControls;
+
+    engine.stopProcessingInput = true;
+
+    const selectedItem = signal(0)
+    let isDestroyed = false;
+
+    const {
+        data,
+        onFinish,
+        onInteraction
+    } = defineProps();
+
+    const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();
+    const fullWidth = computed(() => data().fullWidth || false);
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+
+    const speakerName = computed(() => {
+        const value = resolveProp(speaker);
+        return value ? String(value) : "";
+    });
+
+    const dialogPosition = computed(() => resolveProp(position) || "bottom");
+    const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
+    const hasFace = computed(() => !!resolveProp(face));
+
+    const displayMessage = signal("");
+    const fullMessage = signal("");
+    const isTyping = signal(false);
+    let typewriterTimer = null;
+    let rootElement = null;
+
+    mount((element) => {
+        rootElement = element;
+    });
+
+    const startTypewriter = (text) => {
+        if (typewriterTimer) clearInterval(typewriterTimer);
+        displayMessage.set("");
+        if (!text) return;
+        let index = 0;
+        isTyping.set(true);
+        typewriterTimer = setInterval(() => {
+            index += 1;
+            displayMessage.set(text.slice(0, index));
+            if (index >= text.length) {
+                clearInterval(typewriterTimer);
+                typewriterTimer = null;
+                isTyping.set(false);
+            }
+        }, 20);
+    };
+
+    const finishTyping = () => {
+        if (typewriterTimer) clearInterval(typewriterTimer);
+        typewriterTimer = null;
+        displayMessage.set(fullMessage());
+        isTyping.set(false);
+    };
+
+    effect(() => {
+        const text = resolveProp(message) || "";
+        fullMessage.set(text);
+        const useTypewriter = resolveProp(typewriterEffect) !== false;
+        if (!useTypewriter) {
+            finishTyping();
+            return;
         }
+        startTypewriter(text);
+    });
+
 
-        // If text is still typing, just skip (fast forward) the animation
-        if (!isTextCompleted()) {
-          triggerSkip.start();
-          isTextCompleted.set(true);
+    const hasChoices = computed(() => choices.length > 0);
+    const showIndicator = computed(() => !hasChoices() && !isTyping());
+    const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');
+
+    function selectChoice(index) {
+        return function() {
+            selectedItem.set(index);
+            onSelect(index);
         }
-        else {
-          const isFinished = currentTextIndex() === texts.length - 1;
-          currentTextIndex.update((index) => {
-            if (index < texts.length - 1) {
-              return index + 1;
+    }
+
+    function _onFinish(value) {
+        if (onFinish) onFinish(value);
+    }
+
+    const onSelect = (index) => {
+        _onFinish(index);
+    };
+
+    const controls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                if (!hasChoices()) return;
+                nav.next(-1);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                if (!hasChoices()) return;
+                nav.next(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (isTyping()) {
+                    finishTyping();
+                    return;
+                }
+                if (!hasChoices()) return;
+                onSelect(selectedItem());
             }
-            return index;
-          });
-          isChoiceDisplayed.set(false);
-          isTextCompleted.set(false);
-          if (isFinished && onFinish) {
-            onFinish();
-          } 
+        },
+        gamepad: {
+            enabled: true
         }
-      },
-    },
-  });
-
-  const onSelect = (index) => {
-    onFinish(index);
-  }
-  
-  effect(() => {
-    if (choices().length != 0) {
-      isChoiceDisplayed.set(true);
+    });
+    
+    const dialogControls = signal({
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (isTyping()) {
+                    finishTyping();
+                    return;
+                }
+                if (hasChoices()) return;
+                _onFinish();
+            }
+        },
+    })
+
+    const faceSheet = (graphicId, animationName) => {
+        return {
+            definition: engine.getSpriteSheet(graphicId),
+            playing: animationName,
+        };
     }
-  });
-</script>
+
+    mount((element) => {
+        return () => {
+            isDestroyed = true;
+            // Wait destroy is finished before start processing input
+            delay(() => {
+                engine.stopProcessingInput = false;
+            })
+        }
+  })
+</script>