From f7b4194461b7fbb3266da085a6bdd272d25bd9d5 Mon Sep 17 00:00:00 2001 From: Kakarot <57848836+GhzGarage@users.noreply.github.com> Date: Fri, 3 Nov 2023 06:58:01 -0500 Subject: [PATCH] Removed vscode folder --- .gitignore | 5 - .vscode/extensions.json | 9 - .vscode/settings.json | 4 - client.lua | 412 ++++---- config.lua | 110 +-- fxmanifest.lua | 4 +- html/app.js | 2054 ++++++++++++++++++++------------------- html/responsive.css | 1080 ++++++++++---------- html/styles.css | 463 +++++---- server.lua | 8 +- 10 files changed, 2115 insertions(+), 2034 deletions(-) delete mode 100644 .gitignore delete mode 100644 .vscode/extensions.json delete mode 100644 .vscode/settings.json diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 405dc4a..0000000 --- a/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -# Ignore any IDE derived project configs -.idea -.vscode/* -!.vscode/extensions.json -!.vscode/settings.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index be54ebf..0000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "recommendations": [ - "sumneko.lua", - "fivem-vscode.fivem-vscode", - "ihyajb.qbcore-code-snippets", - "eamodio.gitlens", - "GitHub.vscode-pull-request-github" - ] -} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 4d79df9..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "Lua.runtime.nonstandardSymbol": ["/**/", "`", "+=", "-=", "*=", "/="], - "Lua.runtime.version": "Lua 5.4" -} \ No newline at end of file diff --git a/client.lua b/client.lua index 3c254cd..0951c00 100644 --- a/client.lua +++ b/client.lua @@ -48,26 +48,26 @@ local function CinematicShow(bool) end local function loadSettings(settings) - for k,v in pairs(settings) do + for k, v in pairs(settings) do if k == 'isToggleMapShapeChecked' then Menu.isToggleMapShapeChecked = v - SendNUIMessage({ test = true, event = k, toggle = v}) + SendNUIMessage({ test = true, event = k, toggle = v }) elseif k == 'isCinematicModeChecked' then Menu.isCinematicModeChecked = v CinematicShow(v) - SendNUIMessage({ test = true, event = k, toggle = v}) + SendNUIMessage({ test = true, event = k, toggle = v }) elseif k == 'isChangeFPSChecked' then Menu[k] = v local val = v and 'Optimized' or 'Synced' - SendNUIMessage({ test = true, event = k, toggle = val}) + SendNUIMessage({ test = true, event = k, toggle = val }) else Menu[k] = v - SendNUIMessage({ test = true, event = k, toggle = v}) + SendNUIMessage({ test = true, event = k, toggle = v }) end end - QBCore.Functions.Notify(Lang:t("notify.hud_settings_loaded"), "success") + QBCore.Functions.Notify(Lang:t('notify.hud_settings_loaded'), 'success') Wait(1000) - TriggerEvent("hud:client:LoadMap") + TriggerEvent('hud:client:LoadMap') end local function saveSettings() @@ -90,7 +90,7 @@ local function hasHarness(items) harness = _harness end -RegisterNetEvent("QBCore:Client:OnPlayerLoaded", function() +RegisterNetEvent('QBCore:Client:OnPlayerLoaded', function() Wait(2000) local hudSettings = GetResourceKvpString('hudSettings') if hudSettings then loadSettings(json.decode(hudSettings)) end @@ -99,11 +99,11 @@ RegisterNetEvent("QBCore:Client:OnPlayerLoaded", function() SetEntityHealth(PlayerPedId(), 200) end) -RegisterNetEvent("QBCore:Client:OnPlayerUnload", function() +RegisterNetEvent('QBCore:Client:OnPlayerUnload', function() PlayerData = {} end) -RegisterNetEvent("QBCore:Player:SetPlayerData", function(val) +RegisterNetEvent('QBCore:Player:SetPlayerData', function(val) PlayerData = val end) @@ -114,7 +114,7 @@ AddEventHandler('onResourceStart', function(resourceName) if hudSettings then loadSettings(json.decode(hudSettings)) end end) -AddEventHandler("pma-voice:radioActive", function(data) +AddEventHandler('pma-voice:radioActive', function(data) radioActive = data end) @@ -122,26 +122,26 @@ end) RegisterCommand('menu', function() Wait(50) if showMenu then return end - TriggerEvent("hud:client:playOpenMenuSounds") + TriggerEvent('hud:client:playOpenMenuSounds') SetNuiFocus(true, true) - SendNUIMessage({ action = "open"}) + SendNUIMessage({ action = 'open' }) showMenu = true end) RegisterNUICallback('closeMenu', function(_, cb) Wait(50) - TriggerEvent("hud:client:playCloseMenuSounds") + TriggerEvent('hud:client:playCloseMenuSounds') showMenu = false SetNuiFocus(false, false) - cb("ok") + cb('ok') end) RegisterKeyMapping('menu', 'Open Menu', 'keyboard', config.OpenMenu) -- Reset hud local function restartHud() - TriggerEvent("hud:client:playResetHudSounds") - QBCore.Functions.Notify(Lang:t("notify.hud_restart"), "error") + TriggerEvent('hud:client:playResetHudSounds') + QBCore.Functions.Notify(Lang:t('notify.hud_restart'), 'error') if IsPedInAnyVehicle(PlayerPedId()) then Wait(2600) SendNUIMessage({ action = 'car', show = false }) @@ -151,13 +151,13 @@ local function restartHud() SendNUIMessage({ action = 'hudtick', show = false }) SendNUIMessage({ action = 'hudtick', show = true }) Wait(2600) - QBCore.Functions.Notify(Lang:t("notify.hud_start"), "success") + QBCore.Functions.Notify(Lang:t('notify.hud_start'), 'success') end RegisterNUICallback('restartHud', function(_, cb) Wait(50) restartHud() - cb("ok") + cb('ok') end) RegisterCommand('resethud', function() @@ -167,220 +167,222 @@ end) RegisterNUICallback('resetStorage', function(_, cb) Wait(50) - TriggerEvent("hud:client:resetStorage") - cb("ok") + TriggerEvent('hud:client:resetStorage') + cb('ok') end) -RegisterNetEvent("hud:client:resetStorage", function() +RegisterNetEvent('hud:client:resetStorage', function() Wait(50) if Menu.isResetSoundsChecked then - TriggerServerEvent("InteractSound_SV:PlayOnSource", "airwrench", 0.1) + TriggerServerEvent('InteractSound_SV:PlayOnSource', 'airwrench', 0.1) end - QBCore.Functions.TriggerCallback('hud:server:getMenu', function(menu) loadSettings(menu); SetResourceKvp('hudSettings', json.encode(menu)) end) + QBCore.Functions.TriggerCallback('hud:server:getMenu', function(menu) + loadSettings(menu); SetResourceKvp('hudSettings', json.encode(menu)) + end) end) -- Notifications RegisterNUICallback('openMenuSounds', function(_, cb) Wait(50) Menu.isOpenMenuSoundsChecked = not Menu.isOpenMenuSoundsChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) -RegisterNetEvent("hud:client:playOpenMenuSounds", function() +RegisterNetEvent('hud:client:playOpenMenuSounds', function() Wait(50) if not Menu.isOpenMenuSoundsChecked then return end - TriggerServerEvent("InteractSound_SV:PlayOnSource", "monkeyopening", 0.5) + TriggerServerEvent('InteractSound_SV:PlayOnSource', 'monkeyopening', 0.5) end) -RegisterNetEvent("hud:client:playCloseMenuSounds", function() +RegisterNetEvent('hud:client:playCloseMenuSounds', function() Wait(50) if not Menu.isOpenMenuSoundsChecked then return end - TriggerServerEvent("InteractSound_SV:PlayOnSource", "catclosing", 0.05) + TriggerServerEvent('InteractSound_SV:PlayOnSource', 'catclosing', 0.05) end) RegisterNUICallback('resetHudSounds', function(_, cb) Wait(50) Menu.isResetSoundsChecked = not Menu.isResetSoundsChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) -RegisterNetEvent("hud:client:playResetHudSounds", function() +RegisterNetEvent('hud:client:playResetHudSounds', function() Wait(50) if not Menu.isResetSoundsChecked then return end - TriggerServerEvent("InteractSound_SV:PlayOnSource", "airwrench", 0.1) + TriggerServerEvent('InteractSound_SV:PlayOnSource', 'airwrench', 0.1) end) RegisterNUICallback('checklistSounds', function(_, cb) Wait(50) - TriggerEvent("hud:client:checklistSounds") - cb("ok") + TriggerEvent('hud:client:checklistSounds') + cb('ok') end) -RegisterNetEvent("hud:client:checklistSounds", function() +RegisterNetEvent('hud:client:checklistSounds', function() Wait(50) Menu.isListSoundsChecked = not Menu.isListSoundsChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() end) -RegisterNetEvent("hud:client:playHudChecklistSound", function() +RegisterNetEvent('hud:client:playHudChecklistSound', function() Wait(50) if not Menu.isListSoundsChecked then return end - TriggerServerEvent("InteractSound_SV:PlayOnSource", "shiftyclick", 0.5) + TriggerServerEvent('InteractSound_SV:PlayOnSource', 'shiftyclick', 0.5) end) RegisterNUICallback('showOutMap', function(_, cb) Wait(50) Menu.isOutMapChecked = not Menu.isOutMapChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('showOutCompass', function(_, cb) Wait(50) Menu.isOutCompassChecked = not Menu.isOutCompassChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('showFollowCompass', function(_, cb) - Wait(50) + Wait(50) Menu.isCompassFollowChecked = not Menu.isCompassFollowChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('showMapNotif', function(_, cb) Wait(50) Menu.isMapNotifChecked = not Menu.isMapNotifChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('showFuelAlert', function(_, cb) Wait(50) Menu.isLowFuelChecked = not Menu.isLowFuelChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('showCinematicNotif', function(_, cb) Wait(50) Menu.isCinematicNotifChecked = not Menu.isCinematicNotifChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) -- Status RegisterNUICallback('dynamicHealth', function(_, cb) Wait(50) - TriggerEvent("hud:client:ToggleHealth") - cb("ok") + TriggerEvent('hud:client:ToggleHealth') + cb('ok') end) -RegisterNetEvent("hud:client:ToggleHealth", function() +RegisterNetEvent('hud:client:ToggleHealth', function() Wait(50) Menu.isDynamicHealthChecked = not Menu.isDynamicHealthChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() end) RegisterNUICallback('dynamicArmor', function(_, cb) Wait(50) Menu.isDynamicArmorChecked = not Menu.isDynamicArmorChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('dynamicHunger', function(_, cb) Wait(50) Menu.isDynamicHungerChecked = not Menu.isDynamicHungerChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('dynamicThirst', function(_, cb) Wait(50) Menu.isDynamicThirstChecked = not Menu.isDynamicThirstChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('dynamicStress', function(_, cb) Wait(50) Menu.isDynamicStressChecked = not Menu.isDynamicStressChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('dynamicOxygen', function(_, cb) Wait(50) Menu.isDynamicOxygenChecked = not Menu.isDynamicOxygenChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) -- Vehicle RegisterNUICallback('changeFPS', function(_, cb) Wait(50) Menu.isChangeFPSChecked = not Menu.isChangeFPSChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('HideMap', function(_, cb) Wait(50) Menu.isHideMapChecked = not Menu.isHideMapChecked DisplayRadar(not Menu.isHideMapChecked) - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) -RegisterNetEvent("hud:client:LoadMap", function() +RegisterNetEvent('hud:client:LoadMap', function() Wait(50) -- Credit to Dalrae for the solve. - local defaultAspectRatio = 1920/1080 -- Don't change this. + local defaultAspectRatio = 1920 / 1080 -- Don't change this. local resolutionX, resolutionY = GetActiveScreenResolution() - local aspectRatio = resolutionX/resolutionY + local aspectRatio = resolutionX / resolutionY local minimapOffset = 0 if aspectRatio > defaultAspectRatio then - minimapOffset = ((defaultAspectRatio-aspectRatio)/3.6)-0.008 + minimapOffset = ((defaultAspectRatio - aspectRatio) / 3.6) - 0.008 end - if Menu.isToggleMapShapeChecked == "square" then - RequestStreamedTextureDict("squaremap", false) - if not HasStreamedTextureDictLoaded("squaremap") then + if Menu.isToggleMapShapeChecked == 'square' then + RequestStreamedTextureDict('squaremap', false) + if not HasStreamedTextureDictLoaded('squaremap') then Wait(150) end if Menu.isMapNotifChecked then - QBCore.Functions.Notify(Lang:t("notify.load_square_map")) + QBCore.Functions.Notify(Lang:t('notify.load_square_map')) end SetMinimapClipType(0) - AddReplaceTexture("platform:/textures/graphics", "radarmasksm", "squaremap", "radarmasksm") - AddReplaceTexture("platform:/textures/graphics", "radarmask1g", "squaremap", "radarmasksm") + AddReplaceTexture('platform:/textures/graphics', 'radarmasksm', 'squaremap', 'radarmasksm') + AddReplaceTexture('platform:/textures/graphics', 'radarmask1g', 'squaremap', 'radarmasksm') -- 0.0 = nav symbol and icons left -- 0.1638 = nav symbol and icons stretched -- 0.216 = nav symbol and icons raised up - SetMinimapComponentPosition("minimap", "L", "B", 0.0 + minimapOffset, -0.047, 0.1638, 0.183) + SetMinimapComponentPosition('minimap', 'L', 'B', 0.0 + minimapOffset, -0.047, 0.1638, 0.183) -- icons within map - SetMinimapComponentPosition("minimap_mask", "L", "B", 0.0 + minimapOffset, 0.0, 0.128, 0.20) + SetMinimapComponentPosition('minimap_mask', 'L', 'B', 0.0 + minimapOffset, 0.0, 0.128, 0.20) -- -0.01 = map pulled left -- 0.025 = map raised up @@ -398,26 +400,26 @@ RegisterNetEvent("hud:client:LoadMap", function() end Wait(1200) if Menu.isMapNotifChecked then - QBCore.Functions.Notify(Lang:t("notify.loaded_square_map")) + QBCore.Functions.Notify(Lang:t('notify.loaded_square_map')) end - elseif Menu.isToggleMapShapeChecked == "circle" then - RequestStreamedTextureDict("circlemap", false) - if not HasStreamedTextureDictLoaded("circlemap") then + elseif Menu.isToggleMapShapeChecked == 'circle' then + RequestStreamedTextureDict('circlemap', false) + if not HasStreamedTextureDictLoaded('circlemap') then Wait(150) end if Menu.isMapNotifChecked then - QBCore.Functions.Notify(Lang:t("notify.load_circle_map")) + QBCore.Functions.Notify(Lang:t('notify.load_circle_map')) end SetMinimapClipType(1) - AddReplaceTexture("platform:/textures/graphics", "radarmasksm", "circlemap", "radarmasksm") - AddReplaceTexture("platform:/textures/graphics", "radarmask1g", "circlemap", "radarmasksm") + AddReplaceTexture('platform:/textures/graphics', 'radarmasksm', 'circlemap', 'radarmasksm') + AddReplaceTexture('platform:/textures/graphics', 'radarmask1g', 'circlemap', 'radarmasksm') -- -0.0100 = nav symbol and icons left -- 0.180 = nav symbol and icons stretched -- 0.258 = nav symbol and icons raised up - SetMinimapComponentPosition("minimap", "L", "B", -0.0100 + minimapOffset, -0.030, 0.180, 0.258) + SetMinimapComponentPosition('minimap', 'L', 'B', -0.0100 + minimapOffset, -0.030, 0.180, 0.258) -- icons within map - SetMinimapComponentPosition("minimap_mask", "L", "B", 0.200 + minimapOffset, 0.0, 0.065, 0.20) + SetMinimapComponentPosition('minimap_mask', 'L', 'B', 0.200 + minimapOffset, 0.0, 0.065, 0.20) -- -0.00 = map pulled left -- 0.015 = map raised up @@ -435,7 +437,7 @@ RegisterNetEvent("hud:client:LoadMap", function() end Wait(1200) if Menu.isMapNotifChecked then - QBCore.Functions.Notify(Lang:t("notify.loaded_circle_map")) + QBCore.Functions.Notify(Lang:t('notify.loaded_circle_map')) end end end) @@ -443,20 +445,20 @@ end) RegisterNUICallback('ToggleMapShape', function(_, cb) Wait(50) if not Menu.isHideMapChecked then - Menu.isToggleMapShapeChecked = Menu.isToggleMapShapeChecked == "circle" and "square" or "circle" + Menu.isToggleMapShapeChecked = Menu.isToggleMapShapeChecked == 'circle' and 'square' or 'circle' Wait(50) - TriggerEvent("hud:client:LoadMap") + TriggerEvent('hud:client:LoadMap') end - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('ToggleMapBorders', function(_, cb) Wait(50) Menu.isToggleMapBordersChecked = not Menu.isToggleMapBordersChecked if Menu.isToggleMapBordersChecked then - if Menu.isToggleMapShapeChecked == "square" then + if Menu.isToggleMapShapeChecked == 'square' then showSquareB = true else showCircleB = true @@ -465,66 +467,66 @@ RegisterNUICallback('ToggleMapBorders', function(_, cb) showSquareB = false showCircleB = false end - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('dynamicEngine', function(_, cb) Wait(50) Menu.isDynamicEngineChecked = not Menu.isDynamicEngineChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('dynamicNitro', function(_, cb) Wait(50) Menu.isDynamicNitroChecked = not Menu.isDynamicNitroChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) -- Compass RegisterNUICallback('showCompassBase', function(_, cb) - Wait(50) + Wait(50) Menu.isCompassShowChecked = not Menu.isCompassShowChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('showStreetsNames', function(_, cb) - Wait(50) + Wait(50) Menu.isShowStreetsChecked = not Menu.isShowStreetsChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('showPointerIndex', function(_, cb) - Wait(50) + Wait(50) Menu.isPointerShowChecked = not Menu.isPointerShowChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('showDegreesNum', function(_, cb) - Wait(50) + Wait(50) Menu.isDegreesShowChecked = not Menu.isDegreesShowChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('changeCompassFPS', function(_, cb) - Wait(50) + Wait(50) Menu.isChangeCompassFPSChecked = not Menu.isChangeCompassFPSChecked - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNUICallback('cinematicMode', function(_, cb) @@ -533,19 +535,19 @@ RegisterNUICallback('cinematicMode', function(_, cb) CinematicShow(false) Menu.isCinematicModeChecked = false if Menu.isCinematicNotifChecked then - QBCore.Functions.Notify(Lang:t("notify.cinematic_off"), 'error') + QBCore.Functions.Notify(Lang:t('notify.cinematic_off'), 'error') end DisplayRadar(1) else CinematicShow(true) Menu.isCinematicModeChecked = true if Menu.isCinematicNotifChecked then - QBCore.Functions.Notify(Lang:t("notify.cinematic_on")) + QBCore.Functions.Notify(Lang:t('notify.cinematic_on')) end end - TriggerEvent("hud:client:playHudChecklistSound") + TriggerEvent('hud:client:playHudChecklistSound') saveSettings() - cb("ok") + cb('ok') end) RegisterNetEvent('hud:client:ToggleAirHud', function() @@ -582,7 +584,7 @@ RegisterNetEvent('hud:client:UpdateHarness', function(harnessHp) hp = harnessHp end) -RegisterNetEvent("qb-admin:client:ToggleDevmode", function() +RegisterNetEvent('qb-admin:client:ToggleDevmode', function() dev = not dev end) @@ -640,7 +642,10 @@ local prevVehicleStats = { nil, nil, nil, nil, nil, nil, nil, nil, nil, nil } local function updateVehicleHud(data) local shouldUpdate = false for k, v in pairs(data) do - if prevVehicleStats[k] ~= v then shouldUpdate = true break end + if prevVehicleStats[k] ~= v then + shouldUpdate = true + break + end end prevVehicleStats = data if shouldUpdate then @@ -695,7 +700,7 @@ CreateThread(function() armed = false end end - playerDead = IsEntityDead(player) or PlayerData.metadata["inlaststand"] or PlayerData.metadata["isdead"] or false + playerDead = IsEntityDead(player) or PlayerData.metadata['inlaststand'] or PlayerData.metadata['isdead'] or false parachute = GetPedParachuteState(player) -- Stamina if not IsEntityInWater(player) then @@ -716,39 +721,39 @@ CreateThread(function() end local vehicle = GetVehiclePedIsIn(player) if not (IsPedInAnyVehicle(player) and not IsThisModelABicycle(vehicle)) then - updatePlayerHud({ - show, - Menu.isDynamicHealthChecked, - Menu.isDynamicArmorChecked, - Menu.isDynamicHungerChecked, - Menu.isDynamicThirstChecked, - Menu.isDynamicStressChecked, - Menu.isDynamicOxygenChecked, - Menu.isDynamicEngineChecked, - Menu.isDynamicNitroChecked, - GetEntityHealth(player) - 100, - playerDead, - GetPedArmour(player), - thirst, - hunger, - stress, - voice, - LocalPlayer.state['radioChannel'], - talking, - armed, - oxygen, - parachute, - -1, - cruiseOn, - nitroActive, - harness, - hp, - math.ceil(GetEntitySpeed(vehicle) * speedMultiplier), - -1, - Menu.isCinematicModeChecked, - dev, - radioActive, - }) + updatePlayerHud({ + show, + Menu.isDynamicHealthChecked, + Menu.isDynamicArmorChecked, + Menu.isDynamicHungerChecked, + Menu.isDynamicThirstChecked, + Menu.isDynamicStressChecked, + Menu.isDynamicOxygenChecked, + Menu.isDynamicEngineChecked, + Menu.isDynamicNitroChecked, + GetEntityHealth(player) - 100, + playerDead, + GetPedArmour(player), + thirst, + hunger, + stress, + voice, + LocalPlayer.state['radioChannel'], + talking, + armed, + oxygen, + parachute, + -1, + cruiseOn, + nitroActive, + harness, + hp, + math.ceil(GetEntitySpeed(vehicle) * speedMultiplier), + -1, + Menu.isCinematicModeChecked, + dev, + radioActive, + }) end -- Vehicle hud if IsPedInAnyHeli(player) or IsPedInAnyPlane(player) then @@ -839,8 +844,8 @@ CreateThread(function() if IsPedInAnyVehicle(ped, false) and not IsThisModelABicycle(GetEntityModel(GetVehiclePedIsIn(ped, false))) then if exports['LegacyFuel']:GetFuel(GetVehiclePedIsIn(ped, false)) <= 20 then -- At 20% Fuel Left if Menu.isLowFuelChecked then - TriggerServerEvent("InteractSound_SV:PlayOnSource", "pager", 0.10) - QBCore.Functions.Notify(Lang:t("notify.low_fuel"), "error") + TriggerServerEvent('InteractSound_SV:PlayOnSource', 'pager', 0.10) + QBCore.Functions.Notify(Lang:t('notify.low_fuel'), 'error') Wait(60000) -- repeats every 1 min until empty end end @@ -1016,7 +1021,7 @@ local function BlackBars() end CreateThread(function() - local minimap = RequestScaleformMovie("minimap") + local minimap = RequestScaleformMovie('minimap') if not HasScaleformMovieLoaded(minimap) then RequestScaleformMovie(minimap) while not HasScaleformMovieLoaded(minimap) do @@ -1042,20 +1047,23 @@ end) -- Compass function round(num, numDecimalPlaces) - local mult = 10^(numDecimalPlaces or 0) + local mult = 10 ^ (numDecimalPlaces or 0) return math.floor(num + 0.5 * mult) end -local prevBaseplateStats = { nil, nil, nil, nil, nil, nil, nil} +local prevBaseplateStats = { nil, nil, nil, nil, nil, nil, nil } local function updateBaseplateHud(data) local shouldUpdate = false for k, v in pairs(data) do - if prevBaseplateStats[k] ~= v then shouldUpdate = true break end + if prevBaseplateStats[k] ~= v then + shouldUpdate = true + break + end end prevBaseplateStats = data if shouldUpdate then - SendNUIMessage ({ + SendNUIMessage({ action = 'baseplate', show = data[1], street1 = data[2], @@ -1085,9 +1093,9 @@ end -- Compass Update loop CreateThread(function() - local lastHeading = 1 + local lastHeading = 1 local heading - while true do + while true do if Menu.isChangeCompassFPSChecked then Wait(50) else @@ -1101,42 +1109,42 @@ CreateThread(function() else heading = tostring(round(360.0 - GetEntityHeading(player))) end - if heading == '360' then heading = '0' end - if heading ~= lastHeading then - if IsPedInAnyVehicle(player) then - local crossroads = getCrossroads(player) - SendNUIMessage ({ + if heading == '360' then heading = '0' end + if heading ~= lastHeading then + if IsPedInAnyVehicle(player) then + local crossroads = getCrossroads(player) + SendNUIMessage({ + action = 'update', + value = heading + }) + updateBaseplateHud({ + show, + crossroads[1], + crossroads[2], + Menu.isCompassShowChecked, + Menu.isShowStreetsChecked, + Menu.isPointerShowChecked, + Menu.isDegreesShowChecked, + }) + else + if Menu.isOutCompassChecked then + SendNUIMessage({ action = 'update', value = heading }) - updateBaseplateHud({ - show, - crossroads[1], - crossroads[2], - Menu.isCompassShowChecked, - Menu.isShowStreetsChecked, - Menu.isPointerShowChecked, - Menu.isDegreesShowChecked, + SendNUIMessage({ + action = 'baseplate', + show = true, + showCompass = true, }) - else - if Menu.isOutCompassChecked then - SendNUIMessage ({ - action = 'update', - value = heading - }) - SendNUIMessage ({ - action = 'baseplate', - show = true, - showCompass = true, - }) - else - SendNUIMessage ({ - action = 'baseplate', - show = false, - }) - end - end - end - lastHeading = heading - end + else + SendNUIMessage({ + action = 'baseplate', + show = false, + }) + end + end + end + lastHeading = heading + end end) diff --git a/config.lua b/config.lua index 174eb13..5daf3b9 100644 --- a/config.lua +++ b/config.lua @@ -1,11 +1,11 @@ Config = {} -Config.OpenMenu = 'I' -- https://docs.fivem.net/docs/game-references/input-mapper-parameter-ids/keyboard/ -Config.StressChance = 0.1 -- Default: 10% -- Percentage Stress Chance When Shooting (0-1) -Config.UseMPH = true -- If true speed math will be done as MPH, if false KPH will be used (YOU HAVE TO CHANGE CONTENT IN STYLES.CSS TO DISPLAY THE CORRECT TEXT) -Config.MinimumStress = 50 -- Minimum Stress Level For Screen Shaking +Config.OpenMenu = 'I' -- https://docs.fivem.net/docs/game-references/input-mapper-parameter-ids/keyboard/ +Config.StressChance = 0.1 -- Default: 10% -- Percentage Stress Chance When Shooting (0-1) +Config.UseMPH = true -- If true speed math will be done as MPH, if false KPH will be used (YOU HAVE TO CHANGE CONTENT IN STYLES.CSS TO DISPLAY THE CORRECT TEXT) +Config.MinimumStress = 50 -- Minimum Stress Level For Screen Shaking Config.MinimumSpeedUnbuckled = 50 -- Going Over This Speed Unbuckled Will Cause Stress -Config.MinimumSpeed = 100 -- Going Over This Speed While Buckled Will Cause Stress -Config.DisableStress = false -- If true will disable stress completely for all players +Config.MinimumSpeed = 100 -- Going Over This Speed While Buckled Will Cause Stress +Config.DisableStress = false -- If true will disable stress completely for all players -- Stress Config.WhitelistedWeaponArmed = { -- Disable showing armed icon from weapons in this table @@ -56,27 +56,27 @@ Config.WhitelistedWeaponStress = { -- Disable gaining stress from weapons in thi } Config.VehClassStress = { -- Enable/Disable gaining stress from vehicle classes in this table - ['0'] = true, -- Compacts - ['1'] = true, -- Sedans - ['2'] = true, -- SUVs - ['3'] = true, -- Coupes - ['4'] = true, -- Muscle - ['5'] = true, -- Sports Classics - ['6'] = true, -- Sports - ['7'] = true, -- Super - ['8'] = true, -- Motorcycles - ['9'] = true, -- Off Road - ['10'] = true, -- Industrial - ['11'] = true, -- Utility - ['12'] = true, -- Vans - ['13'] = false, -- Cycles - ['14'] = false, -- Boats - ['15'] = false, -- Helicopters - ['16'] = false, -- Planes - ['18'] = false, -- Emergency - ['19'] = false, -- Military - ['20'] = false, -- Commercial - ['21'] = false -- Trains + ['0'] = true, -- Compacts + ['1'] = true, -- Sedans + ['2'] = true, -- SUVs + ['3'] = true, -- Coupes + ['4'] = true, -- Muscle + ['5'] = true, -- Sports Classics + ['6'] = true, -- Sports + ['7'] = true, -- Super + ['8'] = true, -- Motorcycles + ['9'] = true, -- Off Road + ['10'] = true, -- Industrial + ['11'] = true, -- Utility + ['12'] = true, -- Vans + ['13'] = false, -- Cycles + ['14'] = false, -- Boats + ['15'] = false, -- Helicopters + ['16'] = false, -- Planes + ['18'] = false, -- Emergency + ['19'] = false, -- Military + ['20'] = false, -- Commercial + ['21'] = false -- Trains } Config.WhitelistedVehicles = { -- Disable gaining stress from speeding in any vehicle in this table @@ -89,7 +89,7 @@ Config.WhitelistedJobs = { -- Disable stress completely for players with matchin } Config.Intensity = { - ["blur"] = { + ['blur'] = { [1] = { min = 50, max = 60, @@ -147,31 +147,31 @@ Config.EffectInterval = { } Config.Menu = { - isOutMapChecked = false, -- isOutMapChecked - isOutCompassChecked = false, -- isOutMapChecked - isCompassFollowChecked = true, -- isCompassFollowChecked - isOpenMenuSoundsChecked = true, -- isOpenMenuSoundsChecked - isResetSoundsChecked = true, -- isResetSoundsChecked - isListSoundsChecked = true, -- isListSoundsChecked - isMapNotifChecked = true, -- isMapNotifChecked - isLowFuelChecked = true, -- isLowFuelChecked - isCinematicNotifChecked = true, -- isCinematicNotifChecked - isDynamicHealthChecked = true, -- isDynamicHealthChecked - isDynamicArmorChecked= true, -- isDynamicArmorChecked - isDynamicHungerChecked = true, -- isDynamicHungerChecked - isDynamicThirstChecked = true, -- isDynamicThirstChecked - isDynamicStressChecked = true, -- isDynamicStressChecked - isDynamicOxygenChecked = true, -- isDynamicOxygenChecked - isChangeFPSChecked = true, -- isChangeFPSChecked - isHideMapChecked = false, -- isHideMapChecked - isToggleMapBordersChecked = true, -- isToggleMapBordersChecked - isDynamicEngineChecked = true, -- isDynamicEngineChecked - isDynamicNitroChecked = true, -- isDynamicNitroChecked - isChangeCompassFPSChecked = true, -- isChangeCompassFPSChecked - isCompassShowChecked = true, -- isShowCompassChecked - isShowStreetsChecked = true, -- isShowStreetsChecked - isPointerShowChecked = true, -- isPointerShowChecked - isDegreesShowChecked = true, -- isDegreesShowChecked - isCinematicModeChecked = false, -- isCinematicModeChecked + isOutMapChecked = false, -- isOutMapChecked + isOutCompassChecked = false, -- isOutMapChecked + isCompassFollowChecked = true, -- isCompassFollowChecked + isOpenMenuSoundsChecked = true, -- isOpenMenuSoundsChecked + isResetSoundsChecked = true, -- isResetSoundsChecked + isListSoundsChecked = true, -- isListSoundsChecked + isMapNotifChecked = true, -- isMapNotifChecked + isLowFuelChecked = true, -- isLowFuelChecked + isCinematicNotifChecked = true, -- isCinematicNotifChecked + isDynamicHealthChecked = true, -- isDynamicHealthChecked + isDynamicArmorChecked = true, -- isDynamicArmorChecked + isDynamicHungerChecked = true, -- isDynamicHungerChecked + isDynamicThirstChecked = true, -- isDynamicThirstChecked + isDynamicStressChecked = true, -- isDynamicStressChecked + isDynamicOxygenChecked = true, -- isDynamicOxygenChecked + isChangeFPSChecked = true, -- isChangeFPSChecked + isHideMapChecked = false, -- isHideMapChecked + isToggleMapBordersChecked = true, -- isToggleMapBordersChecked + isDynamicEngineChecked = true, -- isDynamicEngineChecked + isDynamicNitroChecked = true, -- isDynamicNitroChecked + isChangeCompassFPSChecked = true, -- isChangeCompassFPSChecked + isCompassShowChecked = true, -- isShowCompassChecked + isShowStreetsChecked = true, -- isShowStreetsChecked + isPointerShowChecked = true, -- isPointerShowChecked + isDegreesShowChecked = true, -- isDegreesShowChecked + isCinematicModeChecked = false, -- isCinematicModeChecked isToggleMapShapeChecked = 'square', -- isToggleMapShapeChecked -} \ No newline at end of file +} diff --git a/fxmanifest.lua b/fxmanifest.lua index ae6f2ea..edde71b 100644 --- a/fxmanifest.lua +++ b/fxmanifest.lua @@ -1,6 +1,6 @@ fx_version 'cerulean' game 'gta5' - +lua54 'yes' description 'qb-hud' version '2.2.0' @@ -23,5 +23,3 @@ files { 'html/responsive.css', 'html/app.js', } - -lua54 'yes' diff --git a/html/app.js b/html/app.js index 08ff30f..1d1bd48 100644 --- a/html/app.js +++ b/html/app.js @@ -1,1000 +1,1008 @@ -const { ref, onBeforeUnmount } = Vue +const { ref, onBeforeUnmount } = Vue; const app = Vue.createApp({ - data: function() { - return { - isOutMapChecked: this.initIsOutMapChecked(), - isOutCompassChecked: this.initIsOutCompassChecked(), - isCompassFollowChecked: this.initIsCompassFollowChecked(), - isOpenMenuSoundsChecked: this.initIsOpenMenuSoundsChecked(), - isResetSoundsChecked: this.initIsResetSoundsChecked(), - isListSoundsChecked: this.initIsListSoundsChecked(), - isMapNotifChecked: this.initIsMapNotifChecked(), - isLowFuelChecked: this.initIsLowFuelChecked(), - isCinematicNotifChecked: this.initIsCinematicNotifChecked(), - isDynamicHealthChecked: this.initIsDynamicHealthChecked(), - isDynamicArmorChecked: this.initIsDynamicArmorChecked(), - isDynamicHungerChecked: this.initIsDynamicHungerChecked(), - isDynamicThirstChecked: this.initIsDynamicThirstChecked(), - isDynamicStressChecked: this.initIsDynamicStressChecked(), - isDynamicOxygenChecked: this.initIsDynamicOxygenChecked(), - isChangeFPSChecked: this.initIsChangeFPSChecked(), - isToggleMapShapeChecked: this.initIsToggleMapShapeChecked(), - isHideMapChecked: this.initIsHideMapChecked(), - isToggleMapBordersChecked: this.initIsToggleMapBordersChecked(), - isDynamicEngineChecked: this.initIsDynamicEngineChecked(), - isDynamicNitroChecked: this.initIsDynamicNitroChecked(), - isChangeCompassFPSChecked: this.initIsChangeCompassFPSChecked(), - isShowCompassChecked: this.initIsShowCompassChecked(), - isShowStreetsChecked: this.initIsShowStreetsChecked(), - isPointerShowChecked: this.initIsPointerShowChecked(), - isDegreesShowChecked: this.initIsDegreesShowChecked(), - isCinematicModeChecked: this.initisCinematicModeChecked(), - }; - }, - setup () { - const progress = ref([ - { loading: false, percentage: 0 }, - { loading: false, percentage: 0 }, - { loading: false, percentage: 0 } - ]) + data: function () { + return { + isOutMapChecked: this.initIsOutMapChecked(), + isOutCompassChecked: this.initIsOutCompassChecked(), + isCompassFollowChecked: this.initIsCompassFollowChecked(), + isOpenMenuSoundsChecked: this.initIsOpenMenuSoundsChecked(), + isResetSoundsChecked: this.initIsResetSoundsChecked(), + isListSoundsChecked: this.initIsListSoundsChecked(), + isMapNotifChecked: this.initIsMapNotifChecked(), + isLowFuelChecked: this.initIsLowFuelChecked(), + isCinematicNotifChecked: this.initIsCinematicNotifChecked(), + isDynamicHealthChecked: this.initIsDynamicHealthChecked(), + isDynamicArmorChecked: this.initIsDynamicArmorChecked(), + isDynamicHungerChecked: this.initIsDynamicHungerChecked(), + isDynamicThirstChecked: this.initIsDynamicThirstChecked(), + isDynamicStressChecked: this.initIsDynamicStressChecked(), + isDynamicOxygenChecked: this.initIsDynamicOxygenChecked(), + isChangeFPSChecked: this.initIsChangeFPSChecked(), + isToggleMapShapeChecked: this.initIsToggleMapShapeChecked(), + isHideMapChecked: this.initIsHideMapChecked(), + isToggleMapBordersChecked: this.initIsToggleMapBordersChecked(), + isDynamicEngineChecked: this.initIsDynamicEngineChecked(), + isDynamicNitroChecked: this.initIsDynamicNitroChecked(), + isChangeCompassFPSChecked: this.initIsChangeCompassFPSChecked(), + isShowCompassChecked: this.initIsShowCompassChecked(), + isShowStreetsChecked: this.initIsShowStreetsChecked(), + isPointerShowChecked: this.initIsPointerShowChecked(), + isDegreesShowChecked: this.initIsDegreesShowChecked(), + isCinematicModeChecked: this.initisCinematicModeChecked(), + }; + }, + setup() { + const progress = ref([ + { loading: false, percentage: 0 }, + { loading: false, percentage: 0 }, + { loading: false, percentage: 0 }, + ]); - const intervals = [ null, null, null ] + const intervals = [null, null, null]; - function startComputing (id) { - progress.value[ id ].loading = true - progress.value[ id ].percentage = 0 + function startComputing(id) { + progress.value[id].loading = true; + progress.value[id].percentage = 0; - intervals[ id ] = setInterval(() => { - progress.value[ id ].percentage += Math.floor(Math.random() * 8 + 10) - if (progress.value[ id ].percentage >= 100) { - clearInterval(intervals[ id ]) - progress.value[ id ].loading = false + intervals[id] = setInterval(() => { + progress.value[id].percentage += Math.floor(Math.random() * 8 + 10); + if (progress.value[id].percentage >= 100) { + clearInterval(intervals[id]); + progress.value[id].loading = false; + } + }, 700); } - }, 700) - } - onBeforeUnmount(() => { - intervals.forEach(val => { - clearInterval(val) - }) - }) - return { - framework: { - plugins: [ - 'LocalStorage', - 'SessionStorage' - ] - }, - tab: ref('hud'), - splitterModel: ref(20), - selection: ref([]), - progress, - startComputing, - } - }, - watch: { - isOutMapChecked: function() { - localStorage.setItem("isOutMapChecked", this.isOutMapChecked); - }, - isOutCompassChecked: function() { - localStorage.setItem("isOutCompassChecked", this.isOutCompassChecked); - }, - isCompassFollowChecked: function() { - localStorage.setItem("isCompassFollowChecked", this.isCompassFollowChecked); - }, - isOpenMenuSoundsChecked: function() { - localStorage.setItem("isOpenMenuSoundsChecked", this.isOpenMenuSoundsChecked); - }, - isResetSoundsChecked: function() { - localStorage.setItem("isResetSoundsChecked", this.isResetSoundsChecked); - }, - isListSoundsChecked: function() { - localStorage.setItem("isListSoundsChecked", this.isListSoundsChecked); - }, - isMapNotifChecked: function() { - localStorage.setItem("isMapNotifChecked", this.isMapNotifChecked); - }, - isLowFuelChecked: function() { - localStorage.setItem("isLowFuelChecked", this.isLowFuelChecked); - }, - isCinematicNotifChecked: function() { - localStorage.setItem("isCinematicNotifChecked", this.isCinematicNotifChecked); - }, - isDynamicHealthChecked: function() { - localStorage.setItem("isDynamicHealthChecked", this.isDynamicHealthChecked); - }, - isDynamicArmorChecked: function() { - localStorage.setItem("isDynamicArmorChecked", this.isDynamicArmorChecked); - }, - isDynamicHungerChecked: function() { - localStorage.setItem("isDynamicHungerChecked", this.isDynamicHungerChecked); - }, - isDynamicThirstChecked: function() { - localStorage.setItem("isDynamicThirstChecked", this.isDynamicThirstChecked); - }, - isDynamicStressChecked: function() { - localStorage.setItem("isDynamicStressChecked", this.isDynamicStressChecked); - }, - isDynamicOxygenChecked: function() { - localStorage.setItem("isDynamicOxygenChecked", this.isDynamicOxygenChecked); - }, - isChangeFPSChecked: function() { - localStorage.setItem("isChangeFPSChecked", this.isChangeFPSChecked); - }, - isToggleMapShapeChecked: function() { - localStorage.setItem("isToggleMapShapeChecked", this.isToggleMapShapeChecked); - }, - isHideMapChecked: function() { - localStorage.setItem("isHideMapChecked", this.isHideMapChecked); - }, - isToggleMapBordersChecked: function() { - localStorage.setItem("isToggleMapBordersChecked", this.isToggleMapBordersChecked); - }, - isDynamicEngineChecked: function() { - localStorage.setItem("isDynamicEngineChecked", this.isDynamicEngineChecked); - }, - isDynamicNitroChecked: function() { - localStorage.setItem("isDynamicNitroChecked", this.isDynamicNitroChecked); - }, - isChangeCompassFPSChecked: function() { - localStorage.setItem("isChangeCompassFPSChecked", this.isChangeCompassFPSChecked); - }, - isShowCompassChecked: function() { - localStorage.setItem("isShowCompassChecked", this.isShowCompassChecked); - }, - isShowStreetsChecked: function() { - localStorage.setItem("isShowStreetsChecked", this.isShowStreetsChecked); - }, - isPointerShowChecked: function() { - localStorage.setItem("isPointerShowChecked", this.isPointerShowChecked); - }, - isDegreesShowChecked: function() { - localStorage.setItem("isDegreesShowChecked", this.isDegreesShowChecked); - }, - isCinematicModeChecked: function() { - localStorage.setItem("isCinematicModeChecked", this.isCinematicModeChecked); - }, - }, - methods: { - initIsOutMapChecked: function() { - const stored = localStorage.getItem("isOutMapChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsOutCompassChecked: function() { - const stored = localStorage.getItem("isOutCompassChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsCompassFollowChecked: function() { - const stored = localStorage.getItem("isCompassFollowChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsOpenMenuSoundsChecked: function() { - const stored = localStorage.getItem("isOpenMenuSoundsChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsResetSoundsChecked: function() { - const stored = localStorage.getItem("isResetSoundsChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsListSoundsChecked: function() { - const stored = localStorage.getItem("isListSoundsChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsMapNotifChecked: function() { - const stored = localStorage.getItem("isMapNotifChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsLowFuelChecked: function() { - const stored = localStorage.getItem("isLowFuelChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsCinematicNotifChecked: function() { - const stored = localStorage.getItem("isCinematicNotifChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsDynamicHealthChecked: function() { - const stored = localStorage.getItem("isDynamicHealthChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - initIsDynamicArmorChecked: function() { - const stored = localStorage.getItem("isDynamicArmorChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - initIsDynamicHungerChecked: function() { - const stored = localStorage.getItem("isDynamicHungerChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - initIsDynamicThirstChecked: function() { - const stored = localStorage.getItem("isDynamicThirstChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - initIsDynamicStressChecked: function() { - const stored = localStorage.getItem("isDynamicStressChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - initIsDynamicOxygenChecked: function() { - const stored = localStorage.getItem("isDynamicOxygenChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - initIsChangeFPSChecked: function() { - const stored = localStorage.getItem("isChangeFPSChecked"); - if (stored === null) { - return 'Optimized'; - } else { - return stored; - } - }, - initIsToggleMapShapeChecked: function() { - const stored = localStorage.getItem("isToggleMapShapeChecked"); - if (stored === null) { - return 'Circle'; - } else { - return stored; - } - }, - initIsHideMapChecked: function() { - const stored = localStorage.getItem("isHideMapChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsToggleMapBordersChecked: function() { - const stored = localStorage.getItem("isToggleMapBordersChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsDynamicEngineChecked: function() { - const stored = localStorage.getItem("isDynamicEngineChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - initIsDynamicNitroChecked: function() { - const stored = localStorage.getItem("isDynamicNitroChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - initIsChangeCompassFPSChecked: function() { - const stored = localStorage.getItem("isChangeCompassFPSChecked"); - if (stored === null) { - return 'Optimized'; - } else { - return stored; - } - }, - initIsShowCompassChecked: function() { - const stored = localStorage.getItem("isShowCompassChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsShowStreetsChecked: function() { - const stored = localStorage.getItem("isShowStreetsChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsPointerShowChecked: function() { - const stored = localStorage.getItem("isPointerShowChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initIsDegreesShowChecked: function() { - const stored = localStorage.getItem("isDegreesShowChecked"); - if (stored === null) { - return true; - } else { - return stored == 'true'; - } - }, - initisCinematicModeChecked: function() { - const stored = localStorage.getItem("isCinematicModeChecked"); - if (stored === null) { - return false; - } else { - return stored == 'true'; - } - }, - resetStorage: function(event) { - targetId = event.currentTarget.id; - localStorage.clear(); - resetStorage() - }, - restartHud: function(event) { - targetId = event.currentTarget.id; - restartHud() - }, - showOutMap: function(event) { - targetId = event.currentTarget.id; - showOutMap() - }, - showOutCompass: function(event) { - targetId = event.currentTarget.id; - showOutCompass() - }, - showFollowCompass: function(event) { - targetId = event.currentTarget.id; - showFollowCompass() - }, - openMenuSounds: function(event) { - targetId = event.currentTarget.id; - openMenuSounds() - }, - resetHudSounds: function(event) { - targetId = event.currentTarget.id; - resetHudSounds() - }, - checklistSounds: function(event) { - targetId = event.currentTarget.id; - checklistSounds() - }, - showMapNotif: function(event) { - targetId = event.currentTarget.id; - showMapNotif() - }, - showFuelAlert: function(event) { - targetId = event.currentTarget.id; - showFuelAlert() - }, - showCinematicNotif: function(event) { - targetId = event.currentTarget.id; - showCinematicNotif() - }, - dynamicHealth: function(event) { - targetId = event.currentTarget.id; - dynamicHealth() - }, - dynamicArmor: function(event) { - targetId = event.currentTarget.id; - dynamicArmor() - }, - dynamicHunger: function(event) { - targetId = event.currentTarget.id; - dynamicHunger() - }, - dynamicThirst: function(event) { - targetId = event.currentTarget.id; - dynamicThirst() - }, - dynamicStress: function(event) { - targetId = event.currentTarget.id; - dynamicStress() - }, - dynamicOxygen: function(event) { - targetId = event.currentTarget.id; - dynamicOxygen() - }, - changeFPS: function(event) { - targetId = event.currentTarget.id; - changeFPS() - }, - ToggleMapShape: function(event) { - targetId = event.currentTarget.id; - ToggleMapShape() - }, - HideMap: function(event) { - targetId = event.currentTarget.id; - HideMap() - }, - ToggleMapBorders: function(event) { - targetId = event.currentTarget.id; - ToggleMapBorders() - }, - dynamicEngine: function(event) { - targetId = event.currentTarget.id; - dynamicEngine() - }, - dynamicNitro: function(event) { - targetId = event.currentTarget.id; - dynamicNitro() - }, - changeCompassFPS: function(event) { - targetId = event.currentTarget.id; - changeCompassFPS() - }, - showCompassBase: function(event) { - targetId = event.currentTarget.id; - showCompassBase() + onBeforeUnmount(() => { + intervals.forEach((val) => { + clearInterval(val); + }); + }); + return { + framework: { + plugins: ["LocalStorage", "SessionStorage"], + }, + tab: ref("hud"), + splitterModel: ref(20), + selection: ref([]), + progress, + startComputing, + }; }, - showStreetsNames: function(event) { - targetId = event.currentTarget.id; - showStreetsNames() + watch: { + isOutMapChecked: function () { + localStorage.setItem("isOutMapChecked", this.isOutMapChecked); + }, + isOutCompassChecked: function () { + localStorage.setItem("isOutCompassChecked", this.isOutCompassChecked); + }, + isCompassFollowChecked: function () { + localStorage.setItem("isCompassFollowChecked", this.isCompassFollowChecked); + }, + isOpenMenuSoundsChecked: function () { + localStorage.setItem("isOpenMenuSoundsChecked", this.isOpenMenuSoundsChecked); + }, + isResetSoundsChecked: function () { + localStorage.setItem("isResetSoundsChecked", this.isResetSoundsChecked); + }, + isListSoundsChecked: function () { + localStorage.setItem("isListSoundsChecked", this.isListSoundsChecked); + }, + isMapNotifChecked: function () { + localStorage.setItem("isMapNotifChecked", this.isMapNotifChecked); + }, + isLowFuelChecked: function () { + localStorage.setItem("isLowFuelChecked", this.isLowFuelChecked); + }, + isCinematicNotifChecked: function () { + localStorage.setItem("isCinematicNotifChecked", this.isCinematicNotifChecked); + }, + isDynamicHealthChecked: function () { + localStorage.setItem("isDynamicHealthChecked", this.isDynamicHealthChecked); + }, + isDynamicArmorChecked: function () { + localStorage.setItem("isDynamicArmorChecked", this.isDynamicArmorChecked); + }, + isDynamicHungerChecked: function () { + localStorage.setItem("isDynamicHungerChecked", this.isDynamicHungerChecked); + }, + isDynamicThirstChecked: function () { + localStorage.setItem("isDynamicThirstChecked", this.isDynamicThirstChecked); + }, + isDynamicStressChecked: function () { + localStorage.setItem("isDynamicStressChecked", this.isDynamicStressChecked); + }, + isDynamicOxygenChecked: function () { + localStorage.setItem("isDynamicOxygenChecked", this.isDynamicOxygenChecked); + }, + isChangeFPSChecked: function () { + localStorage.setItem("isChangeFPSChecked", this.isChangeFPSChecked); + }, + isToggleMapShapeChecked: function () { + localStorage.setItem("isToggleMapShapeChecked", this.isToggleMapShapeChecked); + }, + isHideMapChecked: function () { + localStorage.setItem("isHideMapChecked", this.isHideMapChecked); + }, + isToggleMapBordersChecked: function () { + localStorage.setItem("isToggleMapBordersChecked", this.isToggleMapBordersChecked); + }, + isDynamicEngineChecked: function () { + localStorage.setItem("isDynamicEngineChecked", this.isDynamicEngineChecked); + }, + isDynamicNitroChecked: function () { + localStorage.setItem("isDynamicNitroChecked", this.isDynamicNitroChecked); + }, + isChangeCompassFPSChecked: function () { + localStorage.setItem("isChangeCompassFPSChecked", this.isChangeCompassFPSChecked); + }, + isShowCompassChecked: function () { + localStorage.setItem("isShowCompassChecked", this.isShowCompassChecked); + }, + isShowStreetsChecked: function () { + localStorage.setItem("isShowStreetsChecked", this.isShowStreetsChecked); + }, + isPointerShowChecked: function () { + localStorage.setItem("isPointerShowChecked", this.isPointerShowChecked); + }, + isDegreesShowChecked: function () { + localStorage.setItem("isDegreesShowChecked", this.isDegreesShowChecked); + }, + isCinematicModeChecked: function () { + localStorage.setItem("isCinematicModeChecked", this.isCinematicModeChecked); + }, }, - showPointerIndex: function(event) { - targetId = event.currentTarget.id; - showPointerIndex() + methods: { + initIsOutMapChecked: function () { + const stored = localStorage.getItem("isOutMapChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsOutCompassChecked: function () { + const stored = localStorage.getItem("isOutCompassChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsCompassFollowChecked: function () { + const stored = localStorage.getItem("isCompassFollowChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsOpenMenuSoundsChecked: function () { + const stored = localStorage.getItem("isOpenMenuSoundsChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsResetSoundsChecked: function () { + const stored = localStorage.getItem("isResetSoundsChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsListSoundsChecked: function () { + const stored = localStorage.getItem("isListSoundsChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsMapNotifChecked: function () { + const stored = localStorage.getItem("isMapNotifChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsLowFuelChecked: function () { + const stored = localStorage.getItem("isLowFuelChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsCinematicNotifChecked: function () { + const stored = localStorage.getItem("isCinematicNotifChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsDynamicHealthChecked: function () { + const stored = localStorage.getItem("isDynamicHealthChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + initIsDynamicArmorChecked: function () { + const stored = localStorage.getItem("isDynamicArmorChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + initIsDynamicHungerChecked: function () { + const stored = localStorage.getItem("isDynamicHungerChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + initIsDynamicThirstChecked: function () { + const stored = localStorage.getItem("isDynamicThirstChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + initIsDynamicStressChecked: function () { + const stored = localStorage.getItem("isDynamicStressChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + initIsDynamicOxygenChecked: function () { + const stored = localStorage.getItem("isDynamicOxygenChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + initIsChangeFPSChecked: function () { + const stored = localStorage.getItem("isChangeFPSChecked"); + if (stored === null) { + return "Optimized"; + } else { + return stored; + } + }, + initIsToggleMapShapeChecked: function () { + const stored = localStorage.getItem("isToggleMapShapeChecked"); + if (stored === null) { + return "Circle"; + } else { + return stored; + } + }, + initIsHideMapChecked: function () { + const stored = localStorage.getItem("isHideMapChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsToggleMapBordersChecked: function () { + const stored = localStorage.getItem("isToggleMapBordersChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsDynamicEngineChecked: function () { + const stored = localStorage.getItem("isDynamicEngineChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + initIsDynamicNitroChecked: function () { + const stored = localStorage.getItem("isDynamicNitroChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + initIsChangeCompassFPSChecked: function () { + const stored = localStorage.getItem("isChangeCompassFPSChecked"); + if (stored === null) { + return "Optimized"; + } else { + return stored; + } + }, + initIsShowCompassChecked: function () { + const stored = localStorage.getItem("isShowCompassChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsShowStreetsChecked: function () { + const stored = localStorage.getItem("isShowStreetsChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsPointerShowChecked: function () { + const stored = localStorage.getItem("isPointerShowChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initIsDegreesShowChecked: function () { + const stored = localStorage.getItem("isDegreesShowChecked"); + if (stored === null) { + return true; + } else { + return stored == "true"; + } + }, + initisCinematicModeChecked: function () { + const stored = localStorage.getItem("isCinematicModeChecked"); + if (stored === null) { + return false; + } else { + return stored == "true"; + } + }, + resetStorage: function (event) { + targetId = event.currentTarget.id; + localStorage.clear(); + resetStorage(); + }, + restartHud: function (event) { + targetId = event.currentTarget.id; + restartHud(); + }, + showOutMap: function (event) { + targetId = event.currentTarget.id; + showOutMap(); + }, + showOutCompass: function (event) { + targetId = event.currentTarget.id; + showOutCompass(); + }, + showFollowCompass: function (event) { + targetId = event.currentTarget.id; + showFollowCompass(); + }, + openMenuSounds: function (event) { + targetId = event.currentTarget.id; + openMenuSounds(); + }, + resetHudSounds: function (event) { + targetId = event.currentTarget.id; + resetHudSounds(); + }, + checklistSounds: function (event) { + targetId = event.currentTarget.id; + checklistSounds(); + }, + showMapNotif: function (event) { + targetId = event.currentTarget.id; + showMapNotif(); + }, + showFuelAlert: function (event) { + targetId = event.currentTarget.id; + showFuelAlert(); + }, + showCinematicNotif: function (event) { + targetId = event.currentTarget.id; + showCinematicNotif(); + }, + dynamicHealth: function (event) { + targetId = event.currentTarget.id; + dynamicHealth(); + }, + dynamicArmor: function (event) { + targetId = event.currentTarget.id; + dynamicArmor(); + }, + dynamicHunger: function (event) { + targetId = event.currentTarget.id; + dynamicHunger(); + }, + dynamicThirst: function (event) { + targetId = event.currentTarget.id; + dynamicThirst(); + }, + dynamicStress: function (event) { + targetId = event.currentTarget.id; + dynamicStress(); + }, + dynamicOxygen: function (event) { + targetId = event.currentTarget.id; + dynamicOxygen(); + }, + changeFPS: function (event) { + targetId = event.currentTarget.id; + changeFPS(); + }, + ToggleMapShape: function (event) { + targetId = event.currentTarget.id; + ToggleMapShape(); + }, + HideMap: function (event) { + targetId = event.currentTarget.id; + HideMap(); + }, + ToggleMapBorders: function (event) { + targetId = event.currentTarget.id; + ToggleMapBorders(); + }, + dynamicEngine: function (event) { + targetId = event.currentTarget.id; + dynamicEngine(); + }, + dynamicNitro: function (event) { + targetId = event.currentTarget.id; + dynamicNitro(); + }, + changeCompassFPS: function (event) { + targetId = event.currentTarget.id; + changeCompassFPS(); + }, + showCompassBase: function (event) { + targetId = event.currentTarget.id; + showCompassBase(); + }, + showStreetsNames: function (event) { + targetId = event.currentTarget.id; + showStreetsNames(); + }, + showPointerIndex: function (event) { + targetId = event.currentTarget.id; + showPointerIndex(); + }, + showDegreesNum: function (event) { + targetId = event.currentTarget.id; + showDegreesNum(); + }, + cinematicMode: function (event) { + targetId = event.currentTarget.id; + cinematicMode(); + }, }, - showDegreesNum: function(event) { - targetId = event.currentTarget.id; - showDegreesNum() + mounted() { + this.listener = window.addEventListener("message", (event) => { + if (event.data.event === "isToggleMapShapeChecked" || event.data.event === "isChangeFPSChecked") { + eval(`this.${event.data.event} = "${event.data.toggle}"`); + } + }); }, - cinematicMode: function(event) { - targetId = event.currentTarget.id; - cinematicMode() - }, - }, - mounted() { - this.listener = window.addEventListener("message", (event) => { - if (event.data.event === 'isToggleMapShapeChecked' || event.data.event === 'isChangeFPSChecked') { - eval(`this.${event.data.event} = "${event.data.toggle}"`) - } - }); - }, -}) +}); -app.use(Quasar, { config: {} }) -app.mount('#menu') +app.use(Quasar, { config: {} }); +app.mount("#menu"); document.onkeyup = function (data) { - if (data.key == 'Escape') { - closeMenu() - } + if (data.key == "Escape") { + closeMenu(); + } }; function closeMenu() { - $("#openmenu").fadeOut(550); - $.post('https://qb-hud/closeMenu'); + $("#openmenu").fadeOut(550); + $.post("https://qb-hud/closeMenu"); } function restartHud() { - closeMenu() - $.post('https://qb-hud/restartHud'); + closeMenu(); + $.post("https://qb-hud/restartHud"); } function resetStorage() { - closeMenu() - $.post('https://qb-hud/resetStorage'); + closeMenu(); + $.post("https://qb-hud/resetStorage"); } function showOutMap() { - $.post('https://qb-hud/showOutMap'); + $.post("https://qb-hud/showOutMap"); } function showOutCompass() { - $.post('https://qb-hud/showOutCompass'); + $.post("https://qb-hud/showOutCompass"); } function showFollowCompass() { - $.post('https://qb-hud/showFollowCompass'); + $.post("https://qb-hud/showFollowCompass"); } function openMenuSounds() { - $.post('https://qb-hud/openMenuSounds'); + $.post("https://qb-hud/openMenuSounds"); } function resetHudSounds() { - $.post('https://qb-hud/resetHudSounds'); + $.post("https://qb-hud/resetHudSounds"); } function checklistSounds() { - $.post('https://qb-hud/checklistSounds'); + $.post("https://qb-hud/checklistSounds"); } function showMapNotif() { - $.post('https://qb-hud/showMapNotif'); + $.post("https://qb-hud/showMapNotif"); } function showFuelAlert() { - $.post('https://qb-hud/showFuelAlert'); + $.post("https://qb-hud/showFuelAlert"); } function showCinematicNotif() { - $.post('https://qb-hud/showCinematicNotif'); + $.post("https://qb-hud/showCinematicNotif"); } function dynamicHealth() { - $.post('https://qb-hud/dynamicHealth'); + $.post("https://qb-hud/dynamicHealth"); } function dynamicArmor() { - $.post('https://qb-hud/dynamicArmor'); + $.post("https://qb-hud/dynamicArmor"); } function dynamicHunger() { - $.post('https://qb-hud/dynamicHunger'); + $.post("https://qb-hud/dynamicHunger"); } function dynamicThirst() { - $.post('https://qb-hud/dynamicThirst'); + $.post("https://qb-hud/dynamicThirst"); } function dynamicStress() { - $.post('https://qb-hud/dynamicStress'); + $.post("https://qb-hud/dynamicStress"); } function dynamicOxygen() { - $.post('https://qb-hud/dynamicOxygen'); + $.post("https://qb-hud/dynamicOxygen"); } function dynamicEngine() { - $.post('https://qb-hud/dynamicEngine'); + $.post("https://qb-hud/dynamicEngine"); } function dynamicNitro() { - $.post('https://qb-hud/dynamicNitro'); + $.post("https://qb-hud/dynamicNitro"); } function ToggleMapShape() { - $.post('https://qb-hud/ToggleMapShape'); + $.post("https://qb-hud/ToggleMapShape"); } function changeFPS() { - $.post('https://qb-hud/changeFPS'); + $.post("https://qb-hud/changeFPS"); } function ToggleMapBorders() { - $.post('https://qb-hud/ToggleMapBorders'); + $.post("https://qb-hud/ToggleMapBorders"); } function HideMap() { - $.post('https://qb-hud/HideMap'); + $.post("https://qb-hud/HideMap"); } function changeCompassFPS() { - $.post('https://qb-hud/changeCompassFPS'); + $.post("https://qb-hud/changeCompassFPS"); } function showCompassBase() { - $.post('https://qb-hud/showCompassBase'); + $.post("https://qb-hud/showCompassBase"); } function showStreetsNames() { - $.post('https://qb-hud/showStreetsNames'); + $.post("https://qb-hud/showStreetsNames"); } function showPointerIndex() { - $.post('https://qb-hud/showPointerIndex'); + $.post("https://qb-hud/showPointerIndex"); } function showDegreesNum() { - $.post('https://qb-hud/showDegreesNum'); + $.post("https://qb-hud/showDegreesNum"); } function cinematicMode() { - $.post('https://qb-hud/cinematicMode'); + $.post("https://qb-hud/cinematicMode"); } $(document).ready(function () { - window.addEventListener("message", function (event) { - switch (event.data.action) { - case "open": - Open(event.data); - break; - } - }); + window.addEventListener("message", function (event) { + switch (event.data.action) { + case "open": + Open(event.data); + break; + } + }); }); Open = function (data) { - $("#openmenu").fadeIn(150); -} -$('.closeMenu').click(() => { - closeMenu() + $("#openmenu").fadeIn(150); +}; +$(".closeMenu").click(() => { + closeMenu(); }); // MONEY HUD const moneyHud = Vue.createApp({ - data() { - return { - cash: 0, - bank: 0, - amount: 0, - plus: false, - minus: false, - showCash: false, - showBank: false, - showUpdate: false, - }; - }, - destroyed() { - window.removeEventListener("message", this.listener); - }, - mounted() { - this.listener = window.addEventListener("message", (event) => { - switch (event.data.action) { - case "showconstant": - this.showConstant(event.data); - break; - case "updatemoney": - this.update(event.data); - break; - case "show": - this.showAccounts(event.data); - break; - } - }); - }, - methods: { - // CONFIGURE YOUR CURRENCY HERE - // https://www.w3schools.com/tags/ref_language_codes.asp LANGUAGE CODES - // https://www.w3schools.com/tags/ref_country_codes.asp COUNTRY CODES - formatMoney(value) { - const formatter = new Intl.NumberFormat("en-US", { - style: "currency", - currency: "USD", - minimumFractionDigits: 0, - }); - return formatter.format(value); + data() { + return { + cash: 0, + bank: 0, + amount: 0, + plus: false, + minus: false, + showCash: false, + showBank: false, + showUpdate: false, + }; }, - showConstant(data) { - this.showCash = true; - this.showBank = true; - this.cash = data.cash; - this.bank = data.bank; + destroyed() { + window.removeEventListener("message", this.listener); }, - update(data) { - this.showUpdate = true; - this.amount = data.amount; - this.bank = data.bank; - this.cash = data.cash; - this.minus = data.minus; - this.plus = data.plus; - if (data.type === "cash") { - if (data.minus) { - this.showCash = true; - this.minus = true; - setTimeout(() => (this.showUpdate = false), 1000); - setTimeout(() => (this.showCash = false), 2000); - } else { - this.showCash = true; - this.plus = true; - setTimeout(() => (this.showUpdate = false), 1000); - setTimeout(() => (this.showCash = false), 2000); - } - } - if (data.type === "bank") { - if (data.minus) { - this.showBank = true; - this.minus = true; - setTimeout(() => (this.showUpdate = false), 1000); - setTimeout(() => (this.showBank = false), 2000); - } else { - this.showBank = true; - this.plus = true; - setTimeout(() => (this.showUpdate = false), 1000); - setTimeout(() => (this.showBank = false), 2000); - } - } + mounted() { + this.listener = window.addEventListener("message", (event) => { + switch (event.data.action) { + case "showconstant": + this.showConstant(event.data); + break; + case "updatemoney": + this.update(event.data); + break; + case "show": + this.showAccounts(event.data); + break; + } + }); }, - showAccounts(data) { - if (data.type === "cash" && !this.showCash) { - this.showCash = true; - this.cash = data.cash; - setTimeout(() => (this.showCash = false), 3500); - } else if (data.type === "bank" && !this.showBank) { - this.showBank = true; - this.bank = data.bank; - setTimeout(() => (this.showBank = false), 3500); - } + methods: { + // CONFIGURE YOUR CURRENCY HERE + // https://www.w3schools.com/tags/ref_language_codes.asp LANGUAGE CODES + // https://www.w3schools.com/tags/ref_country_codes.asp COUNTRY CODES + formatMoney(value) { + const formatter = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + minimumFractionDigits: 0, + }); + return formatter.format(value); + }, + showConstant(data) { + this.showCash = true; + this.showBank = true; + this.cash = data.cash; + this.bank = data.bank; + }, + update(data) { + this.showUpdate = true; + this.amount = data.amount; + this.bank = data.bank; + this.cash = data.cash; + this.minus = data.minus; + this.plus = data.plus; + if (data.type === "cash") { + if (data.minus) { + this.showCash = true; + this.minus = true; + setTimeout(() => (this.showUpdate = false), 1000); + setTimeout(() => (this.showCash = false), 2000); + } else { + this.showCash = true; + this.plus = true; + setTimeout(() => (this.showUpdate = false), 1000); + setTimeout(() => (this.showCash = false), 2000); + } + } + if (data.type === "bank") { + if (data.minus) { + this.showBank = true; + this.minus = true; + setTimeout(() => (this.showUpdate = false), 1000); + setTimeout(() => (this.showBank = false), 2000); + } else { + this.showBank = true; + this.plus = true; + setTimeout(() => (this.showUpdate = false), 1000); + setTimeout(() => (this.showBank = false), 2000); + } + } + }, + showAccounts(data) { + if (data.type === "cash" && !this.showCash) { + this.showCash = true; + this.cash = data.cash; + setTimeout(() => (this.showCash = false), 3500); + } else if (data.type === "bank" && !this.showBank) { + this.showBank = true; + this.bank = data.bank; + setTimeout(() => (this.showBank = false), 3500); + } + }, }, - }, }).mount("#money-container"); // PLAYER HUD const playerHud = { - data() { - return { - dynamicHealth: 0, - dynamicHunger: 0, - dynamicThirst: 0, - dynamicStress: 0, - dynamicOxygen: 0, - dynamicEngine: 0, - dynamicNitro: 0, - nos: 0, - static: 100, - health: 0, - playerDead: 0, - armor: 0, - hunger: 0, - thirst: 0, - stress: 0, - voice: 0, - radio: 0, - harness: 0, - nitroActive: 0, - cruise: 0, - parachute: 0, - oxygen: 0, - hp: 0, - armed: 0, - speed: 0, - engine: 0, - cinematic: 0, - dev: 0, - show: false, - talking: false, - showVoice: true, - showHealth: false, - showArmor: true, - showHunger: true, - showThirst: true, - showNos: true, - showStress: true, - showOxygen: false, - showArmed: true, - showEngine: false, - showCruise: false, - showHarness: false, - showParachute: false, - showDev: false, - voiceIcon: "fas fa-microphone", - talkingColor: "#FFFFFF", - nosColor: "", - engineColor: "", - armorColor: "", - hungerColor: "", - healthColor: "", - thirstColor: "", - radioActive: false, - }; - }, + data() { + return { + dynamicHealth: 0, + dynamicHunger: 0, + dynamicThirst: 0, + dynamicStress: 0, + dynamicOxygen: 0, + dynamicEngine: 0, + dynamicNitro: 0, + nos: 0, + static: 100, + health: 0, + playerDead: 0, + armor: 0, + hunger: 0, + thirst: 0, + stress: 0, + voice: 0, + radio: 0, + harness: 0, + nitroActive: 0, + cruise: 0, + parachute: 0, + oxygen: 0, + hp: 0, + armed: 0, + speed: 0, + engine: 0, + cinematic: 0, + dev: 0, + show: false, + talking: false, + showVoice: true, + showHealth: false, + showArmor: true, + showHunger: true, + showThirst: true, + showNos: true, + showStress: true, + showOxygen: false, + showArmed: true, + showEngine: false, + showCruise: false, + showHarness: false, + showParachute: false, + showDev: false, + voiceIcon: "fas fa-microphone", + talkingColor: "#FFFFFF", + nosColor: "", + engineColor: "", + armorColor: "", + hungerColor: "", + healthColor: "", + thirstColor: "", + radioActive: false, + }; + }, - destroyed() { - window.removeEventListener("message", this.listener); - }, - mounted() { - this.listener = window.addEventListener("message", (event) => { - if (event.data.action === "hudtick") { - this.hudTick(event.data); - } - // else if(event.data.update) { - // eval(event.data.action + "(" + event.data.show + ')') - // } - }); - Config = {}; - }, - methods: { - hudTick(data) { - this.show = data.show; - this.health = data.health; - this.armor = data.armor; - this.hunger = data.hunger; - this.thirst = data.thirst; - this.stress = data.stress; - this.voice = data.voice; - this.talking = data.talking; - this.radio = data.radio; - this.radioActive = data.radioActive; - this.nos = data.nos; - this.oxygen = data.oxygen; - this.cruise = data.cruise; - this.nitroActive = data.nitroActive; - this.harness = data.harness; - this.speed = data.speed; - this.armed = data.armed; - this.parachute = data.parachute; - this.hp = data.hp*5; - this.engine = data.engine; - this.cinematic = data.cinematic; - this.dev = data.dev; - this.playerDead = data.playerDead; - this.dynamicHealth = data.dynamicHealth; - this.dynamicArmor = data.dynamicArmor; - this.dynamicHunger = data.dynamicHunger; - this.dynamicThirst = data.dynamicThirst; - this.dynamicStress = data.dynamicStress; - this.dynamicOxygen = data.dynamicOxygen; - this.dynamicEngine = data.dynamicEngine; - this.dynamicNitro = data.dynamicNitro; + destroyed() { + window.removeEventListener("message", this.listener); + }, + mounted() { + this.listener = window.addEventListener("message", (event) => { + if (event.data.action === "hudtick") { + this.hudTick(event.data); + } + // else if(event.data.update) { + // eval(event.data.action + "(" + event.data.show + ')') + // } + }); + Config = {}; + }, + methods: { + hudTick(data) { + this.show = data.show; + this.health = data.health; + this.armor = data.armor; + this.hunger = data.hunger; + this.thirst = data.thirst; + this.stress = data.stress; + this.voice = data.voice; + this.talking = data.talking; + this.radio = data.radio; + this.radioActive = data.radioActive; + this.nos = data.nos; + this.oxygen = data.oxygen; + this.cruise = data.cruise; + this.nitroActive = data.nitroActive; + this.harness = data.harness; + this.speed = data.speed; + this.armed = data.armed; + this.parachute = data.parachute; + this.hp = data.hp * 5; + this.engine = data.engine; + this.cinematic = data.cinematic; + this.dev = data.dev; + this.playerDead = data.playerDead; + this.dynamicHealth = data.dynamicHealth; + this.dynamicArmor = data.dynamicArmor; + this.dynamicHunger = data.dynamicHunger; + this.dynamicThirst = data.dynamicThirst; + this.dynamicStress = data.dynamicStress; + this.dynamicOxygen = data.dynamicOxygen; + this.dynamicEngine = data.dynamicEngine; + this.dynamicNitro = data.dynamicNitro; - if (data.dynamicHealth == true) { - if (data.health >= 100) { - this.showHealth = false; } - else{ - this.showHealth = true; - } - } else if (data.dynamicHealth == false){ - this.showHealth = true; - } - if (data.playerDead === false) { - this.healthColor = "#3FA554"; - } else { - this.healthColor = "#ff0000"; - this.health = 100; - } + if (data.dynamicHealth == true) { + if (data.health >= 100) { + this.showHealth = false; + } else { + this.showHealth = true; + } + } else if (data.dynamicHealth == false) { + this.showHealth = true; + } + if (data.playerDead === false) { + this.healthColor = "#3FA554"; + } else { + this.healthColor = "#ff0000"; + this.health = 100; + } - if (data.dynamicArmor == true) { - if (data.armor == 0) { - this.showArmor = false; - } else { - this.showArmor = true; - } - } else if (data.dynamicArmor == false){ - this.showArmor = true; - } + if (data.dynamicArmor == true) { + if (data.armor == 0) { + this.showArmor = false; + } else { + this.showArmor = true; + } + } else if (data.dynamicArmor == false) { + this.showArmor = true; + } - if (data.armor <= 0) { - this.armorColor = "#FF0000"; - } else { - this.armorColor = "#326dbf"; - } + if (data.armor <= 0) { + this.armorColor = "#FF0000"; + } else { + this.armorColor = "#326dbf"; + } - if (data.dynamicHunger == true) { - if (data.hunger >= 100) { - this.showHunger = false; } - else{ - this.showHunger = true; - } - } else if (data.dynamicHunger == false){ - this.showHunger = true; - } - if (data.hunger >= 100) { - this.hungerColor = "#dd6e14"; - } else if(data.hunger <= 30){ - this.hungerColor = "#ff0000"; - } else{ - this.hungerColor = "#dd6e14"; - } + if (data.dynamicHunger == true) { + if (data.hunger >= 100) { + this.showHunger = false; + } else { + this.showHunger = true; + } + } else if (data.dynamicHunger == false) { + this.showHunger = true; + } + if (data.hunger >= 100) { + this.hungerColor = "#dd6e14"; + } else if (data.hunger <= 30) { + this.hungerColor = "#ff0000"; + } else { + this.hungerColor = "#dd6e14"; + } - if (data.dynamicThirst == true) { - if (data.thirst >= 100) { - this.showThirst = false; } - else{ - this.showThirst = true; - } - } else if (data.dynamicThirst == false){ - this.showThirst = true; - } - if (data.thirst >= 100) { - this.thirstColor = "#1a7cad"; - } else if(data.thirst <= 30){ - this.thirstColor = "#ff0000"; - } else{ - this.thirstColor = "#1a7cad"; - } + if (data.dynamicThirst == true) { + if (data.thirst >= 100) { + this.showThirst = false; + } else { + this.showThirst = true; + } + } else if (data.dynamicThirst == false) { + this.showThirst = true; + } + if (data.thirst >= 100) { + this.thirstColor = "#1a7cad"; + } else if (data.thirst <= 30) { + this.thirstColor = "#ff0000"; + } else { + this.thirstColor = "#1a7cad"; + } - if (data.dynamicStress == true) { - if (data.stress == 0) { - this.showStress = false; - } else { - this.showStress = true; - } - } else if (data.dynamicStress == false){ - this.showStress = true; - } + if (data.dynamicStress == true) { + if (data.stress == 0) { + this.showStress = false; + } else { + this.showStress = true; + } + } else if (data.dynamicStress == false) { + this.showStress = true; + } - if (data.dynamicOxygen == true) { - if (data.oxygen >= 100) { - this.showOxygen = false; } - else{ - this.showOxygen = true; - } - } else if (data.dynamicOxygen == false){ - this.showOxygen = true; - } + if (data.dynamicOxygen == true) { + if (data.oxygen >= 100) { + this.showOxygen = false; + } else { + this.showOxygen = true; + } + } else if (data.dynamicOxygen == false) { + this.showOxygen = true; + } - if (data.dynamicEngine == true) { - if (data.engine >= 95) { - this.showEngine = false; - } else if (data.engine < 0){ - this.showEngine = false;} else {this.showEngine = true;} - } else if (data.dynamicEngine == false){ - if (data.engine < 0) { - this.showEngine = false;} else {this.showEngine = true;} - } - if (data.engine <= 45) { - this.engineColor = "#ff0000"; - } else if (data.engine <= 75 && data.engine >= 46 ) { - this.engineColor = "#dd6e14"; - } else if(data.engine<=100) { - this.engineColor = "#3FA554"; - } + if (data.dynamicEngine == true) { + if (data.engine >= 95) { + this.showEngine = false; + } else if (data.engine < 0) { + this.showEngine = false; + } else { + this.showEngine = true; + } + } else if (data.dynamicEngine == false) { + if (data.engine < 0) { + this.showEngine = false; + } else { + this.showEngine = true; + } + } + if (data.engine <= 45) { + this.engineColor = "#ff0000"; + } else if (data.engine <= 75 && data.engine >= 46) { + this.engineColor = "#dd6e14"; + } else if (data.engine <= 100) { + this.engineColor = "#3FA554"; + } - if (data.dynamicNitro == true) { - if (data.nos === 0 || data.nos === undefined) { - this.showNos = false; - } else if (data.nos < 0){ - this.showNos = false;} else {this.showNos = true;} - } else if (data.dynamicNitro == false) { - if (data.nos < 0){ - this.showNos = false; - } else {this.showNos = true;} - } - if (data.nitroActive) { - this.nosColor = "#D64763"; - } else { - this.nosColor = "#FFFFFF"; - } + if (data.dynamicNitro == true) { + if (data.nos === 0 || data.nos === undefined) { + this.showNos = false; + } else if (data.nos < 0) { + this.showNos = false; + } else { + this.showNos = true; + } + } else if (data.dynamicNitro == false) { + if (data.nos < 0) { + this.showNos = false; + } else { + this.showNos = true; + } + } + if (data.nitroActive) { + this.nosColor = "#D64763"; + } else { + this.nosColor = "#FFFFFF"; + } - if (data.radioActive) { - this.talkingColor = "#D64763"; - } else if (data.talking) { - this.talkingColor = '#FFFF3E'; - } else { - this.talkingColor = "#FFFFFF"; - } - if (data.radio != 0 && data.radio != undefined) { - this.voiceIcon = 'fas fa-headset'; - } else if (data.radio == 0 || data.radio == undefined) { - this.voiceIcon = 'fas fa-microphone'; - } - if (data.cruise === true) { - this.cruise = 1; - this.showCruise = true; - } else { - this.cruise = 0; - this.showCruise = false; - } + if (data.radioActive) { + this.talkingColor = "#D64763"; + } else if (data.talking) { + this.talkingColor = "#FFFF3E"; + } else { + this.talkingColor = "#FFFFFF"; + } + if (data.radio != 0 && data.radio != undefined) { + this.voiceIcon = "fas fa-headset"; + } else if (data.radio == 0 || data.radio == undefined) { + this.voiceIcon = "fas fa-microphone"; + } + if (data.cruise === true) { + this.cruise = 1; + this.showCruise = true; + } else { + this.cruise = 0; + this.showCruise = false; + } - if (data.harness === true) { - this.showHarness = true; - } else { - this.showHarness = false; - } - if (data.armed === true) { - this.showArmed = true; - } else { - this.showArmed = false; - } + if (data.harness === true) { + this.showHarness = true; + } else { + this.showHarness = false; + } + if (data.armed === true) { + this.showArmed = true; + } else { + this.showArmed = false; + } - if (data.parachute >= 0 ) { - this.showParachute = true; - } else { - this.showParachute = false; - } + if (data.parachute >= 0) { + this.showParachute = true; + } else { + this.showParachute = false; + } - if (data.dev === true ) { - this.showDev = true; - } else { - this.showDev = false; - } + if (data.dev === true) { + this.showDev = true; + } else { + this.showDev = false; + } - if (data.isPaused === 1) { - this.show = false; - } + if (data.isPaused === 1) { + this.show = false; + } + }, }, - }, }; const app2 = Vue.createApp(playerHud); app2.use(Quasar); @@ -1003,83 +1011,83 @@ app2.mount("#ui-container"); // VEHICLE HUD const vehHud = { - data() { - return { - speedometer: 66, - fuelgauge: 69, - altitudegauge: 75, - fuel: 0, - speed: 0, - seatbelt: 0, - showSquareB: 0, - show: false, - showAltitude: true, - showSeatbelt: true, - showSquare: false, - showCircle: false, - seatbeltColor: "", - }; - }, + data() { + return { + speedometer: 66, + fuelgauge: 69, + altitudegauge: 75, + fuel: 0, + speed: 0, + seatbelt: 0, + showSquareB: 0, + show: false, + showAltitude: true, + showSeatbelt: true, + showSquare: false, + showCircle: false, + seatbeltColor: "", + }; + }, - destroyed() { - window.removeEventListener("message", this.listener); - }, - mounted() { - this.listener = window.addEventListener("message", (event) => { - if (event.data.action === "car") { - this.vehicleHud(event.data); - } - }); - }, - methods: { - vehicleHud(data) { - this.show = data.show; - this.speed = data.speed; - this.altitude = data.altitude; - this.fuel = (data.fuel * 0.71); - this.showSeatbelt = data.showSeatbelt; - this.showAltitude = data.showAltitude; - this.showSquareB = data.showSquareB; - this.showCircleB = data.showCircleB; - if (data.seatbelt === true) { - this.seatbelt = 1; - this.seatbeltColor = "transparent"; - } else { - this.seatbelt = 0; - this.seatbeltColor = "#FF5100"; - } - if (data.showSeatbelt === true) { - this.showSeatbelt = true; - } else { - this.showSeatbelt = false; - } - if (data.showAltitude === true) { - this.showAltitude = true; - } else { - this.showAltitude = false; - } - if (data.fuel <= 20) { - this.fuelColor = "#ff0000"; - } else if (data.fuel <= 30) { - this.fuelColor = "#dd6e14"; - } else { - this.fuelColor = "#FFFFFF"; - } - if (data.showSquareB === true) { - this.showSquare = true; - } else { - this.showSquare = false; - } - if (data.showCircleB === true) { - this.showCircle = true; - } else { - this.showCircle = false; - } - if (data.isPaused === 1) { - this.show = false; - } + destroyed() { + window.removeEventListener("message", this.listener); + }, + mounted() { + this.listener = window.addEventListener("message", (event) => { + if (event.data.action === "car") { + this.vehicleHud(event.data); + } + }); + }, + methods: { + vehicleHud(data) { + this.show = data.show; + this.speed = data.speed; + this.altitude = data.altitude; + this.fuel = data.fuel * 0.71; + this.showSeatbelt = data.showSeatbelt; + this.showAltitude = data.showAltitude; + this.showSquareB = data.showSquareB; + this.showCircleB = data.showCircleB; + if (data.seatbelt === true) { + this.seatbelt = 1; + this.seatbeltColor = "transparent"; + } else { + this.seatbelt = 0; + this.seatbeltColor = "#FF5100"; + } + if (data.showSeatbelt === true) { + this.showSeatbelt = true; + } else { + this.showSeatbelt = false; + } + if (data.showAltitude === true) { + this.showAltitude = true; + } else { + this.showAltitude = false; + } + if (data.fuel <= 20) { + this.fuelColor = "#ff0000"; + } else if (data.fuel <= 30) { + this.fuelColor = "#dd6e14"; + } else { + this.fuelColor = "#FFFFFF"; + } + if (data.showSquareB === true) { + this.showSquare = true; + } else { + this.showSquare = false; + } + if (data.showCircleB === true) { + this.showCircle = true; + } else { + this.showCircle = false; + } + if (data.isPaused === 1) { + this.show = false; + } + }, }, - }, }; const app3 = Vue.createApp(vehHud); app3.use(Quasar); @@ -1088,69 +1096,69 @@ app3.mount("#veh-container"); // COMPASS HUD const baseplateHud = { - data() { - return { - show: false, - street1: "", - street2: "", - showCompass: true, - showStreets: true, - showPointer: true, - showDegrees: true, - }; - }, - destroyed() { - window.removeEventListener("message", this.listener); - }, - mounted() { - this.listener = window.addEventListener("message", (event) => { - if (event.data.action == "update") { - type = event.data.type - value = event.data.value - if (value !== undefined) { - $('.degrees').html(value); - bar = document.getElementsByTagName("svg")[0]; - bar.setAttribute("viewBox", ''+ (value - 90) + ' 0 180 5'); - heading = document.getElementsByTagName("svg")[1]; - heading.setAttribute("viewBox", ''+ (value - 90) + ' 0 180 1.5'); - } - } - if (event.data.action === "baseplate") { - this.baseplateHud(event.data); - } - }); - }, - methods: { - baseplateHud(data) { - this.show = data.show; - this.street1 = data.street1; - this.street2 = data.street2; - this.showCompass = data.showCompass; - this.showStreets = data.showStreets; - this.showPointer = data.showPointer; - this.showDegrees = data.showDegrees; - if (data.showCompass == true) { - this.showCompass = true; - } else { - this.showCompass = false; - } - if (data.showStreets == true) { - this.showStreets = true; - } else { - this.showStreets = false; - } - if (data.showPointer == true) { - this.showPointer = true; - } else { - this.showPointer = false; - } - if (data.showDegrees == true) { - this.showDegrees = true; - } else { - this.showDegrees = false; - } + data() { + return { + show: false, + street1: "", + street2: "", + showCompass: true, + showStreets: true, + showPointer: true, + showDegrees: true, + }; + }, + destroyed() { + window.removeEventListener("message", this.listener); + }, + mounted() { + this.listener = window.addEventListener("message", (event) => { + if (event.data.action == "update") { + type = event.data.type; + value = event.data.value; + if (value !== undefined) { + $(".degrees").html(value); + bar = document.getElementsByTagName("svg")[0]; + bar.setAttribute("viewBox", "" + (value - 90) + " 0 180 5"); + heading = document.getElementsByTagName("svg")[1]; + heading.setAttribute("viewBox", "" + (value - 90) + " 0 180 1.5"); + } + } + if (event.data.action === "baseplate") { + this.baseplateHud(event.data); + } + }); + }, + methods: { + baseplateHud(data) { + this.show = data.show; + this.street1 = data.street1; + this.street2 = data.street2; + this.showCompass = data.showCompass; + this.showStreets = data.showStreets; + this.showPointer = data.showPointer; + this.showDegrees = data.showDegrees; + if (data.showCompass == true) { + this.showCompass = true; + } else { + this.showCompass = false; + } + if (data.showStreets == true) { + this.showStreets = true; + } else { + this.showStreets = false; + } + if (data.showPointer == true) { + this.showPointer = true; + } else { + this.showPointer = false; + } + if (data.showDegrees == true) { + this.showDegrees = true; + } else { + this.showDegrees = false; + } + }, }, - }, }; const app4 = Vue.createApp(baseplateHud); app4.use(Quasar); diff --git a/html/responsive.css b/html/responsive.css index a278421..fdd9575 100644 --- a/html/responsive.css +++ b/html/responsive.css @@ -1,568 +1,568 @@ .responsive { - position: absolute!important; + position: absolute !important; } @media (min-width: 800px) { - .responsive { - margin-left: 32vh!important; - transform: scale(1, 1); - bottom: 6.9vh!important; - } - .q-ml-xl { - font-size: 50px; - } - #Speedo { - font-size: 70px !important; - } - #FuelGaugeBackground { - font-size: 36px; - } - #FuelGaugeValue { - font-size: 36px; - } - #FuelGaugeIcon { - font-size: 14px; - } - #Icons { - font-size: 19.5px; - } - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 7vh!important; - bottom: 6.7vh!important; - } - #altitudegauge { - position: relative; - left: 11vh!important; - } - #seatbelt { - position: relative; - left: 8.5vh!important; - } - speed { - font-size: 2vh!important; - } - speed:after { - font-size: 0.9vh!important; - } - altitude { - font-size: 2vh!important; - } - altitude:after { - font-size: 0.9vh!important; - } - .square { - left: 2.5vh!important; - bottom: 6%!important; - } - .circle { - left: 3.2vh!important; - width: 27.6vh!important; - bottom: 6.9%!important; - } + .responsive { + margin-left: 32vh !important; + transform: scale(1, 1); + bottom: 6.9vh !important; + } + .q-ml-xl { + font-size: 50px; + } + #Speedo { + font-size: 70px !important; + } + #FuelGaugeBackground { + font-size: 36px; + } + #FuelGaugeValue { + font-size: 36px; + } + #FuelGaugeIcon { + font-size: 14px; + } + #Icons { + font-size: 19.5px; + } + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 7vh !important; + bottom: 6.7vh !important; + } + #altitudegauge { + position: relative; + left: 11vh !important; + } + #seatbelt { + position: relative; + left: 8.5vh !important; + } + speed { + font-size: 2vh !important; + } + speed:after { + font-size: 0.9vh !important; + } + altitude { + font-size: 2vh !important; + } + altitude:after { + font-size: 0.9vh !important; + } + .square { + left: 2.5vh !important; + bottom: 6% !important; + } + .circle { + left: 3.2vh !important; + width: 27.6vh !important; + bottom: 6.9% !important; + } } @media (width: 3840px) and (height: 2160px) { - .responsive { - margin-left: 32.8vh!important; - transform: scale(1.3, 1.3); - bottom: 7.6vh!important; - } - .q-ml-xl { - font-size: 100px; - margin-left: -45px!important; /* Change this to space radials */ - } - #Speedo { - font-size: 125px !important; - } - #Speed { - font-size: 50px !important; - } - #FuelGaugeBackground { - font-size: 75px !important; - left: 50% !important; - top: 20px !important; - } - #FuelGaugeValue { - font-size: 75px !important; - left: 0% !important; - top: 20px !important; - } - #FuelGaugeIcon { - font-size: 25px; - } - #Altimeter { - font-size: 125px !important; - left: 41% !important; - } - #AltimeterValue { - font-size: 125px !important; - left: -9% !important; - } - #Alt { - font-size: 50px !important; - } - #Icons { - font-size: 50px; - } - #SeatbeltLocation { - left: 35% !important; - top: -40px; - } - #SeatbeltIcon { - font-size: 40px !important; - } - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 5.3vh!important; - bottom: 7.1vh!important; - } - #altitudegauge { - position: relative; - left: 8.2vh!important; - } - #seatbelt { - position: relative; - left: 6.5vh!important; - } - speed { - font-size: 1.2vh!important; - } - speed:after { - font-size: 0.6vh!important; - } - altitude { - font-size: 1.2vh!important; - } - altitude:after { - font-size: 0.6vh!important; - } - .square { - left: 2.4vh!important; - bottom: 6.1%!important; - width: 29.3vh!important; - } - .circle { - left: 3.6vh!important; - width: 27.6vh!important; - bottom: 6.9%!important; - } + .responsive { + margin-left: 32.8vh !important; + transform: scale(1.3, 1.3); + bottom: 7.6vh !important; + } + .q-ml-xl { + font-size: 100px; + margin-left: -45px !important; /* Change this to space radials */ + } + #Speedo { + font-size: 125px !important; + } + #Speed { + font-size: 50px !important; + } + #FuelGaugeBackground { + font-size: 75px !important; + left: 50% !important; + top: 20px !important; + } + #FuelGaugeValue { + font-size: 75px !important; + left: 0% !important; + top: 20px !important; + } + #FuelGaugeIcon { + font-size: 25px; + } + #Altimeter { + font-size: 125px !important; + left: 41% !important; + } + #AltimeterValue { + font-size: 125px !important; + left: -9% !important; + } + #Alt { + font-size: 50px !important; + } + #Icons { + font-size: 50px; + } + #SeatbeltLocation { + left: 35% !important; + top: -40px; + } + #SeatbeltIcon { + font-size: 40px !important; + } + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 5.3vh !important; + bottom: 7.1vh !important; + } + #altitudegauge { + position: relative; + left: 8.2vh !important; + } + #seatbelt { + position: relative; + left: 6.5vh !important; + } + speed { + font-size: 1.2vh !important; + } + speed:after { + font-size: 0.6vh !important; + } + altitude { + font-size: 1.2vh !important; + } + altitude:after { + font-size: 0.6vh !important; + } + .square { + left: 2.4vh !important; + bottom: 6.1% !important; + width: 29.3vh !important; + } + .circle { + left: 3.6vh !important; + width: 27.6vh !important; + bottom: 6.9% !important; + } } @media (width: 3440px) and (height: 1440px) { - .responsive { - margin-left: 33vh!important; - transform: scale(1.3, 1.3); - bottom: 7.6vh!important; - } - .q-ml-xl { - font-size: 50px; - } - #Speedo { - font-size: 70px !important; - } - #FuelGaugeBackground { - font-size: 36px; - } - #FuelGaugeValue { - font-size: 36px; - } - #FuelGaugeIcon { - font-size: 14px; - } - #Icons { - font-size: 19.5px; - } - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 6.4vh!important; - bottom: 6.85vh!important; - } - #altitudegauge { - position: relative; - left: 11.2vh!important; - } - #seatbelt { - position: relative; - left: 8.8vh!important; - } - speed { - font-size: 1.4vh!important; - } - speed:after { - font-size: 0.7vh!important; - } - altitude { - font-size: 1.4vh!important; - } - altitude:after { - font-size: 0.7vh!important; - } - .square { - left: 2.3vh!important; - bottom: 6.1%!important; - width: 29.3vh!important; - } - .circle { - left: 3.5vh!important; - width: 27.6vh!important; - bottom: 6.9%!important; - } + .responsive { + margin-left: 33vh !important; + transform: scale(1.3, 1.3); + bottom: 7.6vh !important; + } + .q-ml-xl { + font-size: 50px; + } + #Speedo { + font-size: 70px !important; + } + #FuelGaugeBackground { + font-size: 36px; + } + #FuelGaugeValue { + font-size: 36px; + } + #FuelGaugeIcon { + font-size: 14px; + } + #Icons { + font-size: 19.5px; + } + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 6.4vh !important; + bottom: 6.85vh !important; + } + #altitudegauge { + position: relative; + left: 11.2vh !important; + } + #seatbelt { + position: relative; + left: 8.8vh !important; + } + speed { + font-size: 1.4vh !important; + } + speed:after { + font-size: 0.7vh !important; + } + altitude { + font-size: 1.4vh !important; + } + altitude:after { + font-size: 0.7vh !important; + } + .square { + left: 2.3vh !important; + bottom: 6.1% !important; + width: 29.3vh !important; + } + .circle { + left: 3.5vh !important; + width: 27.6vh !important; + bottom: 6.9% !important; + } } @media (width: 2560px) and (height: 1440px) { - .responsive { - margin-left: 33.5vh!important; - transform: scale(1.3, 1.3); - bottom: 7.2vh!important; - } - .q-ml-xl { - font-size: 50px; - } - #Speedo { - font-size: 70px !important; - } - #FuelGaugeBackground { - font-size: 36px; - } - #FuelGaugeValue { - font-size: 36px; - } - #FuelGaugeIcon { - font-size: 14px; - } - #Icons { - font-size: 19.5px; - } - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 6.3vh!important; - bottom: 6.5vh!important; - } - #altitudegauge { - position: relative; - left: 11vh!important; - } - #seatbelt { - position: relative; - left: 8.8vh!important; - } - speed { - font-size: 1.4vh!important; - } - speed:after { - font-size: 0.7vh!important; - } - altitude { - font-size: 1.4vh!important; - } - altitude:after { - font-size: 0.7vh!important; - } - .square { - left: 2.3vh!important; - bottom: 6%!important; - } - .circle { - left: 3.5vh!important; - width: 27.6vh!important; - bottom: 6.7%!important; - } + .responsive { + margin-left: 33.5vh !important; + transform: scale(1.3, 1.3); + bottom: 7.2vh !important; + } + .q-ml-xl { + font-size: 50px; + } + #Speedo { + font-size: 70px !important; + } + #FuelGaugeBackground { + font-size: 36px; + } + #FuelGaugeValue { + font-size: 36px; + } + #FuelGaugeIcon { + font-size: 14px; + } + #Icons { + font-size: 19.5px; + } + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 6.3vh !important; + bottom: 6.5vh !important; + } + #altitudegauge { + position: relative; + left: 11vh !important; + } + #seatbelt { + position: relative; + left: 8.8vh !important; + } + speed { + font-size: 1.4vh !important; + } + speed:after { + font-size: 0.7vh !important; + } + altitude { + font-size: 1.4vh !important; + } + altitude:after { + font-size: 0.7vh !important; + } + .square { + left: 2.3vh !important; + bottom: 6% !important; + } + .circle { + left: 3.5vh !important; + width: 27.6vh !important; + bottom: 6.7% !important; + } } -@media (width:2560px) and (height:1080px) { - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 6.5vh!important; - bottom: 5.7vh!important; - } - #seatbelt { - position: relative; - left: 6.5vh!important; - } - .square { - left: 2.5vh!important; - bottom: 6%!important; - } - .circle { - left: 3.2vh!important; - width: 27.6vh!important; - bottom: 6.9%!important; - } +@media (width: 2560px) and (height: 1080px) { + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 6.5vh !important; + bottom: 5.7vh !important; + } + #seatbelt { + position: relative; + left: 6.5vh !important; + } + .square { + left: 2.5vh !important; + bottom: 6% !important; + } + .circle { + left: 3.2vh !important; + width: 27.6vh !important; + bottom: 6.9% !important; + } } @media (width: 1920px) and (height: 1440px) { - .responsive { - margin-left: 32vh!important; - transform: scale(1.2, 1.2); - bottom: 7.4vh!important; - } - .q-ml-xl { - font-size: 50px; - } - #Speedo { - font-size: 70px !important; - } - #FuelGaugeBackground { - font-size: 36px; - } - #FuelGaugeValue { - font-size: 36px; - } - #FuelGaugeIcon { - font-size: 14px; - } - #Icons { - font-size: 19.5px; - } - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 6.3vh!important; - bottom: 6.9vh!important; - } - #altitudegauge { - position: relative; - left: 10vh!important; - } - #seatbelt { - position: relative; - left: 8vh!important; - } - speed { - font-size: 1.6vh!important; - } - speed:after { - font-size: 0.7vh!important; - } - altitude { - font-size: 1.6vh!important; - } - altitude:after { - font-size: 0.7vh!important; - } - .square { - left: 2vh!important; - bottom: 6%!important; - } - .circle { - left: 2.7vh!important; - width: 27.6vh!important; - bottom: 7%!important; - } + .responsive { + margin-left: 32vh !important; + transform: scale(1.2, 1.2); + bottom: 7.4vh !important; + } + .q-ml-xl { + font-size: 50px; + } + #Speedo { + font-size: 70px !important; + } + #FuelGaugeBackground { + font-size: 36px; + } + #FuelGaugeValue { + font-size: 36px; + } + #FuelGaugeIcon { + font-size: 14px; + } + #Icons { + font-size: 19.5px; + } + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 6.3vh !important; + bottom: 6.9vh !important; + } + #altitudegauge { + position: relative; + left: 10vh !important; + } + #seatbelt { + position: relative; + left: 8vh !important; + } + speed { + font-size: 1.6vh !important; + } + speed:after { + font-size: 0.7vh !important; + } + altitude { + font-size: 1.6vh !important; + } + altitude:after { + font-size: 0.7vh !important; + } + .square { + left: 2vh !important; + bottom: 6% !important; + } + .circle { + left: 2.7vh !important; + width: 27.6vh !important; + bottom: 7% !important; + } } @media (width: 1920px) and (height: 1200px) { - .responsive { - margin-left: 31.5vh!important; - transform: scale(1, 1); - bottom: 6.4vh!important; - } - .q-ml-xl { - font-size: 50px; - } - #Speedo { - font-size: 70px !important; - } - #FuelGaugeBackground { - font-size: 36px; - } - #FuelGaugeValue { - font-size: 36px; - } - #FuelGaugeIcon { - font-size: 14px; - } - #Icons { - font-size: 19.5px; - } - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 6.6vh!important; - bottom: 6.05vh!important; - } - #altitudegauge { - position: relative; - left: 10vh!important; - } - #seatbelt { - position: relative; - left: 8vh!important; - } - speed { - font-size: 1.8vh!important; - } - speed:after { - font-size: 0.8vh!important; - } - altitude { - font-size: 1.8vh!important; - } - altitude:after { - font-size: 0.8vh!important; - } - .square { - left: 2.2vh!important; - bottom: 6%!important; - } - .circle { - left: 3.2vh!important; - width: 27.6vh!important; - bottom: 7%!important; - } + .responsive { + margin-left: 31.5vh !important; + transform: scale(1, 1); + bottom: 6.4vh !important; + } + .q-ml-xl { + font-size: 50px; + } + #Speedo { + font-size: 70px !important; + } + #FuelGaugeBackground { + font-size: 36px; + } + #FuelGaugeValue { + font-size: 36px; + } + #FuelGaugeIcon { + font-size: 14px; + } + #Icons { + font-size: 19.5px; + } + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 6.6vh !important; + bottom: 6.05vh !important; + } + #altitudegauge { + position: relative; + left: 10vh !important; + } + #seatbelt { + position: relative; + left: 8vh !important; + } + speed { + font-size: 1.8vh !important; + } + speed:after { + font-size: 0.8vh !important; + } + altitude { + font-size: 1.8vh !important; + } + altitude:after { + font-size: 0.8vh !important; + } + .square { + left: 2.2vh !important; + bottom: 6% !important; + } + .circle { + left: 3.2vh !important; + width: 27.6vh !important; + bottom: 7% !important; + } } @media (width: 1920px) and (height: 1080px) { - .responsive { - margin-left: 32vh!important; - transform: scale(1, 1); - bottom: 6.9vh!important; - } - .q-ml-xl { - font-size: 50px; - } - #Speedo { - font-size: 70px !important; - } - #FuelGaugeBackground { - font-size: 36px; - } - #FuelGaugeValue { - font-size: 36px; - } - #FuelGaugeIcon { - font-size: 14px; - } - #Icons { - font-size: 19.5px; - } - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 7.2vh!important; - bottom: 6.6vh!important; - } - #altitudegauge { - position: relative; - left: 11vh!important; - } - #seatbelt { - position: relative; - left: 8.5vh!important; - } - speed { - font-size: 2vh!important; - } - speed:after { - font-size: 1.2vh!important; - } - altitude { - font-size: 2vh!important; - } - altitude:after { - font-size: 0.9vh!important; - } - .square { - left: 2.5vh!important; - bottom: 6%!important; - } - .circle { - left: 3.7vh!important; - width: 27.3vh!important; - bottom: 7%!important; - } + .responsive { + margin-left: 32vh !important; + transform: scale(1, 1); + bottom: 6.9vh !important; + } + .q-ml-xl { + font-size: 50px; + } + #Speedo { + font-size: 70px !important; + } + #FuelGaugeBackground { + font-size: 36px; + } + #FuelGaugeValue { + font-size: 36px; + } + #FuelGaugeIcon { + font-size: 14px; + } + #Icons { + font-size: 19.5px; + } + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 7.2vh !important; + bottom: 6.6vh !important; + } + #altitudegauge { + position: relative; + left: 11vh !important; + } + #seatbelt { + position: relative; + left: 8.5vh !important; + } + speed { + font-size: 2vh !important; + } + speed:after { + font-size: 1.2vh !important; + } + altitude { + font-size: 2vh !important; + } + altitude:after { + font-size: 0.9vh !important; + } + .square { + left: 2.5vh !important; + bottom: 6% !important; + } + .circle { + left: 3.7vh !important; + width: 27.3vh !important; + bottom: 7% !important; + } } @media (width: 1280px) and (height: 720px) { - .responsive { - margin-left: 30vh!important; - transform: scale(0.65, 0.65); - bottom: 4.7vh!important; - } - .q-ml-xl { - font-size: 50px; - } - #Speedo { - font-size: 70px !important; - } - #FuelGaugeBackground { - font-size: 36px; - } - #FuelGaugeValue { - font-size: 36px; - } - #FuelGaugeIcon { - font-size: 14px; - } - #Icons { - font-size: 19.5px; - } - #speedometer { - position: relative; - left: 2.5vh!important; - } - #fuelgauge { - position: relative; - left: 8.6vh!important; - bottom: 5.2vh!important; - } - #altitudegauge { - position: relative; - left: 11vh!important; - } - #seatbelt { - position: relative; - left: 8.5vh!important; - } - speed { - font-size: 3vh!important; - } - speed:after { - font-size: 1.4vh!important; - } - altitude { - font-size: 3vh!important; - } - altitude:after { - font-size: 1.4vh!important; - } - .square { - left: 2.5vh!important; - bottom: 6%!important; - } - .circle { - left: 4vh!important; - width: 27.6vh!important; - bottom: 6.9%!important; - } + .responsive { + margin-left: 30vh !important; + transform: scale(0.65, 0.65); + bottom: 4.7vh !important; + } + .q-ml-xl { + font-size: 50px; + } + #Speedo { + font-size: 70px !important; + } + #FuelGaugeBackground { + font-size: 36px; + } + #FuelGaugeValue { + font-size: 36px; + } + #FuelGaugeIcon { + font-size: 14px; + } + #Icons { + font-size: 19.5px; + } + #speedometer { + position: relative; + left: 2.5vh !important; + } + #fuelgauge { + position: relative; + left: 8.6vh !important; + bottom: 5.2vh !important; + } + #altitudegauge { + position: relative; + left: 11vh !important; + } + #seatbelt { + position: relative; + left: 8.5vh !important; + } + speed { + font-size: 3vh !important; + } + speed:after { + font-size: 1.4vh !important; + } + altitude { + font-size: 3vh !important; + } + altitude:after { + font-size: 1.4vh !important; + } + .square { + left: 2.5vh !important; + bottom: 6% !important; + } + .circle { + left: 4vh !important; + width: 27.6vh !important; + bottom: 6.9% !important; + } } diff --git a/html/styles.css b/html/styles.css index 31cea3f..3f23676 100644 --- a/html/styles.css +++ b/html/styles.css @@ -1,294 +1,379 @@ -@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');@import url('https://fonts.cdnfonts.com/css/pricedown');@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yantramanav:wght@100;300;400;500;700;900&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); +@import url("https://fonts.cdnfonts.com/css/pricedown"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yantramanav:wght@100;300;400;500;700;900&display=swap"); /* Menu */ -div#openmenu { display: none; position: absolute; width: 50%; top: 45%; left: 50%; transform: translate(-50%,-50%); } -.brand-logo { width: 25%; } /* when using an svg all you need to change is the width and it will resize it */ +div#openmenu { + display: none; + position: absolute; + width: 50%; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); +} +.brand-logo { + width: 25%; +} /* when using an svg all you need to change is the width and it will resize it */ /* Menu tab & panel styles */ -.text-tabcolor { color: rgb(255, 255, 255)!important; } -.bg-active-tab { background: rgb(23 23 23)!important; } -.bg-panel { background: rgb(30 30 30)!important; } -.q-tab-panels { border-top-right-radius: 12px!important; border-bottom-right-radius: 12px!important; } /* change all 12px for a different border radius (rounds edges of the menu) */ -.q-splitter__panel.q-splitter__before { border-top-left-radius: 12px!important; border-bottom-left-radius: 12px!important; } /* change all 12px for a different border radius (rounds edges of the menu) */ -.q-tabs--vertical.q-tabs--not-scrollable .q-tabs__content { border-top-left-radius: 12px!important; border-bottom-left-radius: 12px!important; } /* change all 12px for a different border radius (rounds edges of the menu) */ +.text-tabcolor { + color: rgb(255, 255, 255) !important; +} +.bg-active-tab { + background: rgb(23 23 23) !important; +} +.bg-panel { + background: rgb(30 30 30) !important; +} +.q-tab-panels { + border-top-right-radius: 12px !important; + border-bottom-right-radius: 12px !important; +} /* change all 12px for a different border radius (rounds edges of the menu) */ +.q-splitter__panel.q-splitter__before { + border-top-left-radius: 12px !important; + border-bottom-left-radius: 12px !important; +} /* change all 12px for a different border radius (rounds edges of the menu) */ +.q-tabs--vertical.q-tabs--not-scrollable .q-tabs__content { + border-top-left-radius: 12px !important; + border-bottom-left-radius: 12px !important; +} /* change all 12px for a different border radius (rounds edges of the menu) */ /* Menu text styles */ -.text-h6 { color: rgb(255, 255, 255)!important; } -.text-h7 { color: rgba(255, 255, 255, 0.8)!important; } +.text-h6 { + color: rgb(255, 255, 255) !important; +} +.text-h7 { + color: rgba(255, 255, 255, 0.8) !important; +} /* Menu buttons & checkboxes & toggle switch icons styles */ -.text-textbutton { color: rgb(0, 0, 0)!important; } -.bg-bgbutton { background: rgb(220 20 60)!important; } -.q-checkbox__inner { color: rgb(255 255 255 / 70%)!important; } -.text-checkbox { color: rgb(220 20 60)!important; } -.q-checkbox__svg { color: rgb(0, 0, 0)!important; } -.q-checkbox__inner--truthy .q-checkbox__bg { box-shadow: 0px 0px 3px 3px rgb(220 20 60 / 15%)!important; } /* if you want the checkboxes to have a glow/shadow */ -.text-toggleicons { color: rgb(0, 0, 0)!important; } +.text-textbutton { + color: rgb(0, 0, 0) !important; +} +.bg-bgbutton { + background: rgb(220 20 60) !important; +} +.q-checkbox__inner { + color: rgb(255 255 255 / 70%) !important; +} +.text-checkbox { + color: rgb(220 20 60) !important; +} +.q-checkbox__svg { + color: rgb(0, 0, 0) !important; +} +.q-checkbox__inner--truthy .q-checkbox__bg { + box-shadow: 0px 0px 3px 3px rgb(220 20 60 / 15%) !important; +} /* if you want the checkboxes to have a glow/shadow */ +.text-toggleicons { + color: rgb(0, 0, 0) !important; +} /* Menu misc */ -hr { opacity: 0.1!important; } /* horizontal line that seperates sections */ -.q-mb-md { margin-bottom: 0px!important; } /* removes extra top padding */ -.q-mb-md-d { padding-left: 10px!important; padding-bottom: 10px!important;} /* keeps q-items aligned */ -.q-item { padding: 8px 0px!important; } /* keeps q-items aligned */ -.q-item__section--avatar { min-width: 40px!important } /* keeps q-items aligned */ -.q-item__section--side { padding-right: 0px!important; } /* keeps q-items aligned */ -.q-splitter--vertical>.q-splitter__separator { width: 0px!important; } /* keeps navigation tab panel seamless */ -div#q-loading-bar { display: none!important; } /* makes sure there's no ajax load from quasar */ -::-webkit-scrollbar { display: none!important; } /* makes sure there's no ugly scrollbar on menu*/ +hr { + opacity: 0.1 !important; +} /* horizontal line that seperates sections */ +.q-mb-md { + margin-bottom: 0px !important; +} /* removes extra top padding */ +.q-mb-md-d { + padding-left: 10px !important; + padding-bottom: 10px !important; +} /* keeps q-items aligned */ +.q-item { + padding: 8px 0px !important; +} /* keeps q-items aligned */ +.q-item__section--avatar { + min-width: 40px !important; +} /* keeps q-items aligned */ +.q-item__section--side { + padding-right: 0px !important; +} /* keeps q-items aligned */ +.q-splitter--vertical > .q-splitter__separator { + width: 0px !important; +} /* keeps navigation tab panel seamless */ +div#q-loading-bar { + display: none !important; +} /* makes sure there's no ajax load from quasar */ +::-webkit-scrollbar { + display: none !important; +} /* makes sure there's no ugly scrollbar on menu*/ /* Hud radial styles */ -.text-health { color: rgb(33, 171, 97)!important; } -.text-stress { color: rgb(255, 0, 0)!important; } -.text-nos { color: rgb(255, 72, 133)!important; } -.text-cruise { color: rgb(255, 72, 133)!important; } -.text-armed { color: rgb(255, 72, 133)!important; } -.text-harness { color: rgb(182, 72, 255)!important; } -.text-oxygen { color: rgb(138, 168, 189)!important; } -.text-parachute { color: rgb(0, 0, 0)!important; } -.text-dev { color: rgb(0, 0, 0)!important; } -.text-gauge { color: rgb(255, 255, 255)!important; } +.text-health { + color: rgb(33, 171, 97) !important; +} +.text-stress { + color: rgb(255, 0, 0) !important; +} +.text-nos { + color: rgb(255, 72, 133) !important; +} +.text-cruise { + color: rgb(255, 72, 133) !important; +} +.text-armed { + color: rgb(255, 72, 133) !important; +} +.text-harness { + color: rgb(182, 72, 255) !important; +} +.text-oxygen { + color: rgb(138, 168, 189) !important; +} +.text-parachute { + color: rgb(0, 0, 0) !important; +} +.text-dev { + color: rgb(0, 0, 0) !important; +} +.text-gauge { + color: rgb(255, 255, 255) !important; +} #main-container { - width: 100%; - height: auto; + width: 100%; + height: auto; } /* Money */ #money-container { - position: absolute; - right: 2vw; - top: 5vh; - font-weight: 400; - font-size: 40px; + position: absolute; + right: 2vw; + top: 5vh; + font-weight: 400; + font-size: 40px; } -#sign, #bank { - font-family: 'Pricedown Bl', sans-serif; - text-align: right; - color: #00ac31; - text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); +#sign, +#bank { + font-family: "Pricedown Bl", sans-serif; + text-align: right; + color: #00ac31; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7); } #plus { - font-size: 50px; - font-family: 'Pricedown Bl', sans-serif; - text-align: right; - color: #00ac31; - text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); + font-size: 50px; + font-family: "Pricedown Bl", sans-serif; + text-align: right; + color: #00ac31; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7); } #minus { - font-size: 50px; - font-family: 'Pricedown Bl', sans-serif; - text-align: right; - color: #ac0000; - text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); + font-size: 50px; + font-family: "Pricedown Bl", sans-serif; + text-align: right; + color: #ac0000; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7); } #money { - font-family: 'Pricedown Bl', sans-serif; - text-align: right; - color: #ffffff; - text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); + font-family: "Pricedown Bl", sans-serif; + text-align: right; + color: #ffffff; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7); } /* Player HUD */ #playerhud { - position: absolute; - display: flex; - left: 3vh; - bottom: 0.2vw; + position: absolute; + display: flex; + left: 3vh; + bottom: 0.2vw; } .q-ml-xl { - margin-left: -22px!important; /* Change this to space radials */ + margin-left: -22px !important; /* Change this to space radials */ } /* Vehicle HUD */ speed:after { - content: "MPH"; /* If using KPH change this content from MPH */ - display: block; - padding-top: 3px; - padding-left: 2px; - padding-right: 2px; - padding-bottom: 8px; - font-weight: 900; + content: "MPH"; /* If using KPH change this content from MPH */ + display: block; + padding-top: 3px; + padding-left: 2px; + padding-right: 2px; + padding-bottom: 8px; + font-weight: 900; } altitude:after { - content: "ALT"; - display: block; - padding-top: 10px; - padding-left: 2px; - padding-right: 2px; - font-weight: 900; + content: "ALT"; + display: block; + padding-top: 10px; + padding-left: 2px; + padding-right: 2px; + font-weight: 900; } speed { - transform: rotate(150deg); - font-size: 2.4vh; - position: fixed; - color: #fff; - text-align: center; - font-weight: 600; - text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); + transform: rotate(150deg); + font-size: 2.4vh; + position: fixed; + color: #fff; + text-align: center; + font-weight: 600; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7); } altitude { - transform: rotate(135deg); - font-size: 2.4vh; - position: fixed; - color: #fff; - text-align: center; - font-weight: 600; - text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); + transform: rotate(135deg); + font-size: 2.4vh; + position: fixed; + color: #fff; + text-align: center; + font-weight: 600; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7); } .border { - bottom: 7.9%; - left: 1.3%; - width: 0%; - text-align: center; + bottom: 7.9%; + left: 1.3%; + width: 0%; + text-align: center; } .square { - bottom: 6.30%; - width: 29vh; - height: 18.5vh; - border: 4px solid #bababa; - position: absolute; - display: inline-block; + bottom: 6.3%; + width: 29vh; + height: 18.5vh; + border: 4px solid #bababa; + position: absolute; + display: inline-block; } .circle { - bottom: 6.9%; - width: 27vh; - height: 22.9vh; - border: 4px solid #bababa; - position: absolute; - display: inline-block; - border-radius: 50%; + bottom: 6.9%; + width: 27vh; + height: 22.9vh; + border: 4px solid #bababa; + position: absolute; + display: inline-block; + border-radius: 50%; } /* Animation */ .slide-fade-enter-active { - transition: all 0.3s ease-out; + transition: all 0.3s ease-out; } .slide-fade-leave-active { - transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); + transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter-from, .slide-fade-leave-to { - transform: translateX(20px); - opacity: 0; + transform: translateX(20px); + opacity: 0; } .fade-enter-active, .fade-leave-active { - transition: opacity 2s ease; + transition: opacity 2s ease; } .fade-enter-from, .fade-leave-to { - opacity: 0; + opacity: 0; } /* Compass */ .baseplate { - position: relative; - margin: 0 auto; - top: -0.8vh; - width: 150px; - height: auto; + position: relative; + margin: 0 auto; + top: -0.8vh; + width: 150px; + height: auto; } .street-container { - position: relative; - top: 0.5vh; - font-family: Arial, Helvetica, sans-serif; - font-size: 1.4vh; - letter-spacing: 0.7px; - text-decoration: none; - font-style: normal; - font-variant: small-caps; - text-transform: none; - font-weight: 800; - text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6); + position: relative; + top: 0.5vh; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.4vh; + letter-spacing: 0.7px; + text-decoration: none; + font-style: normal; + font-variant: small-caps; + text-transform: none; + font-weight: 800; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6); } .street1 { - position: absolute; - margin: 0 auto; - right: 55%; - text-align: right!important; - color: rgb(255, 255, 255); + position: absolute; + margin: 0 auto; + right: 55%; + text-align: right !important; + color: rgb(255, 255, 255); } .street2 { - position: absolute; - margin: 0 auto; - left: 55%; - text-align: left!important; - color: rgb(255, 255, 255); + position: absolute; + margin: 0 auto; + left: 55%; + text-align: left !important; + color: rgb(255, 255, 255); } .pointer { - position: absolute; - margin: 0 auto; - top: -2%; - left: 0; - right: 0; - font-family: 'Yantramanav', sans-serif; - color: rgb(255, 255, 255); - font-size: 2.2vh; - text-align: center; - text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6); - z-index: 9999; + position: absolute; + margin: 0 auto; + top: -2%; + left: 0; + right: 0; + font-family: "Yantramanav", sans-serif; + color: rgb(255, 255, 255); + font-size: 2.2vh; + text-align: center; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6); + z-index: 9999; } .degrees { - position: absolute; - margin: 0 auto; - top: 80%; - left: 0; - right: 0; - opacity: 0.8; - font-family: 'Yantramanav', sans-serif; - color: rgb(255, 255, 255); - font-size: 1.5vh; - font-weight: 600; - text-align: center; - text-shadow: 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%); + position: absolute; + margin: 0 auto; + top: 80%; + left: 0; + right: 0; + opacity: 0.8; + font-family: "Yantramanav", sans-serif; + color: rgb(255, 255, 255); + font-size: 1.5vh; + font-weight: 600; + text-align: center; + text-shadow: 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%); } .bezel { - position: relative; - width:100%; - height: 2vh; - font-family: 'Yantramanav', sans-serif; - font-size: 0.35vh; - font-weight: 700; - text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6); + position: relative; + width: 100%; + height: 2vh; + font-family: "Yantramanav", sans-serif; + font-size: 0.35vh; + font-weight: 700; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6); } .bearing { - position: relative; - width:100%; - top: -0.5vh; - height: 3.5vh; - padding-left: 0.12vw; - font-family: Arial, Helvetica, sans-serif; - font-size: 2.3vh; - letter-spacing: 0.7px; - text-decoration: none; - font-style: normal; - font-variant: small-caps; - text-transform: none; - font-weight: 600; - text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6); + position: relative; + width: 100%; + top: -0.5vh; + height: 3.5vh; + padding-left: 0.12vw; + font-family: Arial, Helvetica, sans-serif; + font-size: 2.3vh; + letter-spacing: 0.7px; + text-decoration: none; + font-style: normal; + font-variant: small-caps; + text-transform: none; + font-weight: 600; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6); } diff --git a/server.lua b/server.lua index aeb96c2..b95bfa7 100644 --- a/server.lua +++ b/server.lua @@ -13,8 +13,8 @@ QBCore.Commands.Add('bank', 'Check Bank Balance', {}, false, function(source, _) TriggerClientEvent('hud:client:ShowAccounts', source, 'bank', bankamount) end) -QBCore.Commands.Add("dev", "Enable/Disable developer Mode", {}, false, function(source, _) - TriggerClientEvent("qb-admin:client:ToggleDevmode", source) +QBCore.Commands.Add('dev', 'Enable/Disable developer Mode', {}, false, function(source, _) + TriggerClientEvent('qb-admin:client:ToggleDevmode', source) end, 'admin') RegisterNetEvent('hud:server:GainStress', function(amount) @@ -39,7 +39,7 @@ RegisterNetEvent('hud:server:GainStress', function(amount) end Player.Functions.SetMetaData('stress', newStress) TriggerClientEvent('hud:client:UpdateStress', src, newStress) - TriggerClientEvent('QBCore:Notify', src, Lang:t("notify.stress_gain"), 'error', 1500) + TriggerClientEvent('QBCore:Notify', src, Lang:t('notify.stress_gain'), 'error', 1500) end) RegisterNetEvent('hud:server:RelieveStress', function(amount) @@ -62,7 +62,7 @@ RegisterNetEvent('hud:server:RelieveStress', function(amount) end Player.Functions.SetMetaData('stress', newStress) TriggerClientEvent('hud:client:UpdateStress', src, newStress) - TriggerClientEvent('QBCore:Notify', src, Lang:t("notify.stress_removed")) + TriggerClientEvent('QBCore:Notify', src, Lang:t('notify.stress_removed')) end) QBCore.Functions.CreateCallback('hud:server:getMenu', function(_, cb)