# X\_HUD\_TextUI

### 🌟 Overview

**X\_HUD\_TextUI** is designed to enhance the visual and interactive elements of your FiveM server by providing a modern TextUI system. It supports customizable animations, glass blur effects, and sound notifications, making it perfect for roleplay servers, interactive scenarios, and any server looking to improve player engagement.

***

### ✨ Features

* **Interactive UI Notifications**: Display customizable messages with keys for player interaction.
* **Modern Glass Effect**: Utilizes WebGL for a sleek, modern look with glass blur effects.
* **Customizable Shine/Reflection Effects**: Add visual flair with adjustable shine settings.
* **Built-in Sound Support**: Play sounds when the UI opens or closes.
* **Easy-to-Use API**: Simple client and server exports for seamless integration.
* **Fully Configurable**: Customize appearance, behavior, animations, and more.

***

### 🛠️ Installation

#### Step-by-Step Guide

1. **Download the Resource**:
   * Download the **X\_HUD\_TextUI** resource from the [Tebex Store](https://fiveworldshop.tebex.io/) or [GitHub](https://kimi.ai/chat/d00d4m46toidmmfar160).
2. **Extract the Folder**:
   * Extract the downloaded folder to your FiveM server's `resources` directory.
3. **Update `server.cfg`**:
   * Add the following line to your `server.cfg` file to ensure the resource starts automatically:`ensure X_HUD_TextUI`
4. **Restart Your Server**:
   * Restart your server to apply the changes and load the new resource.

***

### 📖 Usage

#### Client-side

```lua
-- Show TextUI with a key and text
exports['X_HUD_TextUI']:Show('E', 'Press to interact')

-- Hide TextUI
exports['X_HUD_TextUI']:Hide()

-- Using events
TriggerEvent('X_HUD_TextUI:show', 'E', 'Press to interact')
TriggerEvent('X_HUD_TextUI:hide')
```

#### Server-side

```lua
-- Show TextUI to a specific player
exports['X_HUD_TextUI']:ShowForPlayer(playerId, 'E', 'Press to interact')

-- Hide TextUI for a specific player
exports['X_HUD_TextUI']:HideForPlayer(playerId)

-- Using events
TriggerClientEvent('X_HUD_TextUI:show', playerId, 'E', 'Press to interact')
TriggerClientEvent('X_HUD_TextUI:hide', playerId)
```

***

### ⚙️ Configuration

#### Customizing Appearance and Behavior

Edit the `config.js` file to customize the appearance and behavior of the TextUI:

```javascript
const Config = {
    // Notification Settings
    DefaultPosition: 'bottom-middle', // Position options: top-left, top-middle, top-right, middle-left, center, middle-right, bottom-left, bottom-middle, bottom-right
    PositionPercentages: {
        top: 20, // % from top (when using top positions)
        bottom: 7, // % from bottom (when using bottom positions)
        left: 5, // % from left (when using left positions)
        right: 5, // % from right (when using right positions)
    },
    DefaultScale: 1.0, // Scale of the notification (1.0 is default)

    // Animation Settings
    Animation: {
        enabled: true,
        type: 'slide', // Options: 'fade', 'slide', 'scale'
        direction: 'up', // Options: 'up', 'down', 'left', 'right' (only for slide animation)
        duration: 300, // Duration in milliseconds
        easing: 'ease-out' // CSS easing function
    },
    
    // Pulse Effect
    PulseEffect: {
        enabled: false,
        intensity: 1.1, // Max scale during pulse
        speed: 1000, // Duration of one pulse cycle in milliseconds
    },
    
    // Shine Effect (Reflection)
    ShineEffect: {
        enabled: true,
        duration: 1250, // Duration of one shine cycle in milliseconds
        angle: 45, // Angle of the shine in degrees
        opacity: 0.2, // Opacity of the shine effect (0.0 to 1.0)
        size: 5, // Size of the shine in % (100 = full element width)
        travel: 2500, // How far the shine travels in % (higher value = longer travel distance)
        cooldown: 5000 // Time to wait between shine effects (milliseconds)
    },
    
    // Sound Settings
    Sound: {
        enabled: true, // Play sound when UI opens
        file: 'sound1.mp3', // Options: sound1.mp3, sound2.mp3, sound3.mp3, sound4.mp3, sound5.mp3
        volume: 0.5, // Volume level (0.0 to 1.0)
        playOnClose: true, // Play sound when UI closes
        closeFile: 'sound3.mp3' // Sound file to play when closing UI
    },

    // Appearance
    BackgroundColor: {r: 0, g: 0, b: 0, a: 0.4}, // Background color with opacity (RGBA format)
    TextColor: {r: 255, g: 255, b: 255, a: 1.0}, // Text color (RGBA format)
    ButtonColor: {r: 0, g: 255, b: 0, a: 0.1}, // Bright green button color with transparency (RGBA format)
    BorderRadius: '8px', // Rounded corners
    FontFamily: 'Poppins, sans-serif', // Font family
    
    // Button Size
    ButtonSize: {
        width: 50, // Width in pixels
        height: 50, // Height in pixels
        fontSize: 26 // Font size in pixels
    },
    
    // Glass Effect
    GlassEffect: true, // Enable/disable glass effect
    GlassBlur: 4, // Blur amount in px
    GlassOpacity: 0.6, // Opacity of the glass effect
    
    // Glow Effect
    GlowEffect: true, // Enable/disable glow effect
    GlowColor: {r: 0, g: 255, b: 0, a: 0.7}, // Bright green glow color with intensity (RGBA format)
    GlowSpread: '10px', // Glow spread
}
```

***

### 🔄 Framework Integration

#### ESX Framework Integration

Add this to your client script to use **X\_HUD\_TextUI** as the default notification system:

```lua
-- In your ESX client script (e.g.: es_extended/client/functions.lua)
function ESX.TextUI(message, type)
    exports['X_HUD_TextUI']:Show(Config.DefaultKey or 'E', message)
end

function ESX.HideUI()
    exports['X_HUD_TextUI']:Hide()
end
```

Example of usage in your ESX scripts:

```lua
-- Show TextUI
ESX.TextUI('Press E to interact')

-- Hide TextUI
ESX.HideUI()
```

#### QBCore Framework Integration

Add this to your client script to use **X\_HUD\_TextUI** as the default notification system:

```lua
-- In your QBCore client script (e.g.: qb-core/client/functions.lua)
function QBCore.Functions.DrawText(text)
    exports['X_HUD_TextUI']:Show(Config.DefaultKey or 'E', text)
end

function QBCore.Functions.HideText()
    exports['X_HUD_TextUI']:Hide()
end
```

Example of usage in your QBCore scripts:

```lua
-- Show TextUI
QBCore.Functions.DrawText('Press E to interact')

-- Hide TextUI
QBCore.Functions.HideText()
```

***

### 📝 Examples

#### Basic Usage

```lua
-- Show TextUI
exports['X_HUD_TextUI']:Show('E', 'Press to interact')

-- Hide TextUI
exports['X_HUD_TextUI']:Hide()
```

#### Event Usage

```lua
-- Show TextUI using an event
TriggerEvent('X_HUD_TextUI:show', 'E', 'Press to interact')

-- Hide TextUI using an event
TriggerEvent('X_HUD_TextUI:hide')
```

#### Server-side Usage

```lua
-- Show TextUI to a specific player
exports['X_HUD_TextUI']:ShowForPlayer(playerId, 'E', 'Press to interact')

-- Hide TextUI for a specific player
exports['X_HUD_TextUI']:HideForPlayer(playerId)
```
