import { RpgPlayer } from './Player'; import { Gui } from '../Gui'; import { CharacterSelectOptions } from '../Gui/CharacterSelectGui'; import { ActorData, ActorInput } from './ClassManager'; import { HotbarGuiOptions } from '../Gui/HotbarGui'; import { ShopGuiOptions, ShopItemInput } from '../Gui/ShopGui'; import { DialogOptions, DialogBaseOptions, Choice } from '../Gui/DialogGui'; import { SaveLoadOptions, SaveSlot } from '../Gui/SaveLoadGui'; import { MenuGuiOptions } from '../Gui/MenuGui'; import { GameoverGuiOptions, GameoverGuiSelection } from '../Gui/GameoverGui'; import { InputOptions, NumberInputOptions, TextInputOptions, TextareaInputOptions } from '../Gui/InputForm'; import { 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) { * constructor() { * super(); * // GUI system is automatically initialized * } * } * * const player = new MyPlayer(); * await player.showText('Hello World!'); * player.callMainMenu(); * ``` */ export declare function WithGuiManager(Base: TBase): new (...args: ConstructorParameters) => InstanceType & IGuiManager; /** * Interface for GUI management capabilities * Defines the methods that will be available on the player */ export interface IGuiManager { /** * Opens the prebuilt character selector and returns only an actor offered by * the authoritative server. Applying the result remains explicit. * * @title Show Character Select * @method player.showCharacterSelect(actors,options) * @param actors Actor constructors, database IDs, or resolved actor objects. * @param options Presentation and cancellation options. * @returns The selected actor, or `null` after an allowed cancellation. * @memberof RpgPlayer */ showCharacterSelect(actors: readonly ActorInput[], options?: CharacterSelectOptions): Promise; /** * Opens the prebuilt input GUI and waits for the player to submit or cancel it. * The player cannot move while the form is open. Number inputs resolve to a * `number`; text inputs and textareas resolve to a `string`; cancellation and * an empty optional number input resolve to `null`. * * ```ts * const age = await player.showInput('Your age', { * type: 'number', * required: true, * min: 1 * }) * // age is number | null * * const biography = await player.showInput('Biography', { * control: 'textarea', * rows: 6, * maxLength: 500 * }) * // biography is string | null * ``` * * @title Show Input * @method player.showInput(message,options) * @param {string} message Label or question displayed above the field. * @param {InputOptions} [options] Field type, control, initial value, labels, and validation constraints. * @returns {Promise} The typed submitted value, or `null` when cancelled or when an optional number is empty. * @memberof GuiManager */ showInput(message: string, options: NumberInputOptions): Promise; showInput(message: string, options?: TextInputOptions | TextareaInputOptions): Promise; showInput(message: string, options: InputOptions): Promise; /** * 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' * }) * ``` * * Add a typed input directly below the dialog text: * * ```ts * const age = await player.showText('How old are you?', { * input: { type: 'number', required: true, min: 1 } * }) * // age is number | null * ``` * * **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: DialogBaseOptions & { input: NumberInputOptions; }): Promise; showText(msg: string, options: DialogBaseOptions & { input: TextInputOptions | TextareaInputOptions; }): Promise; showText(msg: string, options?: DialogOptions): Promise; /** * 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} * @memberof GuiManager */ showChoices(msg: string, choices: Choice[], options?: DialogBaseOptions): Promise; /** * 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; /** * 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} slots * @param {object} [options] * @returns {Promise} * @memberof GuiManager */ showSaveLoad(slots?: SaveSlot[], options?: SaveLoadOptions): Promise; /** * 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} slots * @param {object} [options] * @returns {Promise} * @memberof GuiManager */ showSave(slots?: SaveSlot[], options?: SaveLoadOptions): Promise; /** * 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} slots * @param {object} [options] * @returns {Promise} * @memberof GuiManager */ showLoad(slots?: SaveSlot[], options?: SaveLoadOptions): Promise; /** * 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; showHotbar(options?: HotbarGuiOptions): Promise; hideHotbar(): 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} * @memberof GuiManager */ callGameover(options?: GameoverGuiOptions): Promise; callShop(items: ShopItemInput[] | ShopGuiOptions): Promise; gui(guiId: string): Gui; getGui(guiId: string): Gui; removeGui(guiId: string, data?: unknown, guiOpenId?: unknown): void; showAttachedGui(players?: RpgPlayer[] | RpgPlayer): void; hideAttachedGui(players?: RpgPlayer[] | RpgPlayer): void; }