@rpgjs/server 5.0.0-alpha.8 → 5.0.0-beta.1

package/src/Player/GuiManager.ts

@@ -1,18 +1,21 @@
 import { RpgPlayer } from "./Player";
-import { Gui, DialogGui, MenuGui, ShopGui, NotificationGui } from "../Gui";
+import { Gui, DialogGui, MenuGui, ShopGui, NotificationGui, SaveLoadGui, GameoverGui } from "../Gui";
 import { DialogOptions, Choice } from "../Gui/DialogGui";
-import { PlayerCtor } from "@rpgjs/common";
+import { SaveLoadOptions, SaveSlot } from "../Gui/SaveLoadGui";
+import { MenuGuiOptions } from "../Gui/MenuGui";
+import { GameoverGuiOptions, GameoverGuiSelection } from "../Gui/GameoverGui";
+import { Constructor, PlayerCtor } from "@rpgjs/common";
 
 /**
  * GUI Manager Mixin
- * 
+ *
  * Provides graphical user interface management capabilities to any class. This mixin handles
  * dialog boxes, menus, notifications, shops, and custom GUI components. It manages the
  * complete GUI system including opening, closing, and data passing between client and server.
- * 
+ *
  * @param Base - The base class to extend with GUI management
  * @returns Extended class with GUI management methods
- * 
+ *
  * @example
  * ```ts
  * class MyPlayer extends WithGuiManager(BasePlayer) {
@@ -21,129 +24,25 @@ import { PlayerCtor } from "@rpgjs/common";
  *     // GUI system is automatically initialized
  *   }
  * }
- * 
+ *
  * const player = new MyPlayer();
  * await player.showText('Hello World!');
  * player.callMainMenu();
  * ```
  */
-export function WithGuiManager<TBase extends PlayerCtor>(Base: TBase) {
-  return class extends Base {
+export function WithGuiManager<TBase extends PlayerCtor>(
+  Base: TBase
+): new (...args: ConstructorParameters<TBase>) => InstanceType<TBase> &
+  IGuiManager {
+  class GuiManagerMixin extends Base {
     _gui: { [id: string]: Gui } = {};
 
-    /**
-     * Show a text. This is a graphical interface already built. Opens the GUI named `rpg-dialog`
-     *
-     * ```ts
-     * player.showText('Hello World')
-     * ```
-     *
-     * The method returns a promise. It is resolved when the dialog box is closed.
-     *
-     * ```ts
-     * await player.showText('Hello World')
-     * // dialog box is closed, then ...
-     * ```
-     *
-     * **Option: position**
-     *
-     * You can define how the dialog box is displayed:
-     * - top
-     * - middle
-     * - bottom
-     *
-     * (bottom by default)
-     *
-     * ```ts
-     * player.showText('Hello World', {
-     *      position: 'top'
-     * })
-     * ```
-     *
-     * **Option: fullWidth**
-     *
-     * `boolean` (true by default)
-     *
-     * Indicate that the dialog box will take the full width of the screen.
-     *
-     * ```ts
-     * player.showText('Hello World', {
-     *      fullWidth: true
-     * })
-     * ```
-     *
-     * **Option: autoClose**
-     *
-     * `boolean` (false by default)
-     *
-     * If false, the user will have to press Enter to close the dialog box.
-     *
-     *  ```ts
-     * player.showText('Hello World', {
-     *      autoClose: true
-     * })
-     * ```
-     *
-     * **Option: typewriterEffect**
-     *
-     * `boolean` (true by default)
-     *
-     * Performs a typewriter effect
-     *
-     *  ```ts
-     * player.showText('Hello World', {
-     *      typewriterEffect: false
-     * })
-     * ```
-     *
-     * **Option: talkWith**
-     *
-     * `RpgPlayer` (nothing by default)
-     *
-     * If you specify the event or another player, the other player will stop his or her movement and look in the player's direction.
-     *
-     *  ```ts
-     * // Code in an event
-     * player.showText('Hello World', {
-     *      talkWith: this
-     * })
-     * ```
-     *
-     * @title Show Text
-     * @method player.showText(text,options)
-     * @param {string} text
-     * @param {object} [options] the different options, see usage below
-     * @returns {Promise}
-     * @memberof GuiManager
-     */
     showText(msg: string, options: DialogOptions = {}): Promise<any> {
       const gui = new DialogGui(<any>this);
       this._gui[gui.id] = gui;
       return gui.openDialog(msg, options);
     }
 
-    /**
-     * Shows a dialog box with a choice. Opens the GUI named `rpg-dialog`
-     *
-     * ```ts
-     * const choice = await player.showChoices('What color do you prefer?', [
-     *      { text: 'Black', value: 'black' },
-     *      { text: 'Rather the blue', value: 'blue' },
-     *      { text: 'I don\'t have a preference!', value: 'none' }
-     * ])
-     *
-     * // If the player selects the first
-     * console.log(choice) // { text: 'Black', value: 'black' }
-     * ```
-     *
-     * @title Show Choices
-     * @method player.showChoices(text,choices)
-     * @param {string} text
-     * @param {Array<{ text: string, value: any }>} choices
-     * @param {object} [options] Same options as the openDialog method
-     * @returns {Promise<Choice | null>}
-     * @memberof GuiManager
-     */
     showChoices(
       msg: string,
       choices: Choice[],
@@ -158,44 +57,44 @@ export function WithGuiManager<TBase extends PlayerCtor>(Base: TBase) {
       });
     }
 
-    /**
-     * Displays a notification . Opens the GUI named `rpg-notification`
-     *
-     * @title Displays a notification
-     * @method player.showNotification()
-     * @param {string} message - The message to display in the notification
-     * @param {object} options - An object containing options for the notification
-     * @param {number} options.time - The time to display the notification for (in ms). Default: 2000ms
-     * @param {string} options.icon - The icon to display in the notification. Put the identifier of the spritesheet (defined on the client side)
-     * @param {string} options.sound - The sound to play when the notification is shown. Set the sound ID (defined on the client side)
-     * @returns {void}
-     * @memberof GuiManager
-     */
     showNotification(
       message: string,
-      options: { time?: number; icon?: string; sound?: string } = {}
+      options: { time?: number; icon?: string; sound?: string; type?: "info" | "warn" | "error" } = {}
     ): Promise<any> {
-      const gui = new NotificationGui(<any>this);
-      this._gui[gui.id] = gui;
-      const data = {
+      this.emit('notification', {
         message,
         ...options,
-      };
-      return gui.open(data);
+      });
+      return Promise.resolve(true);
     }
 
-    /**
-     * Calls main menu. Opens the GUI named `rpg-main-menu`
-     *
-     * @title Call Main Menu
-     * @method player.callMainMenu()
-     * @returns {void}
-     * @memberof GuiManager
-     */
-    callMainMenu() {
+    callMainMenu(options: MenuGuiOptions = {}) {
       const gui = new MenuGui(<any>this);
       this._gui[gui.id] = gui;
-      return gui.open();
+      return gui.open(options);
+    }
+
+    callGameover(options: GameoverGuiOptions = {}): Promise<GameoverGuiSelection | null> {
+      const gui = new GameoverGui(<any>this);
+      this._gui[gui.id] = gui;
+      return gui.open(options);
+    }
+
+    showSaveLoad(slots: SaveSlot[] = [], options: SaveLoadOptions = {}): Promise<number | null> {
+      const gui = new SaveLoadGui(<any>this);
+      this._gui[gui.id] = gui;
+      return gui.open(slots, options).then((index) => {
+        if (typeof index !== 'number') return null;
+        return index;
+      });
+    }
+
+    showSave(slots: SaveSlot[] = [], options: SaveLoadOptions = {}): Promise<number | null> {
+      return this.showSaveLoad(slots, { ...options, mode: 'save' });
+    }
+
+    showLoad(slots: SaveSlot[] = [], options: SaveLoadOptions = {}): Promise<number | null> {
+      return this.showSaveLoad(slots, { ...options, mode: 'load' });
     }
 
     /**
@@ -206,7 +105,13 @@ export function WithGuiManager<TBase extends PlayerCtor>(Base: TBase) {
      * @returns {void}
      * @memberof GuiManager
      */
-    callShop(items: any[]) {
+    callShop(items: any[] | {
+      items: any[]
+      sell?: Record<string, number> | Array<{ id: string; multiplier: number }>
+      sellMultiplier?: number
+      message?: string
+      face?: { id: string; expression?: string }
+    }) {
       const gui = new ShopGui(<any>this);
       this._gui[gui.id] = gui;
       return gui.open(items);
@@ -253,6 +158,10 @@ export function WithGuiManager<TBase extends PlayerCtor>(Base: TBase) {
       return gui;
     }
 
+    getGui(guiId: string) {
+      return this._gui[guiId];
+    }
+
     /**
      * Closes the GUI and removes it from memory
      *
@@ -330,11 +239,237 @@ export function WithGuiManager<TBase extends PlayerCtor>(Base: TBase) {
       const _players = players || this;
       this._attachedGui(_players as RpgPlayer[], false);
     }
-  } as unknown as TBase;
+  }
+
+  return GuiManagerMixin as unknown as any;
 }
 
 /**
- * Type helper to extract the interface from the WithGuiManager mixin
- * This provides the type without duplicating method signatures
+ * Interface for GUI management capabilities
+ * Defines the methods that will be available on the player
  */
-export type IGuiManager = InstanceType<ReturnType<typeof WithGuiManager>>;
+export interface IGuiManager {
+  /**
+   * Show a text. This is a graphical interface already built. Opens the GUI named `rpg-dialog`
+   *
+   * ```ts
+   * player.showText('Hello World')
+   * ```
+   *
+   * The method returns a promise. It is resolved when the dialog box is closed.
+   *
+   * ```ts
+   * await player.showText('Hello World')
+   * // dialog box is closed, then ...
+   * ```
+   *
+   * **Option: position**
+   *
+   * You can define how the dialog box is displayed:
+   * - top
+   * - middle
+   * - bottom
+   *
+   * (bottom by default)
+   *
+   * ```ts
+   * player.showText('Hello World', {
+   *      position: 'top'
+   * })
+   * ```
+   *
+   * **Option: fullWidth**
+   *
+   * `boolean` (true by default)
+   *
+   * Indicate that the dialog box will take the full width of the screen.
+   *
+   * ```ts
+   * player.showText('Hello World', {
+   *      fullWidth: true
+   * })
+   * ```
+   *
+   * **Option: autoClose**
+   *
+   * `boolean` (false by default)
+   *
+   * If false, the user will have to press Enter to close the dialog box.
+   *
+   *  ```ts
+   * player.showText('Hello World', {
+   *      autoClose: true
+   * })
+   * ```
+   *
+   * **Option: typewriterEffect**
+   *
+   * `boolean` (true by default)
+   *
+   * Performs a typewriter effect
+   *
+   *  ```ts
+   * player.showText('Hello World', {
+   *      typewriterEffect: false
+   * })
+   * ```
+   *
+   * **Option: talkWith**
+   *
+   * `RpgPlayer` (nothing by default)
+   *
+   * If you specify the event or another player, the other player will stop his or her movement and look in the player's direction.
+   *
+   *  ```ts
+   * // Code in an event
+   * player.showText('Hello World', {
+   *      talkWith: this
+   * })
+   * ```
+   *
+   * @title Show Text
+   * @method player.showText(text,options)
+   * @param {string} text
+   * @param {object} [options] the different options, see usage below
+   * @returns {Promise}
+   * @memberof GuiManager
+   */
+  showText(msg: string, options?: DialogOptions): Promise<any>;
+
+  /**
+   * Shows a dialog box with a choice. Opens the GUI named `rpg-dialog`
+   *
+   * ```ts
+   * const choice = await player.showChoices('What color do you prefer?', [
+   *      { text: 'Black', value: 'black' },
+   *      { text: 'Rather the blue', value: 'blue' },
+   *      { text: 'I don\'t have a preference!', value: 'none' }
+   * ])
+   *
+   * // If the player selects the first
+   * console.log(choice) // { text: 'Black', value: 'black' }
+   * ```
+   *
+   * @title Show Choices
+   * @method player.showChoices(text,choices)
+   * @param {string} text
+   * @param {Array<{ text: string, value: any }>} choices
+   * @param {object} [options] Same options as the openDialog method
+   * @returns {Promise<Choice | null>}
+   * @memberof GuiManager
+   */
+  showChoices(
+    msg: string,
+    choices: Choice[],
+    options?: DialogOptions
+  ): Promise<Choice | null>;
+
+  /**
+   * Displays a notification . Opens the GUI named `rpg-notification`
+   *
+   * @title Displays a notification
+   * @method player.showNotification()
+   * @param {string} message - The message to display in the notification
+   * @param {object} options - An object containing options for the notification
+   * @param {number} options.time - The time to display the notification for (in ms). Default: 2000ms
+   * @param {string} options.icon - The icon to display in the notification. Put the identifier of the spritesheet (defined on the client side)
+   * @param {string} options.sound - The sound to play when the notification is shown. Set the sound ID (defined on the client side)
+   * @returns {void}
+   * @memberof GuiManager
+   */
+  showNotification(
+    message: string,
+    options?: { time?: number; icon?: string; sound?: string; type?: "info" | "warn" | "error" }
+  ): Promise<any>;
+
+  /**
+   * Display a save/load slots screen. Opens the GUI named `rpg-save`
+   *
+   * ```ts
+   * const index = await player.showSaveLoad(slots, { mode: 'save' })
+   * ```
+   *
+   * @title Show Save/Load
+   * @method player.showSaveLoad(slots,options)
+   * @param {Array<object>} slots
+   * @param {object} [options]
+   * @returns {Promise<number | null>}
+   * @memberof GuiManager
+   */
+  showSaveLoad(slots?: SaveSlot[], options?: SaveLoadOptions): Promise<number | null>;
+
+  /**
+   * Display a save slots screen. Opens the GUI named `rpg-save`
+   *
+   * ```ts
+   * const index = await player.showSave(slots)
+   * ```
+   *
+   * @title Show Save
+   * @method player.showSave(slots,options)
+   * @param {Array<object>} slots
+   * @param {object} [options]
+   * @returns {Promise<number | null>}
+   * @memberof GuiManager
+   */
+  showSave(slots?: SaveSlot[], options?: SaveLoadOptions): Promise<number | null>;
+
+  /**
+   * Display a load slots screen. Opens the GUI named `rpg-save`
+   *
+   * ```ts
+   * const index = await player.showLoad(slots)
+   * ```
+   *
+   * @title Show Load
+   * @method player.showLoad(slots,options)
+   * @param {Array<object>} slots
+   * @param {object} [options]
+   * @returns {Promise<number | null>}
+   * @memberof GuiManager
+   */
+  showLoad(slots?: SaveSlot[], options?: SaveLoadOptions): Promise<number | null>;
+  /**
+   * Calls main menu. Opens the GUI named `rpg-main-menu`
+   *
+   * @title Call Main Menu
+   * @method player.callMainMenu(options)
+   * @param {object} [options]
+   * @returns {void}
+   * @memberof GuiManager
+   */
+  callMainMenu(options?: MenuGuiOptions): void;
+
+  /**
+   * Calls game over menu. Opens the GUI named `rpg-gameover`
+   *
+   * ```ts
+   * const selection = await player.callGameover()
+   * if (selection?.id === 'title') {
+   *     await player.gui('rpg-title-screen').open()
+   * }
+   * if (selection?.id === 'load') {
+   *     await player.showLoad()
+   * }
+   * ```
+   *
+   * @title Call Game Over Menu
+   * @method player.callGameover(options)
+   * @param {object} [options]
+   * @returns {Promise<GameoverGuiSelection | null>}
+   * @memberof GuiManager
+   */
+  callGameover(options?: GameoverGuiOptions): Promise<GameoverGuiSelection | null>;
+  callShop(items: any[] | {
+    items: any[]
+    sell?: Record<string, number> | Array<{ id: string; multiplier: number }>
+    sellMultiplier?: number
+    message?: string
+    face?: { id: string; expression?: string }
+  }): void;
+  gui(guiId: string): Gui;
+  getGui(guiId: string): Gui;
+  removeGui(guiId: string, data?: any): void;
+  showAttachedGui(players?: RpgPlayer[] | RpgPlayer): void;
+  hideAttachedGui(players?: RpgPlayer[] | RpgPlayer): void;
+}