From 78d1cc44747b8a2e0ba20342ee7f0ca8d546e7cc Mon Sep 17 00:00:00 2001 From: Lindholm Date: Tue, 4 Jun 2024 14:21:17 +0200 Subject: [PATCH 1/2] Position update --- client.lua | 5 +++-- config.lua | 3 ++- web/main.css | 3 +-- web/main.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 50 insertions(+), 5 deletions(-) diff --git a/client.lua b/client.lua index 8935372..9046d3a 100644 --- a/client.lua +++ b/client.lua @@ -4,6 +4,7 @@ local currentVehPlate = "" local recheckCurrentVeh = 10000 local currentVehOwned = false local lastUpdatedMileage = nil +local Position = Config.Position local function distanceCheck() local ped = PlayerPedId() @@ -48,7 +49,7 @@ local function distanceCheck() return end - SendNUIMessage({ type = "show", value = currentVehMileage, unit = Config.Unit }) + SendNUIMessage({ type = "show", value = currentVehMileage, unit = Config.Unit, position = Position }) local dist = 0 if IsVehicleOnAllWheels(vehicle) and not IsEntityInWater(vehicle) then @@ -59,7 +60,7 @@ local function distanceCheck() currentVehMileage = currentVehMileage + distKm lastLocation = GetEntityCoords(vehicle) local roundedMileage = tonumber(string.format("%.1f", currentVehMileage)) - SendNUIMessage({ type = "show", value = roundedMileage, unit = Config.Unit }) + SendNUIMessage({ type = "show", value = roundedMileage, unit = Config.Unit, position = Position }) if roundedMileage ~= lastUpdatedMileage then Entity(vehicle).state:set("vehicleMileage", roundedMileage) diff --git a/config.lua b/config.lua index c29e829..217c376 100644 --- a/config.lua +++ b/config.lua @@ -1,3 +1,4 @@ Config = {} Config.Framework = "auto" -- or "QBCore", "Qbox", "ESX" -Config.Unit = "miles" -- or "kilometers" \ No newline at end of file +Config.Unit = "miles" -- "miles" or "kilometers" +Config.Position = "bottom-right" -- "bottom-right" or "bottom-left" or "top-right" or "top-left" or "bottom-center" or "top-center" \ No newline at end of file diff --git a/web/main.css b/web/main.css index 6ce9462..f0a0f55 100644 --- a/web/main.css +++ b/web/main.css @@ -13,6 +13,7 @@ body { .odometer { display: none; gap: 7.5px; + margin: 2rem; align-items: center; position: absolute; background: #212529; @@ -20,8 +21,6 @@ body { padding: 5px 8px; border-radius: 7px; color: white; - right: 25px; - bottom: 25px; transition: 0.5s ease-in-out; user-select: none; } diff --git a/web/main.js b/web/main.js index ba95c3d..5fe7843 100644 --- a/web/main.js +++ b/web/main.js @@ -3,6 +3,49 @@ const value = document.querySelector(".odometer-value"); const unit = document.querySelector(".odometer-unit"); + function elementPosition(position) { + element = odometer; + element.style.top = ''; + element.style.bottom = ''; + element.style.left = ''; + element.style.right = ''; + element.style.transform = ''; + + switch (position) { + + case 'bottom-right': + element.style.bottom = '0'; + element.style.right = '0'; + break; + case 'bottom-left': + element.style.bottom = '0'; + element.style.left = '0'; + break; + case 'top-right': + element.style.top = '0'; + element.style.right = '0'; + break; + case 'top-left': + element.style.top = '0'; + element.style.left = '0'; + break; + case 'bottom-center': + element.style.bottom = '0'; + element.style.left = '50%'; + element.style.transform = 'translateX(-50%)'; + break; + case 'top-center': + element.style.top = '0'; + element.style.left = '50%'; + element.style.transform = 'translateX(-50%)'; + break; + default: + element.style.bottom = '0'; + element.style.right = '0'; + break; + } + } + window.addEventListener("message", (evt) => { const { data } = evt; @@ -16,6 +59,7 @@ .toString() .padStart(6, "0"); unit.innerHTML = data.unit === "miles" ? "MI" : "KM"; + elementPosition(data.position); } else if (data.type === "hide") { odometer.style.display = "none"; } From 546ccc5668c5efd7f9d4f215a40cf5d4b85aadb7 Mon Sep 17 00:00:00 2001 From: Lindholm Date: Tue, 4 Jun 2024 23:33:53 +0200 Subject: [PATCH 2/2] Use UI? --- client.lua | 14 ++++++++++---- config.lua | 1 + 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/client.lua b/client.lua index 9046d3a..83bf306 100644 --- a/client.lua +++ b/client.lua @@ -10,7 +10,7 @@ local function distanceCheck() local ped = PlayerPedId() if not IsPedInAnyVehicle(PlayerPedId(), false) then - SendNUIMessage({ type = "hide" }) + sendToNui({ type = "hide" }) return end @@ -18,7 +18,7 @@ local function distanceCheck() local vehClass = GetVehicleClass(vehicle) if GetPedInVehicleSeat(vehicle, -1) ~= ped or vehClass == 13 or vehClass == 14 or vehClass == 15 or vehClass == 16 or vehClass == 17 or vehClass == 21 then - SendNUIMessage({ type = "hide" }) + sendToNui({ type = "hide" }) return end @@ -49,7 +49,7 @@ local function distanceCheck() return end - SendNUIMessage({ type = "show", value = currentVehMileage, unit = Config.Unit, position = Position }) + sendToNui({ type = "show", value = currentVehMileage, unit = Config.Unit, position = Position }) local dist = 0 if IsVehicleOnAllWheels(vehicle) and not IsEntityInWater(vehicle) then @@ -60,7 +60,7 @@ local function distanceCheck() currentVehMileage = currentVehMileage + distKm lastLocation = GetEntityCoords(vehicle) local roundedMileage = tonumber(string.format("%.1f", currentVehMileage)) - SendNUIMessage({ type = "show", value = roundedMileage, unit = Config.Unit, position = Position }) + sendToNui({ type = "show", value = roundedMileage, unit = Config.Unit, position = Position }) if roundedMileage ~= lastUpdatedMileage then Entity(vehicle).state:set("vehicleMileage", roundedMileage) @@ -76,4 +76,10 @@ CreateThread(function() end end) +function sendToNui(data) + if Config.ShowMileage then + SendNUIMessage(data) + end +end + exports("GetUnit", function() return Config.Unit end) \ No newline at end of file diff --git a/config.lua b/config.lua index 217c376..74b749c 100644 --- a/config.lua +++ b/config.lua @@ -1,4 +1,5 @@ Config = {} Config.Framework = "auto" -- or "QBCore", "Qbox", "ESX" +Config.ShowMileage = true Config.Unit = "miles" -- "miles" or "kilometers" Config.Position = "bottom-right" -- "bottom-right" or "bottom-left" or "top-right" or "top-left" or "bottom-center" or "top-center" \ No newline at end of file