Update 1.3

client/client.lua

@@ -11,6 +11,11 @@
     Wait(2000)
     SendReactMessage("seatbelt", true)
   end
+  if Config.MenuOptions.Stress then
+    Wait(2000)
+    SendReactMessage("stress", true)
+  end
+
 local function toggleNuiFrame(shouldShow)
   -- SetNuiFocus(shouldShow, shouldShow)
   SendReactMessage('setVisible', shouldShow)
@@ -73,6 +78,20 @@ local function loadHud()
   end)
 end
 
+local function escapeMenuLoop()
+  CreateThread(function()
+      while loaded do
+        local menuActive = IsPauseMenuActive()
+        if menuActive then
+          toggleNuiFrame(false)
+        else
+          toggleNuiFrame(true)
+        end
+        Wait(1000)
+      end
+  end)
+end
+
 
 local function loadCarHud()
   CreateThread(function()
@@ -83,7 +102,7 @@ local function loadCarHud()
       if isInVeh then 
         local vehicle = GetVehiclePedIsIn(ped, false)
         local gear = GetVehicleCurrentGear(vehicle)
-        local fuel = GetVehicleFuelLevel(vehicle)
+        local fuel = math.floor(GetVehicleFuelLevel(vehicle))
         local speedVal = GetEntitySpeed(vehicle) * 2.237 --Feel free to edit this if needed to switch to KMH, currently using MPH. it's 3.6 for KMH.
         local speed = math.floor(speedVal)
         -- toggleNuiFrame(true)
@@ -107,19 +126,23 @@ local function loadHudMisc()
   CreateThread(function()
     local oldHunger = nil
     local oldThirst = nil
+    local oldStress = nil
     while loaded do
         local PlayerData = QBCore.Functions.GetPlayerData()
         local hunger = math.floor(PlayerData.metadata['hunger'])
         local thirst = math.floor(PlayerData.metadata['thirst'])
+        local stress = math.floor(PlayerData.metadata['stress'])
         local qbData = {
           hunger = hunger,
-          thirst = thirst
+          thirst = thirst,
+          stress = stress
         }
-        if oldHunger ~= hunger or oldThirst ~= thirst then
+        if oldHunger ~= hunger or oldThirst ~= thirst or oldStress ~= stress then
         SendReactMessage("frameworkStatus", qbData)
         -- print(qbData.hunger)
         oldHunger = hunger
         oldThirst = thirst
+        oldStress = stress
         end
       Wait(1000)
     end
@@ -153,6 +176,9 @@ if Config.QBCore then
     loadHud()
     loadCarHud()
     loadHudMisc()
+    if Config.EscapeMenuLoop then
+      escapeMenuLoop()
+    end
     QBCore.Functions.Notify("Hud Loaded!", 'success', 1000)
     print("Loaded Hud!")
   end)
@@ -162,6 +188,9 @@ if Config.QBCore then
     loaded = true
     loadHud()
     loadCarHud()
+    if Config.EscapeMenuLoop then
+      escapeMenuLoop()
+    end
   end
 
   RegisterCommand("reloadHud", function()

shared/config.lua

@@ -2,8 +2,10 @@ Config = {
   QBCore = false, -- Will update/enable status features to add hunger/thirst for this framework.
   ESX = false, -- Same thing as the QB One but for ESX.
   Seatbelt = false, --  (QB Only for now) Enables the seatbelt which will lead to more resource usage!
-
+  EscapeMenuLoop = false, -- (Standalone) Enable this to make the menu disappear when the user is in the Pause Menu, but this increases the resmon usage on the script due to the new loop, up to you.
+
   MenuOptions = {
     ID = true, -- (Standalone) Enable to display the players ID in the HUD.
+    Stress = false, -- (QB Only) Displays the user's stress using the QB Metadata, this isn't a fully written stress mechanic, simply grabs the info from metadata and displays it.
   },
 }

web/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "react": "^18.2.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

web/src/components/App.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 import "./App.css";
 import { debugData } from "../utils/debugData";
-// import { fetchNui } from "../utils/fetchNui";
 import { useNuiEvent } from "../hooks/useNuiEvent";
 import { animateNumber } from "../utils/animateNumber";
+import { CircularProgressbarWithChildren } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
 
 debugData([
   {
@@ -12,20 +13,45 @@ debugData([
   },
 ]);
 
+type UserStats = {
+  hp: number;
+  armour: number;
+  micActive: boolean;
+};
+
+type VehicleStats = {
+  speed: number;
+  gear: number;
+  fuel: number;
+  seatbeltOn: boolean;
+};
+
+type frameworkStats = {
+  hunger: number;
+  thirst: number;
+  stress: number;
+};
+
 const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
   const [vehHud, setVehVisiblity] = useState(false);
   const [framework, setframework] = useState(false);
   const [id, setid] = useState(false);
   const [seatbelt, setSeatbelt] = useState(false);
+  const [stress, setStress] = useState(false);
+  const [stressValue, setStressValue] = useState<number>(0);
   const [userId, setUserId] = useState("");
+
+  // Options
   useNuiEvent("setVisible", setVisible);
   useNuiEvent("framework", setframework);
   useNuiEvent("id", setid);
+  useNuiEvent("stress", setStress);
   useNuiEvent("seatbelt", setSeatbelt);
   useNuiEvent("setUserId", setUserId);
   useNuiEvent("setVehV", setVehVisiblity);
-  useNuiEvent("hudStats", (retData) => {
+
+  useNuiEvent<UserStats>("hudStats", (retData) => {
     const userHealth = document.getElementById(
       "user-health"
     ) as HTMLSpanElement;
@@ -51,19 +77,17 @@ const App: React.FC = () => {
     console.log(JSON.stringify(retData));
   });
 
-  useNuiEvent("vehHud", (retData) => {
+  useNuiEvent<VehicleStats>("vehHud", (retData) => {
     const mph = document.getElementById("mph") as HTMLSpanElement;
     const gear = document.getElementById("gear") as HTMLSpanElement;
     const fuel = document.getElementById("fuel") as HTMLSpanElement;
     const seatBelt = document.getElementById("seatbelt") as HTMLLIElement;
     console.log(JSON.stringify(retData));
 
     if (seatbelt && retData.seatbeltOn) {
-      seatBelt.style.color = "white";
-      seatBelt.classList.replace("fa-user-slash", "fa-user");
+      seatBelt.style.color = "green";
     } else if (seatbelt && !retData.seatbeltOn) {
       seatBelt.style.color = "red";
-      seatBelt.classList.replace("fa-user", "fa-user-slash");
     }
     // MPH Text
     // mph.textContent = ` ${speed} MP/H`;
@@ -76,13 +100,17 @@ const App: React.FC = () => {
     animateNumber(fuel, retData.fuel, "%");
   });
 
-  useNuiEvent("frameworkStatus", (data) => {
+  useNuiEvent<frameworkStats>("frameworkStatus", (data) => {
     const userHunger = document.getElementById(
       "user-hunger"
     ) as HTMLSpanElement;
     const userThirst = document.getElementById(
       "user-thirst"
     ) as HTMLSpanElement;
+    const userStress = document.getElementById("user-stress") as HTMLLIElement;
+
+    // animateNumber(userStress, data.stress, "%");
+    setStressValue(data.stress);
 
     animateNumber(userHunger, data.hunger, "%");
 
@@ -109,9 +137,29 @@ const App: React.FC = () => {
               <i className="fa-solid fa-burger text-yellow-500"></i>{" "}
               <span id="user-hunger"> 100%</span>
             </p>
-            <p className="font-bold bg-black p-2 rounded w-10">
+            <p className="font-bold bg-black p-2 rounded-full w-10">
               <i className="fa-solid fa-microphone mt-1" id="mic"></i>
             </p>
+            {stress && (
+              <>
+                <div className="w-10 bg-black rounded-full">
+                  <CircularProgressbarWithChildren
+                    value={stressValue}
+                    styles={{
+                      path: {
+                        stroke: `red`,
+                      },
+                      trail: {
+                        stroke: "black",
+                        strokeLinecap: "round",
+                      },
+                    }}
+                  >
+                    <i className="fa-solid fa-brain"></i>
+                  </CircularProgressbarWithChildren>
+                </div>
+              </>
+            )}
             <p
               className="font-bold bg-black p-2 rounded wid"
               style={{ display: framework ? "block" : "none" }}
@@ -169,8 +217,7 @@ const App: React.FC = () => {
           )}
         </div>
       </div>
-
-      {/* Id Without CarHud */}
+      {/* ID Without CarHud */}
       {id && !vehHud && (
         <div className="id w-24 text-center">
           <p className="font-bold bg-black p-2 rounded smallIcons">

web/src/utils/animateNumber.ts

@@ -5,7 +5,7 @@ export const animateNumber = (element: any, newValue: any, symbol = "") => {
     return;
   }
 
-  const duration = 1000; // Animation duration in milliseconds
+  const duration = 500;
   const start = performance.now();
 
   requestAnimationFrame(function animate(currentTime) {