# X\_HUD\_HelpNotify

### 🌟 Overview

`X_HUD_HelpNotification` provides a modern, clean UI for displaying help notifications with a glass effect. It’s designed to be context-aware, meaning notifications will automatically disappear when the context is lost. This makes it ideal for proximity-based interactions, roleplay scenarios, and guiding players through specific actions.

***

### ✨ Features

* **Modern UI**: Clean design with glass effect, animations, and customizable styling.
* **Context-Aware**: Notifications disappear when context is lost, ensuring they only appear when relevant.
* **Position Flexibility**: 9 position presets for flexible placement on the screen.
* **Developer-Friendly**: Simple export and event system for easy integration.
* **Performance Optimized**: Minimal resource usage ensures smooth performance.
* **Test Point**: Built-in test point for quick setup verification.

***

### 🛠️ Installation

1. **Download the Script**:
   * Download the script from the [Tebex Store](https://kimi.ai/chat/d00d4m46toidmmfar160) or [GitHub](https://kimi.ai/chat/d00d4m46toidmmfar160).
2. **Extract the Folder**:
   * Extract the downloaded folder to your FiveM `resources` directory.
3. **Update `server.cfg`**:
   * Add `ensure X_HUD_HelpNotification` to your `server.cfg` file.
4. **Restart Your Server**:
   * Restart your server to load the new resource.

***

### 📖 Usage

#### Basic Usage

The notification system requires continuous triggering to remain visible. This makes it perfect for proximity-based notifications or hints that should only appear in specific contexts.**Important**: This script MUST be triggered in a loop with a wait time of `0` to display properly. It’s designed to be refreshed every frame.

#### Example Code

```lua
-- Example of using the notification in a loop
Citizen.CreateThread(function()
    while true do
        local playerCoords = GetEntityCoords(PlayerPedId())
        local distance = #(playerCoords - vector3(-269.4, -955.3, 30.2))
        
        if distance < 3.5 then
            exports['X_HUD_HelpNotification']:ShowHelpNotification('E', 'Press to interact')
        end
        
        Citizen.Wait(0)
    end
end)
```

#### Exports

```lua
-- Show a help notification with a key and text
exports['X_HUD_HelpNotification']:ShowHelpNotification(key, text)

-- Example:
exports['X_HUD_HelpNotification']:ShowHelpNotification('E', 'Press to interact')
```

#### Events

```lua
-- Trigger the notification event with a key and text
TriggerEvent('helpnotify', key, text)

-- Example:
TriggerEvent('helpnotify', 'E', 'Press to interact')

-- Alternative event name
TriggerEvent('X_HUD_HelpNotification:showHelpNotification', key, text)
```

***

### ⚙️ Configuration

#### Server-Side Configuration (`config.lua`)

```lua
-- Default Key
Config.DefaultKey = 'E' -- Default key to show in notifications if none specified

-- Test Point (You can toggle this to test the notification system)
Config.EnableTestPoint = true -- Set to false to disable the test point
Config.TestPoint = {
    coords = vector3(-269.4, -955.3, 30.2),
    distance = 3.5,
    helpText = "Press to interact",
    marker = {
        type = 1,
        size = vector3(3.0, 3.0, 0.5),
        color = {r = 0, g = 255, b = 0, a = 25},
        bobUpAndDown = false,
        faceCamera = false,
        rotate = false
    }
}
```

#### UI Configuration (`html/config.js`)

```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)

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

***

### 🎨 UI Customization

#### Notification Position

You can customize the position of the notification using the `DefaultPosition` setting in `html/config.js`. Available options include:

* `top-left`
* `top-middle`
* `top-right`
* `middle-left`
* `center`
* `middle-right`
* `bottom-left`
* `bottom-middle`
* `bottom-right`

#### Colors and Effects

Adjust the appearance of the notification by modifying the following settings in `html/config.js`:

* `BackgroundColor`: Background color with opacity (RGBA format)
* `TextColor`: Text color (RGBA format)
* `ButtonColor`: Button color with transparency (RGBA format)
* `GlowEffect`: Enable or disable the glow effect
* `GlowColor`: Color of the glow effect (RGBA format)

#### Glass Effect

The glass effect can be customized using:

* `GlassEffect`: Enable or disable the glass effect
* `GlassBlur`: Strength of the blur effect
* `GlassOpacity`: Opacity of the glass effect

***

### 🔄 Troubleshooting

#### Common Issues

* **Notification Not Appearing**:
  * Ensure the script is properly loaded and enabled in `server.cfg`.
  * Check for typos in the export or event names.
  * Verify that the script is being triggered in a loop with `Citizen.Wait(0)`.
* **Styling Issues**:
  * Ensure the `html/config.js` file is correctly configured.
  * Check for browser console errors in the FiveM debug menu.
* **Test Point Not Working**:
  * Ensure `Config.EnableTestPoint` is set to `true` in `config.lua`.
  * Verify that the test point coordinates are correct.

***

### 📥 Download & Support

* **Tebex Store**: [Download Link](https://kimi.ai/chat/d00d4m46toidmmfar160)
* **Discord Support**: [Join Discord](https://kimi.ai/chat/d00d4m46toidmmfar160)