@rpgjs/client 5.0.0-beta.6 → 5.0.0-beta.8

package/src/Game/Object.ts

@@ -1,19 +1,32 @@
 import { Hooks, ModulesToken, RpgCommonPlayer } from "@rpgjs/common";
-import { trigger, signal, effect } from "canvasengine";
-import { filter, from, map, of, Subscription, switchMap } from "rxjs";
+import { trigger, signal, type Trigger } from "canvasengine";
+import { from, map, of, Subscription, switchMap } from "rxjs";
 import { inject } from "../core/inject";
 import { RpgClientEngine } from "../RpgClientEngine";
-import TextComponent from "../components/dynamics/text.ce";
-
-const DYNAMIC_COMPONENTS = {
-  text: TextComponent,
-}
-
 type Frame = { x: number; y: number; ts: number };
 
 type AnimationRestoreOptions = {
   restoreAnimationName?: string;
   restoreGraphics?: any[];
+  timeoutMs?: number;
+};
+
+type FlashType = 'alpha' | 'tint' | 'both';
+
+type FlashOptions = {
+  type?: FlashType;
+  duration?: number;
+  cycles?: number;
+  alpha?: number;
+  tint?: number | string;
+};
+
+type FlashTriggerOptions = Omit<FlashOptions, "tint"> & {
+  tint: number;
+};
+
+type ConfigurableTrigger<T> = Omit<Trigger<T>, "start"> & {
+  start(config?: T): Promise<void>;
 };
 
 export abstract class RpgClientObject extends RpgCommonPlayer {
@@ -25,8 +38,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
   _param = signal({});
   frames: Frame[] = [];
   graphicsSignals = signal<any[]>([]);
-  _component = {} // temporary component memory
-  flashTrigger = trigger();
+  flashTrigger: ConfigurableTrigger<FlashTriggerOptions> = trigger<FlashTriggerOptions>();
   private animationRestoreState?: {
     animationName: string;
     graphics: any[];
@@ -57,24 +69,6 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
       this.graphicsSignals.set(sheets);
     });
 
-    this.componentsTop.observable
-    .pipe(
-      filter(value => value !== null && value !== undefined),
-      map((value) => typeof value === 'string' ? JSON.parse(value) : value),
-    )
-    .subscribe(({components}) => {
-      for (const component of components) {
-        for (const [key, value] of Object.entries(component)) {
-          this._component = value as any; // temporary component memory
-          console.log(value)
-          const type = (value as any).type as keyof typeof DYNAMIC_COMPONENTS;
-          if (DYNAMIC_COMPONENTS[type]) {
-            this.engine.addSpriteComponentInFront(DYNAMIC_COMPONENTS[type]);
-          }
-        }
-      }
-    });
-
     this.engine.tick
       .pipe
       //throttleTime(10)
@@ -113,6 +107,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
 
   private animationSubscription?: Subscription;
   private animationResetTimeout?: ReturnType<typeof setTimeout>;
+  private animationWaitResolve?: () => void;
 
   private clearAnimationControls() {
     if (this.animationSubscription) {
@@ -125,6 +120,12 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     }
   }
 
+  private resolveAnimationWait() {
+    const resolve = this.animationWaitResolve;
+    this.animationWaitResolve = undefined;
+    resolve?.();
+  }
+
   private finishTemporaryAnimation() {
     const restoreState = this.animationRestoreState;
     this.clearAnimationControls();
@@ -135,6 +136,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     }
     this.animationRestoreState = undefined;
     this.animationIsPlaying.set(false);
+    this.resolveAnimationWait();
   }
 
   /**
@@ -183,13 +185,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
    * });
    * ```
    */
-  flash(options?: {
-    type?: 'alpha' | 'tint' | 'both';
-    duration?: number;
-    cycles?: number;
-    alpha?: number;
-    tint?: number | string;
-  }): void {
+  flash(options?: FlashOptions): void {
     const flashOptions = {
       type: options?.type || 'alpha',
       duration: options?.duration ?? 300,
@@ -241,6 +237,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     this.animationIsPlaying.set(false);
     this.animationCurrentIndex.set(0);
     this.clearAnimationControls();
+    this.resolveAnimationWait();
   }
 
   /**
@@ -252,17 +249,19 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
    *
    * @param animationName - Name of the animation to play
    * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)
+   * @param options - Restore and timeout options
+   * @returns A promise resolved when a finite animation finishes, is interrupted, or times out
    *
    * @example
    * ```ts
    * // Play attack animation 3 times
-   * player.setAnimation('attack', 3);
+   * await player.setAnimation('attack', 3);
    *
    * // Play continuous spell animation
    * player.setAnimation('spell');
    * ```
    */
-  setAnimation(animationName: string, nbTimes?: number, options?: AnimationRestoreOptions): void;
+  setAnimation(animationName: string, nbTimes?: number, options?: AnimationRestoreOptions): Promise<void>;
   /**
    * Set a custom animation with temporary graphic change
    *
@@ -273,20 +272,22 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
    * @param animationName - Name of the animation to play
    * @param graphic - The graphic(s) to temporarily use during the animation
    * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)
+   * @param options - Restore and timeout options
+   * @returns A promise resolved when a finite animation finishes, is interrupted, or times out
    *
    * @example
    * ```ts
    * // Play attack animation with temporary graphic change
-   * player.setAnimation('attack', 'hero_attack', 3);
+   * await player.setAnimation('attack', 'hero_attack', 3);
    * ```
    */
-  setAnimation(animationName: string, graphic?: string | string[], nbTimes?: number, options?: AnimationRestoreOptions): void;
+  setAnimation(animationName: string, graphic?: string | string[], nbTimes?: number, options?: AnimationRestoreOptions): Promise<void>;
   setAnimation(
     animationName: string,
     graphicOrNbTimes?: string | string[] | number,
     nbTimesOrOptions?: number | AnimationRestoreOptions,
     options?: AnimationRestoreOptions
-  ): void {
+  ): Promise<void> {
     let graphic: string | string[] | undefined;
     let finalNbTimes: number = Infinity;
     let restoreOptions: AnimationRestoreOptions | undefined = options;
@@ -314,6 +315,13 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
       this.finishTemporaryAnimation();
     }
 
+    const waitPromise =
+      finalNbTimes === Infinity
+        ? Promise.resolve()
+        : new Promise<void>((resolve) => {
+            this.animationWaitResolve = resolve;
+          });
+
     this.animationIsPlaying.set(true);
     const previousAnimationName =
       restoreOptions?.restoreAnimationName ?? this.animationName();
@@ -349,10 +357,12 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
         if (this.animationIsPlaying()) {
           this.finishTemporaryAnimation();
         }
-      }, Math.max(1000, finalNbTimes * 1000));
+      }, restoreOptions?.timeoutMs ?? Math.max(1000, finalNbTimes * 1000));
     }
 
     this.animationName.set(animationName);
+
+    return waitPromise;
   }
 
   /**
@@ -360,10 +370,25 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
    *
    * @param id - Identifier of the component animation to play.
    * @param params - Parameters forwarded to the animation effect.
+   * @returns A promise resolved when the animation component calls `onFinish`.
    */
-  showComponentAnimation(id: string, params: any) {
+  showComponentAnimation(id: string, params: any): Promise<void> {
     const engine = inject(RpgClientEngine);
-    engine.getComponentAnimation(id).displayEffect(params, this);
+    return engine.getComponentAnimation(id).displayEffect(params, this);
+  }
+
+  /**
+   * Display a registered spritesheet animation effect on this object.
+   *
+   * @param graphic - Identifier of the spritesheet to use.
+   * @param animationName - Name of the animation inside the spritesheet.
+   * @returns A promise resolved when the animation component calls `onFinish`.
+   */
+  showAnimation(graphic: string, animationName: string = 'default'): Promise<void> {
+    return this.showComponentAnimation('animation', {
+      graphic,
+      animationName,
+    });
   }
   
   /**

package/src/Gui/Gui.spec.ts

@@ -0,0 +1,273 @@
+import { describe, expect, test, vi } from "vitest";
+import { Context, injector } from "@signe/di";
+import { signal } from "canvasengine";
+import { PrebuiltGui } from "@rpgjs/common";
+import { WebSocketToken } from "../services/AbstractSocket";
+
+vi.mock("../components/gui", () => {
+  const component = () => null;
+  return {
+    DialogboxComponent: component,
+    ShopComponent: component,
+    SaveLoadComponent: component,
+    MainMenuComponent: component,
+    NotificationComponent: component,
+    TitleScreenComponent: component,
+    GameoverComponent: component,
+  };
+});
+
+const createGui = async () => {
+  const { RpgGui } = await import("./Gui");
+  const context = new Context();
+  const socket = {
+    on: vi.fn(),
+    emit: vi.fn(),
+  };
+  await injector(context, [
+    {
+      provide: WebSocketToken,
+      useValue: socket,
+    },
+  ]);
+  return {
+    gui: new RpgGui(context),
+    socket,
+  };
+};
+
+const CanvasGui = () => null;
+const VueInventory = {
+  name: "inventory",
+  render() {
+    return null;
+  },
+};
+const VueDialog = {
+  name: PrebuiltGui.Dialog,
+  render() {
+    return null;
+  },
+};
+const VueMainMenu = {
+  name: PrebuiltGui.MainMenu,
+  render() {
+    return null;
+  },
+};
+const VueTooltip = {
+  name: "tooltip",
+  rpgAttachToSprite: true,
+  render() {
+    return null;
+  },
+};
+
+describe("RpgGui Vue integration", () => {
+  test("separates CanvasEngine and Vue GUI registries", async () => {
+    const { gui } = await createGui();
+
+    gui.add({
+      id: "canvas-tooltip",
+      component: CanvasGui,
+      attachToSprite: true,
+    });
+    gui.add({
+      id: "inventory",
+      component: VueInventory,
+    });
+    gui.add(VueTooltip);
+
+    expect(gui.get("canvas-tooltip")?.component).toBe(CanvasGui);
+    expect(gui.get("inventory")?.component).toBe(VueInventory);
+    expect(gui.get("tooltip")?.component).toBe(VueTooltip);
+    expect(gui.getAttachedGuis().map(item => item.name)).toEqual(["canvas-tooltip"]);
+    expect(gui.getAttachedVueGuis().map(item => item.name)).toEqual(["tooltip"]);
+  });
+
+  test("synchronizes Vue GUI display and hide states through the Vue bridge", async () => {
+    const { gui } = await createGui();
+    const bridge = {
+      updateGuiState: vi.fn(),
+      initializeGuiStates: vi.fn(),
+    };
+
+    gui.add({
+      id: "inventory",
+      component: VueInventory,
+    });
+    gui._setVueGuiInstance(bridge);
+
+    expect(bridge.initializeGuiStates).toHaveBeenCalledWith([
+      expect.objectContaining({
+        name: "inventory",
+        display: false,
+        data: {},
+        attachToSprite: false,
+      }),
+    ]);
+
+    gui.display("inventory", { gold: 12 });
+    expect(bridge.updateGuiState).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        name: "inventory",
+        display: true,
+        data: { gold: 12 },
+        attachToSprite: false,
+      }),
+    );
+
+    gui.hide("inventory");
+    expect(bridge.updateGuiState).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        name: "inventory",
+        display: false,
+      }),
+    );
+  });
+
+  test("waits for Vue GUI dependencies before display", async () => {
+    const { gui } = await createGui();
+    const bridge = {
+      updateGuiState: vi.fn(),
+      initializeGuiStates: vi.fn(),
+    };
+    const dependency = signal<any>(undefined);
+
+    gui.add({
+      id: "inventory",
+      component: VueInventory,
+      dependencies: () => [dependency],
+    });
+    gui._setVueGuiInstance(bridge);
+    gui.display("inventory", { items: ["potion"] });
+
+    expect(gui.isDisplaying("inventory")).toBe(false);
+    expect(bridge.updateGuiState).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        display: true,
+      }),
+    );
+
+    dependency.set({ id: "player" });
+
+    expect(gui.isDisplaying("inventory")).toBe(true);
+    expect(bridge.updateGuiState).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        name: "inventory",
+        display: true,
+        data: { items: ["potion"] },
+      }),
+    );
+  });
+
+  test("allows Vue GUI entries to replace prebuilt CanvasEngine GUIs", async () => {
+    const { gui } = await createGui();
+    const bridge = {
+      updateGuiState: vi.fn(),
+      initializeGuiStates: vi.fn(),
+    };
+
+    gui._setVueGuiInstance(bridge);
+    gui.add({
+      id: PrebuiltGui.Dialog,
+      component: VueDialog,
+    });
+
+    expect(gui.get(PrebuiltGui.Dialog)?.component).toBe(VueDialog);
+    expect(gui.getAll()[PrebuiltGui.Dialog].component).toBe(VueDialog);
+    expect((gui as any).gui()[PrebuiltGui.Dialog]).toBeUndefined();
+    expect(gui.getVueGuis().filter(item => item.name === PrebuiltGui.Dialog)).toHaveLength(1);
+
+    gui.display(PrebuiltGui.Dialog, { text: "Hello" });
+    expect(bridge.updateGuiState).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        name: PrebuiltGui.Dialog,
+        display: true,
+        data: { text: "Hello" },
+      }),
+    );
+
+    gui.hide(PrebuiltGui.Dialog);
+    expect(bridge.updateGuiState).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        name: PrebuiltGui.Dialog,
+        display: false,
+      }),
+    );
+  });
+
+  test("allows CanvasEngine GUI entries to replace Vue GUI entries with the same id", async () => {
+    const { gui } = await createGui();
+    const bridge = {
+      updateGuiState: vi.fn(),
+      initializeGuiStates: vi.fn(),
+    };
+
+    gui._setVueGuiInstance(bridge);
+    gui.add({
+      id: PrebuiltGui.Dialog,
+      component: VueDialog,
+    });
+    gui.add({
+      id: PrebuiltGui.Dialog,
+      component: CanvasGui,
+    });
+
+    expect(gui.get(PrebuiltGui.Dialog)?.component).toBe(CanvasGui);
+    expect(gui.getVueGuis().some(item => item.name === PrebuiltGui.Dialog)).toBe(false);
+    expect((gui as any).gui()[PrebuiltGui.Dialog].component).toBe(CanvasGui);
+    expect(bridge.initializeGuiStates).toHaveBeenLastCalledWith([]);
+  });
+
+  test("keeps main menu optimistic reducers when a Vue GUI replaces the prebuilt component", async () => {
+    const { gui, socket } = await createGui();
+    const bridge = {
+      updateGuiState: vi.fn(),
+      initializeGuiStates: vi.fn(),
+    };
+
+    gui.add({
+      id: PrebuiltGui.MainMenu,
+      component: VueMainMenu,
+    });
+    gui._setVueGuiInstance(bridge);
+    gui.display(PrebuiltGui.MainMenu, {
+      items: [
+        {
+          id: "potion",
+          quantity: 2,
+        },
+      ],
+    });
+
+    gui.guiInteraction(PrebuiltGui.MainMenu, "useItem", { id: "potion" });
+
+    expect(gui.get(PrebuiltGui.MainMenu)?.data().items).toEqual([
+      {
+        id: "potion",
+        quantity: 1,
+      },
+    ]);
+    expect(bridge.updateGuiState).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        name: PrebuiltGui.MainMenu,
+        data: {
+          items: [
+            {
+              id: "potion",
+              quantity: 1,
+            },
+          ],
+        },
+      }),
+    );
+    expect(socket.emit).toHaveBeenCalledWith(
+      "gui.interaction",
+      expect.objectContaining({
+        guiId: PrebuiltGui.MainMenu,
+        name: "useItem",
+      }),
+    );
+  });
+});