📗GUIDEBOOK

📋 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

1. 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

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

// 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

// 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

// 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

// 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

{
    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

{
    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