> 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-advanced-gang/developers/interface.md).

# Customising the interface

Customise the CAS Advanced Gang System ledger: rebuild the React interface, work in a browser, colours, screen size, icons and text.

The ledger is a React app in `web/`, built with Vite and Tailwind CSS. The resource ships it **already built** in `web/dist`, which is what `fxmanifest.lua` loads. You only need to rebuild after changing something in `web/src`.

## Rebuilding

Needs Node 18 or newer.

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

That rewrites `web/dist`. Restart the resource afterwards.

{% hint style="warning" %}
Always copy `web/dist` to your server. Without it the ledger opens blank. `web/node_modules` isn't needed on the server.
{% endhint %}

## Working in a browser

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

Outside the game, the interface runs on `web/src/data/mock.js`: a full gang state in exactly the shape the server sends. Every screen can be worked on without a server.

## What's where

| Path                    | What it is                                                                                                                    |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `App.jsx`               | The shell: header, tabs, dialogs                                                                                              |
| `screens/`              | One file per tab and full screen: `CampOverview`, `Roster`, `Ranks`, `Stash`, `Ledger`, `Upgrades`, `Founding`, `Placement`   |
| `ui/Chrome.jsx`         | Buttons, frames, meters and money                                                                                             |
| `ui/Overlays.jsx`       | Notices and the confirm dialog                                                                                                |
| `ui/CampPlan.jsx`       | The camp seen from above                                                                                                      |
| `ui/StructureSheet.jsx` | A structure's sheet, for moving or taking it down                                                                             |
| `ui/OutOfBounds.jsx`    | The out of bounds screen in the placing tool                                                                                  |
| `lib/nui.js`            | Talking to Lua, with the full [payload list](/script-documentation/cas-advanced-gang/developers/events-and-nui.md) at the top |
| `lib/i18n.js`           | `t()`, which reads the locale table the game sends                                                                            |
| `lib/scale.js`          | Scales the 1920 by 1080 layout to any screen                                                                                  |
| `lib/state.jsx`         | The shared state the screens read                                                                                             |
| `data/mock.js`          | The browser data                                                                                                              |
| `data/preview.js`       | Browser only: makes buttons act on the mock data. Never runs in game.                                                         |
| `data/strings.en.js`    | The English text the interface has before the game sends a locale                                                             |
| `styles.css`            | Theme colours, fonts and shared styles                                                                                        |

## Colours

The theme sits at the top of `web/src/styles.css`:

```css
--red: #CB0101;
--red-hover: #A50101;
--bg: #010101;
--panel: #0d0d0d;
--text: #F5F3EE;
--text-dim: #9A948A;
```

Change them and rebuild to recolour the whole ledger.

## Screen size

The layout is drawn at 1920 by 1080 and scaled as a whole to the player's screen: 1 at 1080p, 1.33 at 1440p, 2 at 4K. Both axes scale together, so nothing stretches. A wider screen gives the layout more room instead of black bars.

## Icons

Item and structure icons are PNGs in `tex/items/`. To add one:

1. Put the PNG in **`web/public/tex/items/`**, so a rebuild keeps it.
2. Copy it into **`web/dist/tex/items/`** as well, so it works without a rebuild.
3. Use the file name in `Config.StashItems`, `Config.Structures` or `Config.WeaponIcons`.

Transparent PNGs look best. The ledger shows item art as it is, without tinting it.

## Text

Don't change interface text in the components. Every line comes from the locale files, so change it there. See [Languages](/script-documentation/cas-advanced-gang/translation/languages.md).