> 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-horse-racing/interface.md).

# Editing the interface

Customize the CAS Horse Racing NUI — the Vue source, live browser preview, colour palette and locale-driven text. Optional; the menu works out of the box.

You only need this page if you want to change how the menu looks. The resource works out of the box without touching any of it.

## What ships

`web/` is the built menu and is the only part the server loads. Do not edit files inside it by hand. They are overwritten every time you build.

`cas-horserace-ui/` is the source. It is not needed at runtime and can be deleted from a live server.

## Requirements

[Node.js](https://nodejs.org) 20.19 or newer. Vite 8 will refuse to run on anything older.

## Setup

```bash
cd cas-horserace-ui
npm install
```

## Making a change

```bash
npm run dev
```

This rebuilds into `web/` every time you save. In another terminal:

```bash
npm run preview
```

Open `http://localhost:4477`. The whole menu runs in your browser with no game needed. The left rail has every screen with the data the game would send: the calendar, a race you have entered, the standings, the countdown, the finish card, and the course builder.

## Building for release

```bash
npm run build
```

This writes `web/`. Restart the resource to see it in game.

{% hint style="danger" %}
Never ship `cas-horserace-ui/node_modules`. It is around 72 MB and is not needed. Delete it before zipping, or exclude it.
{% endhint %}

## Changing colours

Palette is at the top of `cas-horserace-ui/src/style.css`:

```css
@theme {
    --color-ink: #050506;
    --color-blood: #6b1310;
    --color-red: #a5211a;
    --color-ember: #d4342a;
    --color-chalk: #eceef1;
}
```

Change the values and rebuild.

## Changing text

Do not edit text in the Vue files. Every string comes from the `ui` table in `locales/en.lua` and `locales/tr.lua`. Change it there and rebuild is not needed, just restart the resource.