> 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-taxi-job/interface.md).

# Editing the interface

Edit and rebuild the CAS Advanced Taxi Job interface, a React and TypeScript app built with Vite.

The interface is written in React and TypeScript. The built version is in `web/dist`, which the game loads directly. No build is needed unless you change the interface. Texts are not in the interface: they come from the language file (see [Localization](/script-documentation/cas-advanced-taxi-job/localization.md)).

## Folders

| Folder           | Contents                                                                                     |
| ---------------- | -------------------------------------------------------------------------------------------- |
| `web/src/views`  | The screens: office, dispatch board, driving HUD, passenger forms and slips, fare ticket.    |
| `web/src/styles` | One stylesheet per screen. Sizes are in `rem` so every screen fits 720p to 5K and ultrawide. |
| `web/src/assets` | Fonts, portraits, paper, board maps and the header art.                                      |
| `web/src/dev`    | Sample data for working in a browser. Not part of the build.                                 |
| `web/dist`       | The built interface. This is the folder the game loads.                                      |

## Building

Node.js 18 or newer is required.

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

The command checks the types and writes a new `web/dist`. Restart the resource afterwards.

{% hint style="info" %}
If your shell sets `NODE_ENV=development`, build with `NODE_ENV=production npm run build`, or the build comes out in development mode.
{% endhint %}

## Working in a browser

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

Open `http://127.0.0.1:5181/` with one of these views. Add `&lang=tr` for Turkish.

| View            | Screen                                                                       |
| --------------- | ---------------------------------------------------------------------------- |
| `?view=office`  | Cab office (`&shift=1` on a shift)                                           |
| `?view=board`   | Dispatch board (`&map=valentine` or another town, `&map=none` without a map) |
| `?view=leaders` | Best drivers of the week                                                     |
| `?view=hud`     | Driving with a passenger                                                     |
| `?view=forhire` | For hire, with a call on the wire                                            |
| `?view=offerp`  | A player's call on the wire                                                  |
| `?view=ticket`  | Fare ticket                                                                  |
| `?view=form`    | Passenger wire form                                                          |
| `?view=ride`    | Passenger, cab on its way                                                    |
| `?view=slip`    | Passenger fare slip                                                          |

You can also try the interface online in the [live demo](https://codeaftersex.com/script/advanced-taxi-job#pd-demo).

## Board maps for other places

The board map pictures are made from the game's minimap tiles. A new picture must keep the same projection: a box of world coordinates `{ min x, min y, max x, max y }` drawn into a 1432 x 1220 image, north up. Add it as `web/src/assets/img/board_map_<name>.webp`, build, and use `Map = { Image = '<name>', Bounds = { ... } }` in the office.