├── license
├── config
    └── config.lua
├── README.md
├── fxmanifest.lua
├── html
    ├── main.css
    ├── script.js
    └── ui.html
└── client
    └── client.lua


/license:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/config/config.lua:
--------------------------------------------------------------------------------
1 | Config = {}
2 | Config['TickTime'] = 1000
3 | Config['Hud'] = true
4 | Config['HideMinimap'] = true
5 | Config['Stress'] = false
6 | Config['PlayerID'] = true
7 | Config['Fuel'] = true --only Visible in Car
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Kl_HudV2 
2 | Original Thread: https://forum.cfx.re/t/ks-hud-v2-release-esx-1-1-final-esx-1-2-exm-new-hud-v2/1829368
3 | Created by: https://github.com/Kilichi/Kl_HudV2
4 | 
5 | To Enable/Disable things go to the config.lua and set things to "true" if u want to enable or "false" if u want to disable things
6 | 
7 | <3
8 | 


--------------------------------------------------------------------------------
/fxmanifest.lua:
--------------------------------------------------------------------------------
 1 | fx_version 'adamant'
 2 | game 'gta5'
 3 | name 'Kilichi Hud V2'
 4 | description 'Ks Hud Fivem'
 5 | ui_page 'html/ui.html'
 6 | author 'Kilichi#0001 | Kilichi'
 7 | 
 8 | files {
 9 |     'html/ui.html',
10 |     'html/script.js',
11 |     'html/main.css',
12 |     'html/animate.css',
13 |     'html/media.css'
14 | }
15 | 
16 | shared_scripts {
17 |     'config/config.lua'
18 | }
19 | 
20 | client_scripts {
21 |     'client/client.lua',
22 | }
23 | 


--------------------------------------------------------------------------------
/html/main.css:
--------------------------------------------------------------------------------
 1 | /** General Selectors*/
 2 | body {
 3 |     width: 100%;
 4 |     overflow: hidden;
 5 |     font-family: 'Oswald', sans-serif;
 6 | }
 7 | /** General Selectors*/
 8 | 
 9 | /*? ID Selector */
10 | #StatusHud 
11 | {
12 |     position: absolute;
13 |     bottom: 0.7vh;
14 |     left: 0.7vh;
15 | }
16 | /*? ID Selectors */
17 | 
18 | 
19 | /*! Class Selectors */
20 | .statback 
21 | {
22 |     background-color: rgba(0, 0, 0, 0.767);
23 |     color: white;
24 |     padding: 0.7vh;
25 |     text-align: center;
26 |     margin-top: 0.2vh;
27 |     border-radius: 0.4vh;
28 | }
29 | .fas 
30 | {
31 |     font-size: 0.7rem;
32 |     vertical-align: middle;
33 | }
34 | .textstat 
35 | {
36 |     width: 2vh;
37 |     float: right;
38 |     text-align: right;
39 |     font-size: 1.0vh;
40 |     margin-top: -0.25vh;
41 | }
42 | .red 
43 | {
44 |     width: 2.2vh;
45 |     float: right;
46 |     padding-left: 0.5vh;
47 |     text-align: right;
48 |     font-size: 1.0vh;
49 |     color: red;
50 | }
51 | /*! Class Selectors */
52 | 


--------------------------------------------------------------------------------
/html/script.js:
--------------------------------------------------------------------------------
 1 | window.addEventListener('message', function (event) {
 2 |     $("#StatusHud #stress").hide()
 3 |     $("#StatusHud #playerid").hide()
 4 |     $("#StatusHud #fuel").hide()
 5 |     let data = event.data
 6 |     loadStats = function(){
 7 |         $('#shieldval').html(Math.round(data.armour))
 8 |         $('#hungerlevel').html(Math.round(data.food))
 9 |         $('#waterlevel').html(Math.round(data.thirst))
10 |         $('#stresslevel').html(Math.round(data.stress))
11 |         $('#playeridlevel').html(Math.round(data.playerid))
12 |         $('#fuellevel').html(Math.round(data.fuel))
13 |     }
14 |     if (data.hud && !data.pauseMenu){
15 |         $("body").show();
16 |         if (data.health != -100){
17 |             $('#healtlevel').html(Math.round(data.health))
18 |             if (data.health < 50 ){
19 |                 $('#healtlevel').addClass('red')
20 |             }else{
21 |                 $('#healtlevel').removeClass('red')
22 |             }
23 |         }else if(data.health == -100){
24 |             $('#healtlevel').html("0")
25 |             $('#healtlevel').addClass('red')
26 |         }
27 |         if(data.hudPosition == 'right'){
28 |             $("#StatusHud").animate({"left": '28vh', "bottom":'3vh'},200 );
29 |         }else{
30 |             $("#StatusHud").animate({"left": '0.7vh', "bottom":'0.7vh'},350 );
31 |         }
32 |         if(data.fuelPosition == 'right'){
33 |             $("#StatusHud #fuel").show() 
34 |         }else{
35 |             $("#StatusHud #fuel").hide()
36 |         }
37 |         loadStats();
38 |         if (data.stress) {
39 |             $("#StatusHud #stress").show() 
40 |         }else if(!data.stress){
41 |             $("#StatusHud #stress").hide()
42 |         }
43 | 		if (data.playerid) {
44 |             $("#StatusHud #playerid").show() 
45 |         }else if(!data.playerid){
46 |             $("#StatusHud #playerid").hide()
47 |         }
48 |     }
49 | });
50 | 


--------------------------------------------------------------------------------
/html/ui.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <link rel="stylesheet" href="main.css">
 4 |     <script src="https://kit.fontawesome.com/a412d17519.js" crossorigin="anonymous"></script>
 5 |     <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
 6 |     <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
 7 | </head>
 8 | <body>
 9 |     <div id="StatusHud">
10 |         <div id="playerid" class="statback">
11 |             <i class="fas fa-user" style="color:rgb(230, 230, 230); font-size:0.7rem;"></i>
12 |             <div id="playeridlevel" class="textstat">N/A</div>
13 |         </div>
14 |         <div id="healt" class="statback">
15 |             <i class="fas fa-heart-broken" style="color:red;"></i>
16 |             <div id="healtlevel" class="textstat">100</div>
17 |         </div>
18 |         <div id="shield" class="statback">
19 |             <i class="fas fa-shield-alt" style="color:royalblue;"></i>
20 |             <div id="shieldval" class="textstat">100</div>
21 |         </div>
22 |         <div id="hunger" class="statback">
23 |             <i class="fas fa-hamburger" style="color: orange;"></i>
24 |             <div id="hungerlevel" class="textstat">100</div>
25 |         </div>
26 |         <div id="water" class="statback">
27 |             <i class="fas fa-glass-whiskey" style="color:rgb(72, 72, 216)"></i>
28 |             <div id="waterlevel" class="textstat" style=" margin-top: -0.10vh;">9</div>
29 |         </div>
30 |         <div id="stress" class="statback">
31 |             <i class="fas fa-brain" style="color:rgb(162, 53, 224); font-size:0.7rem;"></i>
32 |             <div id="stresslevel" class="textstat">100</div>
33 |         </div>
34 |         <div id="fuel" class="statback">
35 |             <i class="fas fa-gas-pump" style="color:rgb(53, 224, 53); font-size:0.7rem;"></i>
36 |             <div id="fuellevel" class="textstat">FUEL</div>
37 |         </div>
38 |     </div>
39 | </body>
40 | <script type="text/javascript" src="script.js"></script>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/client/client.lua:
--------------------------------------------------------------------------------
 1 | -- ESX Library
 2 | ESX = nil
 3 | Citizen.CreateThread(function()
 4 |     while ESX == nil do
 5 |         TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)
 6 |         Citizen.Wait(100)
 7 |     end
 8 | end)
 9 | -- Fin Config
10 | 
11 | -- Principal Event
12 | RegisterNetEvent("Kl_Hud:updateStatus")
13 | AddEventHandler("Kl_Hud:updateStatus", function(status)
14 |     TriggerEvent('esx_status:getStatus', 'hunger', function(status)
15 |         food = status.val / 10000
16 |     end)
17 |     TriggerEvent('esx_status:getStatus', 'thirst', function(status)
18 |         thirst = status.val / 10000
19 |     end)
20 |     if (Config['Stress']) then
21 |         TriggerEvent('esx_status:getStatus', 'stress', function(status)
22 |             stress = status.val / 10000
23 |         end)
24 |     end
25 | end)
26 | -- End Principal Event
27 | 
28 | -- Principal Loop
29 | Citizen.CreateThread(function()
30 |     while true do 
31 |         Citizen.Wait(Config['TickTime'])
32 |         if (Config['HideMinimap']) then
33 |             if IsPedSittingInAnyVehicle(PlayerPedId()) then
34 |                 DisplayRadar(true)
35 |             else
36 |                 DisplayRadar(false)
37 |             end
38 |         else
39 |             DisplayRadar(true)
40 |         end
41 |         if (Config['Stress']) then
42 |             localStress = stress
43 |         else
44 |             localStress = false
45 |         end
46 | 		if (Config['PlayerID']) then
47 |             localPlayerID = playerid
48 |             playeridInput = GetPlayerServerId(NetworkGetEntityOwner(GetPlayerPed(-1)))
49 |         else
50 |             localPlayerID = false
51 |         end
52 |         
53 |         local hudPosition
54 |         if IsPedSittingInAnyVehicle(PlayerPedId()) or not Config['HideMinimap'] then
55 |             hudPosition = 'right'
56 |         else
57 |             hudPosition = 'left'
58 |         end
59 | 
60 |         local fuelPosition
61 |         local playerVeh = GetVehiclePedIsIn(PlayerPedId(), false)
62 |         if (Config['Fuel']) then
63 |         if IsPedSittingInAnyVehicle(PlayerPedId()) then
64 |             fuelPosition = 'right'
65 |             fuelEvent = GetVehicleFuelLevel(playerVeh); --REMOVES NO ENTITY SPAM (F8)
66 |         else 
67 |             localPlayerID = false
68 |         end
69 |     end
70 | 
71 |         SendNUIMessage({
72 |             hud = Config['Hud'];
73 |             pauseMenu = IsPauseMenuActive();
74 |             armour = GetPedArmour(PlayerPedId());
75 |             health = GetEntityHealth(PlayerPedId())-100;
76 |             food = food;
77 |             thirst = thirst;
78 |             stress = localStress;
79 |             playerid = playeridInput;
80 |             fuel = fuelEvent;
81 |             hudPosition = hudPosition;
82 |             fuelPosition = fuelPosition;
83 |         })
84 |     end
85 | end)
86 | -- End Principal Loop
87 | 


--------------------------------------------------------------------------------