diff --git a/client.lua b/client.lua index 8935372..83bf306 100644 --- a/client.lua +++ b/client.lua @@ -4,12 +4,13 @@ local currentVehPlate = "" local recheckCurrentVeh = 10000 local currentVehOwned = false local lastUpdatedMileage = nil +local Position = Config.Position local function distanceCheck() local ped = PlayerPedId() if not IsPedInAnyVehicle(PlayerPedId(), false) then - SendNUIMessage({ type = "hide" }) + sendToNui({ type = "hide" }) return end @@ -17,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 @@ -48,7 +49,7 @@ local function distanceCheck() return end - SendNUIMessage({ type = "show", value = currentVehMileage, unit = Config.Unit }) + sendToNui({ 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 }) + sendToNui({ type = "show", value = roundedMileage, unit = Config.Unit, position = Position }) if roundedMileage ~= lastUpdatedMileage then Entity(vehicle).state:set("vehicleMileage", roundedMileage) @@ -75,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 c29e829..74b749c 100644 --- a/config.lua +++ b/config.lua @@ -1,3 +1,5 @@ Config = {} Config.Framework = "auto" -- or "QBCore", "Qbox", "ESX" -Config.Unit = "miles" -- or "kilometers" \ No newline at end of file +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 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"; }