# Crowe Loading Screen

A modern, performance-oriented loading screen for **RedM** servers.

## ✨ Features

• CSS-driven progress bar & rAF optimised JavaScript – minimal frame drops on low-end PCs.\
• Dynamic background modes: image, animated GIF, video (MP4), YouTube, slideshow.\
• In-game **Music Player** with playlist, shuffle/repeat, volume & fade-in/out.\
• **Community Panel** – Discord stats, social links, announcements with clipboard-copy helper.\
• **Theme Editor** – live colour presets + custom palette, auto-persisted per-player.\
• **User Settings Panel** – per-player background choice (incl. YouTube link), performance mode (Follow/Low/High), saved automatically.\
• Tips carousel, rules carousel, key-binds display.\
• Low-end & post-load modes: blur/shadow disabled until assets are loaded.\
• Fully configurable via one `config.js` file – no code edits required.

## 📦 Installation

1. Drop the **`crowe_loadingscreen`** folder inside your server's `resources/` directory.
2. Add the resource to your `server.cfg` *before* any gameplay scripts:

```cfg
ensure crowe_loadingscreen
```

3. Restart the server and join – the loading screen will appear.

## ⚙️ Basic Configuration

Open `config.js` and tweak:

| Key                                                    | Description                                                  |
| ------------------------------------------------------ | ------------------------------------------------------------ |
| `serverName`                                           | Text shown in the header                                     |
| `backgroundType`                                       | `image`, `gif`, `video`, `youtube`, or `slideshow`           |
| `backgroundImages / backgroundGifs / backgroundVideos` | Arrays of file paths – leave empty to use defaults           |
| `enableMusic`                                          | Toggle music player                                          |
| `musicList`                                            | MP3 track objects `{ name, path, duration }`                 |
| `socialMedia`                                          | Discord & social-links settings                              |
| `colorEditor`                                          | Enable/disable, default theme, presets                       |
| `performance.lowEndMode`                               | `true` disables most visual effects for potato PCs           |
| `debug`                                                | When **false** the console is silenced for extra performance |

Changes hot-reload when you refresh the NUI (`Esc` > *"Reload"* in CEF debug), or on next connect.

## 🎨 Customising Assets

* **Images / GIFs / Video:** drop files into `html/assets/img/` and reference them in `config.js`.
* **Music:** put `.mp3` files in `html/assets/music/` – duration is optional but improves the UI.
* **Icons:** the project defers FontAwesome load; if you need more icons just use the FA class or inline an SVG.

## 🧩 Per-Player Settings

Click the cog button in the top-right to open the Settings panel:

* Background: choose Follow Server, GIF, Image, Video, YouTube, or Slideshow. If YouTube, paste a URL or ID.
* Performance: Follow Server, Low-end, or High.

Settings persist to localStorage and are applied immediately and on next load.

## 🛠️ Building / Advanced (optional)

If you plan to self-host FontAwesome or purge unused CSS/icons:

1. `npm install` inside the resource.
2. Run `npm run build` (script not included yet – suggested tooling: Vite + PurgeCSS + FA sub-setter).
3. Replace CDN links with your generated assets.

## 🤝 Credits

* **Crowe Scripts** – concept, design & configuration.
* **FontAwesome 6** – icon library (MIT).
* **El Messiri** & **Chinese Rocks** fonts – Google Fonts & Blambot.

## 📄 License

This loading screen is released under the **MIT License** – see `LICENSE` for details. Feel free to modify & distribute, but keep the credits intact.

***

Questions or feedback? Open an issue or ping us on Discord – we'd love to hear from you! 🎉


---

# 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://crowescripts.gitbook.io/documentation/about-our-scripts/redm-script-documentation/crowe-loading-screen.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.