# Nui interface

The in-game UI is built with HTML, CSS, and JavaScript, displayed as a NUI (NativeUI) overlay. All UI files are located in the `html/` folder of the resource.

## Files

| File              | Purpose                                                               |
| ----------------- | --------------------------------------------------------------------- |
| `html/index.html` | Main UI layout — all panels, modals, and tabs are defined here        |
| `html/style.css`  | All styling, including dynamic CSS variables for per-store theming    |
| `html/script.js`  | All UI logic — NUI message handling, item rendering, state management |
| `html/logo.png`   | Logo image shown in the shop header                                   |

## UI Panels

### Main Shop (Arsenal UI)

The primary screen opened when interacting with the boss NPC. Contains two tabs: **Arsenal** (shop) and **Auto Sell**.

### Arsenal Tab

* Displays all items configured for the current store in a grid layout
* Each item shows its image (resolved from the active inventory resource), label, and base price
* Clicking an item opens the **Quantity Modal**
* The total price bar at the bottom updates as items are added
* Buttons: CONFIRM ORDER, OPEN ARSENAL, CANCEL

### Auto Sell Tab

* Shows the current auto-sell status (active or inactive) with a status icon
* Info cards display: items in the stash, total stash value, and store location
* Lists all items currently in the stash with their sell prices
* Buttons: ACTIVATE / DEACTIVATE AUTO SELL, MANAGE ARSENAL, CLOSE

## Modals

### Quantity Modal

Appears when the owner clicks an item in the Arsenal tab. Shows preset quantity options for quick selection.

### Password Modal

Shown when opening the stash for the first time (to set a password) or on subsequent visits (to authenticate). Includes a Reset Password button that triggers the Reset Confirm Modal.

### Reset Confirm Modal

A confirmation prompt before the stash password is deleted. Includes a warning that the action cannot be undone.

### Store Modal (Buyer View)

Opened when a buyer interacts with the auto-sell NPC. Shows available items, quantities, and prices. One click buys one unit.

### Arsenal Management Modal (Stash)

Two-panel stash manager: the left panel shows the player's personal inventory, the right shows the store stash. Items can be moved between panels.

### Stash Quantity Modal

Appears when transferring items in the stash manager. Provides a numeric input with plus/minus buttons.

## Theme System

Each store has a `theme` hex colour defined in `config.lua`. When a store UI opens, the client sends this colour to the NUI. The JavaScript function `applyTheme(hex)` converts it to RGB and sets several CSS custom properties on the root element:

| CSS Variable      | Usage                                                    |
| ----------------- | -------------------------------------------------------- |
| `--accent`        | Primary accent colour (buttons, borders, highlights)     |
| `--accent-dim`    | Semi-transparent fill for selected states                |
| `--accent-border` | Border colour at 50% opacity                             |
| `--accent-glow`   | Glow/shadow colour at 60% opacity                        |
| `--accent-dark`   | Darkened version of the accent for depth effects         |
| `--text-accent`   | Brightened version for readable text on dark backgrounds |
| `--text-muted`    | Faded version for secondary labels                       |

This means switching between stores automatically re-colours the entire UI with no code changes needed.

## NUI Communication

The client Lua script sends messages to the NUI using `SendNUIMessage`. The NUI sends responses back using `fetch` POST requests to registered NUI callbacks in Lua. The resource name is injected once on startup so all callback URLs automatically match the folder name.

### Key NUI Messages (Lua → JS)

| action            | Description                                                               |
| ----------------- | ------------------------------------------------------------------------- |
| `setResourceName` | Injects the resource folder name so fetch URLs are always correct         |
| `openShop`        | Opens the Arsenal tab with store items, stash state, and config values    |
| `openAutoSell`    | Opens the Auto Sell tab directly                                          |
| `openStore`       | Opens the buyer-side store modal with current stash items and prices      |
| `openStash`       | Opens the stash management modal with player inventory and stash contents |
| `closeUI`         | Closes all open UI panels                                                 |

### Key NUI Callbacks (JS → Lua)

| Callback            | Description                                                           |
| ------------------- | --------------------------------------------------------------------- |
| `confirmOrder`      | Submits the selected items and quantities to start a mission          |
| `confirmPassword`   | Sends the entered password to the server for verification or creation |
| `resetPassword`     | Deletes the current stash password                                    |
| `toggleAutoSell`    | Activates or deactivates auto-sell for the current store              |
| `transferToStash`   | Moves an item from player inventory to the stash                      |
| `transferFromStash` | Moves an item from the stash to player inventory                      |
| `closeUI`           | Notifies Lua that the UI was closed (re-enables player controls)      |


---

# 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-businesssystem/nui-interface.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.