**Language / Langue :** [[fr:ui:presentation|FR]] | **EN**

====== Interface modes (UI) ======

Since version 4.13, a scenario can change the **game interface** on the player side with the ''ui:'' key. Without this key, the classic interface stays strictly unchanged: existing scenarios are not affected.

Interface modes work on the **web**, in the **local version** and in the **standalone HTML5 export**. On Discord and in the terminal, the scenario remains playable with the classic interface (text and buttons).

===== Picking a mode =====

<code yaml>
title: "My scenario"
ui: cards
</code>

^ Value ^ Mode ^ Description ^
| ''default'' / ''defaut'' | Classic | The usual interface (text + choice panel). |
| ''cards'' / ''cartes'' | [[en:ui:cards|Cards]] | Choices become cards on a horizontal rail. |
| ''fullscreen'' / ''plein-ecran'' | [[en:ui:fullscreen|Fullscreen]] | Full-screen point & click scene, text in a bottom band. |
| ''deck'' | [[en:ui:deck|Deck]] | One swipeable card with 4 directions, narrative card-game style. |
| ''phone'' | [[en:ui:phone|Phone]] | Every room becomes a smartphone screen. |

The values ''book''/''livre'', ''vn'' and ''ds'' are reserved for future versions: they are accepted but currently render the classic interface.

===== One mode per room =====

The ''ui:'' key can also be set on a **room**. The active interface is always the one of the current room: the room ''ui:'' if present, else the scenario ''ui:'', else the classic interface. Leaving the room automatically restores the global mode.

<code yaml>
ui: cards             # the whole scenario in cards mode

rooms:
  - id: tavern
    ui: fullscreen    # ... except this room, in point & click
    text: "[[#map:scene:image.png|mask.png]]"

  - id: library
    ui: default       # ... and this one, back to the classic interface
    text: "A quiet, traditional reading room."
</code>

You can mix atmospheres this way: a classic investigation, a point & click scene, a phone sequence.

===== Hiding the input bar =====

''hide_input:'' (''masquer_saisie:'') controls the text command bar:

^ Value ^ Effect ^
| absent | Automatic: hidden in immersive modes (''cards'', ''fullscreen'', ''deck''), visible otherwise. |
| ''true'' | Bar hidden, 100% buttons/touch gameplay. |
| ''false'' | Bar always visible. |

The key exists at scenario level and at room level. The Give up and Home buttons stay reachable in every mode.

<code yaml>
ui: cards
hide_input: false   # cards mode, but the input bar stays
</code>

===== True fullscreen =====

The ⛶ button places the game in fullscreen and hides the website header. It works with every interface mode, including the classic interface. When the input bar is visible, it sits next to the Send button. Otherwise, it remains available in the bottom-right corner.

The game bar stays visible so Give up and Home remain available. Press ''Escape'' to leave fullscreen. Returning to the home screen also closes it.

===== Enhanced buttons (all modes) =====

Two choice-button improvements ship with the interface modes and work everywhere:

**Image in a label**: a ''%%[[url]]%%'' link inside a choice label displays a picture. Alone, it fills the button (app icon, thumbnail); with text around it, it becomes a small icon on the left.

<code yaml>
choices:
  - button: "[[https://example.com/map-icon.png]] Check the map"
    to: map
</code>

**Button shape**: the ''shape:'' (''forme:'') key of a choice adjusts its appearance, mostly useful in phone mode.

<code yaml>
choices:
  - button: "📞"
    shape: round          # classic, icon_square, round, wide
    to: call
</code>

===== Key points =====

  * ''ui:'' at scenario or room level, [[en:ui:cards|cards]] / [[en:ui:fullscreen|fullscreen]] / [[en:ui:deck|deck]] / [[en:ui:phone|phone]].
  * Full backward compatibility: without ''ui:'', nothing changes.
  * Discord and terminal stay playable with the classic interface.
  * The [[en:editeur:linter-export|linter]] validates ''ui:'' values and flags typos.

**Join us on [[https://discord.gg/Z63DtVV|Discord Make&Play]]**