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

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

@@ -1,95 +1,80 @@
 <Container justifyContent="space-between" alignItems="flex-end" width="100%" height="100%">
-    <Container justifyContent="flex-start" alignItems="flex-end" margin={100} gap={20}>
-        <Button 
-            text="A"
-            width={60}
-            height={60}
-            style={{
-                backgroundColor: {
-                    normal: '#4CAF50',
-                    hover: '#45a049',
-                    pressed: '#3d8b40'
-                },
-                border: {
-                    color: '#2e7d32',
-                    width: 3,
-                    radius: 30
-                },
-                text: {
-                    color: '#ffffff',
-                    fontSize: 24,
-                    fontFamily: 'Arial'
-                }
-            }}
-            click={onButtonAClick}
-        />
-        <Button 
-            text="B"
-            width={60}
-            height={60}
-            style={{
-                backgroundColor: {
-                    normal: '#f44336',
-                    hover: '#da190b',
-                    pressed: '#c62828'
-                },
-                border: {
-                    color: '#b71c1c',
-                    width: 3,
-                    radius: 30
-                },
-                text: {
-                    color: '#ffffff',
-                    fontSize: 24,
-                    fontFamily: 'Arial'
-                }
-            }}
-            click={onButtonBClick}
-        />
+    <!-- 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}>
-         <Joystick onChange onEnd />
+    
+    <Container margin={100} alignItems="flex-end">
+        <Container>
+            <Joystick 
+                controls={controlsInstance}
+                outerColor="#34495e"
+                innerColor="#3498db"
+            />
+        </Container>
     </Container>
- </Container>
- 
- <script>
-     import { effect } from 'canvasengine'
-     import { Joystick } from '@canvasengine/presets'
-     import { Button } from 'canvasengine'
-     import { inject } from '../../../core/inject'
-     import { RpgClientEngine } from '../../../RpgClientEngine'
+</Container>
 
-    let lastDirection = null
-    const client = inject(RpgClientEngine)
+<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 onChange = (event) => {
-       const control = inject('KeyboardControls')
-       if (lastDirection !== event.direction) {
-           if (lastDirection !== null) {
-               control.applyControl(lastDirection, true)
-           }
-           lastDirection = event.direction
-           control.applyControl(lastDirection)
-       }
-    }
-    
-    const onEnd = () => {
-       const control = inject('KeyboardControls')
-       if (lastDirection !== null) {
-           control.applyControl(lastDirection, false)
-           lastDirection = null
-       }
-    }
 
-    const onButtonAClick = () => {
-        if (client) {
-            client.processAction({ action: 'action' })
-        }
-    }
+    const controlsInstance = signal(null)
 
-    const onButtonBClick = () => {
-        if (client) {
-            client.processAction({ action: 'back' })
-        }
-    }
- </script>
+    mount((element) => {
+        const control = inject('KeyboardControls')
+        controlsInstance.set(control)
+    })
+</script>

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

@@ -1,71 +1,5 @@
-<!-- 
-  Light Halo Component
-  
-  A beautiful animated light halo effect that pulses and moves around sprites.
-  Creates a glowing light effect with smooth animations for size and opacity.
-  
-  ## Design
-  
-  The halo uses a radial gradient to create a soft light effect that:
-  - Pulses in size (breathing effect)
-  - Fades in and out (opacity animation)
-  - Can be positioned relative to the sprite
-  - Uses blur and alpha for realistic light diffusion
-  
-  ## Props
-  
-  All props are optional and have sensible defaults:
-  - `baseRadius` (number, default: 30) - Base radius in pixels
-  - `radiusVariation` (number, default: 10) - Pulse variation range
-  - `baseOpacity` (number, default: 0.6) - Base opacity (0-1)
-  - `opacityVariation` (number, default: 0.3) - Opacity fade range
-  - `sizeSpeed` (number, default: 0.002) - Size animation speed
-  - `opacitySpeed` (number, default: 0.003) - Opacity animation speed
-  - `lightColor` (number, default: 0xffffaa) - Light color (hex)
-  
-  @example
-  ```ts
-  import LightHalo from './light-halo.ce';
-  
-  // Basic usage with defaults
-  export default defineModule<RpgClient>({
-    sprite: {
-      componentsBehind: [LightHalo]
-    }
-  })
-  
-  // Custom configuration
-  export default defineModule<RpgClient>({
-    sprite: {
-      componentsBehind: [{
-        component: LightHalo,
-        props: {
-          baseRadius: 50,
-          radiusVariation: 15,
-          lightColor: 0xffaaaa,
-          baseOpacity: 0.8
-        }
-      }]
-    }
-  })
-  
-  // Dynamic props based on sprite state
-  export default defineModule<RpgClient>({
-    sprite: {
-      componentsBehind: [{
-        component: LightHalo,
-        props: (object: RpgClientObject) => ({
-          baseRadius: 30 + (object.param.level() * 2),
-          lightColor: object.param.level() > 10 ? 0xffaa00 : 0xffffaa
-        })
-      }]
-    }
-  })
-  ```
--->
-
 <Container x={position.@x} y={position.@y}>
-  <Graphics draw={drawHalo} />
+  <Graphics draw={drawHalo}  />
 </Container>
 
 <script>
@@ -181,9 +115,7 @@ const drawHalo = (g) => {
   const color = getLightColor();
   
   if (opacity <= 0 || radius <= 0) return;
-  
-  g.clear();
-  
+
   // Set blend mode to ADD for glowing light effect
   g.blendMode = 'add';
   
@@ -209,7 +141,6 @@ const drawHalo = (g) => {
 // ====================
 // Animation loop
 // ====================
-
 tick(() => {
   time.update(t => t + 1);
 });

package/src/components/scenes/canvas.ce

@@ -15,15 +15,6 @@
         }
       </Container>
   }
-  <Container positionType="absolute" top={0} left={0} right={0} bottom={0}>
-    @for (transition of transitions) {
-      <Container>
-        @for (activeTransition of transition.current) {
-          <transition.component ...activeTransition />
-        }
-      </Container>
-    }
-  </Container>
 </Canvas>
 
 <script>
@@ -39,7 +30,6 @@
   const gui = computed(() => {
     return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)
   })
-  const transitions = engine.transitions
   const worldWidth = computed(() => sceneData()?.width)
   const worldHeight = computed(() => sceneData()?.height)
 

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/module.ts

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

package/dist/Game/TransitionManager.d.ts

@@ -1,56 +0,0 @@
-/**
- * Manages active transitions in the game
- *
- * This class handles the lifecycle of screen transitions, such as fade effects,
- * slide transitions, or any custom transition components. It maintains a list
- * of currently active transitions and provides methods to start and finish them.
- *
- * ## Design
- *
- * - Uses signals to track active transitions reactively
- * - Each transition has a unique ID for identification
- * - Transitions automatically remove themselves when finished via onFinish callback
- * - Supports multiple simultaneous transitions if needed
- *
- * @example
- * ```ts
- * const manager = new TransitionManager();
- *
- * // Start a fade transition
- * manager.start('fade', { duration: 1000 });
- *
- * // Check active transitions
- * console.log(manager.current()); // Array of active transitions
- * ```
- */
-export declare class TransitionManager {
-    /**
-     * Signal containing all currently active transitions
-     *
-     * Each transition object contains:
-     * - id: Unique identifier
-     * - props: Properties passed to the transition component
-     * - onFinish: Callback to remove the transition when complete
-     */
-    current: import('canvasengine').WritableArraySignal<any[]>;
-    /**
-     * Start a new transition
-     *
-     * Creates a new transition instance with the given props and adds it to
-     * the active transitions list. The transition will be automatically removed
-     * when it calls its onFinish callback.
-     *
-     * @param props - Properties to pass to the transition component (must include onFinish)
-     * @returns The created transition object with id and onFinish callback
-     *
-     * @example
-     * ```ts
-     * const transition = manager.start({
-     *   duration: 1000,
-     *   color: 'black',
-     *   onFinish: () => console.log('Transition complete')
-     * });
-     * ```
-     */
-    start(props: any): any;
-}

package/src/Game/TransitionManager.ts

@@ -1,75 +0,0 @@
-import { generateUID } from "@rpgjs/common";
-import { signal } from "canvasengine";
-
-/**
- * Manages active transitions in the game
- * 
- * This class handles the lifecycle of screen transitions, such as fade effects,
- * slide transitions, or any custom transition components. It maintains a list
- * of currently active transitions and provides methods to start and finish them.
- * 
- * ## Design
- * 
- * - Uses signals to track active transitions reactively
- * - Each transition has a unique ID for identification
- * - Transitions automatically remove themselves when finished via onFinish callback
- * - Supports multiple simultaneous transitions if needed
- * 
- * @example
- * ```ts
- * const manager = new TransitionManager();
- * 
- * // Start a fade transition
- * manager.start('fade', { duration: 1000 });
- * 
- * // Check active transitions
- * console.log(manager.current()); // Array of active transitions
- * ```
- */
-export class TransitionManager {
-  /**
-   * Signal containing all currently active transitions
-   * 
-   * Each transition object contains:
-   * - id: Unique identifier
-   * - props: Properties passed to the transition component
-   * - onFinish: Callback to remove the transition when complete
-   */
-  current = signal<any[]>([]);
-
-  /**
-   * Start a new transition
-   * 
-   * Creates a new transition instance with the given props and adds it to
-   * the active transitions list. The transition will be automatically removed
-   * when it calls its onFinish callback.
-   * 
-   * @param props - Properties to pass to the transition component (must include onFinish)
-   * @returns The created transition object with id and onFinish callback
-   * 
-   * @example
-   * ```ts
-   * const transition = manager.start({
-   *   duration: 1000,
-   *   color: 'black',
-   *   onFinish: () => console.log('Transition complete')
-   * });
-   * ```
-   */
-  start(props: any) {
-    const id = generateUID();
-    const transition = {
-      ...props,
-      id,
-      onFinish: () => {
-        const index = this.current().findIndex((value) => value.id === id);
-        if (index !== -1) {
-          this.current().splice(index, 1);
-        }
-      },
-    };
-    
-    this.current().push(transition);
-    return transition;
-  }
-}