**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>

===== 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]]**