refactor: major js rewrite + improvements everywhere

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "arrowParens": "avoid"
+}

client.lua

@@ -1,110 +1,118 @@
 local playerId = PlayerId()
+local maxUnderwaterTime = 10.0
 
 local GeneralLoop = function()
-    CreateThread(function()
-        while ESX.PlayerLoaded do
-            local underwaterTime = GetPlayerUnderwaterTimeRemaining(playerId) * 10
-            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
-
-            SendNUIMessage({ 
-                action = "general",
-                -- ped
-                hp = (GetEntityHealth(ESX.PlayerData.ped) - 100) * 100 / (GetEntityMaxHealth(ESX.PlayerData.ped) - 100),
-                armour = GetPedArmour(ESX.PlayerData.ped),
-                oxygen = IsPedSwimmingUnderWater(ESX.PlayerData.ped) and underwaterTime or 100,
-                -- vehicles
-                speedometer = isDriving and
-                {
-                    speed = math.floor(GetEntitySpeed(veh) * speedMultiplier),
-                    maxspeed = GetVehicleModelMaxSpeed(GetEntityModel(veh)) * speedMultiplier
-                },
-                fuel = dx.showFuel and isDriving and GetVehicleFuelLevel(veh),
-                -- voice
-                showVoice = dx.showVoice,
-                voiceConnected = dx.showVoice and MumbleIsConnected(),
-                voiceTalking = dx.showVoice and NetworkIsPlayerTalking(playerId),
-            })
-
-            DisplayRadar(dx.persistentRadar or isDriving)
-            SetRadarZoom(1150)
-            SendNUIMessage({showUi = not IsPauseMenuActive()})
-
-            Wait(dx.generalRefreshRate)
-        end
-        SendNUIMessage({showUi = false})
-    end)
+  CreateThread(function()
+    while ESX.PlayerLoaded do
+      SendNUIMessage({
+        action = 'general',
+        visible = not IsPauseMenuActive()
+      })
+
+      SetRadarZoom(1150)
+      DisplayRadar(dx.persistentRadar or isDriving)
+
+      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
+
+      SendNUIMessage({
+        action = 'base',
+        hp = health > 0 and health or 0,
+        armour = GetPedArmour(ESX.PlayerData.ped) / 100,
+        oxygen = underwaterTime >= 1 and IsPedSwimmingUnderWater(ESX.PlayerData.ped) and 0.99 or underwaterTime,
+        speed = isDriving and GetEntitySpeed(veh) * speedMultiplier / maxSpeed * 1.3,
+        fuel = dx.fuel and isDriving and GetVehicleFuelLevel(veh) / 100,
+        voice = {
+          toggled = dx.voice,
+          connected = dx.voice and MumbleIsConnected(),
+          talking = dx.voice and NetworkIsPlayerTalking(playerId),
+        }
+      })
+
+      Wait(dx.generalRefreshRate)
+    end
+    SendNUIMessage({
+      action = 'general',
+      visible = false
+    })
+  end)
 end
 
 local StatusLoop = function()
-    CreateThread(function()
-        local hunger, thirst, stress
-
-        while ESX.PlayerLoaded do
-
-            TriggerEvent('esx_status:getStatus', 'hunger', function(status) hunger = status.val / 10000 end)
-            TriggerEvent('esx_status:getStatus', 'thirst', function(status) thirst = status.val / 10000 end)
-            if dx.showStress then
-            TriggerEvent('esx_status:getStatus', 'stress', function(status) stress = status.val / 10000 end)
-            end
-
-            SendNUIMessage({
-                action = "status",
-                -- status
-                hunger = hunger,
-                thirst = thirst,
-                stress = dx.showStress and stress,
-            })
-
-            Wait(dx.statusRefreshRate)
-        end
-    end)
+  CreateThread(function()
+    local hunger, thirst, stress
+
+    while ESX.PlayerLoaded do
+
+      TriggerEvent('esx_status:getStatus', 'hunger', function(status) hunger = status.val / 10000 end)
+      TriggerEvent('esx_status:getStatus', 'thirst', function(status) thirst = status.val / 10000 end)
+      if dx.stress then TriggerEvent('esx_status:getStatus', 'stress', function(status) stress = status.val / 10000 end) end
+
+      SendNUIMessage({
+        action = 'status',
+        hunger = hunger,
+        thirst = thirst,
+        stress = dx.stress and stress,
+      })
+
+      Wait(dx.statusRefreshRate)
+    end
+  end)
 end
 
 local InitHUD = function ()
-    GeneralLoop()
-    StatusLoop()
-    SendNUIMessage({playerId = GetPlayerServerId(playerId)})
+  GeneralLoop()
+  StatusLoop()
+  SendNUIMessage({
+    action = 'general',
+    visible = true,
+    playerId = GetPlayerServerId(playerId)
+  })
+  while IsPedSwimmingUnderWater(ESX.PlayerData.ped) do Wait(5000) end
+  maxUnderwaterTime = GetPlayerUnderwaterTimeRemaining(playerId)
 end
 
 if dx.circleMap then
-    CreateThread(function()
-        RequestStreamedTextureDict("circlemap", false)
-        repeat Wait(100) until HasStreamedTextureDictLoaded("circlemap")
-
-        AddReplaceTexture("platform:/textures/graphics", "radarmasksm", "circlemap", "radarmasksm")
-
-        SetMinimapClipType(1)
-        SetMinimapComponentPosition('minimap', 'L', 'B', -0.017, 0.021, 0.207, 0.32)
-        SetMinimapComponentPosition('minimap_mask', 'L', 'B', 0.06, 0.05, 0.132, 0.260)
-        SetMinimapComponentPosition('minimap_blur', 'L', 'B', 0.005, -0.01, 0.166, 0.257)
-
-        Wait(500)
-        SetRadarBigmapEnabled(true, false)
-        Wait(500)
-        SetRadarBigmapEnabled(false, false)
-
-        local minimap = RequestScaleformMovie("minimap")
-        repeat Wait(100) until HasScaleformMovieLoaded(minimap)
-
-        while true do
-            Wait(0)
-            BeginScaleformMovieMethod(minimap, "SETUP_HEALTH_ARMOUR")
-            ScaleformMovieMethodAddParamInt(3)
-            EndScaleformMovieMethod()
-        end
-    end)
+  CreateThread(function()
+    RequestStreamedTextureDict('circlemap', false)
+    repeat Wait(100) until HasStreamedTextureDictLoaded('circlemap')
+
+    AddReplaceTexture('platform:/textures/graphics', 'radarmasksm', 'circlemap', 'radarmasksm')
+
+    SetMinimapClipType(1)
+    SetMinimapComponentPosition('minimap', 'L', 'B', -0.017, 0.021, 0.207, 0.32)
+    SetMinimapComponentPosition('minimap_mask', 'L', 'B', 0.06, 0.05, 0.132, 0.260)
+    SetMinimapComponentPosition('minimap_blur', 'L', 'B', 0.005, -0.01, 0.166, 0.257)
+
+    Wait(500)
+    SetRadarBigmapEnabled(true, false)
+    Wait(500)
+    SetRadarBigmapEnabled(false, false)
+
+    local minimap = RequestScaleformMovie('minimap')
+    repeat Wait(100) until HasScaleformMovieLoaded(minimap)
+
+    while true do
+      Wait(0)
+      BeginScaleformMovieMethod(minimap, 'SETUP_HEALTH_ARMOUR')
+      ScaleformMovieMethodAddParamInt(3)
+      EndScaleformMovieMethod()
+    end
+  end)
 end
 
 AddEventHandler('pma-voice:setTalkingMode', function(mode)
-    SendNUIMessage({action = "voice_range", voiceRange = mode})
+  SendNUIMessage({action = 'voice', voiceRange = mode})
 end)
 
 RegisterNetEvent('esx:playerLoaded')
 AddEventHandler('esx:playerLoaded', function()
  	ESX.PlayerLoaded = true
-    InitHUD()
+  InitHUD()
 end)
 
 RegisterNetEvent('esx:onPlayerLogout')
@@ -113,10 +121,10 @@ AddEventHandler('esx:onPlayerLogout', function()
 end)
 
 AddEventHandler('onResourceStart', function(resourceName)
-    if (resourceName == GetCurrentResourceName()) then
-        if ESX.PlayerLoaded then
-            Citizen.Wait(50)
-            InitHUD()
-        end
+  if (resourceName == GetCurrentResourceName()) then
+    if ESX.PlayerLoaded then
+      Citizen.Wait(50)
+      InitHUD()
     end
+  end
 end)

config.lua

@@ -13,13 +13,13 @@ dx = {
   -- true: speed will be kmh
   -- false: speed will be mph
 
-  showStress = false,
+  stress = true,
   -- setting this to true requires you to add a stress status
 
-  showFuel = false,
+  fuel = true,
   -- setting this to true requires you to add a fuel managment resource
 
-  showVoice = false,
+  voice = true,
   -- enabling this requires pma-voice
 
   circleMap = true

fxmanifest.lua

@@ -1,7 +1,7 @@
 fx_version 'cerulean'
 game 'gta5'
 author '0xDEMXN'
-version '1.0.8'
+version '1.0.9'
 
 lua54 'yes'
 use_fxv2_oal 'yes'
@@ -16,13 +16,13 @@ client_scripts {
 }
 
 files {
-    'html/ui.html',
-    'html/script.js',
-    'html/style.css',
-    'html/logo.png',
+    'html/index.html',
+    'html/js/script.js',
+    'html/css/style.css',
+    'html/images/logo.png',
 }
 
-ui_page 'html/ui.html'
+ui_page 'html/index.html'
 
 dependencies {
     'es_extended',

html/style.css → html/css/style.css

@@ -10,6 +10,7 @@ body {
 .Container {
   margin-top: auto;
   margin-bottom: 1.5rem;
+  display: none;
 }
 
 .Icons {
@@ -24,6 +25,7 @@ body {
   height: 2.5rem;
   border-radius: 50%;
   background: rgb(49, 49, 49);
+  display: none;
 }
 
 .Icon i {

html/ui.html → html/index.html

@@ -4,21 +4,21 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
     integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
     crossorigin="anonymous" />
-  <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="css/style.css" />
 </head>
 
 <body>
-  <div class="Container" style="display: none;">
+  <div class="Container">
     <div class="Icons">
-      <div id="VoiceIndicator" class="Icon" style="display: none;">
+      <div id="VoiceIndicator" class="Icon">
         <i id="VoiceIcon" class="fas fa-times"></i>
       </div>
 
       <div id="HealthIndicator" class="Icon">
         <i id="HealthIcon" class="fas fa-heart"></i>
       </div>
 
-      <div id="ArmourIndicator" class="Icon" style="display: none;">
+      <div id="ArmourIndicator" class="Icon">
         <i id="ArmourIcon" class="fas fa-shield-alt"></i>
       </div>
 
@@ -30,31 +30,31 @@
         <i id="ThirstIcon" class="fas fa-tint"></i>
       </div>
 
-      <div id="StressIndicator" class="Icon" style="display: none;">
+      <div id="StressIndicator" class="Icon">
         <i id="StressIcon" class="fas fa-brain"></i>
       </div>
 
-      <div id="OxygenIndicator" class="Icon" style="display: none;">
+      <div id="OxygenIndicator" class="Icon">
         <i id="OxygenIcon" class="fas fa-lungs"></i>
       </div>
 
-      <div id="FuelIndicator" class="Icon" style="display: none;">
+      <div id="FuelIndicator" class="Icon">
         <i id="FuelIcon" class="fas fa-gas-pump"></i>
       </div>
 
-      <div id="SpeedIndicator" class="Icon" style="display: none;">
+      <div id="SpeedIndicator" class="Icon">
         <i id="SpeedIcon" class="fas fa-tachometer-alt"></i>
       </div>
 
       <div id="ID"></div>
     </div>
   </div>
-  <div class="Logo" style="display:none;"><img src="logo.png"></div>
+  <div class="Logo" style="display:none;"><img src="images/logo.png"></div>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/0.6.1/progressbar.min.js"
     integrity="sha512-7IoDEsIJGxz/gNyJY/0LRtS45wDSvPFXGPuC7Fo4YueWMNOmWKMAllEqo2Im3pgOjeEwsOoieyliRgdkZnY0ow=="
     crossorigin="anonymous"></script>
-  <script type="text/javascript" src="script.js"></script>
+  <script type="text/javascript" src="js/script.js"></script>
 </body>
 
 </html>