# XWUIGameModeSelect

A card-based game mode picker (story, survival, creative, etc.). Each entry in `data.modes` (`{ id, name, description, icon, locked, lockReason }`) renders as a card under a "Select Game Mode" heading; locked modes show their `lockReason` and cannot be focused or chosen. Set the starting card with `data.selectedId` and arrange cards with `conf_comp.layout` (`horizontal` or `vertical`). Arrow keys skip over locked entries, Enter/Space confirms, and choosing a mode dispatches a `modeselect` event carrying the mode and index; read it via `onSelect` or `getSelected()`.

## Basic Usage

Renders selectable game-mode cards (with locked states) and emits the chosen mode.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Card grid of game modes with locked-mode support and keyboard navigation.
```

## Locked Progression

A mode ladder where later entries are locked behind rank and level milestones, with a Confirm button reading the choice via getSelected().

```example
file: examples/LockedProgression.ts
html: examples/BasicUsage.html
title: Locked Progression
description: A mode ladder where later entries are locked behind rank and level milestones, with a Confirm button reading the choice via getSelected().
```

## Vertical Mode List

The mode picker stacked vertically so the Up and Down arrow keys move between modes.

```example
file: examples/VerticalModes.ts
html: examples/BasicUsage.html
title: Vertical Mode List
description: The mode picker stacked vertically so the Up and Down arrow keys move between modes.
```

```api
```