# CR-Loading Screen Configuration

The **CR Loading Screen** configuration customizes the loading screen for your FiveM server, creating an engaging and branded experience for players. This guide details the `config.js` file, located in the root directory, and explains each setting to help you tailor the UI, media, and information cards effectively.

***

### Basic Configuration

Core settings for the loading screen’s appearance and behavior.

| **Setting**                      | **Type**       | **Description**                                                         |
| -------------------------------- | -------------- | ----------------------------------------------------------------------- |
| `gameTitle`                      | String         | The game or server title displayed in the UI (e.g., "Code Render").     |
| `video.format`                   | String         | Video format for the background (e.g., `webm`, `mp4`).                  |
| `audio.defaultVolume`            | Number (0–100) | Initial audio volume level.                                             |
| `audio.defaultMuted`             | Boolean        | If `true`, audio starts muted.                                          |
| `image`                          | String         | Path to the logo or branding image (e.g., `web/circle-coderender.png`). |
| `ui.primaryColor`                | String (Hex)   | Primary UI color (e.g., `#7EB2FF`).                                     |
| `ui.secondaryColor`              | String (Hex)   | Secondary UI color (e.g., `#B4A5FF`).                                   |
| `ui.tertiaryColor`               | String (Hex)   | Tertiary UI color (e.g., `#6E8EFF`).                                    |
| `ui.quaternaryColor`             | String (Hex)   | Fourth UI color (e.g., `#9B8EFF`).                                      |
| `ui.showControls`                | Boolean        | If `true`, displays video playback controls.                            |
| `loading.showProgressBar`        | Boolean        | If `true`, shows the loading progress bar.                              |
| `loading.showInfoCardsByDefault` | Boolean        | If `true`, displays info cards by default.                              |

> **Tip**: Use vibrant, complementary colors for `ui` settings to enhance visual appeal while maintaining readability.

***

### Card Configuration

The `cardInfo` array defines customizable cards to display server information, rules, or links. Each card can be one of three types: **Basic**, **List**, or **Button**.

#### Card Structure

```javascript
cardInfo: [
  {
    icon: "String", // Path to SVG icon (e.g., "web/icons/namaste.svg")
    title: "String", // Card title
    description: "String", // Description for basic cards
    listItems: ["String[]"], // Array of items for list-style cards
    footer: "String", // Optional footer text
    Buttons: [
      {
        label: "String", // Button text
        href: "String", // URL (e.g., "https://discord.com/...")
        icon: "String" // Path to button icon
      }
    ]
  }
]
```

#### Card Types

1. **Basic Card** (Single Description)

   ```javascript
   {
     icon: "web/icons/namaste.svg",
     title: "Welcome",
     description: "Get ready for an immersive RP experience. Please be respectful and follow the rules!"
   }
   ```

   Displays a simple message with an icon and title.
2. **List Card** (Bullet Points)

   ```javascript
   {
     icon: "web/icons/rules.svg",
     title: "Server Rules",
     listItems: [
       "• No RDM / VDM",
       "• Respect all players & staff",
       "• No cheating or exploiting",
       "• Use common sense"
     ],
     footer: "Type /rules in-game for more."
   }
   ```

   Shows a bulleted list, ideal for rules or jobs.
3. **Button Card** (Links)

   ```javascript
   {
     icon: "web/icons/social.svg",
     title: "Join the Community",
     Buttons: [
       {
         label: "Join our Discord",
         href: "https://discord.com/...",
         icon: "web/icons/discord.svg"
       },
       {
         label: "Follow on Twitter",
         href: "https://x.com/...",
         icon: "web/icons/twitter.svg"
       }
     ]
   }
   ```

   Provides clickable buttons for external links.

> **Note**: Store SVG icons in the `web/icons/` directory and reference them with relative paths.

***

### Complete Example Configuration

A full `config.js` example showcasing all options:

```javascript
config = {
  gameTitle: "Code Render",
  video: {
    format: "webm"
  },
  audio: {
    defaultVolume: 30,
    defaultMuted: true
  },
  image: "web/circle-coderender.png",
  ui: {
    primaryColor: "#7EB2FF",
    secondaryColor: "#B4A5FF",
    tertiaryColor: "#6E8EFF",
    quaternaryColor: "#9B8EFF",
    showControls: true
  },
  loading: {
    showProgressBar: true,
    showInfoCardsByDefault: false
  },
  cardInfo: [
    {
      icon: "web/icons/namaste.svg",
      title: "Welcome",
      description: "Get ready for an immersive RP experience. Please be respectful and follow the rules!"
    },
    {
      icon: "web/icons/rules.svg",
      title: "Server Rules",
      listItems: [
        "• No RDM / VDM",
        "• Respect all players & staff",
        "• No cheating or exploiting",
        "• Use common sense"
      ],
      footer: "Type /rules in-game for more."
    },
    {
      icon: "web/icons/badge.svg",
      title: "Available Jobs",
      listItems: [
        "👮‍♂️ Police Department",
        "🚑 Emergency Medical Services",
        "🚕 Taxi Service",
        "🔧 Mechanic Workshop",
        "🏦 Bank Employee",
        "🍽️ Restaurant Staff",
        "🏪 Shop Owner",
        "🚛 Delivery Driver"
      ],
      footer: "Apply for whitelisted jobs on our Discord!"
    },
    {
      icon: "web/icons/social.svg",
      title: "Join the Community",
      Buttons: [
        {
          label: "Join our Discord",
          href: "https://discord.com/...",
          icon: "web/icons/discord.svg"
        },
        {
          label: "Follow on Twitter",
          href: "https://x.com/...",
          icon: "web/icons/twitter.svg"
        }
      ]
    },
    {
      icon: "web/icons/info.svg",
      title: "Tips for New Players",
      listItems: [
        "• Use /help to learn commands",
        "• Press 'M' for menu",
        "• Need help? Ask staff or open a ticket on Discord"
      ]
    }
  ]
};
```

***

### Configuration Tips

* **Icons**: Use high-quality SVG icons for crisp visuals. Place them in web/icons/ and test paths before deployment.
* **Colors**: Choose a cohesive color palette for ui settings. Use tools like Coolors to generate hex codes.
* **Content**: Keep card descriptions and list items concise (under 100 characters each) for better readability.
* **Buttons**: Always include https\:// in href URLs to ensure links work correctly.
* **Video Formats**: Prefer webm for faster loading and broader browser compatibility.
* **Emojis**: Add emojis to listItems (e.g., 👮‍♂️) for visual flair, but use sparingly to avoid clutter.

> **Warning**: Test video and audio settings on multiple devices to ensure compatibility and performance.

***

### Notes

* **Branding**: Use gameTitle and image to reinforce your server’s identity.
* **User Experience**: Set audio.defaultMuted to true to avoid startling players with unexpected sound.
* **Performance**: Optimize video file sizes (under 10MB) to reduce loading times.
* **Testing**: Preview the loading screen in a staging environment to catch UI issues before going live.
* **Updates**: Regularly update cardInfo with new rules, jobs, or links to keep players informed.

> **Support**: For issues or further guidance, contact at discord.


---

# 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://coderender.gitbook.io/coderender/scripts/cr-loading-screen-configuration.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.