From bb2efc7904a4397fe611d3be05e18ea99fe5b0a8 Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Mon, 21 Feb 2022 19:38:38 +0100 Subject: [PATCH] chore: move calcs on js + minor styling --- .prettierrc | 2 +- client.lua | 44 ++++++++++-------------- html/css/style.css | 2 +- html/js/script.js | 86 +++++++++++++++++++++------------------------- 4 files changed, 60 insertions(+), 74 deletions(-) diff --git a/.prettierrc b/.prettierrc index ad35042..97a6ce7 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,7 +2,7 @@ "semi": true, "trailingComma": "all", "singleQuote": true, - "printWidth": 80, + "printWidth": 120, "tabWidth": 2, "arrowParens": "avoid" } diff --git a/client.lua b/client.lua index e5c6378..834b537 100644 --- a/client.lua +++ b/client.lua @@ -4,31 +4,32 @@ local maxUnderwaterTime = 10.0 local GeneralLoop = function() CreateThread(function() while ESX.PlayerLoaded do - SendNUIMessage({ - action = 'general', - visible = not IsPauseMenuActive() - }) - - local health = (GetEntityHealth(ESX.PlayerData.ped) - 100) / (GetEntityMaxHealth(ESX.PlayerData.ped) - 100) - local underwaterTime = GetPlayerUnderwaterTimeRemaining(playerId) / maxUnderwaterTime local isDriving = IsPedInAnyVehicle(ESX.PlayerData.ped, true) - local veh = isDriving and GetVehiclePedIsUsing(ESX.PlayerData.ped, false) - local speedMultiplier = isDriving and dx.metricSystem and 3.6 or 2.236936 - local maxSpeed = isDriving and GetVehicleModelMaxSpeed(GetEntityModel(veh)) * speedMultiplier + local currentVehicle = isDriving and GetVehiclePedIsUsing(ESX.PlayerData.ped, false) SetRadarZoom(1150) DisplayRadar(dx.persistentRadar or isDriving) + SendNUIMessage({ action = 'general', visible = not IsPauseMenuActive() }) SendNUIMessage({ action = 'base', - hp = health > 0 and health or 0, - armour = GetPedArmour(ESX.PlayerData.ped) / 100, - oxygen = underwaterTime, + health = { + current = GetEntityHealth(ESX.PlayerData.ped), + max = GetEntityMaxHealth(ESX.PlayerData.ped) + }, + armour = GetPedArmour(ESX.PlayerData.ped), + oxygen = { + current = GetPlayerUnderwaterTimeRemaining(playerId), + max = maxUnderwaterTime + }, vehicle = isDriving and { - speed = GetEntitySpeed(veh) * speedMultiplier, - limit = GetEntitySpeed(veh) * speedMultiplier / maxSpeed / 1.3, + speed = { + current = GetEntitySpeed(currentVehicle), + max = GetVehicleModelMaxSpeed(GetEntityModel(currentVehicle)) + }, + unitsMultiplier = dx.metricSystem and 3.6 or 2.236936, + fuel = dx.fuel and GetVehicleFuelLevel(currentVehicle), }, - fuel = dx.fuel and isDriving and GetVehicleFuelLevel(veh) / 100, voice = { toggled = dx.voice, connected = dx.voice and MumbleIsConnected(), @@ -38,10 +39,7 @@ local GeneralLoop = function() Wait(dx.generalRefreshRate) end - SendNUIMessage({ - action = 'general', - visible = false - }) + SendNUIMessage({ action = 'general', visible = false }) end) end @@ -70,11 +68,7 @@ end local InitHUD = function () GeneralLoop() StatusLoop() - SendNUIMessage({ - action = 'general', - visible = true, - playerId = GetPlayerServerId(playerId) - }) + SendNUIMessage({ action = 'general', visible = true, playerId = GetPlayerServerId(playerId) }) repeat Citizen.Wait(100) until not IsPedSwimmingUnderWater(ESX.PlayerData.ped) Citizen.Wait(2000) maxUnderwaterTime = GetPlayerUnderwaterTimeRemaining(playerId) diff --git a/html/css/style.css b/html/css/style.css index 900e4f9..2cdc0e0 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -39,7 +39,7 @@ body { #SpeedIcon:not(.fa-tachometer-alt) { font-family: sans-serif; - font-size: .8rem; + font-size: .7rem; } #ID { diff --git a/html/js/script.js b/html/js/script.js index eed2a5f..f03ef85 100644 --- a/html/js/script.js +++ b/html/js/script.js @@ -94,69 +94,61 @@ window.addEventListener('message', function (event) { } if (data.action == 'base') { - data.vehicle.limit > 1 && (data.vehicle.limit = 1); - data.oxygen < 0.01 && (data.oxygen = 0.01); + let health = (data.health.current - 100) / (data.health.max - 100); + let oxygen = data.oxygen.current / data.oxygen.max; + let vehicle, isDriving; + vehicle = isDriving = data.vehicle; + + let speed, maxSpeed, percSpeed, fuel; + + isDriving && (speed = vehicle.speed.current * vehicle.unitsMultiplier); + isDriving && (maxSpeed = vehicle.speed.max * vehicle.unitsMultiplier); + isDriving && (percSpeed = (speed / maxSpeed) * 0.7); + isDriving && (fuel = vehicle.fuel / 100); + + health < 0 && (health = 0); + percSpeed > 1 && (percSpeed = 1); + oxygen < 0.01 && (oxygen = 0.01); Health.style.display = 'block'; - Speed.style.display = data.vehicle.limit !== false ? 'block' : 'none'; - Fuel.style.display = data.fuel !== false ? 'block' : 'none'; + Speed.style.display = isDriving !== false ? 'block' : 'none'; + Fuel.style.display = isDriving !== false ? 'block' : 'none'; Armour.style.display = data.armour ? 'block' : 'none'; - Oxygen.style.display = data.oxygen < 1 ? 'block' : 'none'; + Oxygen.style.display = oxygen < 1 ? 'block' : 'none'; data.voice.toggled && (Voice.style.display = 'block'); - data.hp && HealthIcon.classList.remove('fa-skull'); - data.hp && HealthIcon.classList.add('fa-heart'); - !data.hp && HealthIcon.classList.remove('fa-heart'); - !data.hp && HealthIcon.classList.add('fa-skull'); + health && HealthIcon.classList.remove('fa-skull'); + health && HealthIcon.classList.add('fa-heart'); + !health && HealthIcon.classList.remove('fa-heart'); + !health && HealthIcon.classList.add('fa-skull'); data.voice.connected && VoiceIcon.classList.remove('fa-times'); data.voice.connected && VoiceIcon.classList.add('fa-microphone'); !data.voice.connected && VoiceIcon.classList.remove('fa-microphone'); !data.voice.connected && VoiceIcon.classList.add('fa-times'); - data.vehicle.limit >= 0.1 && - SpeedIcon.classList.remove('fa-tachometer-alt'); - data.vehicle.limit >= 0.1 && - (SpeedIcon.textContent = Math.floor(data.vehicle.speed)); - data.vehicle.limit < 0.1 && SpeedIcon.classList.add('fa-tachometer-alt'); - data.vehicle.limit < 0.1 && (SpeedIcon.textContent = ''); + percSpeed >= 0.1 && SpeedIcon.classList.remove('fa-tachometer-alt'); + percSpeed >= 0.1 && (SpeedIcon.textContent = Math.floor(speed)); + percSpeed < 0.1 && SpeedIcon.classList.add('fa-tachometer-alt'); + percSpeed < 0.1 && (SpeedIcon.textContent = ''); - data.oxygen < 0.1 && OxygenIcon.classList.toggle('flash'); + oxygen < 0.1 && OxygenIcon.classList.toggle('flash'); - HealthIndicator.trail.setAttribute( - 'stroke', - data.hp ? 'rgb(35, 35, 35)' : 'rgb(255, 0, 0)', - ); - HealthIndicator.path.setAttribute( - 'stroke', - data.hp ? 'rgb(0, 255, 100)' : 'rgb(255, 0, 0)', - ); - OxygenIndicator.path.setAttribute( - 'stroke', - data.oxygen < 0.25 ? 'rgb(255, 0, 0)' : 'rgb(0, 140, 255)', - ); + HealthIndicator.trail.setAttribute('stroke', health ? 'rgb(35, 35, 35)' : 'rgb(255, 0, 0)'); + HealthIndicator.path.setAttribute('stroke', health ? 'rgb(0, 255, 100)' : 'rgb(255, 0, 0)'); + OxygenIndicator.path.setAttribute('stroke', oxygen < 0.25 ? 'rgb(255, 0, 0)' : 'rgb(0, 140, 255)'); VoiceIndicator.path.setAttribute( 'stroke', - data.voice.connected - ? data.voice.talking - ? 'rgb(255, 255, 0)' - : 'rgb(169, 169, 169)' - : 'rgb(255, 0, 0)', - ); - VoiceIndicator.trail.setAttribute( - 'stroke', - data.voice.connected ? 'rgb(35, 35, 35)' : 'rgb(255, 0, 0)', + data.voice.connected ? (data.voice.talking ? 'rgb(255, 255, 0)' : 'rgb(169, 169, 169)') : 'rgb(255, 0, 0)', ); - FuelIndicator.path.setAttribute( - 'stroke', - data.fuel > 0.2 ? 'rgb(255, 255, 255)' : 'rgb(255, 0, 0)', - ); - - HealthIndicator.animate(data.hp); - ArmourIndicator.animate(data.armour); - SpeedIndicator.animate(data.vehicle.limit || 0); - OxygenIndicator.animate(data.oxygen || 1); - FuelIndicator.animate(data.fuel || 0); + VoiceIndicator.trail.setAttribute('stroke', data.voice.connected ? 'rgb(35, 35, 35)' : 'rgb(255, 0, 0)'); + FuelIndicator.path.setAttribute('stroke', fuel > 0.2 ? 'rgb(255, 255, 255)' : 'rgb(255, 0, 0)'); + + HealthIndicator.animate(health); + ArmourIndicator.animate(data.armour / 100); + SpeedIndicator.animate(percSpeed || 0); + OxygenIndicator.animate(oxygen || 1); + FuelIndicator.animate(fuel || 0); } if (data.action == 'status') {