> 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-duel-arena-system/interface.md).

# Editing the Interface

Change how the RedM Duel & Arena System menu looks. The React and Vite source, building the NUI, previewing it in a browser, and adding weapon artwork.

The menu ships ready to use in `web/dist`. You only need this page if you want to change how it looks or reads.

## What you do not need to edit

The menu gets these from `config.lua` when it opens, so change them there:

* The list of modes and their formats
* Arenas, their names, regions and map artwork
* Which weapons exist
* Rule choices and defaults
* Wager presets, maximum wager and house cut
* Key labels, challenge window and bet stakes

All text, including every translation, is in the language files under `locales/`. See [Languages and Translation](/script-documentation/cas-duel-arena-system/languages.md).

## The source

The menu is built with React, Vite and Tailwind CSS, and drawn with Red Dead Redemption 2's own UI textures and fonts.

```
web/
  src/
    App.jsx              screens and flows
    components/screens/  menu tabs (Challenge, Matchmaking, Tournaments...)
    components/flow/     challenge cards, pre-match, duel HUD, results, spectator view
    components/ui/       buttons, toggles, meters, portraits
    data/catalog.js      modes, weapons and their artwork, rating tiers, rule options
    lib/i18n.js          reads the language sent by the server
    lib/dict.en.js       English fallback text, the same as locales/en.lua
    data/icons.js        texture paths for icons, weapons, portraits and maps
    styles.css           colours, fonts and panel styles
  public/                textures, fonts and images
  dist/                  the built menu the game loads
```

{% hint style="warning" %}
Never edit files in `web/dist` by hand. They are generated and are overwritten by the next build.
{% endhint %}

## Building

You need [Node.js](https://nodejs.org) 20 or newer.

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

This writes a fresh `web/dist`. Then restart the resource:

```
restart cas-duel
```

Players may need to reconnect to see interface changes.

## Previewing in a browser

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

Open the address it prints. Outside the game the menu fills itself with sample players, duels and tournaments, so every screen can be checked without a server. Buttons marked "Preview" simulate an incoming challenge. None of this sample data is included in the build that ships to players.

## Changing text

Text is not written in the interface source. Every label, message and name comes from the language file chosen with `Config.Locale`, so to change a word, edit `locales/en.lua` (or your language's file) and restart the resource. No build is needed. See [Languages and Translation](/script-documentation/cas-duel-arena-system/languages.md).

`web/src/lib/dict.en.js` holds a copy of the English text, used only for a line that is missing from the server's language file. You do not need to edit it.

## Adding artwork for a new weapon

When you add a weapon to `Config.Weapons`, the menu shows it with borrowed artwork until you give it its own.

1. Put the image in `web/public/tex/items/`, for example `weapon_revolver_lemat.png`.
2. Add it to `ITEM` in `web/src/data/icons.js`, using the same id as in `config.lua`:

   ```js
   lemat: "tex/items/weapon_revolver_lemat.png",
   ```
3. Add it to `WEAPONS` in `web/src/data/catalog.js`, with its kind: `revolver`, `pistol` or `melee`:

   ```js
   weapon("lemat", "revolver", ITEM.lemat, 120, 300),
   ```

   The kind sets the class shown under the name. The two numbers are only used by the browser preview.
4. Name it in each language file you use:

   ```lua
   weapon_lemat = 'LeMat Revolver',
   ```
5. Build and restart.

## Colours

The main colours are CSS variables at the top of `web/src/styles.css`:

```css
:root {
  --bg: #010101;
  --panel: #0d0d0d;
  --panel-2: #141414;
  --red: #CB0101;
  --red-hover: #A50101;
}
```

Change `--red` to recolour every accent in the menu.