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

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>

package/src/components/prebuilt/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Prebuilt sprite components for common UI elements
+ * 
+ * This module exports ready-to-use components that can be attached
+ * to sprites using componentsInFront or componentsBehind configuration.
+ * 
+ * @example
+ * ```ts
+ * import { HpBar } from '@rpgjs/client/components/prebuilt';
+ * 
+ * export default defineModule<RpgClient>({
+ *   sprite: {
+ *     componentsInFront: [HpBar]
+ *   }
+ * })
+ * ```
+ */
+
+export { default as HpBar } from './hp-bar.ce';
+export { default as LightHalo } from './light-halo.ce';
+
+
+
+

package/src/components/prebuilt/light-halo.ce

@@ -0,0 +1,148 @@
+<Container x={position.x} y={position.y}>
+  <Graphics draw={drawHalo}  />
+</Container>
+
+<script>
+import { computed, signal, tick, mount } from "canvasengine";
+import { BlurFilter } from "pixi.js";
+
+/**
+ * Component props for LightHalo
+ * 
+ * All props are signals (even static ones) and must be read with `()`.
+ * Props are optional and will use default values if not provided.
+ * 
+ * @property {Object} object - The sprite object (required)
+ * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)
+ * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)
+ * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)
+ * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)
+ * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)
+ * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)
+ * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)
+ */
+const { 
+  object, 
+  baseRadius,
+  radiusVariation,
+  baseOpacity,
+  opacityVariation,
+  sizeSpeed,
+  opacitySpeed,
+  lightColor
+} = defineProps();
+
+// ====================
+// Props with default values
+// ====================
+
+const getBaseRadius = computed(() => baseRadius?.() ?? 30);
+const getRadiusVariation = computed(() => radiusVariation?.() ?? 10);
+const getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);
+const getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);
+const getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);
+const getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);
+const getLightColor = computed(() => lightColor?.() ?? 0xffffaa);
+
+// ====================
+// Animation state
+// ====================
+
+/** Time counter for animations */
+const time = signal(0);
+
+/**
+ * Current radius of the halo with pulsing animation
+ * Uses multiple sine waves for more organic movement
+ */
+const currentRadius = computed(() => {
+  const t = time();
+  const base = getBaseRadius();
+  const variation = getRadiusVariation();
+  const speed = getSizeSpeed();
+  
+  // Combine two sine waves for less predictable pulsing
+  const pulse1 = Math.sin(t * speed);
+  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;
+  const combinedPulse = (pulse1 + pulse2) / 1.5;
+  
+  return base + (combinedPulse * variation);
+});
+
+/**
+ * Current opacity of the halo with fading animation
+ * Includes a subtle flicker effect
+ */
+const currentOpacity = computed(() => {
+  const t = time();
+  const base = getBaseOpacity();
+  const variation = getOpacityVariation();
+  const speed = getOpacitySpeed();
+  
+  // Main breathing cycle
+  const fade = Math.sin(t * speed);
+  
+  // Subtle high-frequency flicker (candle-like)
+  const flicker = (Math.random() - 0.5) * 0.1;
+  
+  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));
+});
+
+// ====================
+// Position calculations
+// ====================
+
+const hitbox = object.hitbox;
+
+const position = computed(() => ({
+  x: hitbox().w / 2,
+  y: hitbox().h / 2
+}));
+
+// ====================
+// Drawing function
+// ====================
+
+// Create filters once to avoid recreation on every frame
+const blurFilter = new BlurFilter({ strength: 20, quality: 3 });
+
+/**
+ * Draws the light halo effect with realistic diffusion
+ */
+const drawHalo = (g) => {
+  const radius = currentRadius();
+  const opacity = currentOpacity();
+  const color = getLightColor();
+  
+  if (opacity <= 0 || radius <= 0) return;
+
+  // Set blend mode to ADD for glowing light effect
+  g.blendMode = 'add';
+  
+  // Apply blur filter for soft light diffusion
+  g.filters = [blurFilter];
+  
+  // Draw main light source
+  // The blur filter will spread this out into a nice gradient
+  g.circle(0, 0, radius);
+  g.fill({ 
+    color: color, 
+    alpha: opacity 
+  });
+  
+  // Draw a smaller, brighter core
+  g.circle(0, 0, radius * 0.4);
+  g.fill({ 
+    color: 0xffffff, 
+    alpha: opacity * 0.5 
+  });
+};
+
+// ====================
+// Animation loop
+// ====================
+tick(() => {
+  time.update(t => t + 1);
+});
+</script>
+

package/src/components/scenes/canvas.ce

@@ -1,20 +1,20 @@
-<Canvas width={@engine.width} height={@engine.height}>
-  <Viewport worldWidth worldHeight clamp>
+<Canvas width={engine.width} height={engine.height}>
+  <Viewport worldWidth worldHeight clamp sortableChildren={true}>
     @if (sceneData) {
       <SceneMap />
     }
   </Viewport>
-  @for (gui of gui) {
-    <Container display="flex">
-      @if (gui.display) {
-        <gui.component ...gui.data() onFinish={(data) => {
-          onGuiFinish(gui, data)
-        }} onInteraction={(name, data) => {
-          onGuiInteraction(gui, name, data)
-        }} /> 
-      }
-    </Container>
-  } 
+  @for (gui of guiList) {
+      <Container display="flex">
+        @if (gui.display) {
+          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {
+            onGuiFinish(gui, data)
+          }} onInteraction={(name, data) => {
+            onGuiInteraction(gui, name, data)
+          }} /> 
+        }
+      </Container>
+  }
 </Canvas>
 
 <script>
@@ -23,11 +23,14 @@
   import { RpgClientEngine } from "../../RpgClientEngine";
   import SceneMap from './draw-map.ce'
   import { RpgGui } from "../../Gui/Gui";
+  import { delay } from "@rpgjs/common";
 
   const engine = inject(RpgClientEngine);
   const guiService = inject(RpgGui);
   const sceneData = engine.sceneMap.data
-  const gui = guiService.gui
+  const guiList = computed(() => {
+    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)
+  })
   const worldWidth = computed(() => sceneData()?.width)
   const worldHeight = computed(() => sceneData()?.height)
 
@@ -38,7 +41,9 @@
   })
 
   const onGuiFinish = (gui, data) => {
-    guiService.guiClose(gui.name, data)
+    delay(() => {
+      guiService.guiClose(gui.name, data)
+    })
   }
 
   const onGuiInteraction = (gui, name, data) => {

package/src/components/scenes/draw-map.ce

@@ -1,33 +1,42 @@
-<Container sound={backgroundMusic} >
+<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>
   <Container sound={backgroundAmbientSound} />
 
-  <sceneComponent() data={map.@data} params={map.@params} />
-  
-  @for (effect of effects) {
+  @if (map() && sceneComponent()) {
+    <sceneComponent() data={map().data} params={map().params} />
+  }
+
+  @for (componentAnimation of componentAnimations) {
     <Container>
-      @for (animation of effect.current) {
-        <effect.component ...animation />
+      @for (animation of componentAnimation.current) {
+        <componentAnimation.component ...animation />
       }
     </Container>
   }
+
+  @if (weatherProps) {
+    <Weather ...weatherProps() />
+  }
 </Container>
 
 <script>
-    import { effect, signal, computed, mount } from 'canvasengine'
+    import { NoiseFilter } from 'pixi-filters';
+    import { effect, signal, computed, mount, on, tick } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
+    import { Weather } from '@canvasengine/presets'
 
     const engine = inject(RpgClientEngine);
-    const effects = engine.effects
-    const map = engine.sceneMap.data
+    const componentAnimations = engine.componentAnimations
+    const map = engine.sceneMap?.data
     const sceneComponent = computed(() => map()?.component)
     const sceneParams = map()?.params
-    const mapParams = map().params
+    const mapParams = map()?.params
     const animations = engine.sceneMap.animations
+    const weather = engine.sceneMap.weather
     const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
     const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }
-    
-    const data = signal(map().data)
+
+    const data = signal(map()?.data)
 
     const scale = mapParams?.scale || 1
     const worldWidth = (mapParams?.width || 2048) * scale
@@ -36,4 +45,42 @@
     const clamp = {
       direction: "all"
     }
-</script>
+
+    const shakeConfig = {
+      trigger: engine.mapShakeTrigger,
+      intensity: 10,
+      duration: 500,
+      frequency: 10,
+      direction: 'both'
+    }
+
+    const weatherProps = computed(() => {
+      const state = weather?.()
+      if (!state) {
+        return null
+      }
+      const validEffects = ['rain', 'snow', 'fog', 'cloud']
+      if (!validEffects.includes(state.effect)) {
+        return null
+      }
+      const params = state.params ?? {}
+      return {
+        effect: state.effect,
+        speed: params.speed,
+        windDirection: params.windDirection,
+        windStrength: params.windStrength,
+        density: params.density,
+        maxDrops: params.maxDrops,
+        height: params.height,
+        scale: params.scale,
+        sunIntensity: params.sunIntensity,
+        sunAngle: params.sunAngle,
+        raySpread: params.raySpread,
+        rayTwinkle: params.rayTwinkle,
+        rayTwinkleSpeed: params.rayTwinkleSpeed,
+        zIndex: params.zIndex ?? 1000,
+        alpha: params.alpha,
+        blendMode: params.blendMode,
+      }
+    })
+</script>

package/src/components/scenes/event-layer.ce

@@ -6,6 +6,10 @@
     @for ((player,id) of players) {
         <Character id={id} object={player} />
     }
+
+    @for (child of children) {
+        <child />
+    }
 </Container>
 
 <script>
@@ -13,8 +17,11 @@
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import Character from "../character.ce";
+    import LightHalo from "../prebuilt/light-halo.ce";
    
     const engine = inject(RpgClientEngine);
+    const { children } = defineProps()
+    
     const players = engine.sceneMap.players
     const events = engine.sceneMap.events
 </script>

package/src/components/scenes/transition.ce

@@ -0,0 +1,60 @@
+<Rect
+  x={0} 
+  y={0} 
+  width={engine.width} 
+  height={engine.height} 
+  fill={color} 
+  alpha={opacity} 
+  zIndex={100000}
+/>
+
+<script>
+  import { animatedSignal, mount, computed, signal } from "canvasengine";
+  import { inject } from "../../core/inject";
+  import { RpgClientEngine } from "../../RpgClientEngine";
+
+  const {
+    onFinish,
+    duration,
+    color,
+    fadeIn
+  } = defineProps({
+    duration: {
+      default: 1000
+    },
+    color: {
+      default: 'black'
+    },
+    fadeIn: {
+      default: true
+    }
+  });
+
+  const engine = inject(RpgClientEngine);
+  
+  // Calculate width and height from engine
+  const width = computed(() => {
+    const w = engine.width();
+    return typeof w === 'string' ? parseInt(w) || 1920 : w;
+  });
+  
+  const height = computed(() => {
+    const h = engine.height();
+    return typeof h === 'string' ? parseInt(h) || 1080 : h;
+  });
+
+  // Animation: fade in from transparent to opaque, or fade out from opaque to transparent
+  const opacity = animatedSignal(fadeIn() ? 0 : 1, {
+    duration: duration(),
+    onComplete: () => {
+      if (onFinish) {
+        onFinish();
+      }
+    }
+  });
+
+  mount(() => {
+    // Start the fade animation
+    opacity.set(fadeIn() ? 1 : 0);
+  });
+</script>

package/src/index.ts

@@ -2,12 +2,26 @@ export * from "./RpgClientEngine";
 export type * from "./RpgClient";
 export * from "./services/standalone";
 export * from "./services/mmorpg";
+export * from "./services/save";
 export * from "./core/setup";
 export * from "./core/inject";
 export * from "./services/loadMap";
 export * from "./module";
 export * from "./Gui/Gui";
 export * from "./components/gui";
-export * from "./components/effects";
+export * from "./components/animations";
+export * from "./components/prebuilt";
 export * from "./presets";
-export * from "./components";
+export * from "./components";
+export * from "./components/gui";
+export * from "./Sound";
+export * from "./Resource";
+export * from "./utils/getEntityProp";
+export { Context } from "@signe/di";
+export { KeyboardControls, Input } from "canvasengine";
+export { Control } from "./services/keyboardControls";
+export { RpgClientObject } from "./Game/Object";
+export { RpgClientPlayer } from "./Game/Player";
+export { RpgClientEvent } from "./Game/Event";
+export { withMobile } from "./components/gui/mobile";
+export * from "./services/AbstractSocket";