📗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

Download the script from the CFX Portal
Place the folder guide in your resources directory
Add to server.cfg:

ensure guide

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

Open Guide: Use the configured command (default: not specified, check with server admin)
Navigate Interface: Use tabs to access different sections
View Information: Check your stats, money, and character details
Access Guides: Read server-specific guides and tutorials
Use Keyboard: Learn game controls with interactive keyboard
Set GPS Points: Click on map locations to set waypoints
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

PreviousSKYDIVING NextADVENT CALENDAR

Last updated 1 month ago