# Rarx Pausemenu

## Introduction

RARX Pausemenu is a modern, fully customizable pause menu replacement for FiveM servers. Built with Svelte for optimal performance, it provides a sleek interface with features like:

* Player information display (cash, bank, crypto, XP)
* Business management integration
* Events system with admin panel
* Custom buttons system
* Dark/Light mode
* Full localization support

## Requirements

| Dependency    | Version | Required |
| ------------- | ------- | -------- |
| ox\_lib       | Latest  | Yes      |
| oxmysql       | Latest  | Yes      |
| ESX or QBCore | Any     | Yes      |

## Installation

{% stepper %}
{% step %}

### Download

Download the resource and extract it to your `resources` folder.
{% endstep %}

{% step %}

### Database Setup

Import the SQL file to create the events table:

```sql
-- File: sql/events.sql
CREATE TABLE IF NOT EXISTS `pausemenu_events` (
    `id` INT AUTO_INCREMENT PRIMARY KEY,
    `title` VARCHAR(100) NOT NULL,
    `description` TEXT,
    `date` DATETIME,
    `image` VARCHAR(500),
    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```

{% endstep %}

{% step %}

### Server Configuration

Add to your `server.cfg`:

```cfg
ensure ox_lib
ensure oxmysql
ensure rarx_pausemenu
```

{% endstep %}

{% step %}

### Configuration

Edit `shared/config.lua` according to your needs.
{% endstep %}
{% endstepper %}

## Configuration

### Server Branding

Customize how your server name and logo appear in the menu.

```lua
Config.server_name = 'YOUR SERVER NAME'
Config.server_name_size = '2.2rem'  -- Font size (CSS units)
Config.server_name_font = 'designer' -- Options: 'kalamaya', 'designer'
Config.server_logo = 'https://your-domain.com/logo.png'
```

Background Image:

```lua
Config.background = 'https://your-domain.com/background.jpg'
```

Recommended resolution: 1920x1080 or higher

### Colors

Customize the color scheme using HEX colors (without the # symbol).

```lua
Config.colors = {
    primary = 'ff6b9d',       -- Main accent color
    primary_dark = 'ff4785',  -- Darker variant for gradients
    secondary = '7dd3fc',     -- Secondary accent color
    secondary_dark = '38bdf8' -- Darker secondary variant
}
```

Color Examples:

| Style               | Primary | Primary Dark | Secondary | Secondary Dark |
| ------------------- | ------- | ------------ | --------- | -------------- |
| Pink/Cyan (Default) | ff6b9d  | ff4785       | 7dd3fc    | 38bdf8         |
| Blue/Orange         | 3b82f6  | 2563eb       | f97316    | ea580c         |
| Green/Purple        | 22c55e  | 16a34a       | a855f7    | 9333ea         |
| Red/Yellow          | ef4444  | dc2626       | eab308    | ca8a04         |

### Sounds

Configure hover and click sound effects.

```lua
Config.sounds = {
    volume = 0.1,  -- Volume level (0.0 to 1.0)
    hover = 'https://your-domain.com/hover.mp3',
    click = 'https://your-domain.com/click.mp3',
}
```

Set volume to 0 to disable sounds

### Currency

Configure how currency is displayed in the menu.

```lua
Config.currency = {
    symbol = '$',      -- Currency symbol
    position = 'after' -- 'before' = $100 | 'after' = 100$
}
```

### Experience System

Enable and configure an XP/Experience display.

```lua
Config.exp = {
    enable = true,      -- Enable/disable XP display
    name = 'exp',       -- Account name in your framework database
    label = 'XP',       -- Display label
    symbol = 'XP',      -- Symbol shown with the value
    position = 'after'  -- 'before' = XP 100 | 'after' = 100 XP
}
```

### Menu Options

Configure the visibility and behavior of menu buttons.

```lua
Config.menu_options = {
    help = {
        enable = true,
        command = 'report'  -- Executes /report when clicked
    },
    exit = {
        enable = true,
        event = 'disconnect' -- 'disconnect' = quit game | 'logout' = character select
    },
    bills = {
        enable = true  -- Show bills section
    },
    apps = {
        servicios = true,     -- Services button (for emergency jobs)
        negocio = true,       -- Business button
        organizacion = true   -- Organization/Gang button
    }
}
```

Service Jobs:

```lua
Config.serviceJobs = {
    'police',
    'ambulance',
    'mechanic',
    'taxi',
}
```

### Admin Panel

Configure admin access for managing events.

```lua
Config.admin = {
    enable = true,
    keybind = 'END',  -- Key to open admin panel
    identifiers = {
        -- Discord ID (without discord: prefix)
        '933383327547818076',

        -- License identifier
        'license:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

        -- Steam identifier
        'steam:110000xxxxxxxxx',

        -- FiveM identifier
        'fivem:xxxxxxx',
    }
}
```

Finding Identifiers:

| Type    | How to Find                                                   |
| ------- | ------------------------------------------------------------- |
| Discord | Enable Developer Mode in Discord, right-click user, "Copy ID" |
| License | Check server console when player connects                     |
| Steam   | Convert Steam64 ID to hex format                              |
| FiveM   | Player's FiveM account ID                                     |

### Events System

Configure the server events display.

```lua
Config.events = {
    enable = true,
    maxEvents = 10,  -- Maximum number of active events
}
```

### Map Keybind

Enable a shortcut key to open the game map.

```lua
Config.mapKeybind = {
    enable = true,
    key = 'P'  -- Key to open the map
}
```

### Custom Buttons

Add custom action buttons to the menu.

```lua
Config.customButtons = {
    {
        id = 'unique_id',           -- Unique identifier
        label = 'Button Text',      -- Display text
        image = 'https://url.jpg',  -- Background image
        action = 'command',         -- Action type (see below)
        value = 'commandname',      -- Command/event name
        locked = false,             -- If true, button is greyed out
        jobs = {},                  -- Job restriction (empty = all)
    },
}
```

Action Types:

| Action         | Description           | Example Value                   |
| -------------- | --------------------- | ------------------------------- |
| `command`      | Executes a command    | `'inventory'` runs `/inventory` |
| `client_event` | Triggers client event | `'esx:openMenu'`                |
| `server_event` | Triggers server event | `'myresource:doSomething'`      |

Examples:

```lua
Config.customButtons = {
    -- Open inventory command
    {
        id = 'inventory',
        label = 'Inventory',
        image = 'https://example.com/inventory.jpg',
        action = 'command',
        value = 'inventory',
        locked = false,
        jobs = {},
    },

    -- Police-only button
    {
        id = 'police_mdt',
        label = 'MDT',
        image = 'https://example.com/mdt.jpg',
        action = 'client_event',
        value = 'police:openMDT',
        locked = false,
        jobs = {'police', 'sheriff'},
    },

    -- Mechanic job button
    {
        id = 'mechanic_menu',
        label = 'Mechanic Menu',
        image = 'https://example.com/mechanic.jpg',
        action = 'server_event',
        value = 'mechanic:openMenu',
        locked = false,
        jobs = {'mechanic'},
    },
}
```

## Features

### Dark Mode

The menu includes a dark/light mode toggle accessible from the header. The user's preference is saved locally and persists across sessions.

Default: Dark mode is enabled by default for all players.

### Player Information

The menu displays:

* Player name and ID
* Job title
* Cash, bank balance
* Cryptocurrency balance (if configured)
* Experience points (if enabled)
* Player statistics (driving, strength, etc.)

### Business Panel

If the player owns a business, they can view:

* Business name and type
* Employee list
* Business statistics

### Events Display

Server events are shown in a grid format with:

* Event title
* Description
* Date and time (formatted)
* Custom image

### Bills Section

Players can view and manage their pending bills.

## Admin Guide

### Accessing the Admin Panel

{% stepper %}
{% step %}
Ensure your identifier is in `Config.admin.identifiers`.
{% endstep %}

{% step %}
Press the configured key (default: END).
{% endstep %}

{% step %}
The admin panel will open.
{% endstep %}
{% endstepper %}

### Managing Events

#### Create Event

{% stepper %}
{% step %}
Click "Create Event" button.
{% endstep %}

{% step %}
Fill in the form:

* Title (required)
* Description
* Date and time
* Image URL
  {% endstep %}

{% step %}
Click "Save".
{% endstep %}
{% endstepper %}

#### Edit Event

{% stepper %}
{% step %}
Find the event in the list.
{% endstep %}

{% step %}
Click the edit icon.
{% endstep %}

{% step %}
Modify fields.
{% endstep %}

{% step %}
Click "Save".
{% endstep %}
{% endstepper %}

#### Delete Event

{% stepper %}
{% step %}
Find the event in the list.
{% endstep %}

{% step %}
Click the delete icon.
{% endstep %}

{% step %}
Confirm deletion.
{% endstep %}
{% endstepper %}

Events sync in real-time to all connected players

### Closing Admin Panel

* Press ESC
* Click the X button

## Exports & Events

### Client Events

Open Menu:

```lua
TriggerEvent('rarx_pausemenu:open')
```

Close Menu:

```lua
TriggerEvent('rarx_pausemenu:close')
```

### Server Events

Update Events (broadcast to all):

```lua
TriggerClientEvent('rarx_pausemenu:client:eventsUpdated', -1, eventsTable)
```

## Translations

The resource supports multiple languages. Translation files are located in `translates/`.

Available Languages:

* `es.lua` - Spanish
* `en.lua` - English

Adding a New Language

1. Copy `en.lua` to `your_language.lua`
2. Translate all strings
3. The resource auto-detects based on client locale

Translation Structure:

```lua
Translate = {
    shortcuts = {
        settings = "Settings",
        map = "Map",
        help = "Help",
        exit = "Exit",
    },
    leftmenu = {
        cash = "Cash",
        bank = "Bank",
        -- ...
    },
    general = {
        close = "Close",
        save = "Save",
        -- ...
    },
    admin = {
        title = "Admin Panel",
        events = "Events",
        -- ...
    }
}
```

## Troubleshooting

<details>

<summary>Menu doesn't open</summary>

1. Check that dependencies are started before this resource
2. Verify no script errors in F8 console
3. Check keybind isn't conflicting with another resource

</details>

<details>

<summary>Events not saving</summary>

1. Verify database connection
2. Check that `sql/events.sql` was imported
3. Look for MySQL errors in server console

</details>

<details>

<summary>Admin panel not opening</summary>

1. Verify your identifier is correctly formatted in config
2. Check server console for admin validation messages
3. Ensure `Config.admin.enable = true`

</details>

<details>

<summary>Custom buttons not showing</summary>

1. Verify the `jobs` array is correct (empty for all jobs)
2. Check image URLs are accessible
3. Ensure `action` type is valid

</details>

<details>

<summary>Colors not applying</summary>

1. Ensure HEX codes don't include the # symbol
2. Valid format: `'ff6b9d'` not `'#ff6b9d'`

</details>

<details>

<summary>Sounds not playing</summary>

1. Check that URLs are direct links to MP3 files
2. Verify `volume` is greater than 0
3. Some browsers block autoplay - this is normal

</details>

## Support

For technical support or feature requests, contact with ticket.