# LOADING SCREEN V2

### 1) Overview

Risk Loading Screen is a modern, customizable loading screen for FiveM servers featuring:

* 🎵 Built-in music player with playlist
* 👥 Team member showcase (via Discord)
* 🖼️ Photo gallery (from Discord channel)
* 📊 Live player statistics (name, bank balance, job)
* 🎨 Fully customizable colors and branding
* 📜 Built-in rules overlay (F1 key)
* ⏰ Real-time clock with customizable format
* 🔗 Social media links
* 🎬 Transparent mode with video background support
* 🌐 Multi-language ready

***

### 2) File Structure

You have access to these configuration files:

```
risk-loadscreen/
├── client.lua                    ← Auto-close & showcase command
├── editable/
│   ├── config.js                ← Main configuration (branding, music, links, rules)
│   ├── config.css               ← Color scheme customization
│   └── server.lua               ← Discord bot token, team members, gallery
└── html/
    └── assets/
        ├── music/               ← Add your music files here
        │   ├── song1.mp3
        │   ├── cover1.png
        │   └── ...
        ├── BGBehind.png         ← Background image (transparent mode)
        └── video.mp4            ← Background video (optional)
```

***

### 3) Discord Integration Setup

#### Step 1: Create Discord Bot

1. Go to [Discord Developer Portal](https://discord.com/developers/applications)
2. Click **"New Application"**
3. Name your application (e.g., "My Server Bot")
4. Go to **"Bot"** tab → Click **"Add Bot"**
5. Under **"Token"** section → Click **"Reset Token"** → **"Copy"**
6. Save this token securely (you'll need it in Step 2)

#### Step 2: Enable Required Intents

Still in the Bot tab:

1. Scroll down to **"Privileged Gateway Intents"**
2. Enable:
   * ✅ **Server Members Intent**
   * ✅ **Message Content Intent**
3. Click **"Save Changes"**

#### Step 3: Invite Bot to Your Server

1. Go to **"OAuth2"** → **"URL Generator"**
2. Select scopes:
   * ✅ **bot**
3. Select bot permissions:
   * ✅ **Read Messages/View Channels**
   * ✅ **Read Message History**
4. Copy the generated URL
5. Open URL in browser → Select your Discord server → **Authorize**

#### Step 4: Configure in server.lua

Open `editable/server.lua`:

```lua
local DISCORD_TOKEN = 'YOUR_BOT_TOKEN_HERE'
```

**Replace `YOUR_BOT_TOKEN_HERE` with the token from Step 1.**

> **⚠️ IMPORTANT:** Never share your bot token publicly! Keep it secret.

***

### 4) Gallery Configuration

The gallery displays the **last 8 images** posted in a Discord channel.

#### Setup Instructions:

**1. Enable Developer Mode in Discord:**

* Discord Settings → Advanced → Enable **Developer Mode**

**2. Get Channel ID:**

* Right-click on the channel → **Copy Channel ID**

**3. Configure in server.lua:**

```lua
local GALLERY_CHANNEL = '1234567890123456789'
```

**Examples:**

**Screenshots channel:**

```lua
local GALLERY_CHANNEL = '1234567890123456789'
```

**Community photos channel:**

```lua
local GALLERY_CHANNEL = '9876543210987654321'
```

**Disable gallery (leave empty):**

```lua
local GALLERY_CHANNEL = ''
```

> **📌 NOTE:** Make sure your bot has access to read the channel! If the gallery shows no images, check bot permissions.

***

### 5) Team Members Configuration

Display your staff team with Discord avatars and roles.

#### Setup Instructions:

**1. Get Discord User IDs:**

* Right-click on user in Discord → **Copy User ID**

**2. Configure in server.lua:**

```lua
local TEAM_MEMBERS = {
    {userId = '123456789012345678', role = 'OWNER',     color = 1},
    {userId = '234567890123456789', role = 'DEV',       color = 1},
    {userId = '345678901234567890', role = 'ADMIN',     color = 2},
    {userId = '456789012345678901', role = 'MODERATOR', color = 3},
}
```

**Parameters:**

* `userId` — Discord User ID (18 digits)
* `role` — Role text shown on card (uppercase recommended)
* `color` — Card color: `1` (green), `2` (blue), or `3` (yellow)

**Color Examples:**

**Color 1 (Green) — Owners/Devs:**

```lua
{userId = '123456789012345678', role = 'OWNER', color = 1},
{userId = '234567890123456789', role = 'DEV',   color = 1},
```

**Color 2 (Blue) — Admins/Managers:**

```lua
{userId = '345678901234567890', role = 'ADMIN',   color = 2},
{userId = '456789012345678901', role = 'MANAGER', color = 2},
```

**Color 3 (Yellow) — Support/Moderators:**

```lua
{userId = '567890123456789012', role = 'SUPPORT',   color = 3},
{userId = '678901234567890123', role = 'MODERATOR', color = 3},
```

**Disable team page:**

```lua
local TEAM_MEMBERS = {}
```

> **⚠️ NOTE:** If a user's Discord avatar doesn't load, verify:
>
> 1. User ID is correct (18 digits)
> 2. Bot token is valid
> 3. User hasn't blocked the bot

***

### 6) Color Customization — config.css

Open `editable/config.css` to change the color scheme:

```css
:root {
    --main-color-1: #FDFE02;              /* Primary accent color */
    --main-color-2: #979801;              /* Secondary accent */
    --main-color-3: #555509;              /* Tertiary accent */
    --main-color-glow: rgba(253, 254, 2, 0.49);  /* Glow effects */
    --main-color-soft: rgba(253, 254, 2, 0.26);  /* Soft glow */
    --main-color-border: #FEFF83;         /* Border highlights */
    --main-color-text: #7E7E01;           /* Button text */
    --main-color-hover-bg: #6E6E33;       /* Button hover background */
    --main-color-hover-bg-fade: rgba(46, 46, 29, 0); /* Hover fade */
    
    --card-color-1: #1ffe02;              /* Team card color 1 (green) */
    --card-color-2: #2f20fe;              /* Team card color 2 (blue) */
    --card-color-3: #effe20;              /* Team card color 3 (yellow) */
}
```

#### Popular Color Schemes:

**Yellow/Gold (Default):**

```css
--main-color-1: #FDFE02;
--main-color-2: #979801;
--main-color-3: #555509;
```

**Blue/Cyan:**

```css
--main-color-1: #00D4FF;
--main-color-2: #0077AA;
--main-color-3: #003355;
```

**Purple/Pink:**

```css
--main-color-1: #FF00FF;
--main-color-2: #AA00AA;
--main-color-3: #550055;
```

**Red/Orange:**

```css
--main-color-1: #FF4500;
--main-color-2: #CC3300;
--main-color-3: #661100;
```

**Green/Lime:**

```css
--main-color-1: #00FF00;
--main-color-2: #00AA00;
--main-color-3: #005500;
```

> **💡 TIP:** Use [ColorPicker](https://htmlcolorcodes.com/) to find hex codes for custom colors.

***

### 7) Main Configuration — config.js

Open `editable/config.js` for all branding and functionality settings.

#### General Settings

```javascript
window.RiskConfig = {
    // ─── GENERAL ──────────────────────────────────────────────────────────────
    transparentMode: false,         // true = transparent background, false = default
    transparentOverlay: 0.7,        // Darkness overlay (0.0 = none, 1.0 = full black)
    transparentBgMode: 'image',     // 'image' = BGBehind.png, 'video' = video.mp4
    transparentBgVideo: 'video.mp4',// Video filename in html/assets/ folder
```

**Transparent Mode Examples:**

**Standard mode (image background):**

```javascript
transparentMode: false
```

**Transparent with dark overlay:**

```javascript
transparentMode: true,
transparentOverlay: 0.7,      // 70% dark
transparentBgMode: 'image'    // Uses BGBehind.png
```

**Transparent with video background:**

```javascript
transparentMode: true,
transparentOverlay: 0.5,
transparentBgMode: 'video',
transparentBgVideo: 'background.mp4'  // Place in html/assets/
```

**Fully transparent (no overlay):**

```javascript
transparentMode: true,
transparentOverlay: 0.0,      // No darkening
transparentBgMode: 'image'
```

***

#### Tab Visibility

```javascript
tabs: {
    team:    true,   // Show Team tab
    gallery: true    // Show Gallery tab
},
```

**Hide specific tabs:**

```javascript
tabs: {
    team:    false,  // Team tab hidden
    gallery: true    // Gallery tab visible
},
```

**Hide all extra tabs:**

```javascript
tabs: {
    team:    false,
    gallery: false
},
```

***

#### Clock & Date Format

```javascript
clockFormat: 24,        // 24 = 24h format, 12 = 12h format with AM/PM
dateFormat: 'DMY',      // 'DMY' = 31.12.2025, 'MDY' = 12/31/2025, 'YMD' = 2025.12.31
```

**Examples:**

**European format:**

```javascript
clockFormat: 24,
dateFormat: 'DMY'
// Result: 31.12.2025 – 14:30:00
```

**American format:**

```javascript
clockFormat: 12,
dateFormat: 'MDY'
// Result: 12/31/2025 – 02:30:00 PM
```

**Asian format:**

```javascript
clockFormat: 24,
dateFormat: 'YMD'
// Result: 2025.12.31 – 14:30:00
```

***

#### First Join Placeholders

```javascript
firstJoin: {
    money: 0,           // Bank balance shown on first join
    job: 'Unemployed'   // Job shown on first join
},
```

**Change defaults:**

```javascript
firstJoin: {
    money: 5000,        // New players start with $5,000
    job: 'Citizen'      // Shows "Citizen" instead of "Unemployed"
},
```

***

#### Music Player Configuration

```javascript
randomStart: true,   // true = random song, false = start with first song
volume: 0.2,         // Default volume (0.0 = silent, 1.0 = max)
songs: [
    {
        src: 'assets/music/song1.mp3',       // Audio file path
        title: 'Song Title',                  // Song name
        artist: 'Artist Name',                // Artist name
        cover: 'assets/music/cover1.png'     // Album cover image
    },
    // Add more songs here...
],
```

**How to add music:**

**1. Prepare files:**

* Audio: MP3 format recommended
* Cover: PNG/JPG, 512x512px recommended

**2. Add files to folder:**

* Place audio in `html/assets/music/`
* Place covers in `html/assets/music/`

**3. Add to config:**

```javascript
songs: [
    {
        src: 'assets/music/chill-vibes.mp3',
        title: 'Chill Vibes',
        artist: 'Artist Name',
        cover: 'assets/music/chill-cover.png'
    },
    {
        src: 'assets/music/trap-beat.mp3',
        title: 'Trap Beat',
        artist: 'Producer Name',
        cover: 'assets/music/trap-cover.png'
    },
],
```

**Music player options:**

**Start with first song:**

```javascript
randomStart: false
```

**Lower volume:**

```javascript
volume: 0.1  // 10% volume
```

**Higher volume:**

```javascript
volume: 0.5  // 50% volume
```

***

#### Social Links

```javascript
links: [
    {icon: 'fa-brands fa-discord',   url: 'https://discord.gg/yourlink'},
    {icon: 'fa-brands fa-tiktok',    url: 'https://www.tiktok.com/'},
    {icon: 'fa-brands fa-youtube',   url: 'https://www.youtube.com/'},
    {icon: 'fa-brands fa-instagram', url: 'https://www.instagram.com/'},
    {icon: 'fa-solid fa-globe',      url: 'https://yourwebsite.com'}
],
```

**Popular icons:**

```javascript
'fa-brands fa-discord'      // Discord
'fa-brands fa-tiktok'       // TikTok
'fa-brands fa-youtube'      // YouTube
'fa-brands fa-instagram'    // Instagram
'fa-brands fa-twitter'      // Twitter / X
'fa-brands fa-twitch'       // Twitch
'fa-brands fa-reddit'       // Reddit
'fa-solid fa-globe'         // Website
'fa-solid fa-store'         // Store/Shop
'fa-solid fa-book'          // Wiki/Docs
```

**Remove unwanted links:**

```javascript
links: [
    {icon: 'fa-brands fa-discord',   url: 'https://discord.gg/yourlink'},
    {icon: 'fa-solid fa-globe',      url: 'https://yourwebsite.com'}
    // Only 2 links
],
```

**Add more links:**

```javascript
links: [
    {icon: 'fa-brands fa-discord',   url: 'https://discord.gg/yourlink'},
    {icon: 'fa-brands fa-tiktok',    url: 'https://www.tiktok.com/'},
    {icon: 'fa-brands fa-youtube',   url: 'https://www.youtube.com/'},
    {icon: 'fa-brands fa-instagram', url: 'https://www.instagram.com/'},
    {icon: 'fa-brands fa-twitter',   url: 'https://twitter.com/'},
    {icon: 'fa-brands fa-twitch',    url: 'https://twitch.tv/'},
    {icon: 'fa-solid fa-globe',      url: 'https://yourwebsite.com'}
    // 7 links total
],
```

***

#### Rules Configuration

```javascript
rules: {
    key: 'F1',                      // Key to open rules overlay
    title: 'SERVER RULES',          // Rules overlay title
    subtitle: 'Please read all rules carefully before playing.',
    closeLabel: 'CLOSE',            // Close button text
    entries: [
        {
            number: '01',
            title: 'Respectful Conduct',
            text: 'Treat all players with respect. Insults, discrimination and hate speech are strictly forbidden.'
        },
        {
            number: '02',
            title: 'No Cheating',
            text: 'The use of cheats, hacks or exploits will result in an immediate permanent ban.'
        },
        // Add more rules here...
    ]
},
```

**Change hotkey:**

```javascript
key: 'F2',    // Open rules with F2 instead of F1
```

**Customize rules:**

```javascript
entries: [
    {
        number: '01',
        title: 'Be Respectful',
        text: 'No toxic behavior, racism, or hate speech of any kind.'
    },
    {
        number: '02',
        title: 'No Hacking',
        text: 'Cheats, exploits, and mods are strictly prohibited.'
    },
    {
        number: '03',
        title: 'Roleplay Quality',
        text: 'Stay in character. High-quality RP is expected at all times.'
    },
    {
        number: '04',
        title: 'No RDM/VDM',
        text: 'Random killing or vehicle ramming is not allowed.'
    },
],
```

**Translate to another language:**

```javascript
rules: {
    key: 'F1',
    title: 'SERVERREGELN',
    subtitle: 'Bitte lies alle Regeln sorgfältig durch.',
    closeLabel: 'SCHLIESSEN',
    entries: [
        {
            number: '01',
            title: 'Respektvoller Umgang',
            text: 'Behandle alle Spieler mit Respekt. Beleidigungen und Hass sind verboten.'
        },
        // ...
    ]
},
```

***

#### Labels & Branding

```javascript
serverName: 'SERVER NAME',
roleplayText: 'ROLEPLAY',
serverDescription: 'Welcome to our server! Experience a unique roleplay world...',
timeLabel: 'LOCAL TIME',
balanceTitle: 'BALANCE',
balanceDesc: 'Your current bank balance on the server...',
jobTitle: 'JOB',
jobDesc: 'Your current job on the server...',
loadingTitle: 'LOADING',
loadingDesc: 'Please wait while the server and all resources are being loaded...',
```

**Customize branding:**

```javascript
serverName: 'Los Santos RP',
roleplayText: 'SERIOUS RP',
serverDescription: 'The most realistic roleplay experience in FiveM. Join today!',
```

**Change panel descriptions:**

```javascript
balanceTitle: 'BANK ACCOUNT',
balanceDesc: 'Your savings in Maze Bank.',
jobTitle: 'OCCUPATION',
jobDesc: 'Your current employment status.',
```

**Navigation buttons:**

```javascript
navButtons: {
    main:    'HOME',        // Main page button
    team:    'STAFF',       // Team page button
    gallery: 'PHOTOS'       // Gallery page button
},
```

**Rules hint box:**

```javascript
rulesHint: {
    title: 'SERVER RULES',
    desc:  'Press F1 to read our server rules.'
},
```

***

### 8) Auto-Close & Showcase Command

Open `client.lua`:

```lua
-- Auto-close loading screen when player spawns
CreateThread(function()
    if GetConvarInt('risk_loadscreen_autoclose', 0) == 1 then
        closeLoad()
    end
end)
```

**To enable auto-close**, add to your `server.cfg`:

```
set risk_loadscreen_autoclose 1
```

**Showcase command** (preview loading screen in-game):

```lua
RiskShowcaseConfig = {
    enabled = true,        -- true = command active, false = disabled
    command = 'loadscreen' -- Command name (without /)
}
```

**Usage in-game:**

```
/loadscreen
```

**Disable showcase command:**

```lua
RiskShowcaseConfig = {
    enabled = false
}
```

**Change command name:**

```lua
RiskShowcaseConfig = {
    enabled = true,
    command = 'test'  -- Use /test instead
}
```

***

### 9) Complete Configuration Examples

#### Example 1: Minimal Setup (No Discord)

**editable/server.lua:**

```lua
local DISCORD_TOKEN = ''
local GALLERY_CHANNEL = ''
local TEAM_MEMBERS = {}
```

**editable/config.js:**

```javascript
tabs: {
    team:    false,  // No team page
    gallery: false   // No gallery page
},
songs: [
    {
        src: 'assets/music/song1.mp3',
        title: 'Chill Vibes',
        artist: 'Artist',
        cover: 'assets/music/cover1.png'
    }
],
```

***

#### Example 2: Full Setup with Team & Gallery

**editable/server.lua:**

```lua
local DISCORD_TOKEN = 'YOUR_BOT_TOKEN_HERE'
local GALLERY_CHANNEL = '1234567890123456789'
local TEAM_MEMBERS = {
    {userId = '111111111111111111', role = 'OWNER', color = 1},
    {userId = '222222222222222222', role = 'ADMIN', color = 2},
    {userId = '333333333333333333', role = 'MOD',   color = 3},
}
```

**editable/config.js:**

```javascript
tabs: {
    team:    true,
    gallery: true
},
serverName: 'Los Santos RP',
roleplayText: 'SERIOUS RP',
```

***

#### Example 3: Video Background

**editable/config.js:**

```javascript
transparentMode: true,
transparentOverlay: 0.6,
transparentBgMode: 'video',
transparentBgVideo: 'city-timelapse.mp4',
```

Place `city-timelapse.mp4` in `html/assets/` folder.

***

#### Example 4: Blue Color Scheme

**editable/config.css:**

```css
:root {
    --main-color-1: #00D4FF;
    --main-color-2: #0077AA;
    --main-color-3: #003355;
    --main-color-glow: rgba(0, 212, 255, 0.49);
    --main-color-soft: rgba(0, 212, 255, 0.26);
    --main-color-border: #83F3FF;
    --main-color-text: #014D77;
    --main-color-hover-bg: #336E8E;
    --main-color-hover-bg-fade: rgba(29, 46, 56, 0);
    
    --card-color-1: #00FF88;
    --card-color-2: #00AAFF;
    --card-color-3: #FFD700;
}
```

***

### 10) Troubleshooting

#### ❌ Gallery shows no images

**Possible causes:**

* Wrong channel ID
* Bot doesn't have access to channel
* No images posted in channel

**Solution:**

* Verify `GALLERY_CHANNEL` ID is correct
* Check bot can read channel (permissions)
* Post images in the channel

***

#### ❌ Team members show no avatars

**Possible causes:**

* Wrong user IDs
* Invalid bot token
* User blocked the bot

**Solution:**

* Copy User IDs again (right-click → Copy User ID)
* Verify bot token is correct
* Check user hasn't blocked bot

***

#### ❌ Music doesn't play

**Possible causes:**

* Wrong file paths
* Files not uploaded
* Browser blocking autoplay

**Solution:**

* Check file paths in `songs` array
* Ensure MP3 files are in `html/assets/music/`
* Click anywhere on screen to allow audio

***

#### ❌ Loading screen won't close

**Possible causes:**

* Framework not detected
* Multicharacter script not triggering events

**Solution:**

* Add to `server.cfg`: `set risk_loadscreen_autoclose 1`
* Check framework is started before loading screen
* Verify multicharacter script compatibility

***

#### ❌ Discord bot not working

**Possible causes:**

* Invalid token
* Bot not invited to server
* Missing intents

**Solution:**

* Generate new token in Discord Developer Portal
* Re-invite bot with correct permissions
* Enable Server Members Intent and Message Content Intent

***

#### ❌ Rules overlay won't open

**Possible causes:**

* Wrong key configured
* Key conflict with other scripts

**Solution:**

* Try different key in `rules.key`
* Test with F2 or F3 instead of F1

***

### 11) Best Practices

✅ **Always test showcase command** — Use `/loadscreen` to preview changes\
✅ **Optimize music files** — Use compressed MP3 (128-192 kbps) to reduce download time\
✅ **Use square images for covers** — 512x512px recommended\
✅ **Keep gallery channel active** — Post new screenshots regularly\
✅ **Update team members** — Remove staff who left\
✅ **Use high-quality background video** — 1080p 30fps, under 50MB\
✅ **Test on mobile** — Some players connect from phones\
✅ **Keep rules updated** — Review and update rules monthly\
✅ **Backup config files** — Before making major changes\
✅ **Never share bot token** — Keep it private and secure

***

### 12) Quick Start Checklist

* \[ ] Install Discord bot and get token
* \[ ] Configure `DISCORD_TOKEN` in `editable/server.lua`
* \[ ] Get Discord channel ID for gallery
* \[ ] Configure `GALLERY_CHANNEL` in `editable/server.lua`
* \[ ] Get Discord User IDs for team members
* \[ ] Configure `TEAM_MEMBERS` in `editable/server.lua`
* \[ ] Customize `serverName` and `roleplayText` in `config.js`
* \[ ] Add your music files to `html/assets/music/`
* \[ ] Update `songs` array in `config.js`
* \[ ] Configure social `links` in `config.js`
* \[ ] Customize `rules` entries in `config.js`
* \[ ] Change colors in `editable/config.css`
* \[ ] Test with `/loadscreen` command in-game
* \[ ] Restart server and verify loading screen works


---

# 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://risk-scripts.gitbook.io/risk-scripts/scripts/loading-screen-v2.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.