# nui

The showroom UI is a single HTML file (`html/index.html`) rendered as a NUI overlay over the game.

***

## Opening & Closing

The UI opens when a player interacts with the showroom ped via their target system (or proximity key). It is closed by:

* Clicking the **✕** button
* Pressing **Escape**
* The test drive starting (UI closes automatically)

Lua side: `OpenShowroom()` / `CloseShowroom()` toggle `SetNuiFocus`.

***

## Layout

The panel is split into two columns:

**Left — Vehicle List**\
Scrollable list of all entries in `Config.VipCars`. Each card shows the vehicle name and category. Clicking a card selects it.

**Right — Preview Panel**

* Large image of the selected vehicle
* Stats grid: Top Speed (km/h), Acceleration (%), Handling (%)
* Two action buttons: Test Drive and Purchase VIP

***

## NUI → Lua Messages

The HTML sends these `fetch` calls to Lua callbacks:

| Callback     | Triggered by        | Payload             |
| ------------ | ------------------- | ------------------- |
| `close`      | ✕ button or Escape  | `{}`                |
| `previewCar` | Clicking a car card | `{ index: number }` |
| `testDrive`  | Test Drive button   | `{ index: number }` |
| `buyVehicle` | Purchase VIP button | `{ index: number }` |

***

## Lua → NUI Messages

Lua sends `SendNUIMessage` with these `action` values:

| Action                 | Payload                 | Effect                                  |
| ---------------------- | ----------------------- | --------------------------------------- |
| `open`                 | `{ cars: [] }`          | Opens the UI and populates the car list |
| `close`                | —                       | Hides the UI                            |
| `showTestDriveTimer`   | `{ duration: number }`  | Shows the countdown widget              |
| `updateTestDriveTimer` | `{ remaining: number }` | Updates the countdown each second       |
| `hideTestDriveTimer`   | —                       | Hides the countdown widget              |

***

## Test Drive Timer Widget

A fixed overlay shown in the top-right corner during a test drive. Color changes based on remaining time:

* **White** — more than 10 s remaining
* **Amber** — 10 s or less
* **Red + pulse** — 5 s or less


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mohssins.gitbook.io/mohscriptsdocs/moh-vipshowroom/nui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.