Versions Check added and Position arguments added.

README.md

@@ -45,6 +45,12 @@ setr hud:fuel false
 # Vehicles speed: "imperial" or "metric"
 setr hud:unitsystem "imperial"
 
+# HUD position: top, middle, bottom (default: bottom)
+setr hud:position "bottom"
+
+# HUD horizontal position: left, center, right
+setr hud:hposition "left"
+
 # Radar mode: by default, the radar is only enabled while sitting on a vehicle.
 # Set this to true to have it always enabled. This will also enable the map cycler.
 setr hud:persistentRadar false

fxmanifest.lua

@@ -12,6 +12,56 @@ license 'MIT License'
 author 'Michatec'
 repository 'https://github.com/Michatec/xhud'
 
+--[[ Convars ]]--
+convar {
+    name = 'hud:circleMap',
+    default = 'true',
+    description = 'Enable circle map',
+    save = true
+}
+convar {
+    name = 'hud:logo',
+    default = 'true',
+    description = 'Show logo',
+    save = true
+}
+convar {
+    name = 'hud:position',
+    default = 'bottom',
+    description = 'HUD position: top, middle, bottom',
+    save = true
+}
+convar {
+    name = 'hud:stress',
+    default = 'false',
+    description = 'Enable stress status',
+    save = true
+}
+convar {
+    name = 'hud:versioncheck',
+    default = 'true',
+    description = 'Enable version check',
+    save = true
+}
+convar {
+    name = 'hud:persistentRadar',
+    default = 'false',
+    description = 'Keep radar always visible',
+    save = true
+}
+convar {
+    name = 'hud:stamina',
+    default = 'false',
+    description = 'Show stamina indicator',
+    save = true
+}
+convar {
+    name = 'hud:hposition',
+    default = 'left',
+    description = 'HUD horizontal position: left, center, right',
+    save = true
+}
+
 --[[ Manifest ]]--
 dependencies {
 	'ox_lib'
@@ -32,7 +82,8 @@ client_scripts {
 }
 
 server_scripts {
-	'server/seatbelt.lua'
+	'server/seatbelt.lua',
+	'server/vcheck.lua'
 }
 
 ui_page 'web/index.html'

server/vcheck.lua

@@ -0,0 +1,8 @@
+print(' xHUD - Version Check\nThis resource is open source and available on GitHub:\nhttps://github.com/Michatec/xhud')
+print('Checking for updates...')
+if lib.versionCheck('michatec/xhud') then
+    print('You are running the latest version of xhud.')
+else
+    print('Update available for xhud, please update to the latest version.')
+    print('Download it from https://github.com/Michatec/xhud')
+end

shared/init.lua

@@ -77,6 +77,10 @@ if not IsDuplicityVersion() then
             SendMessage('setLogo')
         end
 
+        local position = GetConvar('hud:position', 'bottom')
+        local hPosition = GetConvar('hud:hposition', 'center')
+        SendMessage('setPosition', { v = position, h = hPosition })
+
         HUD = true
         SendMessage('toggleHud', HUD)
     end
@@ -87,9 +91,7 @@ if not IsDuplicityVersion() then
     end)
 
     -- Commands
-    lib.addCommand('togglehud', {
+    RegisterCommand('togglehud', function()
-        help = 'Toggle the HUD visibility',
-    }, function()
         HUD = not HUD
         SendMessage('toggleHud', HUD)
         lib.notify({
@@ -99,12 +101,11 @@ if not IsDuplicityVersion() then
             type = 'inform',
             duration = 2000
         })
-    end)
+    end, false)
 
-    lib.addCommand('reloadhud', {
+    RegisterCommand('reloadhud', function()
-        help = 'Reload the HUD',
-    }, function()
         InitializeHUD()
+        DisplayRadar(true)
         lib.notify({
             id = 'xhud:reload',
             title = 'HUD',
@@ -112,7 +113,52 @@ if not IsDuplicityVersion() then
             type = 'inform',
             duration = 2000
         })
-    end)
+    end, false)
+
+    RegisterCommand('sethudposition', function(_, args)
+        if not args[1] then
+            lib.notify({
+                id = 'xhud:position:error',
+                title = 'HUD',
+                description = 'Usage: /sethudposition [top|middle|bottom] [left|center|right]',
+                type = 'error',
+                duration = 3000
+            })
+            return
+        end
+        local position = args[1]:lower()
+        local hPosition = args[2] and args[2]:lower() or 'center'
+        if position ~= 'top' and position ~= 'middle' and position ~= 'bottom' then
+            lib.notify({
+                id = 'xhud:position:error',
+                title = 'HUD',
+                description = 'Invalid position. Use: top, middle, or bottom',
+                type = 'error',
+                duration = 3000
+            })
+            return
+        end
+        if hPosition ~= 'left' and hPosition ~= 'center' and hPosition ~= 'right' then
+            lib.notify({
+                id = 'xhud:position:error',
+                title = 'HUD',
+                description = 'Invalid horizontal position. Use: left, center, or right',
+                type = 'error',
+                duration = 3000
+            })
+            return
+        end
+        ExecuteCommand('set hud:position ' .. position)
+        ExecuteCommand('set hud:hposition ' .. hPosition)
+        SendMessage('setPosition', { v = position, h = hPosition })
+        lib.notify({
+            id = 'xhud:position',
+            title = 'HUD',
+            description = 'HUD position set to: ' .. position .. ' ' .. hPosition,
+            type = 'success',
+            duration = 2000
+        })
+    end, false)
 else
     if GetConvar('hud:versioncheck', 'true') == 'true' then
         lib.versionCheck('michatec/xhud')

web/js/listener.js

@@ -42,6 +42,61 @@ window.onload = (event) => {
       Container.style.display = data ? "flex" : "none";
     }
 
+    if (action == "setPosition") {
+      console.log("setPosition received:", data);
+      const IconsContainer = document.getElementById("IconsContainer");
+      
+      let vPosition = data;
+      let hPosition = "center";
+      
+      if (typeof data === "object" && data !== null) {
+        vPosition = data.v || "bottom";
+        hPosition = data.h || "center";
+      }
+      
+      IconsContainer.style.marginTop = "";
+      IconsContainer.style.marginBottom = "";
+      IconsContainer.style.top = "";
+      IconsContainer.style.bottom = "";
+      IconsContainer.style.left = "";
+      IconsContainer.style.right = "";
+      IconsContainer.style.transform = "";
+      
+      switch (vPosition) {
+        case "top":
+          IconsContainer.style.top = "20px";
+          IconsContainer.style.bottom = "auto";
+          break;
+        case "middle":
+          IconsContainer.style.top = "50%";
+          break;
+        case "bottom":
+        default:
+          IconsContainer.style.top = "auto";
+          IconsContainer.style.bottom = "20px";
+          break;
+      }
+      
+      switch (hPosition) {
+        case "left":
+          IconsContainer.style.left = "220px";
+          IconsContainer.style.right = "auto";
+          IconsContainer.style.transform = vPosition === "middle" ? "translate(0, -50%)" : "";
+          break;
+        case "right":
+          IconsContainer.style.left = "auto";
+          IconsContainer.style.right = "60px";
+          IconsContainer.style.transform = vPosition === "middle" ? "translate(0, -50%)" : "";
+          break;
+        case "center":
+        default:
+          IconsContainer.style.left = "50%";
+          IconsContainer.style.right = "auto";
+          IconsContainer.style.transform = vPosition === "middle" ? "translate(-50%, -50%)" : "translateX(-50%)";
+          break;
+      }
+    }
+
     if (action == "setLogo") {
       Logo.style.display = "block";
     }

web/style.css

@@ -13,10 +13,17 @@ img {
   margin: 0;
   display: none;
   flex-direction: column;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 
 #IconsContainer {
-  margin-top: auto;
+  margin-bottom: 20px;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 #Icons {