Customization

Comprehensive Guide: How to Modify the Scoreboard Script

This guide covers everything you need to know about modifying your FiveM scoreboard script, including UI changes, job listings, localization, animations, and integration with other scripts.


1️⃣ Changing the Key to Open the Scoreboard

🔹 File to Edit: client.lua

🔹 What It Does: Changes the keybinding for opening the scoreboard.

Steps to Change:

  1. Open client.lua in a text editor.

  2. Find the keyboard event handler (usually near the top).

  3. Look for something like:

    RegisterCommand('openscoreboard', function()
        TriggerEvent('scoreboard:toggle')
    end, false)
    
    RegisterKeyMapping('openscoreboard', 'Open Scoreboard', 'keyboard', 'F9')
  4. Change 'F9' to your preferred key (e.g., 'F10'):

    RegisterKeyMapping('openscoreboard', 'Open Scoreboard', 'keyboard', 'F10')
  5. Save and restart the server.


2️⃣ Changing Job Listings (Police, EMS, Mechanics, etc.)

🔹 File to Edit: server.lua

🔹 What It Does: Defines which jobs appear on the scoreboard.

Steps to Change:

  1. Open server.lua.

  2. Find the job configuration section (look for jobCounts).

  3. You will see something like this:

    local jobCounts = {
        police = 0,
        ambulance = 0,
        mechanic = 0
    }
  4. Add or remove jobs as needed:

    local jobCounts = {
        police = 0,
        ambulance = 0,
        mechanic = 0,
        sheriff = 0,  -- Added a new job
        taxi = 0       -- Added a new job
    }
  5. Save the file and restart your server.


3️⃣ Changing How Often the Scoreboard Refreshes

🔹 File to Edit: client.lua

🔹 What It Does: Adjusts how often player/job data updates.

Steps to Change:

  1. Open client.lua.

  2. Look for the refresh function:

    Citizen.CreateThread(function()
        while true do
            Citizen.Wait(5000) -- 5 seconds
            TriggerServerEvent('scoreboard:requestPlayerList')
        end
    end)
  3. Change the 5000 value to another number:

    • Lower for faster updates (e.g., 2000 for 2 seconds).

    • Higher to reduce resource usage (e.g., 10000 for 10 seconds).


4️⃣ Translating the Scoreboard (Localization)

🔹 File to Edit: index.html & script.js

🔹 What It Does: Changes text labels to different languages.

Steps to Change:

  1. Open index.html (for static text).

    • Find labels like:

      <th>Players</th>
    • Change Players to your language (e.g., Czech: Hráči).

  2. Open script.js (for dynamic text).

    • Look for:

      document.getElementById("playerCount").innerText = "Total Players: " + totalPlayers;
    • Change "Total Players:" to your language:

      document.getElementById("playerCount").innerText = "Celkový počet hráčů: " + totalPlayers;

5️⃣ Changing UI Colors and Design

🔹 File to Edit: style.css

🔹 What It Does: Modifies the scoreboard appearance.

Steps to Change:

  1. Open style.css.

  2. Locate background colors (example):

    .scoreboard {
        background-color: rgba(0, 0, 0, 0.8); /* Black */
    }
    • Change the rgba(0, 0, 0, 0.8) to another color (e.g., blue: rgba(0, 0, 255, 0.8)).

  3. Find font color settings:

    .player-name {
        color: white;
    }
    • Change white to another color (e.g., yellow or red).

  4. Save changes and restart your server.


6️⃣ Adding a New Column to the Scoreboard

🔹 Files to Edit: index.html, script.js, server.lua

🔹 What It Does: Adds a new column (e.g., "Ping" or "Playtime").

Steps to Add a Column:

  1. Edit index.html

    • Find the <thead> section and add a new column:

      <th>Ping</th>
  2. Edit script.js

    • Locate where player data is updated, and add:

      let pingColumn = "<td>" + player.ping + "</td>";
      row.innerHTML += pingColumn;
  3. Edit server.lua

    • Ensure the server sends ping data:

      local ping = GetPlayerPing(playerId)
      table.insert(players, { id = playerId, name = playerName, ping = ping })
  4. Save all files and restart the server.


7️⃣ Making the Scoreboard Only Visible to Certain Jobs

🔹 File to Edit: client.lua

🔹 What It Does: Limits scoreboard access to specific jobs.

Steps to Restrict Access:

  1. Open client.lua.

  2. Find the event that toggles the scoreboard:

    RegisterCommand('openscoreboard', function()
        TriggerEvent('scoreboard:toggle')
    end, false)
  3. Modify it to check for job restrictions:

    RegisterCommand('openscoreboard', function()
        ESX.TriggerServerCallback('esx:getPlayerData', function(data)
            if data.job.name == 'police' or data.job.name == 'ems' then
                TriggerEvent('scoreboard:toggle')
            else
                TriggerEvent('esx:showNotification', 'You do not have access to the scoreboard.')
            end
        end)
    end, false)

8️⃣ Changing the Animation When Opening the Scoreboard

🔹 File to Edit: client.lua

🔹 What It Does: Adds an animation when opening the scoreboard.

Steps to Add Animation:

  1. Open client.lua.

  2. Find the function that opens the scoreboard.

  3. Before opening the scoreboard, add:

    local playerPed = PlayerPedId()
    RequestAnimDict("amb@code_human_in_bus_passenger_idles@female@tablet@base")
    while not HasAnimDictLoaded("amb@code_human_in_bus_passenger_idles@female@tablet@base") do
        Citizen.Wait(100)
    end
    TaskPlayAnim(playerPed, "amb@code_human_in_bus_passenger_idles@female@tablet@base", "base", 1.0, -1.0, -1, 49, 0, false, false, false)

Final Notes

  • Always back up your files before making changes.

  • Use the FiveM console (F8) to debug changes.

  • Restart the server after modifications to apply changes.

  • If something breaks, check the server.log for errors.

💡 Would you like a specific modification or feature added? Let me know! 🚀 https://discord.gg/Fsha5ccYVa

Last updated