Lobby Screen: Configure and Start Your La Mubi Game

The Lobby is the first screen players see before every session. It centralises every configuration decision — game mode, team composition, player names, timer length, and (in Impostor mode) the number of impostors — into a single page so the group can agree on settings before handing the device to the first performer. GET /lobby

Mode Selection

Two modes are available. Selecting a mode updates the layout and the “How to Play” instructions shown on the right-hand side of the screen.

Charades
Impostor

Component: HandleTeamsCardTeams and their players are managed through the HandleTeamsCard component. Each team must have at least one player, and every player must have a non-empty name before the game can start.The round timer is configured with HandleTimeCard. The selected duration (in seconds) becomes initial_timer in the game store and is reset at the start of every turn.How to Play steps shown:

Choose teams and add at least one player per team.
Name every player — blank names block the Start button.
Set how many seconds each performer has per round.
Hand the device to the first performer at the Handoff screen.
Actors may not speak — mime, gesture, and facial expressions only.

On start: prepareGame() is called, then a fetch to /api/movies?count=8 is issued. The response is passed to startGame(movies), which loads the first movie as current_movie and queues the rest. The router then navigates to /handoff.

Component: HandlePlayersCardIndividual players (not teams) are managed through HandlePlayersCard. A minimum of three named players is required.Two additional selectors appear:

Selector	Values	Store field
Number of Impostors	1 – ⌊(n−1)/2⌋	`impostorCount`
Debate Timer	30 s / 60 s / 90 s	`debate_timer`

The impostor count upper bound is automatically clamped whenever a player is removed: max = Math.floor((players.length - 1) / 2).How to Play steps shown:

Add every player by name.
Choose how many impostors to include.
Set the debate timer length.
Pass the device for sequential role reveals.
Discuss, debate, and vote to eliminate the impostor(s).

On start: prepareGame() is called, then the router navigates to /impostor. Movie fetching is deferred — the Impostor screen fetches /api/movies?count=8 on mount.

Controls

Control	Location	Action
Mode selector buttons	Top of page	Calls `setGameMode('charades' \| 'impostor')`, re-renders the setup panel
Begin Match button	Footer	Calls `handleStartLogic()` — see Start Conditions
`ThemeToggle`	Header (top-right)	Toggles light / dark theme
`LanguageToggle`	Header (top-right)	Switches the UI language

The Begin Match button is disabled (styled as muted, cursor-not-allowed) when canStart is false. No toast or error message is shown; the hint text “Name all players” appears beneath the player count instead.

Start Conditions

The canStart boolean is derived directly from the current store state on every render.

Charades
Impostor

const canStart =
  teams.length > 0 &&
  teams.every(
    (team) =>
      team.players.length > 0 &&
      team.players.every((player) => player.name.trim().length > 0)
  );

Both conditions must be true simultaneously:

Every team has at least one player (team.players.length > 0).
Every player in every team has a non-blank name (player.name.trim().length > 0).

The default store ships with two pre-named teams (Mad Max and La La Land) but with empty player lists, so canStart is false on first load.

const canStart =
  players.length >= 3 &&
  players.every((p) => p.name.trim().length > 0);

Both conditions must be true simultaneously:

At least three players have been added (players.length >= 3).
Every player has a non-blank name (p.name.trim().length > 0).

The lobby prefetches /handoff, /acting, and /result on mount via router.prefetch(). Once the game starts, navigation to those routes is instant with no loading delay.

API

Game State

Screens

Lobby Screen: Configure and Start Your La Mubi Game

Mode Selection

Controls

Start Conditions

Build docs developers (and LLMs) love

API

Game State

Screens

Documentation Index

​Mode Selection

​Controls

​Start Conditions

Build docs developers (and LLMs) love

Mode Selection

Controls

Start Conditions