# GUIDEBOOK

<figure><img src="/files/EsKP6tSu0laQePKLBsRG" alt=""><figcaption></figcaption></figure>

<div data-full-width="false"><figure><img src="/files/B0Xgbfp3rbokl5hvbEc5" alt=""><figcaption></figcaption></figure> <figure><img src="/files/vIGlmmSLcXWYGBzVEbG2" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Va6cBe8SPx18k8irdLIv" alt=""><figcaption></figcaption></figure></div>

### 📋 Description

GUIDE is a comprehensive interactive guide system for FiveM servers that provides players with an intuitive interface to access essential game information, server guides, keyboard shortcuts, and important locations. The script features a modern UI with real-time player data, customizable guides, interactive keyboard map, and GPS point system.

### ✨ Features

#### 📊 Player Information Display

* **Real-time Stats**: Hunger, thirst, and session time tracking
* **Financial Overview**: Wallet, bank, and dirty money balances
* **Character Details**: Age, height, job, and player ID
* **Server Information**: Ping monitoring and server status

#### 📚 Interactive Guide System

* **Comprehensive Guides**: Inventory, phone, clothes, jobs, properties, etc.
* **Rich Content**: Support for HTML formatting, images, and structured content
* **Customizable Sections**: Fully configurable guide entries
* **User-Friendly Navigation**: Tab-based interface for easy access

#### ⌨️ Virtual Keyboard System

* **Interactive Keyboard**: Visual QWERTY/AZERTY keyboard layout
* **Key Descriptions**: Hover functionality with key explanations
* **Customizable Layout**: Support for different keyboard layouts
* **Educational Tool**: Helps new players learn game controls

#### 🗺️ GPS & Map Integration

* **Strategic Locations**: Police stations, hospitals, dealerships, etc.
* **One-Click Navigation**: Set waypoints directly from the interface
* **Custom Icons**: FontAwesome icons for different location types
* **Color Coding**: Visual distinction between location categories

#### 🎨 Modern UI/UX

* **Responsive Design**: Optimized for different screen sizes
* **Smooth Animations**: Modern CSS transitions and effects
* **Custom Branding**: Server logo and name integration
* **Dark Theme**: Professional dark interface design

### 🔧 Installation

#### Prerequisites

* ESX or QB-Core Framework
* MySQL Database (oxmysql recommended)
* Working NUI system

#### Step-by-Step Installation

1. **Download the script from the CFX Portal**
2. **Place the folder** `guide` in your `resources` directory
3. **Add to server.cfg**:

```
ensure guide
```

4. **Database Setup** (if using additional features):
   * Ensure your MySQL connection is properly configured
   * The script uses oxmysql by default

### ⚙️ Configuration

#### Main Configuration File: `shared/_main.lua`

```lua
Config = {}

-- Framework Selection
Config.Core = "ESX" -- "ESX" / "QB-Core"
Config.CoreExport = function()
    return exports['es_extended']:getSharedObject()
    -- return exports['qb-core']:GetCoreObject()
end

-- Server Configuration
Config.Quit = "Thanks for playing on Redstart RP, see you soon"
Config.PingAdress = "https://www.google.com" -- Server ping check URL

-- Currency Settings
Config.Currency = "USD" -- EUR, GBP, USD...
Config.Format = "en-US" -- fr-FR, en-GB, es-ES...

-- Money Account Types
Config.BlackMoney = "black_money" -- ESX account type
Config.BankMoney = "bank" -- ESX account type

-- Notification System
Config.Notifications = {
    customNotificationClient = function()
        if Config.Core == "ESX" then
            ESX.ShowNotification("A new gps point has been added to your map.")
        elseif Config.Core == "QB-Core" then
            QBCore.Functions.Notify("A new gps point has been added to your map.")
        end
    end
}
```

#### UI Configuration File: `ui/js/config.js`

```javascript
// Server Branding
serverName = "YOUR SERVER NAME";
logoName = "images/logo.jpg"; // Logo path (square recommended)

// Navigation Labels
home = "Home";
guide = "Guide";
keyboard = "Keyboard";
map = "Map";

// Job Categories
publicJob = "Public Service";
compagnyJob = "Company";

// External Links
discord = "Discord";
discordLink = "https://discord.gg/YOUR_DISCORD";
store = "Store";
storeLink = "https://your-store.tebex.io/";

// Player Stats Labels
age = "Age";
size = "Height";
wallet = "Wallet";
bank = "Bank";
dirtyMoney = "Black Money";
id = "ID";
gameSession = "Game Session";
ping = "Ping";
job = "Job";

// Action Buttons
shortcut = "Shortcut";
map = "Map";
keyboardSettings = "Keyboard";
settings = "Settings";
exit = "Exit Game";

// Status Bars
characterStars = "Character Stars";
hunger = "Hunger";
thirst = "Thirst";
```

#### Guide Content Configuration

```javascript
// Guide Sections
var guideTable = [
    {
        name: "Inventory",
        description: `
        <div>
            <h1>Welcome to Our Guide</h1>
            <p>Complete guide content with HTML support...</p>
            <img src="image-url" alt="Guide Image" style="width:100%;">
        </div>
        `
    },
    {
        name: "Phone",
        description: `Phone usage instructions...`
    },
    // Add more guide sections...
];
```

#### Keyboard Configuration

```javascript
// Key Descriptions
var highlightedKeys = {
    'E': 'Interact with objects',
    'F1': 'Open phone',
    'F2': 'Open inventory',
    'W': 'Move forward',
    'Z': 'Move forward (AZERTY)',
    // Add more key descriptions...
};
```

#### Map Locations Configuration

```javascript
// GPS Points
var mapTable = [
    {
        name: "POLICE",
        description: "Central command for police operations.",
        coord: { x: -557.92, y: -427.15 },
        blipcolor: "#ff9900",
        icon: "fa-location-dot"
    },
    {
        name: "EMS",
        description: "Emergency medical services.",
        coord: { x: -1870.04, y: -357.16 },
        blipcolor: "#ff0000",
        icon: "fa-plus"
    },
    // Add more locations...
];

// Job Categories
var publicWork = [
    {name: "N.S.P.D", status: "green"},
    {name: "E.M.S", status: "red"},
    // Add more public jobs...
];

var compagnyWork = [
    {name: "Bennys", status: "green"},
    {name: "LsCustom", status: "green"},
    // Add more company jobs...
];
```

### 🎮 Usage

#### For Players

1. **Open Guide**: Use the configured command (default: not specified, check with server admin)
2. **Navigate Interface**: Use tabs to access different sections
3. **View Information**: Check your stats, money, and character details
4. **Access Guides**: Read server-specific guides and tutorials
5. **Use Keyboard**: Learn game controls with interactive keyboard
6. **Set GPS Points**: Click on map locations to set waypoints
7. **Quick Actions**: Access settings, map, and other game menus

#### Interface Sections

**🏠 Home/Dashboard**

* **Player Statistics**: Real-time hunger, thirst, and session time
* **Financial Summary**: Wallet, bank, and dirty money balances
* **Character Info**: Age, height, job, and server ID
* **Quick Actions**: Direct access to settings and menus

**📖 Guide**

* **Server Information**: Rules, tutorials, and game mechanics
* **Interactive Content**: HTML-formatted guides with images
* **Category Organization**: Logical grouping of information
* **Search Functionality**: Easy navigation through topics

**⌨️ Keyboard**

* **Visual Layout**: Full keyboard representation
* **Key Descriptions**: Hover over keys for explanations
* **Layout Support**: QWERTY and AZERTY compatibility
* **Learning Tool**: Perfect for new players

**🗺️ Map**

* **Location Database**: Pre-configured important locations
* **GPS Integration**: One-click waypoint setting
* **Category Filtering**: Public services, companies, etc.
* **Custom Icons**: Visual identification of location types

### 🛠️ Commands

* **Open Guide**: Configurable command (contact server admin for details)
* **Close Guide**: ESC key or close button
* **Quick Settings**: Direct access to game settings
* **Exit Game**: Clean logout with confirmation

### 🎨 Customization

#### Visual Customization

**CSS Styling: `ui/css/style.css`**

* **Color Schemes**: Modify color variables for branding
* **Layout Adjustments**: Customize spacing and sizing
* **Animations**: Modify transition effects
* **Responsive Design**: Adapt for different screen sizes

**Logo Integration**

* **Square Format**: Recommended for best display
* **File Location**: `ui/images/logo.jpg`
* **Size Optimization**: Keep file size reasonable for performance

#### Content Customization

**Adding Guide Sections**

```javascript
{
    name: "New Section",
    description: `
    <div>
        <h2>Your Custom Content</h2>
        <p>Add your HTML content here...</p>
        <img src="your-image.jpg" alt="Custom Image">
    </div>
    `
}
```

**Adding Map Locations**

```javascript
{
    name: "CUSTOM_LOCATION",
    description: "Your location description",
    coord: { x: 123.45, y: 678.90 },
    blipcolor: "#your-color",
    icon: "fa-custom-icon"
}
```

### 🔧 Framework Support

#### ESX Compatibility

* **Player Data**: Full support for ESX player information
* **Money Systems**: Wallet, bank, and black money integration
* **Job System**: Complete job and grade information
* **Status System**: Hunger and thirst monitoring

#### QB-Core Compatibility

* **Player Metadata**: Support for QB-Core player data structure
* **Money Types**: Cash, bank, and dirty money handling
* **Job Integration**: Job and grade label support
* **Needs System**: Hunger and thirst tracking

### 📊 Features Overview

| Feature             | ESX | QB-Core | Description                  |
| ------------------- | --- | ------- | ---------------------------- |
| Player Stats        | ✅   | ✅       | Real-time player information |
| Financial Data      | ✅   | ✅       | Money balance display        |
| Job Information     | ✅   | ✅       | Job and grade details        |
| Interactive Guide   | ✅   | ✅       | Customizable content system  |
| Virtual Keyboard    | ✅   | ✅       | Key description system       |
| GPS Integration     | ✅   | ✅       | Waypoint setting             |
| Discord Integration | ✅   | ✅       | Server links                 |
| Session Tracking    | ✅   | ✅       | Play time monitoring         |

### 🔒 Security Features

* **Client-Side Validation**: Input sanitization and validation
* **Server-Side Verification**: All data requests validated server-side
* **Anti-Injection**: Protected against script injection attacks
* **Rate Limiting**: Prevents spam and abuse
* **Session Management**: Secure session handling

### 🐛 Troubleshooting

#### Common Issues

**Guide not opening:**

* Check command configuration
* Verify NUI focus permissions
* Check for JavaScript errors in console

**Player data not updating:**

* Verify framework compatibility
* Check database connections
* Ensure proper ESX/QB-Core exports

**Images not loading:**

* Verify file paths in config.js
* Check image file formats (PNG/JPG)
* Ensure proper file permissions

**GPS points not setting:**

* Verify coordinate formats
* Check blip creation permissions
* Ensure proper vector3 formatting

### 📈 Performance

* **Optimized Rendering**: Efficient NUI updates
* **Memory Management**: Automatic cleanup on close
* **Network Efficient**: Minimal server-client communication
* **Resource Friendly**: Low CPU and memory usage


---

# 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://rex-studio.gitbook.io/rex-studio-docs/fivem-low-cost/guidebook.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.