@rpgjs/client 5.0.0-alpha.22 → 5.0.0-alpha.24

package/src/components/gui/mobile/mobile.ce

@@ -0,0 +1,80 @@
+<Container justifyContent="space-between" alignItems="flex-end" width="100%" height="100%">
+    <!-- Gamepad buttons A and B (left side) -->
+    <Container justifyContent="flex-start" alignItems="flex-end"  gap={20}>
+        <Container display="flex" direction="column" gap={20} margin={50}>
+            <!-- Button B (top) -->
+  
+            <!-- Button A (bottom) -->
+            <Button 
+                text="A"
+                shape="circle"
+                width={70}
+                height={70}
+                controls={controlsInstance}
+                controlName="action"
+                style={{
+                    backgroundColor: {
+                        normal: "#2ecc71",
+                        hover: "#27ae60",
+                        pressed: "#229954",
+                        disabled: "#7f8c8d"
+                    },
+                    text: {
+                        fontSize: 24,
+                        fontFamily: "Arial Bold",
+                        color: "#ffffff"
+                    }
+                }}
+            />
+
+            <Button 
+                text="B"
+                shape="circle"
+                width={70}
+                height={70}
+                controls={controlsInstance}
+                controlName="back"
+                style={{
+                    backgroundColor: {
+                        normal: "#e74c3c",
+                        hover: "#c0392b",
+                        pressed: "#a93226",
+                        disabled: "#7f8c8d"
+                    },
+                    text: {
+                        fontSize: 24,
+                        fontFamily: "Arial Bold",
+                        color: "#ffffff"
+                    }
+                }}
+            />
+
+        </Container>
+    </Container>
+    
+    <Container margin={100} alignItems="flex-end">
+        <Container>
+            <Joystick 
+                controls={controlsInstance}
+                outerColor="#34495e"
+                innerColor="#3498db"
+            />
+        </Container>
+    </Container>
+</Container>
+
+<script>
+    import { signal, mount } from 'canvasengine'
+    import { Button } from 'canvasengine'
+    import { inject } from '../../../core/inject'
+    import { RpgClientEngine } from '../../../RpgClientEngine'
+    import { Direction } from '@rpgjs/common'
+
+
+    const controlsInstance = signal(null)
+
+    mount((element) => {
+        const control = inject('KeyboardControls')
+        controlsInstance.set(control)
+    })
+</script>

package/src/components/prebuilt/index.ts

@@ -17,6 +17,7 @@
  */
 
 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

@@ -7,14 +7,14 @@
   @for (gui of gui) {
       <Container display="flex">
         @if (gui.display) {
-          <gui.component ...gui.data() onFinish={(data) => {
+          <gui.component ...gui.data() dependencies={@gui.@dependencies} onFinish={(data) => {
             onGuiFinish(gui, data)
           }} onInteraction={(name, data) => {
             onGuiInteraction(gui, name, data)
           }} /> 
         }
       </Container>
-  } 
+  }
 </Canvas>
 
 <script>

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

@@ -17,6 +17,7 @@
     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()

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

@@ -9,6 +9,7 @@ export * from "./module";
 export * from "./Gui/Gui";
 export * from "./components/gui";
 export * from "./components/animations";
+export * from "./components/prebuilt";
 export * from "./presets";
 export * from "./components";
 export * from "./components/gui";
@@ -16,4 +17,8 @@ export * from "./Sound";
 export * from "./Resource";
 export { Context } from "@signe/di";
 export { KeyboardControls, Input } from "canvasengine";
-export { Control } from "./services/keyboardControls";
+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";

package/src/module.ts

@@ -155,6 +155,21 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
           },
         };
       }
+      if (module.transitions) {
+        const transitions = [...module.transitions];
+        module.transitions = {
+          load: (engine: RpgClientEngine) => {
+            const guiService = inject(engine.context, RpgGui) as RpgGui;
+            transitions.forEach((transition) => {
+              guiService.add({
+                name: transition.id,
+                component: transition.component,
+                data: transition.props || {}
+              });
+            });
+          },
+        };
+      }
       if (module.particles) {
         const particles = [...module.particles];
         module.particles = {

package/src/services/keyboardControls.ts

@@ -14,7 +14,7 @@ export enum Control {
 
 export function provideKeyboardControls() {
   return {
-    provide: KeyboardControls,
+    provide: 'KeyboardControls',
     useValue: null,
   };
 }