> ## Documentation Index
> Fetch the complete documentation index at: https://v5.rpgjs.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# GUI Commands

> Dialogs, menus, notifications, and custom GUI commands.

# GUI Commands

Dialogs, menus, notifications, and custom GUI commands.

## Members

* [Call custom GUI](#call-custom-gui)
* [Call Game Over Menu](#call-game-over-menu)
* [Call Main Menu](#call-main-menu)
* [Call Shop Menu](#call-shop-menu)
* [Close custom GUI](#close-custom-gui)
* [Displays a notification](#displays-a-notification)
* [Hide to GUI attached](#hide-to-gui-attached)
* [Show Choices](#show-choices)
* [Show Load](#show-load)
* [Show Save](#show-save)
* [Show Save/Load](#show-save-load)
* [Show Text](#show-text)
* [View to GUI attached](#view-to-gui-attached)
* [WithGuiManager](#withguimanager)

## Call custom GUI

Call a custom Gui

```ts theme={null}
// Calls a client-side component, created with VueJS, named "inn".
const gui = player.gui('inn')

 // You can wait for actions on the menu. It only works if the menu is open.
gui.on('accept', () => {
     player.allRecovery()
})

// The GUI is opened by passing recoverable data on the client side.
gui.open({ hello: 'world' })
```

When opening the GUI, one can give options

```ts theme={null}
await gui.open({ hello: 'world' }, {
     waitingAction: true,
     blockPlayerInput: true
})
// After the GUI is closed
```

* `blockPlayerInput`: while the GUI is open, the player can not move on the map

* `waitingAction`: We explicitly wait until the GUI is closed for the promise to be resolved.

* Source: `packages/server/src/Player/GuiManager.ts`

* Kind: `method`

* Member of: `GuiManager`

* Defined in: `GuiManagerMixin`

### Signature

```ts theme={null}
player.gui(guiId)
```

### Parameters

* `guiId`: `string`

## Call Game Over Menu

Calls game over menu. Opens the GUI named `rpg-gameover`

```ts theme={null}
const selection = await player.callGameover()
if (selection?.id === 'title') {
    await player.gui('rpg-title-screen').open()
}
if (selection?.id === 'load') {
    await player.showLoad()
}
```

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `IGuiManager`

### Signature

```ts theme={null}
player.callGameover(options)
```

### Parameters

* `options?`: `GameoverGuiOptions`

## Call Main Menu

Calls main menu. Opens the GUI named `rpg-main-menu`

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `IGuiManager`

### Signature

```ts theme={null}
player.callMainMenu(options)
```

### Parameters

* `options?`: `MenuGuiOptions`

## Call Shop Menu

Calls shop menu. Opens the GUI named `rpg-shop`

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `GuiManagerMixin`

### Signature

```ts theme={null}
player.callShop()
```

### Parameters

* `items`: `any[] | {
      items: any[]
      sell?: Record<string, number> | Array<{ id: string; multiplier: number }>
      sellMultiplier?: number
      message?: string
      face?: { id: string; expression?: string }
    }`

## Close custom GUI

Closes the GUI and removes it from memory

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `GuiManagerMixin`

### Signature

```ts theme={null}
player.removeGui(guiId,data)
```

### Parameters

* `guiId`: `string`
* `data?`: `any`

## Displays a notification

Displays a notification . Opens the GUI named `rpg-notification`

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `IGuiManager`

### Signature

```ts theme={null}
player.showNotification()
```

### Parameters

* `message`: `string`
* `options?`: `{ time?: number; icon?: string; sound?: string; type?: "info" | "warn" | "error" }`

## Hide to GUI attached

Hide the GUI attached to the players

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `GuiManagerMixin`
* Since: `3.0.0-beta.5`

### Signature

```ts theme={null}
player.hideAttachedGui(players?)
```

### Parameters

* `players?`: `RpgPlayer[] | RpgPlayer`

### Examples

```ts theme={null}
player.hideAttachedGui()
```

```ts theme={null}
player.hideAttachedGui(aPlayer)
```

```ts theme={null}
player.hideAttachedGui([player1, player2])
```

## Show Choices

Shows a dialog box with a choice. Opens the GUI named `rpg-dialog`

```ts theme={null}
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' }
```

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `IGuiManager`

### Signature

```ts theme={null}
player.showChoices(text,choices)
```

### Parameters

* `msg`: `string`
* `choices`: `Choice[]`
* `options?`: `DialogOptions`

## Show Load

Display a load slots screen. Opens the GUI named `rpg-save`

```ts theme={null}
const index = await player.showLoad(slots)
```

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `IGuiManager`

### Signature

```ts theme={null}
player.showLoad(slots,options)
```

### Parameters

* `slots?`: `SaveSlot[]`
* `options?`: `SaveLoadOptions`

## Show Save

Display a save slots screen. Opens the GUI named `rpg-save`

```ts theme={null}
const index = await player.showSave(slots)
```

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `IGuiManager`

### Signature

```ts theme={null}
player.showSave(slots,options)
```

### Parameters

* `slots?`: `SaveSlot[]`
* `options?`: `SaveLoadOptions`

## Show Save/Load

Display a save/load slots screen. Opens the GUI named `rpg-save`

```ts theme={null}
const index = await player.showSaveLoad(slots, { mode: 'save' })
```

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `IGuiManager`

### Signature

```ts theme={null}
player.showSaveLoad(slots,options)
```

### Parameters

* `slots?`: `SaveSlot[]`
* `options?`: `SaveLoadOptions`

## Show Text

Show a text. This is a graphical interface already built. Opens the GUI named `rpg-dialog`

```ts theme={null}
player.showText('Hello World')
```

The method returns a promise. It is resolved when the dialog box is closed.

```ts theme={null}
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 theme={null}
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 theme={null}
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 theme={null}
player.showText('Hello World', {
    autoClose: true
})
```

**Option: typewriterEffect**

`boolean` (true by default)

Performs a typewriter effect

```ts theme={null}
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 theme={null}
// Code in an event
player.showText('Hello World', {
    talkWith: this
})
```

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `IGuiManager`

### Signature

```ts theme={null}
player.showText(text,options)
```

### Parameters

* `msg`: `string`
* `options?`: `DialogOptions`

## View to GUI attached

Display the GUI attached to the players

If you don't specify the players as parameters, it will display the GUI of the instance
But you can specify which GUIs to display by specifying the players as the first parameter

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `method`
* Member of: `GuiManager`
* Defined in: `GuiManagerMixin`
* Since: `3.0.0-beta.5`

### Signature

```ts theme={null}
player.showAttachedGui(players?)
```

### Parameters

* `players?`: `RpgPlayer[] | RpgPlayer`

### Examples

```ts theme={null}
player.showAttachedGui()
```

```ts theme={null}
player.showAttachedGui(aPlayer)
```

```ts theme={null}
player.showAttachedGui([player1, player2])
```

## WithGuiManager

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.

* Source: `packages/server/src/Player/GuiManager.ts`
* Kind: `function`

### Signature

```ts theme={null}
WithGuiManager(Base: TBase): new (...args: ConstructorParameters<TBase>) => InstanceType<TBase> &
  IGuiManager
```

### Parameters

* `Base`: `TBase`

### Returns

Extended class with GUI management methods

### Examples

```ts theme={null}
class MyPlayer extends WithGuiManager(BasePlayer) {
  constructor() {
    super();
    // GUI system is automatically initialized
  }
}

const player = new MyPlayer();
await player.showText('Hello World!');
player.callMainMenu();
```