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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-alpha.22",
+  "version": "5.0.0-alpha.24",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,18 +22,18 @@
     "pixi.js": "^8.9.2"
   },
   "dependencies": {
-    "@rpgjs/client": "5.0.0-alpha.22",
-    "@rpgjs/common": "5.0.0-alpha.22",
-    "@rpgjs/server": "5.0.0-alpha.22",
-    "@signe/di": "^2.5.2",
-    "@signe/room": "^2.5.2",
-    "@signe/sync": "^2.5.2",
+    "@rpgjs/client": "5.0.0-alpha.24",
+    "@rpgjs/common": "5.0.0-alpha.24",
+    "@rpgjs/server": "5.0.0-alpha.24",
+    "@signe/di": "^2.6.0",
+    "@signe/room": "^2.6.0",
+    "@signe/sync": "^2.6.0",
     "pixi-filters": "^6.1.5",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
-    "@canvasengine/compiler": "2.0.0-beta.37",
-    "vite": "^7.2.6",
+    "@canvasengine/compiler": "2.0.0-beta.40",
+    "vite": "^7.2.7",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.15"
   },

package/src/Game/Object.ts

@@ -241,4 +241,12 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     const engine = inject(RpgClientEngine);
     engine.getComponentAnimation(id).displayEffect(params, this);
   }
+  
+  isEvent(): boolean {
+    return this.type === 'event';
+  }
+
+  isPlayer(): boolean {
+    return this.type === 'player';
+  }
 }

package/src/Gui/Gui.ts

@@ -195,14 +195,13 @@ export class RpgGui {
     if (!guiId) {
       throw new Error("GUI must have a name or id");
     }
-
     const guiInstance: GuiInstance = {
       name: guiId,
       component: gui.component,
       display: signal(gui.display || false),
       data: signal(gui.data || {}),
       autoDisplay: gui.autoDisplay || false,
-      dependencies: gui.dependencies,
+      dependencies: gui.dependencies ? gui.dependencies() : [],
       attachToSprite: gui.attachToSprite || false,
     };
 
@@ -317,8 +316,8 @@ export class RpgGui {
       // Handle Vue component display
       this._handleVueComponentDisplay(id, data, dependencies, guiInstance);
     } else {
-      // Handle CanvasEngine component display
-      this._handleCanvasComponentDisplay(id, data, dependencies, guiInstance);
+      guiInstance.data.set(data);
+      guiInstance.display.set(true);
     }
   }
 
@@ -371,33 +370,7 @@ export class RpgGui {
    * @param guiInstance - GUI instance
    */
   private _handleCanvasComponentDisplay(id: string, data: any, dependencies: Signal[], guiInstance: GuiInstance) {
-    // Unsubscribe from previous subscription if exists
-    if (guiInstance.subscription) {
-      guiInstance.subscription.unsubscribe();
-      guiInstance.subscription = undefined;
-    }
-
-    // Use runtime dependencies or config dependencies
-    const deps = dependencies.length > 0 
-      ? dependencies 
-      : (guiInstance.dependencies ? guiInstance.dependencies() : []);
-
-    if (deps.length > 0) {
-      // Subscribe to dependencies
-      guiInstance.subscription = combineLatest(
-        deps.map(dependency => dependency.observable)
-      ).subscribe((values) => {
-        if (values.every(value => value !== undefined)) {
-          guiInstance.data.set(data);
-          guiInstance.display.set(true);
-        }
-      });
-      return;
-    }
-
-    // No dependencies, display immediately
-    guiInstance.data.set(data);
-    guiInstance.display.set(true);
+    
   }
 
   /**

package/src/RpgClientEngine.ts

@@ -1,5 +1,5 @@
 import Canvas from "./components/scenes/canvas.ce";
-import { Context, inject } from "@signe/di";
+import { inject } from './core/inject'
 import { signal, bootstrapCanvas, KeyboardControls, Howl, trigger } from "canvasengine";
 import { AbstractWebsocket, WebSocketToken } from "./services/AbstractSocket";
 import { LoadMapService, LoadMapToken } from "./services/loadMap";
@@ -12,7 +12,7 @@ import { load } from "@signe/sync";
 import { RpgClientMap } from "./Game/Map"
 import { RpgGui } from "./Gui/Gui";
 import { AnimationManager } from "./Game/AnimationManager";
-import { lastValueFrom, Observable } from "rxjs";
+import { lastValueFrom, Observable, combineLatest, BehaviorSubject, filter, switchMap, take } from "rxjs";
 import { GlobalConfigToken } from "./module";
 import * as PIXI from "pixi.js";
 import { PrebuiltComponentAnimations } from "./components/animations";
@@ -53,6 +53,8 @@ export class RpgClientEngine<T = any> {
   /** Trigger for map shake animation */
   mapShakeTrigger = trigger();
 
+  controlsReady = signal(undefined); 
+
   private predictionEnabled = false;
   private prediction?: PredictionController<Direction>;
   private readonly SERVER_CORRECTION_THRESHOLD = 30;
@@ -63,13 +65,19 @@ export class RpgClientEngine<T = any> {
   private pingInterval: any = null;
   private readonly PING_INTERVAL_MS = 5000; // Send ping every 5 seconds
   private lastInputTime = 0;
-
-  constructor(public context: Context) {
-    this.webSocket = inject(context, WebSocketToken);
-    this.guiService = inject(context, RpgGui);
-    this.loadMapService = inject(context, LoadMapToken);
-    this.hooks = inject<Hooks>(context, ModulesToken);
-    this.globalConfig = inject(context, GlobalConfigToken)
+  // Track map loading state for onAfterLoading hook using RxJS
+  private mapLoadCompleted$ = new BehaviorSubject<boolean>(false);
+  private playerIdReceived$ = new BehaviorSubject<boolean>(false);
+  private playersReceived$ = new BehaviorSubject<boolean>(false);
+  private eventsReceived$ = new BehaviorSubject<boolean>(false);
+  private onAfterLoadingSubscription?: any;
+
+  constructor(public context) {
+    this.webSocket = inject(WebSocketToken);
+    this.guiService = inject(RpgGui);
+    this.loadMapService = inject(LoadMapToken);
+    this.hooks = inject<Hooks>(ModulesToken);
+    this.globalConfig = inject(GlobalConfigToken)
 
     if (!this.globalConfig) {
       this.globalConfig = {} as T
@@ -127,11 +135,12 @@ export class RpgClientEngine<T = any> {
    * ```
    */
   setKeyboardControls(controlInstance: any) {
-    const currentValues = this.context.values['inject:' + KeyboardControls]
-    this.context.values['inject:' + KeyboardControls] = {
+    const currentValues = this.context.values['inject:' + 'KeyboardControls']
+    this.context.values['inject:' + 'KeyboardControls'] = {
       ...currentValues,
       values: new Map([['__default__', controlInstance]])
     }
+    this.controlsReady.set(true);
   }
 
   async start() {
@@ -189,12 +198,27 @@ export class RpgClientEngine<T = any> {
 
   private initListeners() {
     this.webSocket.on("sync", (data) => {
-      if (data.pId) this.playerIdSignal.set(data.pId)
+      if (data.pId) {
+        this.playerIdSignal.set(data.pId);
+        // Signal that player ID was received
+        this.playerIdReceived$.next(true);
+      }
 
       // Apply client-side prediction filtering and server reconciliation
       this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
 
       load(this.sceneMap, data, true);
+      
+      // Check if players and events are present in sync data
+      const players = data.players || this.sceneMap.players();
+      if (players && Object.keys(players).length > 0) {
+        this.playersReceived$.next(true);
+      }
+      
+      const events = data.events || this.sceneMap.events();
+      if (events !== undefined) {
+        this.eventsReceived$.next(true);
+      }
     });
 
     // Handle pong responses for RTT measurement
@@ -266,7 +290,7 @@ export class RpgClientEngine<T = any> {
 
     this.webSocket.on("shakeMap", (data) => {
       const { intensity, duration, frequency, direction } = data || {};
-      this.mapShakeTrigger.start({
+      (this.mapShakeTrigger as any).start({
         intensity,
         duration,
         frequency,
@@ -363,11 +387,25 @@ export class RpgClientEngine<T = any> {
   }
 
   private async loadScene(mapId: string) {
-    this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap).subscribe();
+    await lastValueFrom(this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap));
 
     // Clear client prediction states when changing maps
     this.clearClientPredictionStates();
 
+    // Reset all conditions for new map loading
+    this.mapLoadCompleted$.next(false);
+    this.playerIdReceived$.next(false);
+    this.playersReceived$.next(false);
+    this.eventsReceived$.next(false);
+
+    // Unsubscribe previous subscription if exists
+    if (this.onAfterLoadingSubscription) {
+      this.onAfterLoadingSubscription.unsubscribe();
+    }
+
+    // Setup RxJS observable to wait for all conditions
+    this.setupOnAfterLoadingObserver();
+
     this.webSocket.updateProperties({ room: mapId })
     await this.webSocket.reconnect(() => {
       this.initListeners()
@@ -375,7 +413,25 @@ export class RpgClientEngine<T = any> {
     })
     const res = await this.loadMapService.load(mapId)
     this.sceneMap.data.set(res)
-    this.hooks.callHooks("client-sceneMap-onAfterLoading", this.sceneMap).subscribe();
+    
+    // Check if playerId is already present
+    if (this.playerIdSignal()) {
+      this.playerIdReceived$.next(true);
+    }
+    
+    // Check if players and events are already present in sceneMap
+    const players = this.sceneMap.players();
+    if (players && Object.keys(players).length > 0) {
+      this.playersReceived$.next(true);
+    }
+    
+    const events = this.sceneMap.events();
+    if (events !== undefined) {
+      this.eventsReceived$.next(true);
+    }
+    
+    // Signal that map loading is completed (this should be last to ensure other checks are done)
+    this.mapLoadCompleted$.next(true);
     this.sceneMap.loadPhysic()
   }
 
@@ -787,13 +843,38 @@ export class RpgClientEngine<T = any> {
    * Add a component to render behind sprites
    * Components added with this method will be displayed with a lower z-index than the sprite
    * 
-   * @param component - The component to add behind sprites
-   * @returns The added component
+   * Supports multiple formats:
+   * 1. Direct component: `ShadowComponent`
+   * 2. Configuration object: `{ component: LightHalo, props: {...} }`
+   * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`
+   * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`
+   * 
+   * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).
+   * The object (sprite) is passed to the dependencies function to allow sprite-specific dependency resolution.
+   * 
+   * @param component - The component to add behind sprites, or a configuration object
+   * @param component.component - The component function to render
+   * @param component.props - Static props object or function that receives the sprite object and returns props
+   * @param component.dependencies - Function that receives the sprite object and returns an array of Signals
+   * @returns The added component or configuration
    * 
    * @example
    * ```ts
    * // Add a shadow component behind all sprites
    * engine.addSpriteComponentBehind(ShadowComponent);
+   * 
+   * // Add a component with static props
+   * engine.addSpriteComponentBehind({ 
+   *   component: LightHalo, 
+   *   props: { radius: 30 } 
+   * });
+   * 
+   * // Add a component with dynamic props and dependencies
+   * engine.addSpriteComponentBehind({ 
+   *   component: HealthBar, 
+   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+   *   dependencies: (object) => [object.hp, object.param.maxHp]
+   * });
    * ```
    */
   addSpriteComponentBehind(component: any) {
@@ -805,16 +886,41 @@ export class RpgClientEngine<T = any> {
    * Add a component to render in front of sprites
    * Components added with this method will be displayed with a higher z-index than the sprite
    * 
-   * @param component - The component to add in front of sprites
-   * @returns The added component
+   * Supports multiple formats:
+   * 1. Direct component: `HealthBarComponent`
+   * 2. Configuration object: `{ component: StatusIndicator, props: {...} }`
+   * 3. With dynamic props: `{ component: HealthBar, props: (object) => {...} }`
+   * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`
+   * 
+   * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).
+   * The object (sprite) is passed to the dependencies function to allow sprite-specific dependency resolution.
+   * 
+   * @param component - The component to add in front of sprites, or a configuration object
+   * @param component.component - The component function to render
+   * @param component.props - Static props object or function that receives the sprite object and returns props
+   * @param component.dependencies - Function that receives the sprite object and returns an array of Signals
+   * @returns The added component or configuration
    * 
    * @example
    * ```ts
    * // Add a health bar component in front of all sprites
    * engine.addSpriteComponentInFront(HealthBarComponent);
+   * 
+   * // Add a component with static props
+   * engine.addSpriteComponentInFront({ 
+   *   component: StatusIndicator, 
+   *   props: { type: 'poison' } 
+   * });
+   * 
+   * // Add a component with dynamic props and dependencies
+   * engine.addSpriteComponentInFront({ 
+   *   component: HealthBar, 
+   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+   *   dependencies: (object) => [object.hp, object.param.maxHp]
+   * });
    * ```
    */
-  addSpriteComponentInFront(component: any) {
+  addSpriteComponentInFront(component: any | { component: any, props: (object: any) => any, dependencies?: (object: any) => any[] }) {
     this.spriteComponentsInFront.update((components: any[]) => [...components, component])
     return component
   }
@@ -884,6 +990,33 @@ export class RpgClientEngine<T = any> {
     return componentAnimation.instance
   }
 
+  /**
+   * Start a transition
+   * 
+   * Convenience method to display a transition by its ID using the GUI system.
+   * 
+   * @param id - The unique identifier of the transition to start
+   * @param props - Props to pass to the transition component
+   * 
+   * @example
+   * ```ts
+   * // Start a fade transition
+   * engine.startTransition('fade', { duration: 1000, color: 'black' });
+   * 
+   * // Start with onFinish callback
+   * engine.startTransition('fade', {
+   *   duration: 1000,
+   *   onFinish: () => console.log('Fade complete')
+   * });
+   * ```
+   */
+  startTransition(id: string, props: any = {}) {
+    if (!this.guiService.exists(id)) {
+      throw new Error(`Transition with id ${id} not found. Make sure to add it using engine.addTransition() or in your module's transitions property.`);
+    }
+    this.guiService.display(id, props);
+  }
+
   async processInput({ input }: { input: Direction }) {
     const timestamp = Date.now();
     let frame: number;
@@ -987,6 +1120,46 @@ export class RpgClientEngine<T = any> {
     return this.sceneMap.getCurrentPlayer()
   }
 
+  /**
+   * Setup RxJS observer to wait for all conditions before calling onAfterLoading hook
+   * 
+   * This method uses RxJS `combineLatest` to wait for all conditions to be met,
+   * regardless of the order in which they arrive:
+   * 1. The map loading is completed (loadMapService.load is finished)
+   * 2. We received a player ID (pId)
+   * 3. Players array has at least one element
+   * 4. Events property is present in the sync data
+   * 
+   * Once all conditions are met, it uses `switchMap` to call the onAfterLoading hook once.
+   * 
+   * ## Design
+   * 
+   * Uses BehaviorSubjects to track each condition state, allowing events to arrive
+   * in any order. The `combineLatest` operator waits until all observables emit `true`,
+   * then `take(1)` ensures the hook is called only once, and `switchMap` handles
+   * the hook execution.
+   * 
+   * @example
+   * ```ts
+   * // Called automatically in loadScene to setup the observer
+   * this.setupOnAfterLoadingObserver();
+   * ```
+   */
+  private setupOnAfterLoadingObserver(): void {
+    this.onAfterLoadingSubscription = combineLatest([
+      this.mapLoadCompleted$.pipe(filter(completed => completed === true)),
+      this.playerIdReceived$.pipe(filter(received => received === true)),
+      this.playersReceived$.pipe(filter(received => received === true)),
+      this.eventsReceived$.pipe(filter(received => received === true))
+    ]).pipe(
+      take(1), // Only execute once when all conditions are met
+      switchMap(() => {
+        // Call the hook and return the observable
+        return this.hooks.callHooks("client-sceneMap-onAfterLoading", this.sceneMap);
+      })
+    ).subscribe();
+  }
+
   /**
    * Clear client prediction states for cleanup
    * 

package/src/components/character.ce

@@ -1,24 +1,30 @@
 <Container x={smoothX} y={smoothY} zIndex={y} viewportFollow={shouldFollowCamera} controls onBeforeDestroy visible >
-  @for (component of componentsBehind) {
+  @for (compConfig of normalizedComponentsBehind) {
     <Container>
-      <component object />
+      <compConfig.component object ...compConfig.props />
     </Container>
   } 
   <Particle emit={@emitParticleTrigger} settings={@particleSettings} zIndex={1000} name={particleName} />
   <Container>
     @for (graphicObj of graphicsSignals) {
-      <Sprite sheet={@sheet(@graphicObj)} direction tint hitbox flash={flashConfig}  />
+      <Sprite 
+        sheet={@sheet(@graphicObj)} 
+        direction 
+        tint 
+        hitbox 
+        flash={flashConfig}
+      />
     }
   </Container>
-  @for (component of componentsInFront) {
-    <Container>
-      <component object />
+  @for (compConfig of normalizedComponentsInFront) {
+    <Container dependencies={@compConfig.@dependencies}>
+      <compConfig.component object ...compConfig.props />
     </Container>
-  } 
+  }
   @for (attachedGui of attachedGuis) {
     @if (shouldDisplayAttachedGui) {
       <Container>
-        <attachedGui.component ...attachedGui.data() object={object} onFinish={(data) => {
+        <attachedGui.component ...attachedGui.data() dependencies={@attachedGui.@dependencies} object={object} onFinish={(data) => {
           onAttachedGuiFinish(attachedGui, data)
         }} onInteraction={(name, data) => {
           onAttachedGuiInteraction(attachedGui, name, data)
@@ -52,6 +58,137 @@
   const componentsBehind = client.spriteComponentsBehind;
   const componentsInFront = client.spriteComponentsInFront;
   const isMe = computed(() => id() === playerId);
+
+  /**
+   * Normalize a single sprite component configuration
+   * 
+   * Handles both direct component references and configuration objects with optional props and dependencies.
+   * Extracts the component reference and creates a computed function that returns the props.
+   * 
+   * ## Design
+   * 
+   * Supports two formats:
+   * 1. Direct component: `ShadowComponent`
+   * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`
+   * 
+   * The normalization process:
+   * - Extracts the actual component from either format
+   * - Extracts dependencies function if provided
+   * - Creates a computed function that returns props (static object or dynamic function result)
+   * - Returns a normalized object with `component`, `props`, and `dependencies`
+   * 
+   * @param comp - Component reference or configuration object
+   * @returns Normalized component configuration with component, props, and dependencies
+   * 
+   * @example
+   * ```ts
+   * // Direct component
+   * normalizeComponent(ShadowComponent)
+   * // => { component: ShadowComponent, props: {}, dependencies: undefined }
+   * 
+   * // With static props
+   * normalizeComponent({ component: LightHalo, props: { radius: 30 } })
+   * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }
+   * 
+   * // With dynamic props and dependencies
+   * normalizeComponent({ 
+   *   component: HealthBar, 
+   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+   *   dependencies: (object) => [object.hp, object.param.maxHp]
+   * })
+   * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }
+   * ```
+   */
+  const normalizeComponent = (comp) => {
+    let componentRef;
+    let propsValue;
+    let dependenciesFn;
+    
+    // If it's a direct component reference
+    if (typeof comp === 'function' || (comp && typeof comp === 'object' && !comp.component)) {
+      componentRef = comp;
+      propsValue = undefined;
+      dependenciesFn = undefined;
+    }
+    // If it's a configuration object with component and props
+    else if (comp && typeof comp === 'object' && comp.component) {
+      componentRef = comp.component;
+      // Support both "data" (legacy) and "props" (new) for backward compatibility
+      propsValue = comp.props !== undefined ? comp.props : comp.data;
+      dependenciesFn = comp.dependencies;
+    }
+    // Fallback: treat as direct component
+    else {
+      componentRef = comp;
+      propsValue = undefined;
+      dependenciesFn = undefined;
+    }
+    
+    // Return props directly (object or function), not as computed
+    // The computed will be created in the template when needed
+    return {
+      component: componentRef,
+      props: typeof propsValue === 'function' ? propsValue(object) : propsValue || {},
+      dependencies: dependenciesFn ? dependenciesFn(object) : []
+    };
+  };
+
+  /**
+   * Normalize an array of sprite components
+   * 
+   * Applies normalization to each component in the array using `normalizeComponent`.
+   * 
+   * @param components - Array of component references or configuration objects
+   * @returns Array of normalized component configurations
+   */
+  const normalizeComponents = (components) => {
+    return components.map((comp) => normalizeComponent(comp));
+  };
+
+
+  /**
+   * Normalized components to render behind sprites
+   * Handles both direct component references and configuration objects with optional props and dependencies
+   * 
+   * Supports multiple formats:
+   * 1. Direct component: `ShadowComponent`
+   * 2. Configuration object: `{ component: LightHalo, props: {...} }`
+   * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`
+   * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`
+   * 
+   * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).
+   * The object is passed to the dependencies function to allow sprite-specific dependency resolution.
+   * 
+   * @example
+   * ```ts
+   * // Direct component
+   * componentsBehind: [ShadowComponent]
+   * 
+   * // With static props
+   * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]
+   * 
+   * // With dynamic props and dependencies
+   * componentsBehind: [{ 
+   *   component: HealthBar, 
+   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+   *   dependencies: (object) => [object.hp, object.param.maxHp]
+   * }]
+   * ```
+   */
+  const normalizedComponentsBehind = computed(() => {
+    return normalizeComponents(componentsBehind());
+  });
+
+  /**
+   * Normalized components to render in front of sprites
+   * Handles both direct component references and configuration objects with optional props and dependencies
+   * 
+   * See `normalizedComponentsBehind` for format details.
+   * Components with dependencies will only be displayed when all dependencies are resolved.
+   */
+  const normalizedComponentsInFront = computed(() => {
+    return normalizeComponents(componentsInFront());
+  });
   
   /**
    * Determine if the camera should follow this sprite
@@ -294,7 +431,7 @@
   mount((element) => {
     hooks.callHooks("client-sprite-onAdd", object).subscribe()
     hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, object).subscribe()
-    client.setKeyboardControls(element.directives.controls)
+    if (isMe()) client.setKeyboardControls(element.directives.controls)
   })
 
   /**

package/src/components/gui/mobile/index.ts

@@ -0,0 +1,24 @@
+import { inject } from "../../../core/inject";
+import { RpgClientEngine } from "../../../RpgClientEngine";
+import MobileGui from "./mobile.ce";
+import { signal } from "canvasengine";
+
+function isMobile() {
+    return /Android|iPhone|iPad|iPod|Windows Phone|webOS|BlackBerry/i.test(navigator.userAgent);
+  }
+
+export const withMobile = () => (
+    {
+        gui: [
+            {
+                id: 'mobile-gui',
+                component: MobileGui,
+                autoDisplay: true,
+                dependencies: () => {
+                    const engine = inject(RpgClientEngine);
+                    return [signal(isMobile() ||undefined), engine.controlsReady]
+                }
+            }
+        ]
+    }
+)