@rpgjs/client 5.0.0-alpha.11 → 5.0.0-alpha.12

package/src/Gui/Gui.ts

@@ -40,6 +40,8 @@ const throwError = (id: string) => {
 export class RpgGui {
   private webSocket: AbstractWebsocket;
   gui = signal<Record<string, GuiInstance>>({});
+  extraGuis: GuiInstance[] = [];
+  private vueGuiInstance: any = null; // Reference to VueGui instance
 
   constructor(private context: Context) {
     this.webSocket = inject(context, WebSocketToken);
@@ -59,6 +61,63 @@ export class RpgGui {
     });
   }
 
+  /**
+   * Set the VueGui instance reference for Vue component management
+   * This is called by VueGui when it's initialized
+   * 
+   * @param vueGuiInstance - The VueGui instance
+   */
+  _setVueGuiInstance(vueGuiInstance: any) {
+    this.vueGuiInstance = vueGuiInstance;
+  }
+
+  /**
+   * Notify VueGui about GUI state changes
+   * This synchronizes the Vue component display state
+   * 
+   * @param guiId - The GUI component ID
+   * @param display - Display state
+   * @param data - Component data
+   */
+  private _notifyVueGui(guiId: string, display: boolean, data: any = {}) {
+    if (this.vueGuiInstance && this.vueGuiInstance.vm) {
+      // Find the GUI in extraGuis
+      const extraGui = this.extraGuis.find(gui => gui.name === guiId);
+      if (extraGui) {
+        // Update the Vue component's display state and data
+        this.vueGuiInstance.vm.gui[guiId] = {
+          name: guiId,
+          display,
+          data,
+          attachToSprite: false // Default value, could be configurable
+        };
+        // Trigger Vue reactivity
+        this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
+      }
+    }
+  }
+
+  /**
+   * Initialize Vue components in the VueGui instance
+   * This should be called after VueGui is mounted
+   */
+  _initializeVueComponents() {
+    if (this.vueGuiInstance && this.vueGuiInstance.vm) {
+      // Initialize all extraGuis in the Vue instance
+      this.extraGuis.forEach(gui => {
+        this.vueGuiInstance.vm.gui[gui.name] = {
+          name: gui.name,
+          display: gui.display(),
+          data: gui.data(),
+          attachToSprite: false
+        };
+      });
+      
+      // Trigger Vue reactivity
+      this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
+    }
+  }
+
   guiInteraction(guiId: string, name: string, data: any) {
     this.webSocket.emit("gui.interaction", {
       guiId,
@@ -77,10 +136,13 @@ export class RpgGui {
   /**
    * Add a GUI component to the system
    * 
+   * By default, only CanvasEngine components (.ce files) are accepted.
+   * Vue components should be handled by the @rpgjs/vue package.
+   * 
    * @param gui - GUI configuration options
    * @param gui.name - Name or ID of the GUI component
    * @param gui.id - Alternative ID if name is not provided
-   * @param gui.component - The component to render
+   * @param gui.component - The component to render (must be a CanvasEngine component)
    * @param gui.display - Initial display state (default: false)
    * @param gui.data - Initial data for the component
    * @param gui.autoDisplay - Auto display when added (default: false)
@@ -90,7 +152,7 @@ export class RpgGui {
    * ```ts
    * gui.add({
    *   name: 'inventory',
-   *   component: InventoryComponent,
+   *   component: InventoryComponent, // Must be a .ce component
    *   autoDisplay: true,
    *   dependencies: () => [playerSignal, inventorySignal]
    * });
@@ -111,16 +173,36 @@ export class RpgGui {
       dependencies: gui.dependencies,
     };
 
+    // Accept both CanvasEngine components (.ce) and Vue components
+    // Vue components will be handled by VueGui if available
+    if (typeof gui.component !== 'function') {
+      guiInstance.component = gui;
+      this.extraGuis.push(guiInstance);
+      
+      // Auto display Vue components if enabled
+      if (guiInstance.autoDisplay) {
+        this._notifyVueGui(guiId, true, gui.data || {});
+      }
+      return;
+    }
+
     this.gui()[guiId] = guiInstance;
 
-    // Auto display if enabled
-    if (guiInstance.autoDisplay) {
+    // Auto display if enabled and it's a CanvasEngine component
+    if (guiInstance.autoDisplay && typeof gui.component === 'function') {
       this.display(guiId);
     }
   }
 
   get(id: string): GuiInstance | undefined {
-    return this.gui()[id];
+    // Check CanvasEngine GUIs first
+    const canvasGui = this.gui()[id];
+    if (canvasGui) {
+      return canvasGui;
+    }
+    
+    // Check Vue GUIs in extraGuis
+    return this.extraGuis.find(gui => gui.name === id);
   }
 
   exists(id: string): boolean {
@@ -128,7 +210,14 @@ export class RpgGui {
   }
 
   getAll(): Record<string, GuiInstance> {
-    return this.gui();
+    const allGuis = { ...this.gui() };
+    
+    // Add extraGuis to the result
+    this.extraGuis.forEach(gui => {
+      allGuis[gui.name] = gui;
+    });
+    
+    return allGuis;
   }
 
   /**
@@ -137,6 +226,7 @@ export class RpgGui {
    * Displays the GUI immediately if no dependencies are configured,
    * or waits for all dependencies to be resolved if dependencies are present.
    * Automatically manages subscriptions to prevent memory leaks.
+   * Works with both CanvasEngine components and Vue components.
    * 
    * @param id - The GUI component ID
    * @param data - Data to pass to the component
@@ -158,6 +248,67 @@ export class RpgGui {
 
     const guiInstance = this.get(id)!;
     
+    // Check if it's a Vue component (in extraGuis)
+    const isVueComponent = this.extraGuis.some(gui => gui.name === id);
+    
+    if (isVueComponent) {
+      // Handle Vue component display
+      this._handleVueComponentDisplay(id, data, dependencies, guiInstance);
+    } else {
+      // Handle CanvasEngine component display
+      this._handleCanvasComponentDisplay(id, data, dependencies, guiInstance);
+    }
+  }
+
+  /**
+   * Handle Vue component display logic
+   * 
+   * @param id - GUI component ID
+   * @param data - Component data
+   * @param dependencies - Runtime dependencies
+   * @param guiInstance - GUI instance
+   */
+  private _handleVueComponentDisplay(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);
+          this._notifyVueGui(id, true, data);
+        }
+      });
+      return;
+    }
+
+    // No dependencies, display immediately
+    guiInstance.data.set(data);
+    guiInstance.display.set(true);
+    this._notifyVueGui(id, true, data);
+  }
+
+  /**
+   * Handle CanvasEngine component display logic
+   * 
+   * @param id - GUI component ID
+   * @param data - Component data
+   * @param dependencies - Runtime dependencies
+   * @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();
@@ -191,6 +342,7 @@ export class RpgGui {
    * Hide a GUI component
    * 
    * Hides the GUI and cleans up any active subscriptions.
+   * Works with both CanvasEngine components and Vue components.
    * 
    * @param id - The GUI component ID
    * 
@@ -213,5 +365,11 @@ export class RpgGui {
     }
 
     guiInstance.display.set(false);
+    
+    // Check if it's a Vue component and notify VueGui
+    const isVueComponent = this.extraGuis.some(gui => gui.name === id);
+    if (isVueComponent) {
+      this._notifyVueGui(id, false);
+    }
   }
 }

package/src/RpgClient.ts

@@ -329,7 +329,7 @@ export interface RpgClient {
      * @prop {Array<GuiOptions>} [gui]
      * @memberof RpgClient
      * */
-    gui?: {
+    gui?: ({
         id: string,
         component: ComponentFunction,
         /**
@@ -342,7 +342,7 @@ export interface RpgClient {
          * The GUI will only display when all dependencies are resolved (!= undefined)
          */
         dependencies?: () => Signal[]
-    }[],
+    } | any)[],
 
     /** 
      * Array containing the list of sounds

package/src/RpgClientEngine.ts

@@ -46,6 +46,19 @@ export class RpgClientEngine<T = any> {
     this.hooks = inject<Hooks>(context, ModulesToken);
     this.globalConfig = inject(context, GlobalConfigToken)
 
+    if (!this.globalConfig) {
+      this.globalConfig = {}
+    }
+    if (!this.globalConfig.box) {
+      this.globalConfig.box = {
+        styles: {
+          backgroundColor: "#1a1a2e",
+          backgroundOpacity: 0.9
+        },
+        sounds: {}
+      }
+    }
+
     this.addComponentAnimation({
       id: "animation",
       component: PrebuiltComponentAnimations.Animation
@@ -60,6 +73,14 @@ export class RpgClientEngine<T = any> {
     this.renderer = app.renderer as PIXI.Renderer;
     this.tick = canvasElement?.propObservables?.context['tick'].observable
 
+
+    this.hooks.callHooks("client-spritesheets-load", this).subscribe();
+    this.hooks.callHooks("client-sounds-load", this).subscribe();
+    this.hooks.callHooks("client-gui-load", this).subscribe();
+    this.hooks.callHooks("client-particles-load", this).subscribe();
+    this.hooks.callHooks("client-componentAnimations-load", this).subscribe();
+    this.hooks.callHooks("client-sprite-load", this).subscribe();
+
     await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
 
     // wondow is resize
@@ -71,14 +92,6 @@ export class RpgClientEngine<T = any> {
       this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
     })
 
-    this.hooks.callHooks("client-spritesheets-load", this).subscribe();
-    this.hooks.callHooks("client-sounds-load", this).subscribe();
-    this.hooks.callHooks("client-gui-load", this).subscribe();
-    this.hooks.callHooks("client-particles-load", this).subscribe();
-    this.hooks.callHooks("client-componentAnimations-load", this).subscribe();
-    this.hooks.callHooks("client-sprite-load", this).subscribe();
-
-  
     await this.webSocket.connection(() => {
       this.initListeners()
       this.guiService._initialize()

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>
@@ -65,17 +62,31 @@
     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 spritesheets = client.spritesheets;
+  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) => {
@@ -101,6 +112,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);
 
@@ -113,6 +138,13 @@
     return typeof current === "string" ? current : current.text;
   });
 
+  const faceSheet = (graphicId, animationName) => {
+    return {
+      definition: spritesheets.get(graphicId),
+      playing: animationName,
+    };
+  }
+
   const choices = computed(() => {
     //const current = currentText();
     //return typeof current === "string" ? null : current.choices;
@@ -123,21 +155,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/index.ts

@@ -11,4 +11,5 @@ export * from "./components/gui";
 export * from "./components/animations";
 export * from "./presets";
 export * from "./components";
-export * from "./components/gui";
+export * from "./components/gui";
+export { Context } from "@signe/di";

package/src/presets/faceset.ts

@@ -0,0 +1,60 @@
+/**
+ * Creates a faceset preset for character expressions
+ * 
+ * This preset allows you to define multiple facial expressions for a character,
+ * where each expression corresponds to a specific frame position (frameX, frameY)
+ * within a single faceset texture. Each expression is defined by its position
+ * in the faceset grid.
+ * 
+ * @param options - Object containing the faceset configuration
+ * @param framesWidth - Number of frames horizontally in the faceset texture
+ * @param framesHeight - Number of frames vertically in the faceset texture
+ * @param expressions - Object mapping expression names to their frame positions as tuples [frameX, frameY]
+ * @returns Faceset configuration with animations for each expression
+ * 
+ * @example
+ * ```typescript
+ * const faceset = FacesetPreset({
+ *   id: "facesetId",
+ *   image: "faceset.png",
+ *   width: 1024,
+ *   height: 1024,
+ * }, 4, 2, {
+ *   happy: [0, 0],
+ *   sad: [1, 0],
+ *   angry: [2, 0],
+ *   surprised: [3, 0]
+ * });
+ * ```
+ */
+export const FacesetPreset = (
+    options: any,
+    framesWidth: number, 
+    framesHeight: number,
+    expressions: Record<string, [number, number]>,
+) => {
+    
+    const textures: Record<string, any> = {};
+    
+    // Create texture configuration for each expression
+    Object.keys(expressions).forEach((expressionName) => {
+        const [frameX, frameY] = expressions[expressionName];
+        textures[expressionName] = {
+            animations: () => [
+                [{ 
+                    time: 0, 
+                    frameX: frameX, 
+                    frameY: frameY 
+                }]
+            ],
+        };
+    });
+    
+    return {
+        ...options,
+        framesWidth,
+        framesHeight,
+        textures
+    };
+};
+  

package/src/presets/index.ts

@@ -1,9 +1,11 @@
 import { AnimationSpritesheetPreset } from "./animation";
 import { LPCSpritesheetPreset } from "./lpc";
 import { RMSpritesheet } from "./rmspritesheet";
+import { FacesetPreset } from "./faceset";
 
 export const Presets = {
     RMSpritesheet,
     LPCSpritesheetPreset,
-    AnimationSpritesheetPreset
+    AnimationSpritesheetPreset,
+    FacesetPreset
 }