Hud is not working properly

FiveM Resource Development Discussion
1

HELLO. I AHEV RECENTLY STARTED ON CREATING A HUD AND I MADE THE VISUAL PART I MEAN TO DISPLAY HEALTH, ARMOR, MONEY, SPEED ETC. BUT THE PROBLEM IS THAT THE VALUES ARE NOT UPDATING FOR EXAMPLE HELATH, MONEY IS STAYING TO 0, THE SPEED IS STAYING TO 0 ETC. WHOEVER CAN HELPS ME, I WILL PROVIDE HIM A SCREENSHOT OF WHAT IS HAPPENING AND I WILL GIVE HIM WHATEVER CODE IS NEEDED TO GET THE HUD FIXED. :slightly_smiling_face:

1 Like
2

First of all you please don´t write in CAPS.
Your HUD do not update the values dynamically, send us the code or more information for a fix.

3

Ok. Im sorry for writing all in caps. Lwt me five you the html css java script and lua code

5

HTML Code: 

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inclusive+Sans&display=swap" id="font">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="app.js"></script>

<title>Gamer HUD</title>
Jobname
0
0
0
0
0 KM/H
N

Css Code: /* Position the job name above the HUD elements /
job {
position: absolute;
top: 10px; / Adjust the top spacing as needed /
right: 10px; / Adjust the right spacing as needed /
font-size: 20px; / Adjust the font size as needed */
}

/* Position the health, armor, stamina, hunger, and thirst icons /
status {
position: absolute;
top: 40px; / Adjust the top spacing as needed /
right: 10px; / Adjust the right spacing as needed */
display: flex;
flex-direction: column;
align-items: flex-end;
}

/* Style the individual status icons /
.icon {
display: flex;
align-items: center;
margin-bottom: 5px; / Adjust the spacing between icons as needed */
}

.icon i {
margin-right: 5px; /* Adjust the spacing between icon and text as needed */
}

/* Position and style the money elements /
money {
position: absolute;
top: 40px; / Adjust the top spacing as needed /
left: 10px; / Adjust the left spacing as needed */
display: flex;
flex-direction: column;
}

.icon.text {
display: flex;
align-items: center;
margin-bottom: 5px; /* Adjust the spacing between icons as needed */
}

.icon.text i {
margin-right: 5px; /* Adjust the spacing between icon and text as needed */
}

/* Position the speedometer at the bottom /
.info.vehicle.with.speedometer {
position: absolute;
bottom: 10px; / Adjust the bottom spacing as needed /
left: 10px; / Adjust the left spacing as needed */
}

/* Style the speedometer elements */
.speedometer {
display: flex;
flex-direction: column;
align-items: center;
}

#vehicle-speed {
font-size: 20px; /* Adjust the font size as needed */
}

Javascript Code: function updateHUD(playerData) {
const jobElement = document.getElementById(“job”);
jobElement.textContent = playerData.job;

const statusElements = {
    health: document.getElementById("health"),
    armor: document.getElementById("armor"),
    stamina: document.getElementById("stamina"),
    hunger: document.getElementById("hunger"),
    thirst: document.getElementById("thirst"),
};

for (const status in statusElements) {
    if (statusElements.hasOwnProperty(status)) {
        const element = statusElements[status];
        const dataValue = playerData[status];
        element.style.display = dataValue !== undefined ? "block" : "none";
        element.querySelector("span").textContent = dataValue !== undefined ? dataValue : "";
    }
}

const moneyElements = {
    wallet: document.getElementById("wallet"),
    blackmoney: document.getElementById("blackmoney"),
    bank: document.getElementById("bank"),
    society: document.getElementById("society"),
};

for (const money in moneyElements) {
    if (moneyElements.hasOwnProperty(money)) {
        const element = moneyElements[money];
        const dataValue = playerData[money];
        element.style.display = dataValue !== undefined ? "block" : "none";
        element.querySelector("span").textContent = dataValue !== undefined ? dataValue : "";
    }
}

const vehicleSpeedElement = document.getElementById("vehicle-speed");

if (playerData.vehicleSpeed !== undefined) {
    vehicleSpeedElement.querySelector("div").textContent = playerData.vehicleSpeed; // Set the speed value
} else {
    vehicleSpeedElement.querySelector("div").textContent = ""; // Clear the speed value
}

const vehicleGearElement = document.getElementById("vehicle-gear");
if (playerData.vehicleGear !== undefined) {
    vehicleGearElement.querySelector("span").textContent = playerData.vehicleGear;
} else {
    vehicleGearElement.querySelector("span").textContent = "";
}

}

function requestPlayerData() {
const playerData = {
job: “Trucker”,
health: 80,
armor: 60,
stamina: 90,
hunger: 30,
thirst: 40,
wallet: 5000,
blackmoney: 2000,
bank: 10000,
society: 15000,
vehicleSpeed: 60,
vehicleGear: “D”,
};

updateHUD(playerData);

}

window.addEventListener(‘DOMContentLoaded’, () => {
requestPlayerData();
});

Client.lua Code: – Event handler to receive player data from the server
RegisterNetEvent(‘receivePlayerData’)
AddEventHandler(‘receivePlayerData’, function(playerData)
updateHUD(playerData)
end)

– Function to update the HUD with player data
function updateHUD(playerData)
– Update job name
SendNUIMessage({
type = ‘updateJob’,
value = playerData.job
})

-- Update status icons
SendNUIMessage({
    type = 'updateStatus',
    health = playerData.health,
    armor = playerData.armor,
    stamina = playerData.stamina,
    hunger = playerData.hunger,
    thirst = playerData.thirst
})

-- Update money elements
SendNUIMessage({
    type = 'updateMoney',
    wallet = playerData.wallet,
    blackmoney = playerData.blackmoney,
    bank = playerData.bank,
    society = playerData.society
})

-- Update vehicle speed and gear
SendNUIMessage({
    type = 'updateVehicle',
    vehicleSpeed = playerData.vehicleSpeed,
    vehicleGear = playerData.vehicleGear
})

end

Server.lua Code: function getPlayerDataFromSource(playerId)

I hope this helps

6

Please send it with this characters ``` around each code snippet like:

HTML:

IM CODE IN HTML

JS:

IM CODE IN JS
7

It’s ok i fixed it myself

8

Then choose a solution to mark this thread as completed