Players Online Stats added and some bugfixes

client/hud.lua

@@ -42,7 +42,7 @@ CreateThread(function()
 			end
 
 			local curUnderwaterTime = GetPlayerUnderwaterTimeRemaining(cache.playerId)
-			if curUnderwaterTime < maxUnderwaterTime then
+			if maxUnderwaterTime and curUnderwaterTime < maxUnderwaterTime then
 				SendMessage('setOxygen', {
 					current = curUnderwaterTime,
 					max = maxUnderwaterTime

shared/init.lua

@@ -81,6 +81,15 @@ if not IsDuplicityVersion() then
         local hPosition = GetConvar('hud:hposition', 'center')
         SendMessage('setPosition', { v = position, h = hPosition })
 
+        local players = #GetActivePlayers()
+        SendMessage('setPlayerCount', players)
+        CreateThread(function()
+            while HUD do
+                Wait(30000)
+                SendMessage('setPlayerCount', #GetActivePlayers())
+            end
+        end)
+
         HUD = true
         SendMessage('toggleHud', HUD)
     end
@@ -90,7 +99,6 @@ if not IsDuplicityVersion() then
         InitializeHUD()
     end)
 
-    -- Commands
     RegisterCommand('togglehud', function()
         HUD = not HUD
         SendMessage('toggleHud', HUD)

web/index.html

@@ -19,7 +19,7 @@
       <div id="IconsContainer">
         <div id="Icons">
           <div id="VoiceIndicator" class="Icon">
-            <i id="VoiceIcon" class="fas fa-times"></i>
+            <i id="VoiceIcon" class="fas fa-microphone"></i>
           </div>
 
           <div id="HealthIndicator" class="Icon">
@@ -59,13 +59,16 @@
           </div>
 
           <i id="SeatbeltIcon" class="fas fa-user-slash outerIcon"></i>
-
-          <div id="ID" class="outerIcon"></div>
         </div>
       </div>
     </div>
-    <div id="Logo">
+    
-      <img src="assets/images/logo.png" alt="xHUD Logo" />
+    <div id="TopRight">
+      <div id="Logo">
+        <img src="assets/images/logo.png" alt="xHUD Logo" />
+      </div>
+      <div id="ID" class="outerIconTop"></div>
+      <div id="PlayerCount" class="outerIconTop"></div>
     </div>
 
     <audio id="buckle" src="assets/sounds/buckle.ogg" preload></audio>

web/js/listener.js

@@ -5,8 +5,10 @@ window.onload = (event) => {
   fetch(`https://${GetParentResourceName()}/nuiReady`);
 
   const Container = document.getElementById("Container");
+  const TopRight = document.getElementById("TopRight");
   const Logo = document.getElementById("Logo");
   const ID = document.getElementById("ID");
+  const PlayerCount = document.getElementById("PlayerCount");
 
   const Speed = document.getElementById("SpeedIndicator");
   const Fuel = document.getElementById("FuelIndicator");
@@ -73,13 +75,13 @@ window.onload = (event) => {
         case "bottom":
         default:
           IconsContainer.style.top = "auto";
-          IconsContainer.style.bottom = "20px";
+          IconsContainer.style.bottom = "10px";
           break;
       }
       
       switch (hPosition) {
         case "left":
-          IconsContainer.style.left = "220px";
+          IconsContainer.style.left = "300px";
           IconsContainer.style.right = "auto";
           IconsContainer.style.transform = vPosition === "middle" ? "translate(0, -50%)" : "";
           break;
@@ -102,6 +104,7 @@ window.onload = (event) => {
     }
 
     if (action == "setPlayerId") {
+      TopRight.style.display = "flex";
       if (data) {
         ID.style.display = "block";
         ID.textContent = "#" + data;
@@ -110,6 +113,16 @@ window.onload = (event) => {
       }
     }
 
+    if (action == "setPlayerCount") {
+      TopRight.style.display = "flex";
+      if (data != null && data >= 1) {
+        PlayerCount.style.display = "block";
+        PlayerCount.textContent = data + " Players";
+      } else {
+        PlayerCount.style.display = "none";
+      }
+    }
+
     if (action == "setHealth") {
       Health.style.display = "block";
 
@@ -227,6 +240,8 @@ window.onload = (event) => {
 
     if (action == "setVoice") {
       Voice.style.display = "block";
+      TopRight.style.display = "flex";
+      
       if (data == "disconnected") {
         VoiceIcon.classList.remove("fa-microphone");
         VoiceIcon.classList.add("fa-times");

web/style.css

@@ -50,17 +50,32 @@ img {
   transform: translate(-50%, -50%);
 }
 
-/* Customisations */
+#TopRight {
-
+  position: absolute;
-#SpeedIcon:not(.fa-tachometer-alt) {
+  top: 20px;
-  font-family: sans-serif;
+  right: 40px;
-  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
 }
 
-#ID {
+.IconTop {
-  font-family: sans-serif;
+  position: relative;
-  font-weight: 700;
+  width: 40px;
-  font-size: 16px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgb(50, 50, 50);
+  display: none;
+}
+
+.IconTop i {
+  color: white;
+  position: absolute;
+  font-size: 14px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .outerIcon {
@@ -73,17 +88,33 @@ img {
   display: none;
 }
 
-/* Logo */
+.outerIconTop {
+  color: #fff;
+  font-family: sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  text-shadow: 1px 1px 10px #000;
+  text-align: right;
+  display: none;
+}
 
 #Logo {
-  position: absolute;
-  top: 20px;
-  right: 40px;
   max-width: 128px;
   opacity: 0.8;
   display: none;
 }
 
+#Logo img {
+  width: 100%;
+}
+
+/* Customisations */
+
+#SpeedIcon:not(.fa-tachometer-alt) {
+  font-family: sans-serif;
+  font-size: 18px;
+}
+
 /* Animations */
 
 .flash {