@rpgjs/client 5.0.0-alpha.2 → 5.0.0-alpha.20

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

@@ -3,41 +3,38 @@
     ref="dialogbox"
     scale={{ x: scaleX }}
     anchor={[0.5, 0.5]}
-    width={700}
+    width={widthBox}
     height
     controls
-    positionType="absolute"
-    bottom={10}
+    ...positionBox()
   >
-  <Rect width={700} height={250} color="#1a1a2e" />
-    <Rect
-      x={0}
-      y={0}
-      width={700}
-      height
-      color="#1a1a2e"
-      alpha={0.9}
-      borderRadius={10}
-      border
-      shadow
-    />
+  <Rect 
+    width={widthBox} 
+    height 
+    color={@dialogboxStyles.@backgroundColor} 
+    alpha={@dialogboxStyles.@backgroundOpacity} />
       <Container
         flexDirection="row"
-        width={700}
+        width={widthBox}
         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 flexDirection="row">
+          <Container flexDirection="column">
+            <Text
+              text
+              color="#fff"
+              fontSize={18}
+              margin
+              typewriter
+              style={textStyle}
+            />
+            @if (visibleSelection) {
+              <Selection selectedIndex={0} items={choices} onSelect />
+            }
+          </Container>
+          @if (face) {
+            <Sprite sheet={@faceSheet(@face.@id, @face.@expression)} />
           }
         </Container>
     </Container>
@@ -59,22 +56,36 @@
 
   import { inject } from "../../../core/inject";
   import { RpgClientEngine } from "../../../RpgClientEngine";
+  import BoxComponent from "../box.ce";
 
   const {
     message,
     choices: _choices,
     onFinish,
-    onInteraction
+    onInteraction,
+    face,
+    position,
+    typewriterEffect,
+    autoClose
   } = defineProps();
-
+  
   const client = inject(RpgClientEngine);
   const keyboardControls = client.globalConfig.keyboardControls;
 
+  const dialogboxStyles = client.globalConfig.box.styles ?? {
+    backgroundColor: "#1a1a2e",
+    backgroundOpacity: 0.9,
+  }
+  const dialogBoxTypewriterSound = client.globalConfig?.box?.sounds?.typewriter
+
+  const sounds = client.sounds;
+
   client.stopProcessingInput = true;
   let isDestroyed = false;
 
   const texts = [message()]
-  const height = signal(250);
+  const height = signal(256);
+  const margin = signal(40);
   const isTextCompleted = signal(false);
 
   const drawSpeaker = (g) => {
@@ -100,6 +111,20 @@
     duration: 500,
   });
 
+  const positionBox = computed(() => {
+    if (position() === 'bottom') {
+      return { positionType: 'absolute', bottom: 10 };
+    }
+    else if (position() === 'top') {
+      return { positionType: 'absolute', top: 10 };
+    }
+    return {};
+  });
+
+  const widthBox = computed(() => {
+    return 700;
+  });
+
   scaleX.set(1);
   contentOpacity.set(1);
 
@@ -112,6 +137,13 @@
     return typeof current === "string" ? current : current.text;
   });
 
+  const faceSheet = (graphicId, animationName) => {
+    return {
+      definition: client.getSpriteSheet(graphicId),
+      playing: animationName,
+    };
+  }
+
   const choices = computed(() => {
     //const current = currentText();
     //return typeof current === "string" ? null : current.choices;
@@ -122,21 +154,27 @@
 
   const triggerSkip = trigger();
 
-  const typewriter = {
+  const typewriter = typewriterEffect() ? {
     speed: 0.3,
     skip: triggerSkip,
+    sound: {
+      src: sounds.get(dialogBoxTypewriterSound)?.src
+    },
     onComplete: () => {
       isTextCompleted.set(true);
+      if (autoClose()) {
+        setTimeout(() => {
+          onFinish();
+        }, 1000);
+      }
     }
-  }
+  } : null;
 
   const textStyle = {
     wordWrap: true,
-    wordWrapWidth: 700 - 256 - 80
+    wordWrapWidth: widthBox() - margin() * 2 - (face ? 256 : 0)
   }
 
-  const face = signal({ x: 0, y: 0, width: 256, height: 256 });
-
   mount((element) => {
     const [dialogbox] = element.props.children
     return () => {

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

@@ -5,7 +5,7 @@
 </Container>
 
 <script>
-  import { signal, computed, mount } from "canvasengine";
+  import { signal, computed, mount, Howl } from "canvasengine";
   import ItemMenu from "./itemMenu.ce";
   import { RpgClientEngine } from "../../../RpgClientEngine";
   import { inject } from "../../../core/inject";
@@ -19,6 +19,18 @@
 
   const client = inject(RpgClientEngine);
   const keyboardControls = client.globalConfig.keyboardControls;
+  const sounds = client.sounds;
+  const dialogBoxCursorSound = client.globalConfig?.box?.sounds?.cursorMove
+  const dialogBoxCursorSelectSound = client.globalConfig?.box?.sounds?.cursorSelect
+
+
+  const playDialogBoxSound = (soundId) => {
+    if (!soundId) return;
+    const sound = new Howl.Howl({
+      src: [sounds.get(soundId)?.src]
+    })
+    sound.play()
+  }
 
   const selected = (index) => {
     return computed(() => {
@@ -36,6 +48,7 @@
     down: {
       bind: keyboardControls.down,
       keyDown() {
+        playDialogBoxSound(dialogBoxCursorSound);
         selectedIndex.update((currentIndex) => {
           if (wrapAround) {
             return (currentIndex + 1) % items().length;
@@ -48,6 +61,7 @@
     up: {
       bind: keyboardControls.up,
       keyDown() {
+        playDialogBoxSound(dialogBoxCursorSound);
         selectedIndex.update((currentIndex) => {
           if (wrapAround) {
             return (currentIndex - 1 + items().length) % items().length;
@@ -61,6 +75,7 @@
       bind: keyboardControls.action,
       keyDown() {
         onSelect?.(selectedIndex());
+        playDialogBoxSound(dialogBoxCursorSelectSound);
       },
     },
   });

package/src/components/gui/index.ts

@@ -1,5 +1,4 @@
-import Dialogbox from "./dialogbox/index.ce";
+import DialogboxComponent from "./dialogbox/index.ce";
+import BoxComponent from "./box.ce";
 
-export const PrebuiltGui = {
-    Dialogbox
-}
+export { DialogboxComponent, BoxComponent }

package/src/components/index.ts

@@ -1,3 +1,7 @@
 import EventLayerComponent from "./scenes/event-layer.ce";
+import CharacterComponent from "./character.ce";
 
-export { EventLayerComponent }
+// Prebuilt sprite components
+export { HpBar } from "./prebuilt";
+
+export { EventLayerComponent, CharacterComponent } 

package/src/components/prebuilt/hp-bar.ce

@@ -0,0 +1,255 @@
+<!-- 
+  HP Bar Component
+  
+  A beautiful, animated health bar component for displaying player HP above sprites.
+  Features a gradient color based on HP level, smooth animations, and modern styling.
+  
+  ## Design
+  
+  The bar changes color dynamically based on HP percentage:
+  - Green (#4ade80) when HP > 60% - Healthy state
+  - Yellow (#facc15) when HP 30-60% - Caution state  
+  - Orange (#fb923c) when HP 15-30% - Danger state
+  - Red (#ef4444) when HP < 15% - Critical state
+  
+  @example
+  ```ts
+  import HpBar from './hp-bar.ce';
+  
+  // In module configuration
+  export default defineModule<RpgClient>({
+    sprite: {
+      componentsInFront: [HpBar]
+    }
+  })
+  ```
+-->
+
+<Container x={position.@x} y={position.@y}>
+  <!-- Background shadow for depth effect -->
+  <Graphics draw={drawShadow} x={1} y={1} />
+  
+  <!-- Main background -->
+  <Graphics draw={drawBackground} />
+  
+  <!-- HP fill bar -->
+  <Graphics draw={drawFill} />
+  
+  <!-- Highlight overlay for 3D effect -->
+  <Graphics draw={drawHighlight} />
+  
+  <!-- Border frame -->
+  <Graphics draw={drawBorder} />
+</Container>
+
+<script>
+import { computed, animatedSignal, effect } from "canvasengine";
+
+const { object } = defineProps();
+
+// ====================
+// Configuration
+// ====================
+
+/** Total width of the HP bar in pixels */
+const barWidth = 50;
+
+/** Total height of the HP bar in pixels */
+const barHeight = 8;
+
+/** Border radius for rounded corners */
+const borderRadius = 4;
+
+/** Inner border radius for the fill bar */
+const innerRadius = 3;
+
+/** Padding between background and fill */
+const padding = 1;
+
+/** Background color (dark theme) */
+const bgColor = 0x16213e;
+
+/** Shadow color */
+const shadowColor = 0x000000;
+
+/** Border color */
+const borderColor = 0x4a5568;
+
+// ====================
+// Calculated dimensions
+// ====================
+
+/** Maximum fill width */
+const maxFillWidth = barWidth - (padding * 2);
+
+/** Fill height */
+const fillHeight = barHeight - (padding * 2);
+
+/** Highlight height (half of fill) */
+const highlightHeight = Math.floor(fillHeight / 2);
+
+// ====================
+// Reactive HP values
+// ====================
+
+/** Gets hitbox dimensions for positioning */
+const hitbox = object.hitbox;
+
+/**
+ * Gets the current HP value from the player object
+ * Uses hpSignal which is synchronized from the server
+ */
+const currentHp = computed(() => {
+  return object.hpSignal?.() ?? 0;
+});
+
+/**
+ * Gets the maximum HP value from player parameters
+ * Reads from _param.maxHp which contains calculated stats
+ */
+const maxHp = computed(() => {
+  const params = object._param?.() ?? {};
+  return params.maxHp ?? 100;
+});
+
+/**
+ * Calculates HP percentage (0 to 1)
+ */
+const hpPercent = computed(() => {
+  const max = maxHp();
+  if (max <= 0) return 0;
+  const percent = currentHp() / max;
+  return Math.max(0, Math.min(1, percent));
+});
+
+// ====================
+// Animated values
+// ====================
+
+/**
+ * Animated percentage for smooth bar transitions
+ */
+const animatedPercent = animatedSignal(hpPercent(), {
+  duration: 300,
+  easing: 'easeOutCubic'
+});
+
+// Update animated value when HP changes
+effect(() => {
+  const newPercent = hpPercent();
+  animatedPercent.set(newPercent);
+});
+
+// ====================
+// Visual calculations
+// ====================
+
+/**
+ * Position of the bar relative to the sprite
+ */
+const position = computed(() => ({
+  x: (hitbox().w / 2) - (barWidth / 2),
+  y: -barHeight - 8
+}));
+
+/**
+ * Current width of the HP fill based on animated percentage
+ */
+const fillWidth = computed(() => {
+  const percent = animatedPercent();
+  const width = maxFillWidth * percent;
+  // Ensure minimum visible width when HP > 0
+  if (percent > 0 && width < innerRadius * 2) {
+    return innerRadius * 2;
+  }
+  return Math.max(0, width);
+});
+
+/**
+ * Determines HP bar color based on current HP percentage
+ * Returns hex color number for PixiJS
+ * 
+ * ## Color Thresholds
+ * - Green (0x4ade80): HP > 60% - Healthy
+ * - Yellow (0xfacc15): HP 30-60% - Caution
+ * - Orange (0xfb923c): HP 15-30% - Danger
+ * - Red (0xef4444): HP < 15% - Critical
+ */
+const hpColorHex = computed(() => {
+  const percent = hpPercent();
+  
+  if (percent > 0.6) {
+    return 0x4ade80; // Green - healthy
+  } else if (percent > 0.3) {
+    return 0xfacc15; // Yellow - caution
+  } else if (percent > 0.15) {
+    return 0xfb923c; // Orange - danger
+  } else {
+    return 0xef4444; // Red - critical
+  }
+});
+
+// ====================
+// Drawing functions
+// ====================
+
+/**
+ * Draws the shadow behind the HP bar for depth effect
+ */
+const drawShadow = (g) => {
+  g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+  g.fill({ color: shadowColor, alpha: 0.3 });
+};
+
+/**
+ * Draws the main background of the HP bar
+ */
+const drawBackground = (g) => {
+  g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+  g.fill({ color: bgColor, alpha: 0.9 });
+};
+
+/**
+ * Draws the HP fill bar with dynamic color
+ */
+const drawFill = (g) => {
+  const width = fillWidth();
+  if (width > 0) {
+    g.roundRect(padding, padding, width, fillHeight, innerRadius);
+    g.fill({ color: hpColorHex() });
+  }
+};
+
+/**
+ * Draws the highlight overlay for 3D effect
+ */
+const drawHighlight = (g) => {
+  const width = fillWidth();
+  if (width > 0) {
+    g.roundRect(padding, padding, width, highlightHeight, innerRadius);
+    g.fill({ color: 0xffffff, alpha: 0.25 });
+  }
+};
+
+/**
+ * Draws the border frame around the HP bar
+ * 
+ * Uses PixiJS Graphics API to create a rounded rectangle stroke
+ * that serves as a visual border for the bar.
+ * 
+ * @param g - PixiJS Graphics object
+ * 
+ * @example
+ * ```html
+ * <Graphics draw={drawBorder} />
+ * ```
+ */
+const drawBorder = (g) => {
+  g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+  g.stroke({ 
+    color: borderColor, 
+    width: 1,
+    alpha: 0.7
+  });
+};
+</script>