> For the complete documentation index, see [llms.txt](https://code-after-sex.gitbook.io/script-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://code-after-sex.gitbook.io/script-documentation/cas-shooting-range/interface.md).

# Editing the Interface

Edit the menu of the RedM Shooting Range & Competition script: the React source, the browser preview with the Demo Director, and building web/dist.

The menu and the match HUD are a React app, drawn with Red Dead Redemption 2's own menu textures and fonts. The built version is in `web/dist` and is what the game loads. The source is in `web/src`.

You only need this page if you want to change how the menu looks. Texts are changed in the [language file](/script-documentation/cas-shooting-range/languages.md) and settings in the [config](/script-documentation/cas-shooting-range/configuration.md), with no rebuild.

## What you need

* [Node.js](https://nodejs.org) 18 or newer.

## Where things are

| Path                         | What it is                                                                                              |
| ---------------------------- | ------------------------------------------------------------------------------------------------------- |
| `web/src/components/screens` | Full screens: idle prompt, hub, create match, lobby, pre-match, match HUD, practice, result, tournament |
| `web/src/components/hub`     | The hub tabs: play, open matches, ranked, leaderboards, challenges, history                             |
| `web/src/components/create`  | The create match tabs: mode, targets, weapons, rules, wager                                             |
| `web/src/components/hud`     | The match HUD pieces: scoreboard, lanes, weapon card, stats, side cards                                 |
| `web/src/styles.css`         | Colours, fonts and the texture based frames                                                             |
| `web/src/data/mock.js`       | The menu's built in catalog (modes, targets, weapons) and the sample data for the browser preview       |
| `web/public/tex`             | The game textures and item icons                                                                        |
| `web/public/fonts`           | The game fonts                                                                                          |

## Preview in a browser

```bash
cd web
npm install
npm run dev
```

Open the address it prints. Outside the game, the menu runs on sample data and shows the **Demo Director**, a panel that jumps to any state: idle, create match, lobby, invite, countdown, active round, false start, round complete, sudden death, match complete, disconnect, tournament, spectator and practice. The Demo Director never shows in game.

## Build

```bash
cd web
npm run build
```

This writes a fresh `web/dist`. Restart the resource to load it.

{% hint style="warning" %}
If your system has `NODE_ENV` set to `development`, the build includes React's development version and comes out much larger. Build with production mode instead.

PowerShell:

```powershell
$env:NODE_ENV = 'production'; npm run build
```

Command Prompt:

```bat
set "NODE_ENV=production" && npm run build
```

{% endhint %}

## Adding a new weapon or target type

The menu keeps its own list of weapons and target types in `web/src/data/mock.js`, with their icons and labels. The server's config decides which of them are on, and their numbers. So:

* Changing or removing an included weapon, target or mode only needs the config.
* Adding a **new** weapon id or target type id needs an entry in `mock.js` as well, then a build.

## Renaming the resource

The menu talks to the game through the resource's own name, so you can rename the resource folder without touching the interface.