formatting(all): Format with prettier and lua formatter

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+max_line_length = 300
+indent_size = 4
+indent_style = space

[core]/cron/server/main.lua

@@ -3,8 +3,8 @@ local LastTime = nil
 
 function RunAt(h, m, cb)
 	Jobs[#Jobs + 1] = {
-		h  = h,
-		m  = m,
+		h = h,
+		m = m,
 		cb = cb
 	}
 end
@@ -15,7 +15,11 @@ function GetTime()
 	local h = tonumber(os.date('%H', timestamp))
 	local m = tonumber(os.date('%M', timestamp))
 
-	return { d = d, h = h, m = m }
+	return {
+		d = d,
+		h = h,
+		m = m
+	}
 end
 
 function OnTime(d, h, m)

[core]/es_extended/client/functions.lua

@@ -26,7 +26,7 @@ end
 
 function ESX.SearchInventory(items, count)
     if type(items) == 'string' then
-        items = {items}
+        items = { items }
     end
 
     local returnData = {}
@@ -154,7 +154,7 @@ if GetResourceState("esx_context") ~= "missing" then
     end
 
     function ESX.RefreshContext(...)
-       exports["esx_context"]:Refresh(...)
+        exports["esx_context"]:Refresh(...)
     end
 else
     function ESX.OpenContext()
@@ -203,7 +203,6 @@ function ESX.UI.Menu.Open(type, namespace, name, data, submit, cancel, change, c
     menu.change = change
 
     menu.close = function()
-
         ESX.UI.Menu.RegisteredTypes[type].close(namespace, name)
 
         for i = 1, #ESX.UI.Menu.Opened, 1 do
@@ -218,11 +217,9 @@ function ESX.UI.Menu.Open(type, namespace, name, data, submit, cancel, change, c
         if close then
             close()
         end
-
     end
 
     menu.update = function(query, newData)
-
         for i = 1, #menu.data.elements, 1 do
             local match = true
 
@@ -238,7 +235,6 @@ function ESX.UI.Menu.Open(type, namespace, name, data, submit, cancel, change, c
                 end
             end
         end
-
     end
 
     menu.refresh = function()
@@ -266,7 +262,6 @@ function ESX.UI.Menu.Open(type, namespace, name, data, submit, cancel, change, c
                         break
                     end
                 end
-
             end
         end
     end
@@ -496,7 +491,6 @@ function ESX.Game.GetPlayers(onlyOtherPlayers, returnKeyValue, returnPeds)
     return players
 end
 
-
 function ESX.Game.GetClosestObject(coords, modelFilter)
     return ESX.Game.GetClosestEntity(ESX.Game.GetObjects(), false, coords, modelFilter)
 end
@@ -604,19 +598,19 @@ function ESX.Game.GetVehicleProperties(vehicle)
     local interiorColor = GetVehicleInteriorColour(vehicle)
     local customPrimaryColor = nil
     if hasCustomPrimaryColor then
-        customPrimaryColor = {GetVehicleCustomPrimaryColour(vehicle)}
+        customPrimaryColor = { GetVehicleCustomPrimaryColour(vehicle) }
     end
 
     local hasCustomXenonColor, customXenonColorR, customXenonColorG, customXenonColorB = GetVehicleXenonLightsCustomColor(vehicle)
     local customXenonColor = nil
     if hasCustomXenonColor then
-        customXenonColor = {customXenonColorR, customXenonColorG, customXenonColorB}
+        customXenonColor = { customXenonColorR, customXenonColorG, customXenonColorB }
     end
 
     local hasCustomSecondaryColor = GetIsVehicleSecondaryColourCustom(vehicle)
     local customSecondaryColor = nil
     if hasCustomSecondaryColor then
-        customSecondaryColor = {GetVehicleCustomSecondaryColour(vehicle)}
+        customSecondaryColor = { GetVehicleCustomSecondaryColour(vehicle) }
     end
 
     local extras = {}
@@ -634,11 +628,11 @@ function ESX.Game.GetVehicleProperties(vehicle)
     local doorsBroken, windowsBroken, tyreBurst = {}, {}, {}
     local numWheels = tostring(GetVehicleNumberOfWheels(vehicle))
 
-    local TyresIndex = { -- Wheel index list according to the number of vehicle wheels.
-        ['2'] = {0, 4}, -- Bike and cycle.
-        ['3'] = {0, 1, 4, 5}, -- Vehicle with 3 wheels (get for wheels because some 3 wheels vehicles have 2 wheels on front and one rear or the reverse).
-        ['4'] = {0, 1, 4, 5}, -- Vehicle with 4 wheels.
-        ['6'] = {0, 1, 2, 3, 4, 5} -- Vehicle with 6 wheels.
+    local TyresIndex = {           -- Wheel index list according to the number of vehicle wheels.
+        ['2'] = { 0, 4 },          -- Bike and cycle.
+        ['3'] = { 0, 1, 4, 5 },    -- Vehicle with 3 wheels (get for wheels because some 3 wheels vehicles have 2 wheels on front and one rear or the reverse).
+        ['4'] = { 0, 1, 4, 5 },    -- Vehicle with 4 wheels.
+        ['6'] = { 0, 1, 2, 3, 4, 5 } -- Vehicle with 6 wheels.
     }
 
     if TyresIndex[numWheels] then
@@ -647,7 +641,7 @@ function ESX.Game.GetVehicleProperties(vehicle)
         end
     end
 
-    for windowId = 0, 7 do -- 13
+    for windowId = 0, 7 do              -- 13
         RollUpWindow(vehicle, windowId) --fix when you put the car away with the window down
         windowsBroken[tostring(windowId)] = not IsVehicleWindowIntact(vehicle, windowId)
     end
@@ -690,8 +684,8 @@ function ESX.Game.GetVehicleProperties(vehicle)
         xenonColor = GetVehicleXenonLightsColor(vehicle),
         customXenonColor = customXenonColor,
 
-        neonEnabled = {IsVehicleNeonLightEnabled(vehicle, 0), IsVehicleNeonLightEnabled(vehicle, 1),
-                        IsVehicleNeonLightEnabled(vehicle, 2), IsVehicleNeonLightEnabled(vehicle, 3)},
+        neonEnabled = { IsVehicleNeonLightEnabled(vehicle, 0), IsVehicleNeonLightEnabled(vehicle, 1),
+            IsVehicleNeonLightEnabled(vehicle, 2), IsVehicleNeonLightEnabled(vehicle, 3) },
 
         neonColor = table.pack(GetVehicleNeonLightsColour(vehicle)),
         extras = extras,
@@ -723,7 +717,7 @@ function ESX.Game.GetVehicleProperties(vehicle)
         modXenon = IsToggleModOn(vehicle, 22),
 
         modFrontWheels = GetVehicleMod(vehicle, 23),
-		modCustomFrontWheels = GetVehicleModVariation(vehicle, 23),
+        modCustomFrontWheels = GetVehicleModVariation(vehicle, 23),
         modBackWheels = GetVehicleMod(vehicle, 24),
         modCustomBackWheels = GetVehicleModVariation(vehicle, 24),
 
@@ -836,7 +830,7 @@ function ESX.Game.SetVehicleProperties(vehicle, props)
         end
     end
 
-    if props.driftTyresEnabled then 
+    if props.driftTyresEnabled then
         SetDriftTyresEnabled(vehicle, true)
     end
 
@@ -921,8 +915,8 @@ function ESX.Game.SetVehicleProperties(vehicle, props)
     if props.modFrontWheels ~= nil then
         SetVehicleMod(vehicle, 23, props.modFrontWheels, false)
     end
-	if props.modCustomFrontWheels ~= nil then
-        SetVehicleMod(vehicle, 23, props.modCustomFrontWheels, false) 
+    if props.modCustomFrontWheels ~= nil then
+        SetVehicleMod(vehicle, 23, props.modCustomFrontWheels, false)
     end
     if props.modBackWheels ~= nil then
         SetVehicleMod(vehicle, 24, props.modBackWheels, false)
@@ -1074,7 +1068,7 @@ function ESX.ShowInventory()
 
     local playerPed = ESX.PlayerData.ped
     local elements = {
-        {unselectable = true, icon = 'fas fa-box', title = 'Player Inventory'}
+        { unselectable = true, icon = 'fas fa-box', title = 'Player Inventory' }
     }
     local currentWeight = 0
 
@@ -1083,7 +1077,7 @@ function ESX.ShowInventory()
             local formattedMoney = TranslateCap('locale_currency', ESX.Math.GroupDigits(ESX.PlayerData.accounts[i].money))
             local canDrop = ESX.PlayerData.accounts[i].name ~= 'bank'
 
-            elements[#elements+1] = {
+            elements[#elements + 1] = {
                 icon = 'fas fa-money-bill-wave',
                 title = ('%s: <span style="color:green;">%s</span>'):format(ESX.PlayerData.accounts[i].label, formattedMoney),
                 count = ESX.PlayerData.accounts[i].money,
@@ -1100,7 +1094,7 @@ function ESX.ShowInventory()
         if v.count > 0 then
             currentWeight = currentWeight + (v.weight * v.count)
 
-            elements[#elements+1] = {
+            elements[#elements + 1] = {
                 icon = 'fas fa-box',
                 title = ('%s x%s'):format(v.label, v.count),
                 count = v.count,
@@ -1119,7 +1113,7 @@ function ESX.ShowInventory()
         if HasPedGotWeapon(playerPed, weaponHash, false) then
             local ammo = GetAmmoInPedWeapon(playerPed, weaponHash)
 
-            elements[#elements+1] = {
+            elements[#elements + 1] = {
                 icon = 'fas fa-gun',
                 title = v.ammo and ('%s - %s %s'):format(v.label, ammo, v.ammo.label) or v.label,
                 count = 1,
@@ -1134,10 +1128,10 @@ function ESX.ShowInventory()
         end
     end
 
-    elements[#elements+1] = {
+    elements[#elements + 1] = {
         unselectable = true,
         icon = "fas fa-weight",
-        title = "Current Weight: "..currentWeight
+        title = "Current Weight: " .. currentWeight
     }
 
     ESX.CloseContext()
@@ -1148,7 +1142,7 @@ function ESX.ShowInventory()
         local elements2 = {}
 
         if element.usable then
-            elements2[#elements2+1] = {
+            elements2[#elements2 + 1] = {
                 icon = "fas fa-utensils",
                 title = TranslateCap('use'),
                 action = 'use',
@@ -1159,7 +1153,7 @@ function ESX.ShowInventory()
 
         if element.canRemove then
             if player ~= -1 and distance <= 3.0 then
-                elements2[#elements2+1] = {
+                elements2[#elements2 + 1] = {
                     icon = "fas fa-hands",
                     title = TranslateCap('give'),
                     action = 'give',
@@ -1168,7 +1162,7 @@ function ESX.ShowInventory()
                 }
             end
 
-            elements2[#elements2+1] = {
+            elements2[#elements2 + 1] = {
                 icon = "fas fa-trash",
                 title = TranslateCap('remove'),
                 action = 'remove',
@@ -1178,7 +1172,7 @@ function ESX.ShowInventory()
         end
 
         if element.type == 'item_weapon' and element.canGiveAmmo and element.ammo > 0 and player ~= -1 and distance <= 3.0 then
-            elements2[#elements2+1] = {
+            elements2[#elements2 + 1] = {
                 icon = "fas fa-gun",
                 title = TranslateCap('giveammo'),
                 action = 'give_ammo',
@@ -1187,7 +1181,7 @@ function ESX.ShowInventory()
             }
         end
 
-        elements2[#elements2+1] = {
+        elements2[#elements2 + 1] = {
             icon = "fas fa-arrow-left",
             title = TranslateCap('return'),
             action = 'return'
@@ -1202,7 +1196,7 @@ function ESX.ShowInventory()
                 if #playersNearby > 0 then
                     local players = {}
                     local elements3 = {
-                        {unselectable = true, icon = "fas fa-users", title = "Nearby Players"}
+                        { unselectable = true, icon = "fas fa-users", title = "Nearby Players" }
                     }
 
                     for _, playerNearby in ipairs(playersNearby) do
@@ -1211,7 +1205,7 @@ function ESX.ShowInventory()
 
                     ESX.TriggerServerCallback('esx:getPlayerNames', function(returnedPlayers)
                         for playerId, playerName in pairs(returnedPlayers) do
-                            elements3[#elements3+1] = {
+                            elements3[#elements3 + 1] = {
                                 icon = "fas fa-user",
                                 title = playerName,
                                 playerId = playerId
@@ -1232,9 +1226,9 @@ function ESX.ShowInventory()
                                         ESX.CloseContext()
                                     else
                                         local elementsG = {
-                                            {unselectable = true, icon = "fas fa-trash", title = element.title},
-                                            {icon = "fas fa-tally", title = "Amount.", input = true, inputType = "number", inputPlaceholder = "Amount to give..", inputMin = 1, inputMax = 1000},
-                                            {icon = "fas fa-check-double", title = "Confirm", val = "confirm"}
+                                            { unselectable = true,          icon = "fas fa-trash", title = element.title },
+                                            { icon = "fas fa-tally",        title = "Amount.",     input = true,         inputType = "number", inputPlaceholder = "Amount to give..", inputMin = 1, inputMax = 1000 },
+                                            { icon = "fas fa-check-double", title = "Confirm",     val = "confirm" }
                                         }
 
                                         ESX.OpenContext("right", elementsG, function(menuG, _)
@@ -1271,9 +1265,9 @@ function ESX.ShowInventory()
                         TriggerServerEvent('esx:removeInventoryItem', type, item)
                     else
                         local elementsR = {
-                            {unselectable = true, icon = "fas fa-trash", title = element.title},
-                            {icon = "fas fa-tally", title = "Amount.", input = true, inputType = "number", inputPlaceholder = "Amount to remove..", inputMin = 1, inputMax = 1000},
-                            {icon = "fas fa-check-double", title = "Confirm", val = "confirm"}
+                            { unselectable = true,          icon = "fas fa-trash", title = element.title },
+                            { icon = "fas fa-tally",        title = "Amount.",     input = true,         inputType = "number", inputPlaceholder = "Amount to remove..", inputMin = 1, inputMax = 1000 },
+                            { icon = "fas fa-check-double", title = "Confirm",     val = "confirm" }
                         }
 
                         ESX.OpenContext("right", elementsR, function(menuR, _)
@@ -1306,9 +1300,9 @@ function ESX.ShowInventory()
                     if closestPlayer ~= -1 and closestDistance < 3.0 then
                         if pedAmmo > 0 then
                             local elementsGA = {
-                                {unselectable = true, icon = "fas fa-trash", title = element.title},
-                                {icon = "fas fa-tally", title = "Amount.", input = true, inputType = "number", inputPlaceholder = "Amount to give..", inputMin = 1, inputMax = 1000},
-                                {icon = "fas fa-check-double", title = "Confirm", val = "confirm"}
+                                { unselectable = true,          icon = "fas fa-trash", title = element.title },
+                                { icon = "fas fa-tally",        title = "Amount.",     input = true,         inputType = "number", inputPlaceholder = "Amount to give..", inputMin = 1, inputMax = 1000 },
+                                { icon = "fas fa-check-double", title = "Confirm",     val = "confirm" }
                             }
 
                             ESX.OpenContext("right", elementsGA, function(menuGA, _)
@@ -1360,20 +1354,20 @@ end)
 function ESX.GetVehicleType(model)
     model = type(model) == 'string' and joaat(model) or model
 
-	if model == `submersible` or model == `submersible2` then
+    if model == `submersible` or model == `submersible2` then
         return 'submarine'
-	end
+    end
 
-	local vehicleType = GetVehicleClassFromName(model)
-	local types = {
-		[8] = "bike",
-		[11] = "trailer",
-		[13] = "bike",
-		[14] = "boat",
-		[15] = "heli",
-		[16] = "plane",
-		[21] = "train",
-	}
+    local vehicleType = GetVehicleClassFromName(model)
+    local types = {
+        [8] = "bike",
+        [11] = "trailer",
+        [13] = "bike",
+        [14] = "boat",
+        [15] = "heli",
+        [16] = "plane",
+        [21] = "train",
+    }
 
     return types[vehicleType] or "automobile"
 end

[core]/es_extended/config.lua

@@ -33,56 +33,56 @@ Config.AdminGroups = {
 }
 
 
-Config.EnablePaycheck            = true     -- enable paycheck
-Config.LogPaycheck               = false    -- Logs paychecks to a nominated Discord channel via webhook (default is false)
-Config.EnableSocietyPayouts      = false    -- pay from the society account that the player is employed at? Requirement: esx_society
-Config.MaxWeight                 = 24       -- the max inventory weight without backpack
+Config.EnablePaycheck            = true      -- enable paycheck
+Config.LogPaycheck               = false     -- Logs paychecks to a nominated Discord channel via webhook (default is false)
+Config.EnableSocietyPayouts      = false     -- pay from the society account that the player is employed at? Requirement: esx_society
+Config.MaxWeight                 = 24        -- the max inventory weight without backpack
 Config.PaycheckInterval          = 7 * 60000 -- how often to recieve pay checks in milliseconds
-Config.EnableDebug               = false    -- Use Debug options?
-Config.EnableDefaultInventory    = true     -- Display the default Inventory ( F2 )
-Config.EnableWantedLevel         = false    -- Use Normal GTA wanted Level?
-Config.EnablePVP                 = true     -- Allow Player to player combat
+Config.EnableDebug               = false     -- Use Debug options?
+Config.EnableDefaultInventory    = true      -- Display the default Inventory ( F2 )
+Config.EnableWantedLevel         = false     -- Use Normal GTA wanted Level?
+Config.EnablePVP                 = true      -- Allow Player to player combat
 
 Config.Multichar                 = GetResourceState("esx_multicharacter") ~= "missing"
-Config.Identity                  = true   -- Select a characters identity data before they have loaded in (this happens by default with multichar)
-Config.DistanceGive              = 4.0    -- Max distance when giving items, weapons etc.
+Config.Identity                  = true  -- Select a characters identity data before they have loaded in (this happens by default with multichar)
+Config.DistanceGive              = 4.0   -- Max distance when giving items, weapons etc.
 
-Config.AdminLogging              = false  -- Logs the usage of certain commands by those with group.admin ace permissions (default is false)
+Config.AdminLogging              = false -- Logs the usage of certain commands by those with group.admin ace permissions (default is false)
 
-Config.DisableHealthRegeneration = false  -- Player will no longer regenerate health
-Config.DisableVehicleRewards     = false  -- Disables Player Recieving weapons from vehicles
-Config.DisableNPCDrops           = false  -- stops NPCs from dropping weapons on death
-Config.DisableDispatchServices   = false  -- Disable Dispatch services
-Config.DisableScenarios          = false  -- Disable Scenarios
-Config.DisableWeaponWheel        = false  -- Disables default weapon wheel
-Config.DisableAimAssist          = false  -- disables AIM assist (mainly on controllers)
-Config.DisableVehicleSeatShuff   = false  -- Disables vehicle seat shuff
+Config.DisableHealthRegeneration = false -- Player will no longer regenerate health
+Config.DisableVehicleRewards     = false -- Disables Player Recieving weapons from vehicles
+Config.DisableNPCDrops           = false -- stops NPCs from dropping weapons on death
+Config.DisableDispatchServices   = false -- Disable Dispatch services
+Config.DisableScenarios          = false -- Disable Scenarios
+Config.DisableWeaponWheel        = false -- Disables default weapon wheel
+Config.DisableAimAssist          = false -- disables AIM assist (mainly on controllers)
+Config.DisableVehicleSeatShuff   = false -- Disables vehicle seat shuff
 Config.RemoveHudCommonents       = {
-	[1] = false,                          --WANTED_STARS,
-	[2] = false,                          --WEAPON_ICON
-	[3] = false,                          --CASH
-	[4] = false,                          --MP_CASH
-	[5] = false,                          --MP_MESSAGE
-	[6] = false,                          --VEHICLE_NAME
-	[7] = false,                          -- AREA_NAME
-	[8] = false,                          -- VEHICLE_CLASS
-	[9] = false,                          --STREET_NAME
-	[10] = false,                         --HELP_TEXT
-	[11] = false,                         --FLOATING_HELP_TEXT_1
-	[12] = false,                         --FLOATING_HELP_TEXT_2
-	[13] = false,                         --CASH_CHANGE
-	[14] = false,                         --RETICLE
-	[15] = false,                         --SUBTITLE_TEXT
-	[16] = false,                         --RADIO_STATIONS
-	[17] = false,                         --SAVING_GAME,
-	[18] = false,                         --GAME_STREAM
-	[19] = false,                         --WEAPON_WHEEL
-	[20] = false,                         --WEAPON_WHEEL_STATS
-	[21] = false,                         --HUD_COMPONENTS
-	[22] = false,                         --HUD_WEAPONS
+	[1] = false,                         --WANTED_STARS,
+	[2] = false,                         --WEAPON_ICON
+	[3] = false,                         --CASH
+	[4] = false,                         --MP_CASH
+	[5] = false,                         --MP_MESSAGE
+	[6] = false,                         --VEHICLE_NAME
+	[7] = false,                         -- AREA_NAME
+	[8] = false,                         -- VEHICLE_CLASS
+	[9] = false,                         --STREET_NAME
+	[10] = false,                        --HELP_TEXT
+	[11] = false,                        --FLOATING_HELP_TEXT_1
+	[12] = false,                        --FLOATING_HELP_TEXT_2
+	[13] = false,                        --CASH_CHANGE
+	[14] = false,                        --RETICLE
+	[15] = false,                        --SUBTITLE_TEXT
+	[16] = false,                        --RADIO_STATIONS
+	[17] = false,                        --SAVING_GAME,
+	[18] = false,                        --GAME_STREAM
+	[19] = false,                        --WEAPON_WHEEL
+	[20] = false,                        --WEAPON_WHEEL_STATS
+	[21] = false,                        --HUD_COMPONENTS
+	[22] = false,                        --HUD_WEAPONS
 }
 
-Config.SpawnVehMaxUpgrades       = true -- admin vehicles spawn with max vehcle settings
+Config.SpawnVehMaxUpgrades       = true       -- admin vehicles spawn with max vehcle settings
 Config.CustomAIPlates            = '........' -- Custom plates for AI vehicles
 -- Pattern string format
 --1 will lead to a random number from 0-9.

[core]/es_extended/config.weapons.lua

@@ -317,7 +317,7 @@ Config.Weapons = {
 			{ name = 'grip',          label = TranslateCap('component_grip'),          hash = `COMPONENT_AT_AR_AFGRIP` }
 		}
 	},
-	{ name = 'WEAPON_MUSKET',     label = TranslateCap('weapon_musket'),     tints = Config.DefaultWeaponTints,                               components = {},                   ammo = { label = TranslateCap('ammo_rounds'), hash = `AMMO_SHOTGUN` } },
+	{ name = 'WEAPON_MUSKET',     label = TranslateCap('weapon_musket'),     tints = Config.DefaultWeaponTints,                                 components = {},                   ammo = { label = TranslateCap('ammo_rounds'), hash = `AMMO_SHOTGUN` } },
 	{
 		name = 'WEAPON_PUMPSHOTGUN',
 		label = TranslateCap('weapon_pumpshotgun'),
@@ -937,14 +937,14 @@ Config.Weapons = {
 		}
 	},
 	-- Heavy / Launchers
-	{ name = 'WEAPON_COMPACTLAUNCHER',  label = TranslateCap('weapon_compactlauncher'),  tints = Config.DefaultWeaponTints, components = {},                                                             ammo = { label = TranslateCap('ammo_grenadelauncher'), hash = `AMMO_GRENADELAUNCHER` } },
+	{ name = 'WEAPON_COMPACTLAUNCHER',  label = TranslateCap('weapon_compactlauncher'),  tints = Config.DefaultWeaponTints, components = {},                                                               ammo = { label = TranslateCap('ammo_grenadelauncher'), hash = `AMMO_GRENADELAUNCHER` } },
 	{ name = 'WEAPON_FIREWORK',         label = TranslateCap('weapon_firework'),         components = {},                   ammo = { label = TranslateCap('ammo_firework'), hash = `AMMO_FIREWORK` } },
-	{ name = 'WEAPON_GRENADELAUNCHER',  label = TranslateCap('weapon_grenadelauncher'),  tints = Config.DefaultWeaponTints, components = {},                                                             ammo = { label = TranslateCap('ammo_grenadelauncher'), hash = `AMMO_GRENADELAUNCHER` } },
-	{ name = 'WEAPON_HOMINGLAUNCHER',   label = TranslateCap('weapon_hominglauncher'),   tints = Config.DefaultWeaponTints, components = {},                                                             ammo = { label = TranslateCap('ammo_rockets'), hash = `AMMO_HOMINGLAUNCHER` } },
-	{ name = 'WEAPON_MINIGUN',          label = TranslateCap('weapon_minigun'),          tints = Config.DefaultWeaponTints, components = {},                                                             ammo = { label = TranslateCap('ammo_rounds'), hash = `AMMO_MINIGUN` } },
-	{ name = 'WEAPON_RAILGUN',          label = TranslateCap('weapon_railgun'),          tints = Config.DefaultWeaponTints, components = {},                                                             ammo = { label = TranslateCap('ammo_rounds'), hash = `AMMO_RAILGUN` } },
-	{ name = 'WEAPON_RPG',              label = TranslateCap('weapon_rpg'),              tints = Config.DefaultWeaponTints, components = {},                                                             ammo = { label = TranslateCap('ammo_rockets'), hash = `AMMO_RPG` } },
-	{ name = 'WEAPON_RAYMINIGUN',       label = TranslateCap('weapon_rayminigun'),       tints = Config.DefaultWeaponTints, components = {},                                                             ammo = { label = TranslateCap('ammo_rounds'), hash = `AMMO_MINIGUN` } },
+	{ name = 'WEAPON_GRENADELAUNCHER',  label = TranslateCap('weapon_grenadelauncher'),  tints = Config.DefaultWeaponTints, components = {},                                                               ammo = { label = TranslateCap('ammo_grenadelauncher'), hash = `AMMO_GRENADELAUNCHER` } },
+	{ name = 'WEAPON_HOMINGLAUNCHER',   label = TranslateCap('weapon_hominglauncher'),   tints = Config.DefaultWeaponTints, components = {},                                                               ammo = { label = TranslateCap('ammo_rockets'), hash = `AMMO_HOMINGLAUNCHER` } },
+	{ name = 'WEAPON_MINIGUN',          label = TranslateCap('weapon_minigun'),          tints = Config.DefaultWeaponTints, components = {},                                                               ammo = { label = TranslateCap('ammo_rounds'), hash = `AMMO_MINIGUN` } },
+	{ name = 'WEAPON_RAILGUN',          label = TranslateCap('weapon_railgun'),          tints = Config.DefaultWeaponTints, components = {},                                                               ammo = { label = TranslateCap('ammo_rounds'), hash = `AMMO_RAILGUN` } },
+	{ name = 'WEAPON_RPG',              label = TranslateCap('weapon_rpg'),              tints = Config.DefaultWeaponTints, components = {},                                                               ammo = { label = TranslateCap('ammo_rockets'), hash = `AMMO_RPG` } },
+	{ name = 'WEAPON_RAYMINIGUN',       label = TranslateCap('weapon_rayminigun'),       tints = Config.DefaultWeaponTints, components = {},                                                               ammo = { label = TranslateCap('ammo_rounds'), hash = `AMMO_MINIGUN` } },
 	-- Thrown
 	{ name = 'WEAPON_BALL',             label = TranslateCap('weapon_ball'),             components = {},                   ammo = { label = TranslateCap('ammo_ball'), hash = `AMMO_BALL` } },
 	{ name = 'WEAPON_BZGAS',            label = TranslateCap('weapon_bzgas'),            components = {},                   ammo = { label = TranslateCap('ammo_bzgas'), hash = `AMMO_BZGAS` } },

[core]/es_extended/html/css/app.css

@@ -1,76 +1,75 @@
 @font-face {
-  font-family: "Pricedown";
-  src: url("../fonts/pdown.ttf");
+    font-family: "Pricedown";
+    src: url("../fonts/pdown.ttf");
 }
 
 @font-face {
-  font-family: "bankgothic";
-  src: url("../fonts/bankgothic.ttf");
+    font-family: "bankgothic";
+    src: url("../fonts/bankgothic.ttf");
 }
 
 html {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 #inventory_notifications {
-  font-family: bankgothic;
-  position: absolute;
-  right: 40;
-  bottom: 40;
-  font-size: 2em;
-  font-weight: bold;
-  color: #fff;
-  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
-    1px 1px 0 #000;
+    font-family: bankgothic;
+    position: absolute;
+    right: 40;
+    bottom: 40;
+    font-size: 2em;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
 }
 
 .menu {
-  font-family: "Open Sans", sans-serif;
-  min-width: 400px;
-  min-height: 250px;
-  color: #fff;
-  position: absolute;
-  left: 40;
-  top: 0;
+    font-family: "Open Sans", sans-serif;
+    min-width: 400px;
+    min-height: 250px;
+    color: #fff;
+    position: absolute;
+    left: 40;
+    top: 0;
 }
 
 .menu .head {
-  font-family: "Open Sans", sans-serif;
-  font-size: 28px;
-  padding: 10px;
-  background: #1a1a1a;
-  border-bottom: 3px solid #bc1635;
-  border-radius: 10px 10px 0 0;
-  -webkit-border-radius: 10px 10px 0 0;
-  -moz-border-radius: 10px 10px 0 0;
-  -o-border-radius: 10px 10px 0 0;
-  box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.28);
-  -webkit-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.28);
-  -moz-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.28);
-  -o-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.28);
-  box-shadow: 1px 1px 10px 4px rgba(0, 0, 0, 0.4);
+    font-family: "Open Sans", sans-serif;
+    font-size: 28px;
+    padding: 10px;
+    background: #1a1a1a;
+    border-bottom: 3px solid #bc1635;
+    border-radius: 10px 10px 0 0;
+    -webkit-border-radius: 10px 10px 0 0;
+    -moz-border-radius: 10px 10px 0 0;
+    -o-border-radius: 10px 10px 0 0;
+    box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.28);
+    -webkit-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.28);
+    -moz-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.28);
+    -o-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.28);
+    box-shadow: 1px 1px 10px 4px rgba(0, 0, 0, 0.4);
 }
 
 .menu .head span {
-  font-family: "Pricedown";
-  font-size: 28px;
-  padding-left: 15px;
-  padding-top: 6px;
+    font-family: "Pricedown";
+    font-size: 28px;
+    padding-left: 15px;
+    padding-top: 6px;
 }
 
 .menu .menu-items .menu-item {
-  font-family: "Open Sans", sans-serif;
-  font-size: 14px;
-  height: 40px;
-  display: block;
-  background-color: #f1f1f1;
-  box-shadow: inset 1px 0px 0px 1px #b8b8b8;
-  height: 32px;
-  line-height: 32px;
-  color: #3a3a3a;
-  text-align: center;
+    font-family: "Open Sans", sans-serif;
+    font-size: 14px;
+    height: 40px;
+    display: block;
+    background-color: #f1f1f1;
+    box-shadow: inset 1px 0px 0px 1px #b8b8b8;
+    height: 32px;
+    line-height: 32px;
+    color: #3a3a3a;
+    text-align: center;
 }
 
 .menu .menu-items .menu-item.selected {
-  background-color: #ccc;
+    background-color: #ccc;
 }

[core]/es_extended/html/js/app.js

@@ -1,40 +1,40 @@
 (() => {
-  ESX = {};
+    ESX = {};
 
-  ESX.inventoryNotification = function (add, label, count) {
-    let notif = "";
+    ESX.inventoryNotification = function (add, label, count) {
+        let notif = "";
 
-    if (add) {
-      notif += "+";
-    } else {
-      notif += "-";
-    }
+        if (add) {
+            notif += "+";
+        } else {
+            notif += "-";
+        }
 
-    if (count) {
-      notif += count + " " + label;
-    } else {
-      notif += " " + label;
-    }
+        if (count) {
+            notif += count + " " + label;
+        } else {
+            notif += " " + label;
+        }
 
-    let elem = $("<div>" + notif + "</div>");
-    $("#inventory_notifications").append(elem);
+        let elem = $("<div>" + notif + "</div>");
+        $("#inventory_notifications").append(elem);
 
-    $(elem)
-      .delay(3000)
-      .fadeOut(1000, function () {
-        elem.remove();
-      });
-  };
+        $(elem)
+            .delay(3000)
+            .fadeOut(1000, function () {
+                elem.remove();
+            });
+    };
 
-  window.onData = (data) => {
-    if (data.action === "inventoryNotification") {
-      ESX.inventoryNotification(data.add, data.item, data.count);
-    }
-  };
+    window.onData = (data) => {
+        if (data.action === "inventoryNotification") {
+            ESX.inventoryNotification(data.add, data.item, data.count);
+        }
+    };
 
-  window.onload = function (e) {
-    window.addEventListener("message", (event) => {
-      onData(event.data);
-    });
-  };
+    window.onload = function (e) {
+        window.addEventListener("message", (event) => {
+            onData(event.data);
+        });
+    };
 })();

[core]/es_extended/html/js/wrapper.js

@@ -1,35 +1,34 @@
 (() => {
-  let ESXWrapper = {};
-  ESXWrapper.MessageSize = 1024;
-  ESXWrapper.messageId = 0;
+    let ESXWrapper = {};
+    ESXWrapper.MessageSize = 1024;
+    ESXWrapper.messageId = 0;
 
-  window.SendMessage = function (namespace, type, msg) {
-    ESXWrapper.messageId =
-      ESXWrapper.messageId < 65535 ? ESXWrapper.messageId + 1 : 0;
-    const str = JSON.stringify(msg);
+    window.SendMessage = function (namespace, type, msg) {
+        ESXWrapper.messageId = ESXWrapper.messageId < 65535 ? ESXWrapper.messageId + 1 : 0;
+        const str = JSON.stringify(msg);
 
-    for (let i = 0; i < str.length; i++) {
-      let count = 0;
-      let chunk = "";
+        for (let i = 0; i < str.length; i++) {
+            let count = 0;
+            let chunk = "";
 
-      while (count < ESXWrapper.MessageSize && i < str.length) {
-        chunk += str[i];
+            while (count < ESXWrapper.MessageSize && i < str.length) {
+                chunk += str[i];
 
-        count++;
-        i++;
-      }
+                count++;
+                i++;
+            }
 
-      i--;
+            i--;
 
-      const data = {
-        __type: type,
-        id: ESXWrapper.messageId,
-        chunk: chunk,
-      };
+            const data = {
+                __type: type,
+                id: ESXWrapper.messageId,
+                chunk: chunk,
+            };
 
-      if (i === str.length - 1) data.end = true;
+            if (i === str.length - 1) data.end = true;
 
-      $.post("http://" + namespace + "/__chunk", JSON.stringify(data));
-    }
-  };
+            $.post("http://" + namespace + "/__chunk", JSON.stringify(data));
+        }
+    };
 })();

[core]/es_extended/html/ui.html

@@ -1,12 +1,12 @@
 <html>
-  <head>
-    <link rel="stylesheet" href="css/app.css" />
-  </head>
-  <body>
-    <div id="inventory_notifications"></div>
+    <head>
+        <link rel="stylesheet" href="css/app.css" />
+    </head>
+    <body>
+        <div id="inventory_notifications"></div>
 
-    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
-    <script src="js/mustache.min.js"></script>
-    <script src="js/app.js"></script>
-  </body>
+        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+        <script src="js/mustache.min.js"></script>
+        <script src="js/app.js"></script>
+    </body>
 </html>

[core]/es_extended/locales/fr.lua

@@ -113,7 +113,7 @@ Locales["fr"] = {
 	["command_giveammo_weapon"] = "Nom de l'arme",
 	["command_giveammo_ammo"] = "Quantité de munitions",
 	["tpm_nowaypoint"] = "Aucun point n'est défini sur la carte",
-  ["tpm_success"] = "Vous avez bien été téléporté",
+	["tpm_success"] = "Vous avez bien été téléporté",
 
 	["noclip_message"] = "Le mode noclip a été %s",
 	["enabled"] = "~g~activé~s~",

[core]/es_extended/locales/nl.lua

@@ -111,11 +111,11 @@ Locales["nl"] = {
     ['command_giveammo_ammo'] = 'Ammo Hoeveelheid',
     ['tpm_nowaypoint'] = 'Geen waypoint gezet.',
     ['tpm_success'] = 'Successvol geteleporteerd',
-  
+
     ['noclip_message'] = 'Noclip is %s',
     ['enabled'] = '~g~aangezet~s~',
     ['disabled'] = '~r~uitgezet~s~',
-  
+
     -- Locale settings
     ["locale_digit_grouping_symbol"] = ",",
     ["locale_currency"] = "€%s",

[core]/es_extended/locales/sl.lua

@@ -111,11 +111,11 @@ Locales["sl"] = {
 	['command_giveammo_ammo'] = 'Kolicina streliva',
 	['tpm_nowaypoint'] = 'Ni nastavljene poti!.',
 	['tpm_success'] = 'Uspesno teleportiran',
-  
+
 	['noclip_message'] = 'Noclip je bil %s',
 	['enabled'] = '~g~Vkljucen~s~',
 	['disabled'] = '~r~Izkljucen~s~',
-  
+
 	-- Locale settings
 	["locale_digit_grouping_symbol"] = ",",
 	["locale_currency"] = "€%s",

[core]/es_extended/server/commands.lua

@@ -286,12 +286,12 @@ if not Config.OxInventory then
 					if Config.AdminLogging then
 						ESX.DiscordLogFields("UserActions", "Give Weapon Component /giveweaponcomponent Triggered!",
 							"pink", {
-							{ name = "Player",    value = xPlayer.name,       inline = true },
-							{ name = "ID",        value = xPlayer.source,     inline = true },
-							{ name = "Target",    value = args.playerId.name, inline = true },
-							{ name = "Weapon",    value = args.weaponName,    inline = true },
-							{ name = "Component", value = args.componentName, inline = true },
-						})
+								{ name = "Player",    value = xPlayer.name,       inline = true },
+								{ name = "ID",        value = xPlayer.source,     inline = true },
+								{ name = "Target",    value = args.playerId.name, inline = true },
+								{ name = "Weapon",    value = args.weaponName,    inline = true },
+								{ name = "Component", value = args.componentName, inline = true },
+							})
 					end
 				end
 			else
@@ -552,6 +552,6 @@ ESX.RegisterCommand('players', "admin", function()
 	for i = 1, #(xPlayers) do
 		local xPlayer = xPlayers[i]
 		print(('^1[^2ID: ^5%s^0 | ^2Name : ^5%s^0 | ^2Group : ^5%s^0 | ^2Identifier : ^5%s^1]^0\n'):format(
-		xPlayer.source, xPlayer.getName(), xPlayer.getGroup(), xPlayer.identifier))
+			xPlayer.source, xPlayer.getName(), xPlayer.getGroup(), xPlayer.identifier))
 	end
 end, true)

[core]/es_extended/server/functions.lua

@@ -115,7 +115,7 @@ function ESX.RegisterCommand(name, group, cb, allowConsole, suggestion)
 								newArgs[v.name] = string.sub(merge, lenght)
 							end
 						end
-						
+
 						--backwards compatibility
 						if not v.validate and not v.type then
 							error = nil
@@ -403,7 +403,7 @@ function ESX.RefreshJobs()
 
 	if not Jobs then
 		-- Fallback data, if no jobs exist
-		ESX.Jobs['unemployed'] = {label = 'Unemployed', grades = {['0'] = {grade = 0, label = 'Unemployed', salary = 200, skin_male = {}, skin_female = {}}}}
+		ESX.Jobs['unemployed'] = { label = 'Unemployed', grades = { ['0'] = { grade = 0, label = 'Unemployed', salary = 200, skin_male = {}, skin_female = {} } } }
 	else
 		ESX.Jobs = Jobs
 	end

[core]/es_extended/server/main.lua

@@ -52,11 +52,10 @@ function onPlayerJoined(playerId)
 				('there was an error loading your character!\nError code: identifier-active-ingame\n\nThis error is caused by a player on this server who has the same identifier as you have. Make sure you are not playing on the same Rockstar account.\n\nYour Rockstar identifier: %s'):format(
 					identifier))
 		else
-			local result = MySQL.scalar.await('SELECT 1 FROM users WHERE identifier = ?', {identifier})
+			local result = MySQL.scalar.await('SELECT 1 FROM users WHERE identifier = ?', { identifier })
 			if result then
 				loadESXPlayer(identifier, playerId, false)
 			else
-				
 				createESXPlayer(identifier, playerId)
 			end
 		end
@@ -80,12 +79,12 @@ function createESXPlayer(identifier, playerId, data)
 	end
 
 	if not Config.Multichar then
-		MySQL.prepare(newPlayer, {json.encode(accounts), identifier, defaultGroup}, function()
+		MySQL.prepare(newPlayer, { json.encode(accounts), identifier, defaultGroup }, function()
 			loadESXPlayer(identifier, playerId, true)
 		end)
 	else
 		MySQL.prepare(newPlayer,
-			{json.encode(accounts), identifier, defaultGroup, data.firstname, data.lastname, data.dateofbirth, data.sex, data.height}, function()
+			{ json.encode(accounts), identifier, defaultGroup, data.firstname, data.lastname, data.dateofbirth, data.sex, data.height }, function()
 				loadESXPlayer(identifier, playerId, true)
 			end)
 	end
@@ -104,7 +103,7 @@ if not Config.Multichar then
 		if not Core.DatabaseConnected then
 			return deferrals.done('[ESX] OxMySQL Was Unable To Connect to your database. Please make sure it is turned on and correctly configured in your server.cfg')
 		end
-		
+
 		if identifier then
 			if ESX.GetPlayerFromIdentifier(identifier) then
 				return deferrals.done(
@@ -121,249 +120,248 @@ if not Config.Multichar then
 end
 
 function loadESXPlayer(identifier, playerId, isNew)
-    local userData = {
-        accounts = {},
-        inventory = {},
-        job = {},
-        loadout = {},
-        playerName = GetPlayerName(playerId),
-        weight = 0,
-        metadata = {}
-    }
-    local result = MySQL.prepare.await(loadPlayer, { identifier })
-    local job, grade, jobObject, gradeObject = result.job, tostring(result.job_grade)
-    local foundAccounts, foundItems = {}, {}
+	local userData = {
+		accounts = {},
+		inventory = {},
+		job = {},
+		loadout = {},
+		playerName = GetPlayerName(playerId),
+		weight = 0,
+		metadata = {}
+	}
+	local result = MySQL.prepare.await(loadPlayer, { identifier })
+	local job, grade, jobObject, gradeObject = result.job, tostring(result.job_grade)
+	local foundAccounts, foundItems = {}, {}
 
-    -- Accounts
-    if result.accounts and result.accounts ~= '' then
-        local accounts = json.decode(result.accounts)
+	-- Accounts
+	if result.accounts and result.accounts ~= '' then
+		local accounts = json.decode(result.accounts)
 
-        for account, money in pairs(accounts) do
-            foundAccounts[account] = money
-        end
-    end
+		for account, money in pairs(accounts) do
+			foundAccounts[account] = money
+		end
+	end
 
-    for account, data in pairs(Config.Accounts) do
-        if data.round == nil then
-            data.round = true
-        end
-        local index = #userData.accounts + 1
-        userData.accounts[index] = {
-            name = account,
-            money = foundAccounts[account] or Config.StartingAccountMoney[account] or 0,
-            label = data.label,
-            round = data.round,
-            index = index
-        }
-    end
+	for account, data in pairs(Config.Accounts) do
+		if data.round == nil then
+			data.round = true
+		end
+		local index = #userData.accounts + 1
+		userData.accounts[index] = {
+			name = account,
+			money = foundAccounts[account] or Config.StartingAccountMoney[account] or 0,
+			label = data.label,
+			round = data.round,
+			index = index
+		}
+	end
 
-    -- Job
-    if ESX.DoesJobExist(job, grade) then
-        jobObject, gradeObject = ESX.Jobs[job], ESX.Jobs[job].grades[grade]
-    else
-        print(('[^3WARNING^7] Ignoring invalid job for ^5%s^7 [job: ^5%s^7, grade: ^5%s^7]'):format(identifier, job, grade))
-        job, grade = 'unemployed', '0'
-        jobObject, gradeObject = ESX.Jobs[job], ESX.Jobs[job].grades[grade]
-    end
+	-- Job
+	if ESX.DoesJobExist(job, grade) then
+		jobObject, gradeObject = ESX.Jobs[job], ESX.Jobs[job].grades[grade]
+	else
+		print(('[^3WARNING^7] Ignoring invalid job for ^5%s^7 [job: ^5%s^7, grade: ^5%s^7]'):format(identifier, job, grade))
+		job, grade = 'unemployed', '0'
+		jobObject, gradeObject = ESX.Jobs[job], ESX.Jobs[job].grades[grade]
+	end
 
-    userData.job.id = jobObject.id
-    userData.job.name = jobObject.name
-    userData.job.label = jobObject.label
+	userData.job.id = jobObject.id
+	userData.job.name = jobObject.name
+	userData.job.label = jobObject.label
 
-    userData.job.grade = tonumber(grade)
-    userData.job.grade_name = gradeObject.name
-    userData.job.grade_label = gradeObject.label
-    userData.job.grade_salary = gradeObject.salary
+	userData.job.grade = tonumber(grade)
+	userData.job.grade_name = gradeObject.name
+	userData.job.grade_label = gradeObject.label
+	userData.job.grade_salary = gradeObject.salary
 
-    userData.job.skin_male = {}
-    userData.job.skin_female = {}
+	userData.job.skin_male = {}
+	userData.job.skin_female = {}
 
-    if gradeObject.skin_male then
-        userData.job.skin_male = json.decode(gradeObject.skin_male)
-    end
-    if gradeObject.skin_female then
-        userData.job.skin_female = json.decode(gradeObject.skin_female)
-    end
+	if gradeObject.skin_male then
+		userData.job.skin_male = json.decode(gradeObject.skin_male)
+	end
+	if gradeObject.skin_female then
+		userData.job.skin_female = json.decode(gradeObject.skin_female)
+	end
 
-    -- Inventory
-    if not Config.OxInventory then
-        if result.inventory and result.inventory ~= '' then
-            local inventory = json.decode(result.inventory)
+	-- Inventory
+	if not Config.OxInventory then
+		if result.inventory and result.inventory ~= '' then
+			local inventory = json.decode(result.inventory)
 
-            for name, count in pairs(inventory) do
-                local item = ESX.Items[name]
+			for name, count in pairs(inventory) do
+				local item = ESX.Items[name]
 
-                if item then
-                    foundItems[name] = count
-                else
-                    print(('[^3WARNING^7] Ignoring invalid item ^5"%s"^7 for ^5"%s^7"'):format(name, identifier))
-                end
-            end
-        end
+				if item then
+					foundItems[name] = count
+				else
+					print(('[^3WARNING^7] Ignoring invalid item ^5"%s"^7 for ^5"%s^7"'):format(name, identifier))
+				end
+			end
+		end
 
-        for name, item in pairs(ESX.Items) do
-            local count = foundItems[name] or 0
-            if count > 0 then
-                userData.weight = userData.weight + (item.weight * count)
-            end
+		for name, item in pairs(ESX.Items) do
+			local count = foundItems[name] or 0
+			if count > 0 then
+				userData.weight = userData.weight + (item.weight * count)
+			end
 
-            table.insert(userData.inventory,
-                {
-                    name = name,
-                    count = count,
-                    label = item.label,
-                    weight = item.weight,
-                    usable = Core.UsableItemsCallbacks[name] ~= nil,
-                    rare = item.rare,
-                    canRemove = item.canRemove
-                })
-        end
+			table.insert(userData.inventory,
+				{
+					name = name,
+					count = count,
+					label = item.label,
+					weight = item.weight,
+					usable = Core.UsableItemsCallbacks[name] ~= nil,
+					rare = item.rare,
+					canRemove = item.canRemove
+				})
+		end
 
-        table.sort(userData.inventory, function(a, b)
-            return a.label < b.label
-        end)
-    else
-        if result.inventory and result.inventory ~= '' then
-            userData.inventory = json.decode(result.inventory)
-        else
-            userData.inventory = {}
-        end
-    end
+		table.sort(userData.inventory, function(a, b)
+			return a.label < b.label
+		end)
+	else
+		if result.inventory and result.inventory ~= '' then
+			userData.inventory = json.decode(result.inventory)
+		else
+			userData.inventory = {}
+		end
+	end
 
-    -- Group
-    if result.group then
-        if result.group == "superadmin" then
-            userData.group = "admin"
-            print("[^3WARNING^7] ^5Superadmin^7 detected, setting group to ^5admin^7")
-        else
-            userData.group = result.group
-        end
-    else
-        userData.group = 'user'
-    end
+	-- Group
+	if result.group then
+		if result.group == "superadmin" then
+			userData.group = "admin"
+			print("[^3WARNING^7] ^5Superadmin^7 detected, setting group to ^5admin^7")
+		else
+			userData.group = result.group
+		end
+	else
+		userData.group = 'user'
+	end
 
-    -- Loadout
-    if not Config.OxInventory then
-        if result.loadout and result.loadout ~= '' then
-            local loadout = json.decode(result.loadout)
+	-- Loadout
+	if not Config.OxInventory then
+		if result.loadout and result.loadout ~= '' then
+			local loadout = json.decode(result.loadout)
 
-            for name, weapon in pairs(loadout) do
-                local label = ESX.GetWeaponLabel(name)
+			for name, weapon in pairs(loadout) do
+				local label = ESX.GetWeaponLabel(name)
 
-                if label then
-                    if not weapon.components then
-                        weapon.components = {}
-                    end
-                    if not weapon.tintIndex then
-                        weapon.tintIndex = 0
-                    end
+				if label then
+					if not weapon.components then
+						weapon.components = {}
+					end
+					if not weapon.tintIndex then
+						weapon.tintIndex = 0
+					end
 
-                    table.insert(userData.loadout,
-                        {
-                            name = name,
-                            ammo = weapon.ammo,
-                            label = label,
-                            components = weapon.components,
-                            tintIndex = weapon.tintIndex
-                        })
-                end
-            end
-        end
-    end
+					table.insert(userData.loadout,
+						{
+							name = name,
+							ammo = weapon.ammo,
+							label = label,
+							components = weapon.components,
+							tintIndex = weapon.tintIndex
+						})
+				end
+			end
+		end
+	end
 
-    -- Position
-    userData.coords = json.decode(result.position) or Config.DefaultSpawns[math.random(#Config.DefaultSpawns)]
+	-- Position
+	userData.coords = json.decode(result.position) or Config.DefaultSpawns[math.random(#Config.DefaultSpawns)]
 
-    -- Skin
-    if result.skin and result.skin ~= '' then
-        userData.skin = json.decode(result.skin)
-    else
-        if userData.sex == 'f' then
-            userData.skin = { sex = 1 }
-        else
-            userData.skin = { sex = 0 }
-        end
-    end
+	-- Skin
+	if result.skin and result.skin ~= '' then
+		userData.skin = json.decode(result.skin)
+	else
+		if userData.sex == 'f' then
+			userData.skin = { sex = 1 }
+		else
+			userData.skin = { sex = 0 }
+		end
+	end
 
-    -- Identity
-    if result.firstname and result.firstname ~= '' then
-        userData.firstname = result.firstname
-        userData.lastname = result.lastname
-        userData.playerName = userData.firstname .. ' ' .. userData.lastname
-        if result.dateofbirth then
-            userData.dateofbirth = result.dateofbirth
-        end
-        if result.sex then
-            userData.sex = result.sex
-        end
-        if result.height then
-            userData.height = result.height
-        end
-    end
+	-- Identity
+	if result.firstname and result.firstname ~= '' then
+		userData.firstname = result.firstname
+		userData.lastname = result.lastname
+		userData.playerName = userData.firstname .. ' ' .. userData.lastname
+		if result.dateofbirth then
+			userData.dateofbirth = result.dateofbirth
+		end
+		if result.sex then
+			userData.sex = result.sex
+		end
+		if result.height then
+			userData.height = result.height
+		end
+	end
 
-    if result.metadata and result.metadata ~= '' then
-        local metadata = json.decode(result.metadata)
-        userData.metadata = metadata
-    end
+	if result.metadata and result.metadata ~= '' then
+		local metadata = json.decode(result.metadata)
+		userData.metadata = metadata
+	end
 
-    local xPlayer = CreateExtendedPlayer(playerId, identifier, userData.group, userData.accounts, userData.inventory, userData.weight, userData.job, userData.loadout, userData.playerName, userData.coords, userData.metadata)
-    ESX.Players[playerId] = xPlayer
-    Core.playersByIdentifier[identifier] = xPlayer
+	local xPlayer = CreateExtendedPlayer(playerId, identifier, userData.group, userData.accounts, userData.inventory, userData.weight, userData.job, userData.loadout, userData.playerName, userData.coords, userData.metadata)
+	ESX.Players[playerId] = xPlayer
+	Core.playersByIdentifier[identifier] = xPlayer
 
-    if userData.firstname then
-        xPlayer.set('firstName', userData.firstname)
-        xPlayer.set('lastName', userData.lastname)
-        if userData.dateofbirth then
-            xPlayer.set('dateofbirth', userData.dateofbirth)
-        end
-        if userData.sex then
-            xPlayer.set('sex', userData.sex)
-        end
-        if userData.height then
-            xPlayer.set('height', userData.height)
-        end
-    end
+	if userData.firstname then
+		xPlayer.set('firstName', userData.firstname)
+		xPlayer.set('lastName', userData.lastname)
+		if userData.dateofbirth then
+			xPlayer.set('dateofbirth', userData.dateofbirth)
+		end
+		if userData.sex then
+			xPlayer.set('sex', userData.sex)
+		end
+		if userData.height then
+			xPlayer.set('height', userData.height)
+		end
+	end
 
-    TriggerEvent('esx:playerLoaded', playerId, xPlayer, isNew)
+	TriggerEvent('esx:playerLoaded', playerId, xPlayer, isNew)
 
-    xPlayer.triggerEvent('esx:playerLoaded',
-        {
-            accounts = xPlayer.getAccounts(),
-            coords = userData.coords,
-            identifier = xPlayer.getIdentifier(),
-            inventory = xPlayer.getInventory(),
-            job = xPlayer.getJob(),
-            loadout = xPlayer.getLoadout(),
-            maxWeight = xPlayer.getMaxWeight(),
-            money = xPlayer.getMoney(),
-            sex = xPlayer.get("sex") or "m",
-            firstName = xPlayer.get("firstName") or "John",
-            lastName = xPlayer.get("lastName") or "Doe",
-            dateofbirth = xPlayer.get("dateofbirth") or "01/01/2000",
-            height = xPlayer.get("height") or 120,
-            dead = false,
-            metadata = xPlayer.getMeta()
-        }, isNew,
-        userData.skin)
+	xPlayer.triggerEvent('esx:playerLoaded',
+		{
+			accounts = xPlayer.getAccounts(),
+			coords = userData.coords,
+			identifier = xPlayer.getIdentifier(),
+			inventory = xPlayer.getInventory(),
+			job = xPlayer.getJob(),
+			loadout = xPlayer.getLoadout(),
+			maxWeight = xPlayer.getMaxWeight(),
+			money = xPlayer.getMoney(),
+			sex = xPlayer.get("sex") or "m",
+			firstName = xPlayer.get("firstName") or "John",
+			lastName = xPlayer.get("lastName") or "Doe",
+			dateofbirth = xPlayer.get("dateofbirth") or "01/01/2000",
+			height = xPlayer.get("height") or 120,
+			dead = false,
+			metadata = xPlayer.getMeta()
+		}, isNew,
+		userData.skin)
 
-    if not Config.OxInventory then
-        xPlayer.triggerEvent('esx:createMissingPickups', Core.Pickups)
-    else
-        exports.ox_inventory:setPlayerInventory(xPlayer, userData.inventory)
+	if not Config.OxInventory then
+		xPlayer.triggerEvent('esx:createMissingPickups', Core.Pickups)
+	else
+		exports.ox_inventory:setPlayerInventory(xPlayer, userData.inventory)
 
-        if isNew then
-            for account, money in pairs(Config.StartingAccountMoney) do
-                if account == 'money' or account == 'black_money' then
-                    exports.ox_inventory:AddItem(playerId, account, money)
-                end
-            end
-        end
-    end
-    xPlayer.triggerEvent('esx:registerSuggestions', Core.RegisteredCommands)
-    print(('[^2INFO^0] Player ^5"%s"^0 has connected to the server. ID: ^5%s^7'):format(xPlayer.getName(), playerId))
+		if isNew then
+			for account, money in pairs(Config.StartingAccountMoney) do
+				if account == 'money' or account == 'black_money' then
+					exports.ox_inventory:AddItem(playerId, account, money)
+				end
+			end
+		end
+	end
+	xPlayer.triggerEvent('esx:registerSuggestions', Core.RegisteredCommands)
+	print(('[^2INFO^0] Player ^5"%s"^0 has connected to the server. ID: ^5%s^7'):format(xPlayer.getName(), playerId))
 end
 
-
 AddEventHandler('chatMessage', function(playerId, _, message)
 	local xPlayer = ESX.GetPlayerFromId(playerId)
 	if message:sub(1, 1) == '/' and playerId > 0 then
@@ -621,8 +619,16 @@ end
 ESX.RegisterServerCallback('esx:getPlayerData', function(source, cb)
 	local xPlayer = ESX.GetPlayerFromId(source)
 
-	cb({identifier = xPlayer.identifier, accounts = xPlayer.getAccounts(), inventory = xPlayer.getInventory(), job = xPlayer.getJob(),
-			loadout = xPlayer.getLoadout(), money = xPlayer.getMoney(), position = xPlayer.getCoords(true), metadata = xPlayer.getMeta()})
+	cb({
+		identifier = xPlayer.identifier,
+		accounts = xPlayer.getAccounts(),
+		inventory = xPlayer.getInventory(),
+		job = xPlayer.getJob(),
+		loadout = xPlayer.getLoadout(),
+		money = xPlayer.getMoney(),
+		position = xPlayer.getCoords(true),
+		metadata = xPlayer.getMeta()
+	})
 end)
 
 ESX.RegisterServerCallback('esx:isUserAdmin', function(source, cb)
@@ -636,8 +642,16 @@ end)
 ESX.RegisterServerCallback('esx:getOtherPlayerData', function(_, cb, target)
 	local xPlayer = ESX.GetPlayerFromId(target)
 
-	cb({identifier = xPlayer.identifier, accounts = xPlayer.getAccounts(), inventory = xPlayer.getInventory(), job = xPlayer.getJob(),
-			loadout = xPlayer.getLoadout(), money = xPlayer.getMoney(), position = xPlayer.getCoords(true), metadata = xPlayer.getMeta()})
+	cb({
+		identifier = xPlayer.identifier,
+		accounts = xPlayer.getAccounts(),
+		inventory = xPlayer.getInventory(),
+		job = xPlayer.getJob(),
+		loadout = xPlayer.getLoadout(),
+		money = xPlayer.getMoney(),
+		position = xPlayer.getCoords(true),
+		metadata = xPlayer.getMeta()
+	})
 end)
 
 ESX.RegisterServerCallback('esx:getPlayerNames', function(source, cb, players)
@@ -656,20 +670,20 @@ ESX.RegisterServerCallback('esx:getPlayerNames', function(source, cb, players)
 	cb(players)
 end)
 
-ESX.RegisterServerCallback("esx:spawnVehicle", function(source,cb,vehData)
-    local ped = GetPlayerPed(source)
-    ESX.OneSync.SpawnVehicle(vehData.model or `ADDER`, vehData.coords or GetEntityCoords(ped), vehData.coords.w or 0.0, vehData.props or {}, function(id)
-        if vehData.warp then
+ESX.RegisterServerCallback("esx:spawnVehicle", function(source, cb, vehData)
+	local ped = GetPlayerPed(source)
+	ESX.OneSync.SpawnVehicle(vehData.model or `ADDER`, vehData.coords or GetEntityCoords(ped), vehData.coords.w or 0.0, vehData.props or {}, function(id)
+		if vehData.warp then
 			local vehicle = NetworkGetEntityFromNetworkId(id)
-            local timeout = 0
-            while GetVehiclePedIsIn(ped) ~= vehicle and timeout <= 15 do
-                Wait(0)
-                TaskWarpPedIntoVehicle(ped, vehicle, -1)
-                timeout += 1
-            end
-        end
-        cb(id)
-    end)
+			local timeout = 0
+			while GetVehiclePedIsIn(ped) ~= vehicle and timeout <= 15 do
+				Wait(0)
+				TaskWarpPedIntoVehicle(ped, vehicle, -1)
+				timeout += 1
+			end
+		end
+		cb(id)
+	end)
 end)
 
 AddEventHandler('txAdmin:events:scheduledRestart', function(eventData)
@@ -684,4 +698,3 @@ end)
 AddEventHandler('txAdmin:events:serverShuttingDown', function()
 	Core.SavePlayers()
 end)
-

[core]/esx_context/index.html

@@ -1,462 +1,452 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
-    />
+    <head>
+        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
 
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>ESX Context HUD</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>ESX Context HUD</title>
 
-    <style type="text/css">
-      :root {
-        --item-main: #242424;
-        --item-unselectable: #161616;
-        --item-hover: #404040;
-        --item-disabled: #393939;
-      }
+        <style type="text/css">
+            :root {
+                --item-main: #242424;
+                --item-unselectable: #161616;
+                --item-hover: #404040;
+                --item-disabled: #393939;
+            }
 
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        outline: none;
-        border: none;
-      }
+            html,
+            body {
+                margin: 0;
+                padding: 0;
+                outline: none;
+                border: none;
+            }
 
-      body {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        width: 100%;
-        height: 100%;
+            body {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                width: 100%;
+                height: 100%;
 
-        display: none;
-      }
+                display: none;
+            }
 
-      #container {
-        position: absolute;
-        width: 280px;
-        max-height: 50%;
-        height: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        overflow-y: auto;
-        padding-right: 5px;
-      }
+            #container {
+                position: absolute;
+                width: 280px;
+                max-height: 50%;
+                height: auto;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                overflow-y: auto;
+                padding-right: 5px;
+            }
 
-      .center {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
+            .center {
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
 
-      .left {
-        top: 50%;
-        left: 25%;
-        transform: translate(-50%, -50%);
-      }
+            .left {
+                top: 50%;
+                left: 25%;
+                transform: translate(-50%, -50%);
+            }
 
-      .right {
-        top: 50%;
-        left: 75%;
-        transform: translate(-50%, -50%);
-      }
+            .right {
+                top: 50%;
+                left: 75%;
+                transform: translate(-50%, -50%);
+            }
 
-      .item {
-        display: grid;
-        grid-template-columns: 30px calc(100% - 30px);
-        padding: 15px 10px;
-        border-radius: 5px;
-        background: var(--item-main);
-      }
+            .item {
+                display: grid;
+                grid-template-columns: 30px calc(100% - 30px);
+                padding: 15px 10px;
+                border-radius: 5px;
+                background: var(--item-main);
+            }
 
-      .item:hover {
-        background: var(--item-hover);
-      }
+            .item:hover {
+                background: var(--item-hover);
+            }
 
-      .item > i {
-        text-align: center;
-      }
+            .item > i {
+                text-align: center;
+            }
 
-      .item > div {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
+            .item > div {
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+            }
 
-      .item > div > i {
-        opacity: 0.5;
-      }
+            .item > div > i {
+                opacity: 0.5;
+            }
 
-      .input {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-        padding: 15px 10px;
-        border-radius: 5px;
-        background: var(--item-main);
-      }
+            .input {
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+                padding: 15px 10px;
+                border-radius: 5px;
+                background: var(--item-main);
+            }
 
-      .input:hover {
-        background: var(--item-hover);
-      }
+            .input:hover {
+                background: var(--item-hover);
+            }
 
-      input {
-        position: relative;
-        width: auto;
-        padding: 5px;
-        margin: 0;
-        border: none;
-        border: none;
-        background: transparent;
-      }
+            input {
+                position: relative;
+                width: auto;
+                padding: 5px;
+                margin: 0;
+                border: none;
+                border: none;
+                background: transparent;
+            }
 
-      .unselectable {
-        background: var(--item-unselectable);
-        pointer-events: none;
-      }
+            .unselectable {
+                background: var(--item-unselectable);
+                pointer-events: none;
+            }
 
-      .disabled {
-        pointer-events: none;
-        background: var(--item-disabled);
-      }
+            .disabled {
+                pointer-events: none;
+                background: var(--item-disabled);
+            }
 
-      * {
-        color: white;
-        font-family: Arial;
-        user-select: none;
-        font-size: 14px;
-      }
+            * {
+                color: white;
+                font-family: Arial;
+                user-select: none;
+                font-size: 14px;
+            }
 
-      ::-webkit-scrollbar {
-        width: 5px;
-      }
+            ::-webkit-scrollbar {
+                width: 5px;
+            }
 
-      ::-webkit-scrollbar-thumb {
-        background: rgb(20, 20, 20);
-        border-radius: 5px;
-      }
+            ::-webkit-scrollbar-thumb {
+                background: rgb(20, 20, 20);
+                border-radius: 5px;
+            }
 
-      ::-webkit-scrollbar-thumb:hover {
-        background: rgb(30, 30, 30);
-      }
+            ::-webkit-scrollbar-thumb:hover {
+                background: rgb(30, 30, 30);
+            }
 
-      .container {
-        display: flex;
-        position: relative;
-        cursor: pointer;
-        font-size: 14px;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        flex-direction: row-reverse;
-        align-items: center;
-        justify-content: flex-end;
-        gap: 5px;
-      }
+            .container {
+                display: flex;
+                position: relative;
+                cursor: pointer;
+                font-size: 14px;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                flex-direction: row-reverse;
+                align-items: center;
+                justify-content: flex-end;
+                gap: 5px;
+            }
 
-      /* Hide the browser's default checkbox */
-      .container input {
-        position: relative;
-        opacity: 0;
-        cursor: pointer;
-        height: 0;
-        width: 0;
-      }
+            /* Hide the browser's default checkbox */
+            .container input {
+                position: relative;
+                opacity: 0;
+                cursor: pointer;
+                height: 0;
+                width: 0;
+            }
 
-      /* Create a custom checkbox */
-      .checkmark {
-        position: relative;
-        height: 10px;
-        width: 10px;
-        border-radius: 8px;
-        background-color: #eee;
-      }
+            /* Create a custom checkbox */
+            .checkmark {
+                position: relative;
+                height: 10px;
+                width: 10px;
+                border-radius: 8px;
+                background-color: #eee;
+            }
 
-      /* On mouse-over, add a grey background color */
-      .container:hover input ~ .checkmark {
-        background-color: #ccc;
-      }
+            /* On mouse-over, add a grey background color */
+            .container:hover input ~ .checkmark {
+                background-color: #ccc;
+            }
 
-      /* When the checkbox is checked, add a blue background */
-      .container input:checked ~ .checkmark {
-        background-color: #2196f3;
-      }
+            /* When the checkbox is checked, add a blue background */
+            .container input:checked ~ .checkmark {
+                background-color: #2196f3;
+            }
 
-      /* Create the checkmark/indicator (hidden when not checked) */
-      .checkmark:after {
-        content: "";
-        position: relative;
-        display: none;
-      }
+            /* Create the checkmark/indicator (hidden when not checked) */
+            .checkmark:after {
+                content: "";
+                position: relative;
+                display: none;
+            }
 
-      /* Show the checkmark when checked */
-      .container input:checked ~ .checkmark:after {
-        display: block;
-      }
-    </style>
-  </head>
+            /* Show the checkmark when checked */
+            .container input:checked ~ .checkmark:after {
+                display: block;
+            }
+        </style>
+    </head>
 
-  <body>
-    <div id="container" class="right">
-      <div class="item unselectable">
-        <i class="fas fa-info-circle"></i>
-        <div>
-          <b>Unselectable Item</b>
-          <i>Testing, testing a description here.</i>
+    <body>
+        <div id="container" class="right">
+            <div class="item unselectable">
+                <i class="fas fa-info-circle"></i>
+                <div>
+                    <b>Unselectable Item</b>
+                    <i>Testing, testing a description here.</i>
+                </div>
+            </div>
+            <div class="item disabled">
+                <i class="fas fa-times"></i>
+                <div>
+                    <b>Disabled Item</b>
+                    <i>Testing, testing a description here.</i>
+                </div>
+            </div>
+            <div class="item">
+                <i class="fas fa-check"></i>
+                <div>
+                    <b>Item</b>
+                    <i>Testing, testing a description here. Generic words to force overflow.</i>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="item disabled">
-        <i class="fas fa-times"></i>
-        <div>
-          <b>Disabled Item</b>
-          <i>Testing, testing a description here.</i>
-        </div>
-      </div>
-      <div class="item">
-        <i class="fas fa-check"></i>
-        <div>
-          <b>Item</b>
-          <i
-            >Testing, testing a description here. Generic words to force
-            overflow.</i
-          >
-        </div>
-      </div>
-    </div>
 
-    <script type="text/javascript">
-      const container = document.getElementById("container");
+        <script type="text/javascript">
+            const container = document.getElementById("container");
 
-      const CreateElement = (tag = "div", className = "", parent) => {
-        const e = document.createElement(tag);
-        e.className = className;
+            const CreateElement = (tag = "div", className = "", parent) => {
+                const e = document.createElement(tag);
+                e.className = className;
 
-        if (parent) {
-          parent.append(e);
-        }
+                if (parent) {
+                    parent.append(e);
+                }
 
-        return e;
-      };
+                return e;
+            };
 
-      function Open(eles, position = "right") {
-        container.innerHTML = "";
-        container.className = position;
+            function Open(eles, position = "right") {
+                container.innerHTML = "";
+                container.className = position;
 
-        for (let i = 0; i < eles.length; i++) {
-          let ele = eles[i];
-          let item = CreateElement("div", "item", container);
+                for (let i = 0; i < eles.length; i++) {
+                    let ele = eles[i];
+                    let item = CreateElement("div", "item", container);
 
-          let icon = CreateElement("i", ele.icon, item);
-          let div = CreateElement("div", "", item);
+                    let icon = CreateElement("i", ele.icon, item);
+                    let div = CreateElement("div", "", item);
 
-          let title = CreateElement("b", "", div);
-          title.innerHTML = ele.title;
+                    let title = CreateElement("b", "", div);
+                    title.innerHTML = ele.title;
 
-          if (ele.description) {
-            let desc = CreateElement("i", "", div);
-            desc.innerHTML = ele.description || "";
-          }
-
-          if (ele.input) {
-            if (ele.inputType === "radio") {
-              for (let j = 0; j < ele.inputValues.length; j++) {
-                let v = ele.inputValues[j];
-                let container = CreateElement("label", "container", div);
-                container.innerHTML = v.text;
-
-                let input = CreateElement("INPUT", "", container);
-                input.type = "radio";
-                input.name = i + 1;
-                input.checked =
-                  (ele.inputValue || ele.inputPlaceholder || -1) === v.value;
-
-                let span = CreateElement("SPAN", "checkmark", container);
-
-                input.onchange = function () {
-                  $.post(
-                    `https://${GetParentResourceName()}/changed`,
-                    JSON.stringify({
-                      index: i + 1,
-                      value: v.value,
-                    })
-                  );
-                };
-              }
-            } else {
-              let input = CreateElement("input", "", div);
-              input.type = ele.inputType;
-
-              if (ele.inputValue) {
-                input.value = ele.inputValue;
-              }
-
-              if (ele.inputPlaceholder) {
-                input.placeholder = ele.inputPlaceholder;
-              }
-
-              switch (ele.inputType) {
-                case "number":
-                  if (ele.inputMin) input.min = ele.inputMin;
-                  if (ele.inputMax) input.max = ele.inputMax;
-
-                  input.onchange = function () {
-                    let v = Number(input.value);
-
-                    if (ele.inputMin) {
-                      v = Math.max(ele.inputMin, v);
+                    if (ele.description) {
+                        let desc = CreateElement("i", "", div);
+                        desc.innerHTML = ele.description || "";
                     }
 
-                    if (ele.inputMax) {
-                      v = Math.min(ele.inputMax, v);
+                    if (ele.input) {
+                        if (ele.inputType === "radio") {
+                            for (let j = 0; j < ele.inputValues.length; j++) {
+                                let v = ele.inputValues[j];
+                                let container = CreateElement("label", "container", div);
+                                container.innerHTML = v.text;
+
+                                let input = CreateElement("INPUT", "", container);
+                                input.type = "radio";
+                                input.name = i + 1;
+                                input.checked = (ele.inputValue || ele.inputPlaceholder || -1) === v.value;
+
+                                let span = CreateElement("SPAN", "checkmark", container);
+
+                                input.onchange = function () {
+                                    $.post(
+                                        `https://${GetParentResourceName()}/changed`,
+                                        JSON.stringify({
+                                            index: i + 1,
+                                            value: v.value,
+                                        })
+                                    );
+                                };
+                            }
+                        } else {
+                            let input = CreateElement("input", "", div);
+                            input.type = ele.inputType;
+
+                            if (ele.inputValue) {
+                                input.value = ele.inputValue;
+                            }
+
+                            if (ele.inputPlaceholder) {
+                                input.placeholder = ele.inputPlaceholder;
+                            }
+
+                            switch (ele.inputType) {
+                                case "number":
+                                    if (ele.inputMin) input.min = ele.inputMin;
+                                    if (ele.inputMax) input.max = ele.inputMax;
+
+                                    input.onchange = function () {
+                                        let v = Number(input.value);
+
+                                        if (ele.inputMin) {
+                                            v = Math.max(ele.inputMin, v);
+                                        }
+
+                                        if (ele.inputMax) {
+                                            v = Math.min(ele.inputMax, v);
+                                        }
+
+                                        input.value = v;
+
+                                        $.post(
+                                            `https://${GetParentResourceName()}/changed`,
+                                            JSON.stringify({
+                                                index: i + 1,
+                                                value: v,
+                                            })
+                                        );
+                                    };
+                                    break;
+
+                                case "text":
+                                    input.onchange = function () {
+                                        $.post(
+                                            `https://${GetParentResourceName()}/changed`,
+                                            JSON.stringify({
+                                                index: i + 1,
+                                                value: input.value,
+                                            })
+                                        );
+                                    };
+                                    break;
+                            }
+                        }
+                    } else {
+                        if (ele.disabled) {
+                            item.className += " disabled";
+                        } else if (ele.unselectable) {
+                            item.className += " unselectable";
+                        } else if (!ele.input) {
+                            item.onclick = function () {
+                                $.post(
+                                    `https://${GetParentResourceName()}/selected`,
+                                    JSON.stringify({
+                                        index: i + 1,
+                                    })
+                                );
+                            };
+                        }
+                    }
+                }
+
+                document.body.style.display = "block";
+            }
+
+            function Closed() {
+                document.body.style.display = "none";
+            }
+
+            function Close() {
+                $.post(`https://${GetParentResourceName()}/closed`, (retVal) => {
+                    if (retVal) {
+                        Closed();
+                    }
+                });
+            }
+
+            window.addEventListener("message", (e) => {
+                let data = e.data;
+
+                if (!data.func || !window[data.func]) {
+                    return;
+                }
+
+                window[data.func](...data.args);
+            });
+
+            window.addEventListener("keydown", (e) => {
+                if (e.key === "Escape" || e.key === "Backspace") {
+                    if (e.target.tagName.toLowerCase() === "input") {
+                        return;
                     }
 
-                    input.value = v;
+                    Close();
+                }
+            });
 
-                    $.post(
-                      `https://${GetParentResourceName()}/changed`,
-                      JSON.stringify({
-                        index: i + 1,
-                        value: v,
-                      })
-                    );
-                  };
-                  break;
-
-                case "text":
-                  input.onchange = function () {
-                    $.post(
-                      `https://${GetParentResourceName()}/changed`,
-                      JSON.stringify({
-                        index: i + 1,
-                        value: input.value,
-                      })
-                    );
-                  };
-                  break;
-              }
-            }
-          } else {
-            if (ele.disabled) {
-              item.className += " disabled";
-            } else if (ele.unselectable) {
-              item.className += " unselectable";
-            } else if (!ele.input) {
-              item.onclick = function () {
-                $.post(
-                  `https://${GetParentResourceName()}/selected`,
-                  JSON.stringify({
-                    index: i + 1,
-                  })
-                );
-              };
-            }
-          }
-        }
-
-        document.body.style.display = "block";
-      }
-
-      function Closed() {
-        document.body.style.display = "none";
-      }
-
-      function Close() {
-        $.post(`https://${GetParentResourceName()}/closed`, (retVal) => {
-          if (retVal) {
-            Closed();
-          }
-        });
-      }
-
-      window.addEventListener("message", (e) => {
-        let data = e.data;
-
-        if (!data.func || !window[data.func]) {
-          return;
-        }
-
-        window[data.func](...data.args);
-      });
-
-      window.addEventListener("keydown", (e) => {
-        if (e.key === "Escape" || e.key === "Backspace") {
-          if (e.target.tagName.toLowerCase() === "input") {
-            return;
-          }
-
-          Close();
-        }
-      });
-
-      // Open([
-      // 	{
-      // 		unselectable:true,
-      // 		icon:"fas fa-info-circle",
-      // 		title:"Unselectable Item (Header/Label?)",
-      // 	},
-      // 	{
-      // 		icon:"fas fa-check",
-      // 		title:"Item A",
-      // 		description:"Some description here. Add some words to make the text overflow."
-      // 	},
-      // 	{
-      // 		disabled:true,
-      // 		icon:"fas fa-times",
-      // 		title:"Disabled Item",
-      // 		description:"Some description here. Add some words to make the text overflow."
-      // 	},
-      // 	{
-      // 		icon:"fas fa-check",
-      // 		title:"Item B",
-      // 		description:"Some description here. Add some words to make the text overflow."
-      // 	},
-      // 	{
-      // 		input:true,
-      // 		icon:"fas fa-times",
-      // 		title:"Input Text",
-      // 		inputType:"text",
-      // 		inputPlaceholder:"Placeholder..."
-      // 	},
-      // 	{
-      // 		input:true,
-      // 		icon:"",
-      // 		title:"Input Number",
-      // 		inputType:"number",
-      // 		inputPlaceholder:"Placeholder...",
-      // 		inputValue:0,
-      // 		inputMin:0,
-      // 		inputMax:50
-      // 	},
-      // 	{
-      // 		input:true,
-      // 		icon:"",
-      // 		title:"Input Radio",
-      // 		inputType:"radio",
-      // 		inputPlaceholder:"turbocharger",
-      // 		inputValue:"supercharger",
-      // 		inputValues:[
-      // 			{
-      // 				value:"turbocharger",
-      // 				title:"Turbocharger"
-      // 			},
-      // 			{
-      // 				value:"supercharger",
-      // 				title:"Supercharger"
-      // 			},
-      // 		]
-      // 	}
-      // ])
-    </script>
-  </body>
+            // Open([
+            // 	{
+            // 		unselectable:true,
+            // 		icon:"fas fa-info-circle",
+            // 		title:"Unselectable Item (Header/Label?)",
+            // 	},
+            // 	{
+            // 		icon:"fas fa-check",
+            // 		title:"Item A",
+            // 		description:"Some description here. Add some words to make the text overflow."
+            // 	},
+            // 	{
+            // 		disabled:true,
+            // 		icon:"fas fa-times",
+            // 		title:"Disabled Item",
+            // 		description:"Some description here. Add some words to make the text overflow."
+            // 	},
+            // 	{
+            // 		icon:"fas fa-check",
+            // 		title:"Item B",
+            // 		description:"Some description here. Add some words to make the text overflow."
+            // 	},
+            // 	{
+            // 		input:true,
+            // 		icon:"fas fa-times",
+            // 		title:"Input Text",
+            // 		inputType:"text",
+            // 		inputPlaceholder:"Placeholder..."
+            // 	},
+            // 	{
+            // 		input:true,
+            // 		icon:"",
+            // 		title:"Input Number",
+            // 		inputType:"number",
+            // 		inputPlaceholder:"Placeholder...",
+            // 		inputValue:0,
+            // 		inputMin:0,
+            // 		inputMax:50
+            // 	},
+            // 	{
+            // 		input:true,
+            // 		icon:"",
+            // 		title:"Input Radio",
+            // 		inputType:"radio",
+            // 		inputPlaceholder:"turbocharger",
+            // 		inputValue:"supercharger",
+            // 		inputValues:[
+            // 			{
+            // 				value:"turbocharger",
+            // 				title:"Turbocharger"
+            // 			},
+            // 			{
+            // 				value:"supercharger",
+            // 				title:"Supercharger"
+            // 			},
+            // 		]
+            // 	}
+            // ])
+        </script>
+    </body>
 </html>

[core]/esx_identity/config.lua

@@ -13,11 +13,11 @@ Config.UseDeferrals    = false
 Config.DateFormat      = 'DD/MM/YYYY'
 
 -- These values are for the second input validation in server/main.lua
-Config.MaxNameLength   = 20                           -- Max Name Length.
-Config.MinHeight       = 120                          -- 120 cm lowest height
-Config.MaxHeight       = 220                          -- 220 cm max height.
-Config.LowestYear      = 1900                         -- 112 years old is the oldest you can be.
-Config.HighestYear     = 2005                         -- 18 years old is the youngest you can be.
+Config.MaxNameLength   = 20                          -- Max Name Length.
+Config.MinHeight       = 120                         -- 120 cm lowest height
+Config.MaxHeight       = 220                         -- 220 cm max height.
+Config.LowestYear      = 1900                        -- 112 years old is the oldest you can be.
+Config.HighestYear     = 2005                        -- 18 years old is the youngest you can be.
 
-Config.FullCharDelete  = true                         -- Delete all reference to character.
-Config.EnableDebugging = ESX.GetConfig().EnableDebug  -- prints for debugging :)
+Config.FullCharDelete  = true                        -- Delete all reference to character.
+Config.EnableDebugging = ESX.GetConfig().EnableDebug -- prints for debugging :)

[core]/esx_identity/html/css/style.css

@@ -1,153 +1,153 @@
 @import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
 
 body {
-  font-family: sans-serif;
-  overflow: hidden;
-  background-color: transparent;
+    font-family: sans-serif;
+    overflow: hidden;
+    background-color: transparent;
 }
 
 .none {
-  display: none;
+    display: none;
 }
 
 .dialog {
-  width: 332px;
-  opacity: 0.95;
-  padding: 20px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #152029;
-  border-radius: 10px;
-  box-shadow: 0 -5px 3px -3px #21303d, 0 5px 3px -3px #21303d;
-  border: none;
-  color: #ffffff;
+    width: 332px;
+    opacity: 0.95;
+    padding: 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #152029;
+    border-radius: 10px;
+    box-shadow: 0 -5px 3px -3px #21303d, 0 5px 3px -3px #21303d;
+    border: none;
+    color: #ffffff;
 }
 
 .title {
-  font-family: "Oswald", sans-serif;
-  font-size: 22px;
-  text-align: center;
-  padding: 5px;
-  margin-bottom: 20px;
+    font-family: "Oswald", sans-serif;
+    font-size: 22px;
+    text-align: center;
+    padding: 5px;
+    margin-bottom: 20px;
 }
 
 input {
-  margin-bottom: 15px;
-  border: none;
-  border-bottom: 2px solid #58636c;
-  width: 100%;
-  outline: none;
-  padding: 10px;
-  padding-left: 0;
-  font-family: "Oswald", sans-serif;
-  color: #ffffff;
-  text-align: left;
-  background-color: #152029;
+    margin-bottom: 15px;
+    border: none;
+    border-bottom: 2px solid #58636c;
+    width: 100%;
+    outline: none;
+    padding: 10px;
+    padding-left: 0;
+    font-family: "Oswald", sans-serif;
+    color: #ffffff;
+    text-align: left;
+    background-color: #152029;
 }
 
 ::placeholder {
-  /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: rgba(84, 97, 105, 255);
-  font-family: "Oswald", sans-serif;
-  font-weight: 200;
-  opacity: 1;
-  /* Firefox */
+    /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: rgba(84, 97, 105, 255);
+    font-family: "Oswald", sans-serif;
+    font-weight: 200;
+    opacity: 1;
+    /* Firefox */
 }
 
 .radio-toolbar input[type="radio"] {
-  opacity: 0;
-  position: absolute;
-  width: 36%;
+    opacity: 0;
+    position: absolute;
+    width: 36%;
 }
 
 .radio-toolbar label {
-  display: inline-block;
-  margin-top: 5px;
-  background-color: rgba(15, 15, 15, 0.9);
-  padding: 10px 20px;
-  font-family: "Oswald", sans-serif;
-  font-weight: 500;
-  font-size: 16px;
-  color: #ffffff;
-  border: none;
-  border-radius: 5px;
-  width: 36%;
+    display: inline-block;
+    margin-top: 5px;
+    background-color: rgba(15, 15, 15, 0.9);
+    padding: 10px 20px;
+    font-family: "Oswald", sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    width: 36%;
 }
 
-.radio-toolbar input[type="radio"]:checked+label {
-  width: 36%;
-  background-color: rgba(15, 15, 15, 0.9);
-  border: none;
-  border-bottom: 1px solid #93a3b6;
-  border-radius: 5px;
-  color: #ffffff;
+.radio-toolbar input[type="radio"]:checked + label {
+    width: 36%;
+    background-color: rgba(15, 15, 15, 0.9);
+    border: none;
+    border-bottom: 1px solid #93a3b6;
+    border-radius: 5px;
+    color: #ffffff;
 }
 
-.radio-toolbar input[type="radio"]:focus+label {
-  background-color: rgba(15, 15, 15, 0.9);
-  border: none;
-  border-bottom: 1px solid #93a3b6;
-  border-radius: 5px;
-  color: #ffffff;
+.radio-toolbar input[type="radio"]:focus + label {
+    background-color: rgba(15, 15, 15, 0.9);
+    border: none;
+    border-bottom: 1px solid #93a3b6;
+    border-radius: 5px;
+    color: #ffffff;
 }
 
 .radio-toolbar label:hover {
-  background-color: rgba(28, 24, 24, 0.931);
-  width: 36%;
-  color: #ffffff;
+    background-color: rgba(28, 24, 24, 0.931);
+    width: 36%;
+    color: #ffffff;
 }
 
 button {
-  display: block;
-  margin-top: 35px;
-  /*padding: 10px;*/
-  background-color: #4569c6;
-  outline: none;
-  border: 2px double rgba(40, 40, 40, 0.9);
-  color: #ffffff;
-  height: 30px;
-  width: 100%;
+    display: block;
+    margin-top: 35px;
+    /*padding: 10px;*/
+    background-color: #4569c6;
+    outline: none;
+    border: 2px double rgba(40, 40, 40, 0.9);
+    color: #ffffff;
+    height: 30px;
+    width: 100%;
 }
 
 h1 {
-  display: block;
-  margin-top: 5px;
-  margin-right: 5px;
-  padding: 10px;
-  background-color: rgba(15, 15, 15, 0.9);
-  color: #ffffff;
-  width: 93%;
-  text-align: center;
+    display: block;
+    margin-top: 5px;
+    margin-right: 5px;
+    padding: 10px;
+    background-color: rgba(15, 15, 15, 0.9);
+    color: #ffffff;
+    width: 93%;
+    text-align: center;
 }
 
 .range-wrap {
-  position: relative;
-  margin: 0 auto 3rem;
+    position: relative;
+    margin: 0 auto 3rem;
 }
 
 .range {
-  width: 100%;
+    width: 100%;
 }
 
 .bubble {
-  background: rgba(15, 15, 15, 0.9);
-  color: #ffffff;
-  padding: 4px 12px;
-  position: absolute;
-  border-radius: 4px;
-  left: 50%;
-  transform: translateX(-50%);
+    background: rgba(15, 15, 15, 0.9);
+    color: #ffffff;
+    padding: 4px 12px;
+    position: absolute;
+    border-radius: 4px;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .bubble::after {
-  content: "";
-  position: absolute;
-  width: 2px;
-  height: 2px;
-  background: rgba(15, 15, 15, 0.9);
-  color: black;
-  top: -1px;
-  left: 50%;
-}
+    content: "";
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: rgba(15, 15, 15, 0.9);
+    color: black;
+    top: -1px;
+    left: 50%;
+}

[core]/esx_identity/html/index.html

@@ -1,77 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
+        <link href="css/style.css" rel="stylesheet" />
 
-<head>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
-  <link href="css/style.css" rel="stylesheet" />
+        <title>ESX Identity</title>
+    </head>
 
-  <title>ESX Identity</title>
-</head>
+    <body class="none" onkeydown="TriggeredKey(this)">
+        <div class="dialog">
+            <div class="title"><b>IDENTITY</b></div>
+            <form id="register" name="register" action="#">
+                <div style="color: rgb(46, 187, 205); font-size: 12px; font-family: 'Gill Sans', sans-serif">First Name</div>
+                <input id="firstname" type="text" class="" name="firstname" placeholder="First Name" minlength="3" maxlength="8" pattern="[a-zA-Z]*" /><br />
+                <div style="color: rgb(46, 187, 205); font-size: 12px; font-family: 'Gill Sans', sans-serif">Last Name</div>
+                <input id="lastname" type="text" class="" name="lastname" placeholder="Last Name" minlength="3" maxlength="10" pattern="[a-zA-Z]*" /><br />
+                <div style="color: rgb(46, 187, 205); font-size: 12px; font-family: 'Gill Sans', sans-serif">Date of Birth (MM/DD/YYYY)</div>
+                <input id="dateofbirth" type="date" name="dateofbirth" class="" min="1900-01-01" max="2010-01-01" onfocus="(this.type='date')" /><br />
+                <div style="color: rgb(46, 187, 205); font-size: 12px; font-family: 'Gill Sans', sans-serif">Height</div>
+                <input id="height" type="number" class="" name="height" min="120" max="220" placeholder="Height (cm)" /><br />
+                <center>
+                    <div class="radio-toolbar">
+                        <input type="radio" id="radiom" name="sex" value="m" checked />
+                        <label for="radiom">Male</label>
 
-<body class="none" onkeydown="TriggeredKey(this)">
-  <div class="dialog">
-    <div class="title"><b>IDENTITY</b></div>
-    <form id="register" name="register" action="#">
-      <div style="
-            color: rgb(46, 187, 205);
-            font-size: 12px;
-            font-family: 'Gill Sans', sans-serif;
-          ">
-        First Name
-      </div>
-      <input id="firstname" type="text" class="" name="firstname" placeholder="First Name" minlength="3" maxlength="8" pattern="[a-zA-Z]*" /><br />
-      <div style="
-            color: rgb(46, 187, 205);
-            font-size: 12px;
-            font-family: 'Gill Sans', sans-serif;
-          ">
-        Last Name
-      </div>
-      <input id="lastname" type="text" class="" name="lastname" placeholder="Last Name" minlength="3" maxlength="10" pattern="[a-zA-Z]*" /><br />
-      <div style="
-            color: rgb(46, 187, 205);
-            font-size: 12px;
-            font-family: 'Gill Sans', sans-serif;
-          ">
-        Date of Birth (MM/DD/YYYY)
-      </div>
-      <input id="dateofbirth" type="date" name="dateofbirth" class="" min="1900-01-01" max="2010-01-01" onfocus="(this.type='date')" /><br />
-      <div style="
-            color: rgb(46, 187, 205);
-            font-size: 12px;
-            font-family: 'Gill Sans', sans-serif;
-          ">
-        Height
-      </div>
-      <input id="height" type="number" class="" name="height" min="120" max="220" placeholder="Height (cm)" /><br />
-      <center>
-        <div class="radio-toolbar">
-          <input type="radio" id="radiom" name="sex" value="m" checked />
-          <label for="radiom">Male</label>
-
-          <input type="radio" id="radiof" name="sex" value="f" />
-          <label for="radiof">Female</label>
+                        <input type="radio" id="radiof" name="sex" value="f" />
+                        <label for="radiof">Female</label>
+                    </div>
+                </center>
+                <button id="submit" type="submit">
+                    <font size="4px">CREATE</font>
+                </button>
+            </form>
+            <center>
+                <font size="1px" color="green">If the submit button doesn't work, please ensure that you've entered the fields correctly.</font>
+            </center>
         </div>
-      </center>
-      <button id="submit" type="submit">
-        <font size="4px">CREATE</font>
-      </button>
-    </form>
-    <center>
-      <font size="1px" color="green">If the submit button doesn't work, please ensure that you've entered
-        the fields correctly.</font>
-    </center>
-  </div>
 
-  <script>
-    function TriggeredKey(e) {
-      var keycode;
-      if (window.event) keycode = window.event.keyCode;
-      if (window.event.keyCode === 13 || window.event.keyCode === 27)
-        return false;
-    }
-  </script>
-  <script src="js/script.js" defer></script>
-</body>
-
-</html>
+        <script>
+            function TriggeredKey(e) {
+                var keycode;
+                if (window.event) keycode = window.event.keyCode;
+                if (window.event.keyCode === 13 || window.event.keyCode === 27) return false;
+            }
+        </script>
+        <script src="js/script.js" defer></script>
+    </body>
+</html>

[core]/esx_identity/html/js/script.js

@@ -1,46 +1,39 @@
 window.addEventListener("message", (event) => {
-  if (event.data.type === "enableui") {
-    document.body.classList[event.data.enable ? "remove" : "add"]("none");
-  }
+    if (event.data.type === "enableui") {
+        document.body.classList[event.data.enable ? "remove" : "add"]("none");
+    }
 });
 
 document.querySelector("#register").addEventListener("submit", (event) => {
-  event.preventDefault();
+    event.preventDefault();
 
-  const dofVal = document.querySelector("#dateofbirth").value;
-  if (!dofVal) return;
+    const dofVal = document.querySelector("#dateofbirth").value;
+    if (!dofVal) return;
 
-  const dateCheck = new Date(dofVal);
+    const dateCheck = new Date(dofVal);
 
-  const year = new Intl.DateTimeFormat("en", { year: "numeric" }).format(
-    dateCheck
-  );
-  const month = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(
-    dateCheck
-  );
-  const day = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(
-    dateCheck
-  );
+    const year = new Intl.DateTimeFormat("en", { year: "numeric" }).format(dateCheck);
+    const month = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(dateCheck);
+    const day = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(dateCheck);
 
-  const formattedDate = `${day}/${month}/${year}`;
-  fetch("http://esx_identity/register", {
-    method: "POST",
-    body: JSON.stringify({
-      firstname: document.querySelector("#firstname").value,
-      lastname: document.querySelector("#lastname").value,
-      dateofbirth: formattedDate,
-      sex: document.querySelector("input[type='radio'][name='sex']:checked")
-        .value,
-      height: document.querySelector("#height").value,
-    }),
-  });
+    const formattedDate = `${day}/${month}/${year}`;
+    fetch("http://esx_identity/register", {
+        method: "POST",
+        body: JSON.stringify({
+            firstname: document.querySelector("#firstname").value,
+            lastname: document.querySelector("#lastname").value,
+            dateofbirth: formattedDate,
+            sex: document.querySelector("input[type='radio'][name='sex']:checked").value,
+            height: document.querySelector("#height").value,
+        }),
+    });
 
-  document.querySelector("#register").reset();
+    document.querySelector("#register").reset();
 });
 
 document.addEventListener("DOMContentLoaded", () => {
-  fetch("http://esx_identity/ready", {
-    method: "POST",
-    body: JSON.stringify({}),
-  });
-});
+    fetch("http://esx_identity/ready", {
+        method: "POST",
+        body: JSON.stringify({}),
+    });
+});

[core]/esx_loadingscreen/css/index.css

@@ -14,104 +14,104 @@
 
 html,
 body {
-  margin: 0;
-  padding: 0;
-  font-family: "Quicksand", sans-serif;
-  overflow: hidden;
+    margin: 0;
+    padding: 0;
+    font-family: "Quicksand", sans-serif;
+    overflow: hidden;
 }
 
 #esx_intro {
-  z-index: 2;
+    z-index: 2;
 }
 
 #esx_loop {
-  z-index: 1;
+    z-index: 1;
 }
 
 #loading_txt {
-  bottom: 5%;
-  left: 50%;
-  margin-left: -80px;
-  position: absolute;
-  z-index: 999;
+    bottom: 5%;
+    left: 50%;
+    margin-left: -80px;
+    position: absolute;
+    z-index: 999;
 
-  -webkit-animation: fadein 5s;
-  -moz-animation: fadein 5s;
-  -ms-animation: fadein 5s;
-  -o-animation: fadein 5s;
-  animation: fadein 5s;
+    -webkit-animation: fadein 5s;
+    -moz-animation: fadein 5s;
+    -ms-animation: fadein 5s;
+    -o-animation: fadein 5s;
+    animation: fadein 5s;
 }
 
 p {
-  color: white;
-  font-size: 32px;
+    color: white;
+    font-size: 32px;
 }
 
 .text_thing:after {
-  content: " .";
-  animation: dots 2s steps(5, end) infinite;
+    content: " .";
+    animation: dots 2s steps(5, end) infinite;
 }
 
 @keyframes dots {
-  0%,
-  20% {
-    color: rgba(0, 0, 0, 0);
-    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
-  }
-  40% {
-    color: white;
-    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
-  }
-  60% {
-    text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
-  }
-  80%,
-  100% {
-    text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
-  }
+    0%,
+    20% {
+        color: rgba(0, 0, 0, 0);
+        text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+    }
+    40% {
+        color: white;
+        text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+    }
+    60% {
+        text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
+    }
+    80%,
+    100% {
+        text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
+    }
 }
 
 @keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @-moz-keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @-webkit-keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @-ms-keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @-o-keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }

[core]/esx_loadingscreen/index.html

@@ -1,25 +1,22 @@
 <html lang="en">
-  <head>
-    <link rel="stylesheet" href="css/index.css" type="text/css" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap"
-      rel="stylesheet"
-    />
-    <script src="./js/index.js" type="text/javascript"></script>
-  </head>
+    <head>
+        <link rel="stylesheet" href="css/index.css" type="text/css" />
+        <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet" />
+        <script src="./js/index.js" type="text/javascript"></script>
+    </head>
 
-  <body>
-    <div id="wrapper">
-      <div id="loading_txt">
-        <p class="text_thing">Loading</p>
-      </div>
+    <body>
+        <div id="wrapper">
+            <div id="loading_txt">
+                <p class="text_thing">Loading</p>
+            </div>
 
-      <video id="esx_intro" width="100%" autoplay>
-        <source src="vid/esx_intro.mp4" type="video/webm" />
-      </video>
-      <video id="esx_loop" width="100%" loop>
-        <source src="vid/esx_loop.mp4" type="video/webm" />
-      </video>
-    </div>
-  </body>
+            <video id="esx_intro" width="100%" autoplay>
+                <source src="vid/esx_intro.mp4" type="video/webm" />
+            </video>
+            <video id="esx_loop" width="100%" loop>
+                <source src="vid/esx_loop.mp4" type="video/webm" />
+            </video>
+        </div>
+    </body>
 </html>

[core]/esx_loadingscreen/js/index.js

@@ -11,12 +11,12 @@
 //   This copyright should appear in every part of the project code
 
 document.addEventListener("DOMContentLoaded", () => {
-  const introTag = document.getElementById("esx_intro");
-  const loopTag = document.getElementById("esx_loop");
+    const introTag = document.getElementById("esx_intro");
+    const loopTag = document.getElementById("esx_loop");
 
-  introTag.onended = () => {
-    introTag.style.display = "none";
-    loopTag.loop = true; // true
-    loopTag.play();
-  };
+    introTag.onended = () => {
+        introTag.style.display = "none";
+        loopTag.loop = true; // true
+        loopTag.play();
+    };
 });

[core]/esx_menu_default/html/css/app.css

@@ -1,110 +1,110 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
 
 ::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 .menu {
-  font-family: "Poppins", sans-serif;
-  min-width: 350px;
-  color: #fff;
-  position: absolute;
-  background: rgba(33, 33, 33, 0);
-  text-align: center;
+    font-family: "Poppins", sans-serif;
+    min-width: 350px;
+    color: #fff;
+    position: absolute;
+    background: rgba(33, 33, 33, 0);
+    text-align: center;
 }
 
 .head {
-  display: block;
-  overflow: hidden;
-  padding-bottom: 3px;
-  text-align: center;
-  margin-bottom: 5px;
-  white-space: nowrap;
-  background: rgba(10, 10, 10, 0.9);
+    display: block;
+    overflow: hidden;
+    padding-bottom: 3px;
+    text-align: center;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    background: rgba(10, 10, 10, 0.9);
 }
 
 .menu .head {
-  text-align: center;
-  height: 28px;
-  color: #ffffff;
-  font-weight: 700;
-  font-size: 20px;
+    text-align: center;
+    height: 28px;
+    color: #ffffff;
+    font-weight: 700;
+    font-size: 20px;
 }
 
 .menu .menu-items {
-  max-height: 450px;
-  overflow-y: auto;
-  font-weight: 550;
+    max-height: 450px;
+    overflow-y: auto;
+    font-weight: 550;
 }
 
 .menu-items {
-  margin-bottom: 2px;
+    margin-bottom: 2px;
 }
 
 .menu .menu-items .menu-item {
-  display: block;
-  padding: 7px;
-  font-size: 13px;
-  height: 16px;
-  text-indent: 5px;
-  margin-top: 5px;
-  background: rgba(40, 40, 40, 0.8);
-  color: rgb(202, 202, 202);
-  border-radius: 5px;
-  margin-bottom: 6px;
+    display: block;
+    padding: 7px;
+    font-size: 13px;
+    height: 16px;
+    text-indent: 5px;
+    margin-top: 5px;
+    background: rgba(40, 40, 40, 0.8);
+    color: rgb(202, 202, 202);
+    border-radius: 5px;
+    margin-bottom: 6px;
 }
 
 .menu .menu-items .menu-item.selected {
-  border: 1px solid rgba(55, 55, 55, 0.9);
-  background: rgba(20, 20, 20, 0.9);
-  color: rgba(243, 243, 243);
-  letter-spacing: 0.2px;
-  font-weight: 500;
+    border: 1px solid rgba(55, 55, 55, 0.9);
+    background: rgba(20, 20, 20, 0.9);
+    color: rgba(243, 243, 243);
+    letter-spacing: 0.2px;
+    font-weight: 500;
 }
 
 .menu.align-left {
-  left: 0;
-  top: 50%;
+    left: 0;
+    top: 50%;
 }
 
 .menu.align-top-left {
-  left: 3rem;
-  top: 0;
+    left: 3rem;
+    top: 0;
 }
 
 .menu.align-top {
-  left: 50%;
-  top: 0;
+    left: 50%;
+    top: 0;
 }
 
 .menu.align-top-right {
-  right: 3rem;
-  top: 0;
+    right: 3rem;
+    top: 0;
 }
 
 .menu.align-right {
-  right: 0;
-  top: 50%;
+    right: 0;
+    top: 50%;
 }
 
 .menu.align-bottom-right {
-  right: 3rem;
-  bottom: 0;
+    right: 3rem;
+    bottom: 0;
 }
 
 .menu.align-bottom {
-  left: 50%;
-  bottom: 0;
-  transform: translate(0, -50%);
+    left: 50%;
+    bottom: 0;
+    transform: translate(0, -50%);
 }
 
 .menu.align-bottom-left {
-  left: 3rem;
-  bottom: 0;
+    left: 3rem;
+    bottom: 0;
 }
 
 .menu.align-center {
-  left: 50%;
-  top: 35%;
-  transform: translate(-50%, 50%);
+    left: 50%;
+    top: 35%;
+    transform: translate(-50%, 50%);
 }

[core]/esx_menu_default/html/js/app.js

@@ -1,378 +1,366 @@
 (function () {
-  let MenuTpl =
-    '<div id="menu_{{_namespace}}_{{_name}}" class="menu{{#align}} align-{{align}}{{/align}}">' +
-    '<div class="head"><span>{{{title}}}</span></div>' +
-    '<div class="menu-items">' +
-    "{{#elements}}" +
-    '<div class="menu-item {{#selected}}selected{{/selected}}">' +
-    "{{{label}}}{{#isSlider}} : &lt;{{{sliderLabel}}}&gt;{{/isSlider}}" +
-    "</div>" +
-    "{{/elements}}" +
-    "</div>" +
-    "</div>" +
-    "</div>";
-  window.ESX_MENU = {};
-  ESX_MENU.ResourceName = "esx_menu_default";
-  ESX_MENU.opened = {};
-  ESX_MENU.focus = [];
-  ESX_MENU.pos = {};
+    let MenuTpl =
+        '<div id="menu_{{_namespace}}_{{_name}}" class="menu{{#align}} align-{{align}}{{/align}}">' +
+        '<div class="head"><span>{{{title}}}</span></div>' +
+        '<div class="menu-items">' +
+        "{{#elements}}" +
+        '<div class="menu-item {{#selected}}selected{{/selected}}">' +
+        "{{{label}}}{{#isSlider}} : &lt;{{{sliderLabel}}}&gt;{{/isSlider}}" +
+        "</div>" +
+        "{{/elements}}" +
+        "</div>" +
+        "</div>" +
+        "</div>";
+    window.ESX_MENU = {};
+    ESX_MENU.ResourceName = "esx_menu_default";
+    ESX_MENU.opened = {};
+    ESX_MENU.focus = [];
+    ESX_MENU.pos = {};
 
-  ESX_MENU.open = function (namespace, name, data) {
-    if (typeof ESX_MENU.opened[namespace] === "undefined") {
-      ESX_MENU.opened[namespace] = {};
-    }
-
-    if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
-      ESX_MENU.close(namespace, name);
-    }
-
-    if (typeof ESX_MENU.pos[namespace] === "undefined") {
-      ESX_MENU.pos[namespace] = {};
-    }
-
-    for (let i = 0; i < data.elements.length; i++) {
-      if (typeof data.elements[i].type === "undefined") {
-        data.elements[i].type = "default";
-      }
-    }
-
-    data._index = ESX_MENU.focus.length;
-    data._namespace = namespace;
-    data._name = name;
-
-    for (let i = 0; i < data.elements.length; i++) {
-      data.elements[i]._namespace = namespace;
-      data.elements[i]._name = name;
-    }
-
-    ESX_MENU.opened[namespace][name] = data;
-    ESX_MENU.pos[namespace][name] = 0;
-
-    for (let i = 0; i < data.elements.length; i++) {
-      if (data.elements[i].selected) {
-        ESX_MENU.pos[namespace][name] = i;
-      } else {
-        data.elements[i].selected = false;
-      }
-    }
-
-    ESX_MENU.focus.push({
-      namespace: namespace,
-      name: name,
-    });
-
-    ESX_MENU.render();
-    $("#menu_" + namespace + "_" + name)
-      .find(".menu-item.selected")[0]
-      .scrollIntoView();
-  };
-
-  ESX_MENU.close = function (namespace, name) {
-    delete ESX_MENU.opened[namespace][name];
-
-    for (let i = 0; i < ESX_MENU.focus.length; i++) {
-      if (
-        ESX_MENU.focus[i].namespace === namespace &&
-        ESX_MENU.focus[i].name === name
-      ) {
-        ESX_MENU.focus.splice(i, 1);
-        break;
-      }
-    }
-
-    ESX_MENU.render();
-  };
-
-  ESX_MENU.render = function () {
-    let menuContainer = document.getElementById("menus");
-    let focused = ESX_MENU.getFocused();
-    menuContainer.innerHTML = "";
-    $(menuContainer).hide();
-
-    for (let namespace in ESX_MENU.opened) {
-      for (let name in ESX_MENU.opened[namespace]) {
-        let menuData = ESX_MENU.opened[namespace][name];
-        let view = JSON.parse(JSON.stringify(menuData));
-
-        for (let i = 0; i < menuData.elements.length; i++) {
-          let element = view.elements[i];
-
-          switch (element.type) {
-            case "default":
-              break;
-
-            case "slider": {
-              element.isSlider = true;
-              element.sliderLabel =
-                typeof element.options === "undefined"
-                  ? element.value
-                  : element.options[element.value];
-
-              break;
-            }
-
-            default:
-              break;
-          }
-
-          if (i === ESX_MENU.pos[namespace][name]) {
-            element.selected = true;
-          }
+    ESX_MENU.open = function (namespace, name, data) {
+        if (typeof ESX_MENU.opened[namespace] === "undefined") {
+            ESX_MENU.opened[namespace] = {};
         }
 
-        let menu = $(Mustache.render(MenuTpl, view))[0];
-        $(menu).hide();
-        menuContainer.appendChild(menu);
-      }
-    }
-
-    if (typeof focused != "undefined") {
-      $("#menu_" + focused.namespace + "_" + focused.name).show();
-    }
-
-    $(menuContainer).show();
-  };
-
-  ESX_MENU.submit = function (namespace, name, data) {
-    $.post(
-      "http://" + ESX_MENU.ResourceName + "/menu_submit",
-      JSON.stringify({
-        _namespace: namespace,
-        _name: name,
-        current: data,
-        elements: ESX_MENU.opened[namespace][name].elements,
-      })
-    );
-  };
-
-  ESX_MENU.cancel = function (namespace, name) {
-    $.post(
-      "http://" + ESX_MENU.ResourceName + "/menu_cancel",
-      JSON.stringify({
-        _namespace: namespace,
-        _name: name,
-      })
-    );
-  };
-
-  ESX_MENU.change = function (namespace, name, data) {
-    $.post(
-      "http://" + ESX_MENU.ResourceName + "/menu_change",
-      JSON.stringify({
-        _namespace: namespace,
-        _name: name,
-        current: data,
-        elements: ESX_MENU.opened[namespace][name].elements,
-      })
-    );
-  };
-
-  ESX_MENU.getFocused = function () {
-    return ESX_MENU.focus[ESX_MENU.focus.length - 1];
-  };
-
-  window.onData = (data) => {
-    switch (data.action) {
-      case "openMenu": {
-        ESX_MENU.open(data.namespace, data.name, data.data);
-        break;
-      }
-
-      case "closeMenu": {
-        ESX_MENU.close(data.namespace, data.name);
-        break;
-      }
-
-      case "controlPressed": {
-        switch (data.control) {
-          case "ENTER": {
-            let focused = ESX_MENU.getFocused();
-
-            if (typeof focused != "undefined") {
-              let menu = ESX_MENU.opened[focused.namespace][focused.name];
-              let pos = ESX_MENU.pos[focused.namespace][focused.name];
-              let elem = menu.elements[pos];
-
-              if (menu.elements.length > 0) {
-                ESX_MENU.submit(focused.namespace, focused.name, elem);
-              }
-            }
-
-            break;
-          }
-
-          case "BACKSPACE": {
-            let focused = ESX_MENU.getFocused();
-
-            if (typeof focused != "undefined") {
-              ESX_MENU.cancel(focused.namespace, focused.name);
-            }
-
-            break;
-          }
-
-          case "TOP": {
-            let focused = ESX_MENU.getFocused();
-
-            if (typeof focused != "undefined") {
-              let menu = ESX_MENU.opened[focused.namespace][focused.name];
-              let pos = ESX_MENU.pos[focused.namespace][focused.name];
-
-              if (pos > 0) {
-                ESX_MENU.pos[focused.namespace][focused.name]--;
-              } else {
-                ESX_MENU.pos[focused.namespace][focused.name] =
-                  menu.elements.length - 1;
-              }
-
-              let elem =
-                menu.elements[ESX_MENU.pos[focused.namespace][focused.name]];
-
-              for (let i = 0; i < menu.elements.length; i++) {
-                if (i === ESX_MENU.pos[focused.namespace][focused.name]) {
-                  menu.elements[i].selected = true;
-                } else {
-                  menu.elements[i].selected = false;
-                }
-              }
-
-              ESX_MENU.change(focused.namespace, focused.name, elem);
-              ESX_MENU.render();
-
-              $("#menu_" + focused.namespace + "_" + focused.name)
-                .find(".menu-item.selected")[0]
-                .scrollIntoView();
-            }
-
-            break;
-          }
-
-          case "DOWN": {
-            let focused = ESX_MENU.getFocused();
-
-            if (typeof focused != "undefined") {
-              let menu = ESX_MENU.opened[focused.namespace][focused.name];
-              let pos = ESX_MENU.pos[focused.namespace][focused.name];
-              let length = menu.elements.length;
-
-              if (pos < length - 1) {
-                ESX_MENU.pos[focused.namespace][focused.name]++;
-              } else {
-                ESX_MENU.pos[focused.namespace][focused.name] = 0;
-              }
-
-              let elem =
-                menu.elements[ESX_MENU.pos[focused.namespace][focused.name]];
-
-              for (let i = 0; i < menu.elements.length; i++) {
-                if (i === ESX_MENU.pos[focused.namespace][focused.name]) {
-                  menu.elements[i].selected = true;
-                } else {
-                  menu.elements[i].selected = false;
-                }
-              }
-
-              ESX_MENU.change(focused.namespace, focused.name, elem);
-              ESX_MENU.render();
-
-              $("#menu_" + focused.namespace + "_" + focused.name)
-                .find(".menu-item.selected")[0]
-                .scrollIntoView();
-            }
-
-            break;
-          }
-
-          case "LEFT": {
-            let focused = ESX_MENU.getFocused();
-
-            if (typeof focused != "undefined") {
-              let menu = ESX_MENU.opened[focused.namespace][focused.name];
-              let pos = ESX_MENU.pos[focused.namespace][focused.name];
-              let elem = menu.elements[pos];
-
-              switch (elem.type) {
-                case "default":
-                  break;
-
-                case "slider": {
-                  let min = typeof elem.min === "undefined" ? 0 : elem.min;
-
-                  if (elem.value > min) {
-                    elem.value--;
-                    ESX_MENU.change(focused.namespace, focused.name, elem);
-                  }
-
-                  ESX_MENU.render();
-                  break;
-                }
-
-                default:
-                  break;
-              }
-
-              $("#menu_" + focused.namespace + "_" + focused.name)
-                .find(".menu-item.selected")[0]
-                .scrollIntoView();
-            }
-
-            break;
-          }
-
-          case "RIGHT": {
-            let focused = ESX_MENU.getFocused();
-
-            if (typeof focused != "undefined") {
-              let menu = ESX_MENU.opened[focused.namespace][focused.name];
-              let pos = ESX_MENU.pos[focused.namespace][focused.name];
-              let elem = menu.elements[pos];
-
-              switch (elem.type) {
-                case "default":
-                  break;
-
-                case "slider": {
-                  if (
-                    typeof elem.options != "undefined" &&
-                    elem.value < elem.options.length - 1
-                  ) {
-                    elem.value++;
-                    ESX_MENU.change(focused.namespace, focused.name, elem);
-                  }
-
-                  if (typeof elem.max != "undefined" && elem.value < elem.max) {
-                    elem.value++;
-                    ESX_MENU.change(focused.namespace, focused.name, elem);
-                  }
-
-                  ESX_MENU.render();
-                  break;
-                }
-
-                default:
-                  break;
-              }
-
-              $("#menu_" + focused.namespace + "_" + focused.name)
-                .find(".menu-item.selected")[0]
-                .scrollIntoView();
-            }
-
-            break;
-          }
-
-          default:
-            break;
+        if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
+            ESX_MENU.close(namespace, name);
         }
 
-        break;
-      }
-    }
-  };
+        if (typeof ESX_MENU.pos[namespace] === "undefined") {
+            ESX_MENU.pos[namespace] = {};
+        }
 
-  window.onload = function (e) {
-    window.addEventListener("message", (event) => {
-      onData(event.data);
-    });
-  };
+        for (let i = 0; i < data.elements.length; i++) {
+            if (typeof data.elements[i].type === "undefined") {
+                data.elements[i].type = "default";
+            }
+        }
+
+        data._index = ESX_MENU.focus.length;
+        data._namespace = namespace;
+        data._name = name;
+
+        for (let i = 0; i < data.elements.length; i++) {
+            data.elements[i]._namespace = namespace;
+            data.elements[i]._name = name;
+        }
+
+        ESX_MENU.opened[namespace][name] = data;
+        ESX_MENU.pos[namespace][name] = 0;
+
+        for (let i = 0; i < data.elements.length; i++) {
+            if (data.elements[i].selected) {
+                ESX_MENU.pos[namespace][name] = i;
+            } else {
+                data.elements[i].selected = false;
+            }
+        }
+
+        ESX_MENU.focus.push({
+            namespace: namespace,
+            name: name,
+        });
+
+        ESX_MENU.render();
+        $("#menu_" + namespace + "_" + name)
+            .find(".menu-item.selected")[0]
+            .scrollIntoView();
+    };
+
+    ESX_MENU.close = function (namespace, name) {
+        delete ESX_MENU.opened[namespace][name];
+
+        for (let i = 0; i < ESX_MENU.focus.length; i++) {
+            if (ESX_MENU.focus[i].namespace === namespace && ESX_MENU.focus[i].name === name) {
+                ESX_MENU.focus.splice(i, 1);
+                break;
+            }
+        }
+
+        ESX_MENU.render();
+    };
+
+    ESX_MENU.render = function () {
+        let menuContainer = document.getElementById("menus");
+        let focused = ESX_MENU.getFocused();
+        menuContainer.innerHTML = "";
+        $(menuContainer).hide();
+
+        for (let namespace in ESX_MENU.opened) {
+            for (let name in ESX_MENU.opened[namespace]) {
+                let menuData = ESX_MENU.opened[namespace][name];
+                let view = JSON.parse(JSON.stringify(menuData));
+
+                for (let i = 0; i < menuData.elements.length; i++) {
+                    let element = view.elements[i];
+
+                    switch (element.type) {
+                        case "default":
+                            break;
+
+                        case "slider": {
+                            element.isSlider = true;
+                            element.sliderLabel = typeof element.options === "undefined" ? element.value : element.options[element.value];
+
+                            break;
+                        }
+
+                        default:
+                            break;
+                    }
+
+                    if (i === ESX_MENU.pos[namespace][name]) {
+                        element.selected = true;
+                    }
+                }
+
+                let menu = $(Mustache.render(MenuTpl, view))[0];
+                $(menu).hide();
+                menuContainer.appendChild(menu);
+            }
+        }
+
+        if (typeof focused != "undefined") {
+            $("#menu_" + focused.namespace + "_" + focused.name).show();
+        }
+
+        $(menuContainer).show();
+    };
+
+    ESX_MENU.submit = function (namespace, name, data) {
+        $.post(
+            "http://" + ESX_MENU.ResourceName + "/menu_submit",
+            JSON.stringify({
+                _namespace: namespace,
+                _name: name,
+                current: data,
+                elements: ESX_MENU.opened[namespace][name].elements,
+            })
+        );
+    };
+
+    ESX_MENU.cancel = function (namespace, name) {
+        $.post(
+            "http://" + ESX_MENU.ResourceName + "/menu_cancel",
+            JSON.stringify({
+                _namespace: namespace,
+                _name: name,
+            })
+        );
+    };
+
+    ESX_MENU.change = function (namespace, name, data) {
+        $.post(
+            "http://" + ESX_MENU.ResourceName + "/menu_change",
+            JSON.stringify({
+                _namespace: namespace,
+                _name: name,
+                current: data,
+                elements: ESX_MENU.opened[namespace][name].elements,
+            })
+        );
+    };
+
+    ESX_MENU.getFocused = function () {
+        return ESX_MENU.focus[ESX_MENU.focus.length - 1];
+    };
+
+    window.onData = (data) => {
+        switch (data.action) {
+            case "openMenu": {
+                ESX_MENU.open(data.namespace, data.name, data.data);
+                break;
+            }
+
+            case "closeMenu": {
+                ESX_MENU.close(data.namespace, data.name);
+                break;
+            }
+
+            case "controlPressed": {
+                switch (data.control) {
+                    case "ENTER": {
+                        let focused = ESX_MENU.getFocused();
+
+                        if (typeof focused != "undefined") {
+                            let menu = ESX_MENU.opened[focused.namespace][focused.name];
+                            let pos = ESX_MENU.pos[focused.namespace][focused.name];
+                            let elem = menu.elements[pos];
+
+                            if (menu.elements.length > 0) {
+                                ESX_MENU.submit(focused.namespace, focused.name, elem);
+                            }
+                        }
+
+                        break;
+                    }
+
+                    case "BACKSPACE": {
+                        let focused = ESX_MENU.getFocused();
+
+                        if (typeof focused != "undefined") {
+                            ESX_MENU.cancel(focused.namespace, focused.name);
+                        }
+
+                        break;
+                    }
+
+                    case "TOP": {
+                        let focused = ESX_MENU.getFocused();
+
+                        if (typeof focused != "undefined") {
+                            let menu = ESX_MENU.opened[focused.namespace][focused.name];
+                            let pos = ESX_MENU.pos[focused.namespace][focused.name];
+
+                            if (pos > 0) {
+                                ESX_MENU.pos[focused.namespace][focused.name]--;
+                            } else {
+                                ESX_MENU.pos[focused.namespace][focused.name] = menu.elements.length - 1;
+                            }
+
+                            let elem = menu.elements[ESX_MENU.pos[focused.namespace][focused.name]];
+
+                            for (let i = 0; i < menu.elements.length; i++) {
+                                if (i === ESX_MENU.pos[focused.namespace][focused.name]) {
+                                    menu.elements[i].selected = true;
+                                } else {
+                                    menu.elements[i].selected = false;
+                                }
+                            }
+
+                            ESX_MENU.change(focused.namespace, focused.name, elem);
+                            ESX_MENU.render();
+
+                            $("#menu_" + focused.namespace + "_" + focused.name)
+                                .find(".menu-item.selected")[0]
+                                .scrollIntoView();
+                        }
+
+                        break;
+                    }
+
+                    case "DOWN": {
+                        let focused = ESX_MENU.getFocused();
+
+                        if (typeof focused != "undefined") {
+                            let menu = ESX_MENU.opened[focused.namespace][focused.name];
+                            let pos = ESX_MENU.pos[focused.namespace][focused.name];
+                            let length = menu.elements.length;
+
+                            if (pos < length - 1) {
+                                ESX_MENU.pos[focused.namespace][focused.name]++;
+                            } else {
+                                ESX_MENU.pos[focused.namespace][focused.name] = 0;
+                            }
+
+                            let elem = menu.elements[ESX_MENU.pos[focused.namespace][focused.name]];
+
+                            for (let i = 0; i < menu.elements.length; i++) {
+                                if (i === ESX_MENU.pos[focused.namespace][focused.name]) {
+                                    menu.elements[i].selected = true;
+                                } else {
+                                    menu.elements[i].selected = false;
+                                }
+                            }
+
+                            ESX_MENU.change(focused.namespace, focused.name, elem);
+                            ESX_MENU.render();
+
+                            $("#menu_" + focused.namespace + "_" + focused.name)
+                                .find(".menu-item.selected")[0]
+                                .scrollIntoView();
+                        }
+
+                        break;
+                    }
+
+                    case "LEFT": {
+                        let focused = ESX_MENU.getFocused();
+
+                        if (typeof focused != "undefined") {
+                            let menu = ESX_MENU.opened[focused.namespace][focused.name];
+                            let pos = ESX_MENU.pos[focused.namespace][focused.name];
+                            let elem = menu.elements[pos];
+
+                            switch (elem.type) {
+                                case "default":
+                                    break;
+
+                                case "slider": {
+                                    let min = typeof elem.min === "undefined" ? 0 : elem.min;
+
+                                    if (elem.value > min) {
+                                        elem.value--;
+                                        ESX_MENU.change(focused.namespace, focused.name, elem);
+                                    }
+
+                                    ESX_MENU.render();
+                                    break;
+                                }
+
+                                default:
+                                    break;
+                            }
+
+                            $("#menu_" + focused.namespace + "_" + focused.name)
+                                .find(".menu-item.selected")[0]
+                                .scrollIntoView();
+                        }
+
+                        break;
+                    }
+
+                    case "RIGHT": {
+                        let focused = ESX_MENU.getFocused();
+
+                        if (typeof focused != "undefined") {
+                            let menu = ESX_MENU.opened[focused.namespace][focused.name];
+                            let pos = ESX_MENU.pos[focused.namespace][focused.name];
+                            let elem = menu.elements[pos];
+
+                            switch (elem.type) {
+                                case "default":
+                                    break;
+
+                                case "slider": {
+                                    if (typeof elem.options != "undefined" && elem.value < elem.options.length - 1) {
+                                        elem.value++;
+                                        ESX_MENU.change(focused.namespace, focused.name, elem);
+                                    }
+
+                                    if (typeof elem.max != "undefined" && elem.value < elem.max) {
+                                        elem.value++;
+                                        ESX_MENU.change(focused.namespace, focused.name, elem);
+                                    }
+
+                                    ESX_MENU.render();
+                                    break;
+                                }
+
+                                default:
+                                    break;
+                            }
+
+                            $("#menu_" + focused.namespace + "_" + focused.name)
+                                .find(".menu-item.selected")[0]
+                                .scrollIntoView();
+                        }
+
+                        break;
+                    }
+
+                    default:
+                        break;
+                }
+
+                break;
+            }
+        }
+    };
+
+    window.onload = function (e) {
+        window.addEventListener("message", (event) => {
+            onData(event.data);
+        });
+    };
 })();

[core]/esx_menu_default/html/ui.html

@@ -1,25 +1,16 @@
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="nui://esx_menu_default/html/css/app.css" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap"
-      rel="stylesheet"
-    />
-  </head>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="nui://esx_menu_default/html/css/app.css" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
+    </head>
 
-  <body>
-    <div id="menus"></div>
+    <body>
+        <div id="menus"></div>
 
-    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
-    <script
-      src="nui://esx_menu_default/html/js/mustache.min.js"
-      type="text/javascript"
-    ></script>
-    <script
-      src="nui://esx_menu_default/html/js/app.js"
-      type="text/javascript"
-    ></script>
-  </body>
+        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+        <script src="nui://esx_menu_default/html/js/mustache.min.js" type="text/javascript"></script>
+        <script src="nui://esx_menu_default/html/js/app.js" type="text/javascript"></script>
+    </body>
 </html>

[core]/esx_menu_dialog/html/css/app.css

@@ -1,132 +1,132 @@
 @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
 
 #controls {
-  font-family: montserrat;
-  font-size: 3em;
-  color: #fff;
-  position: absolute;
-  bottom: 40;
-  right: 40;
+    font-family: montserrat;
+    font-size: 3em;
+    color: #fff;
+    position: absolute;
+    bottom: 40;
+    right: 40;
 }
 
 .controls {
-  display: none;
+    display: none;
 }
 
 .dialog {
-  font-family: montserrat;
-  background: rgba(33, 33, 33, 0.8);
-  color: #fff;
-  position: absolute;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  overflow: hidden;
-  top: 50%;
-  left: 50%;
-  width: 600px;
-  height: 152px;
-  transform: translate(-50%, -50%);
+    font-family: montserrat;
+    background: rgba(33, 33, 33, 0.8);
+    color: #fff;
+    position: absolute;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    overflow: hidden;
+    top: 50%;
+    left: 50%;
+    width: 600px;
+    height: 152px;
+    transform: translate(-50%, -50%);
 }
 
 .head {
-  display: flex;
-  flex-basis: 100%;
-  align-items: center;
-  color: #fff;
+    display: flex;
+    flex-basis: 100%;
+    align-items: center;
+    color: #fff;
 }
 
 .dialog.big {
-  height: 200px;
+    height: 200px;
 }
 
 .dialog .head {
-  background: rgba(25, 25, 25, 0.9);
-  text-align: center;
-  height: 40px;
+    background: rgba(25, 25, 25, 0.9);
+    text-align: center;
+    height: 40px;
 }
 
 .dialog .head span::before {
-  content: "";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
+    content: "";
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
 }
 
 .dialog input[type="text"] {
-  width: 60%;
-  height: 32px;
-  outline: 0;
-  background: none;
-  text-align: center;
-  margin-top: 26px;
-  margin-left: 125px;
-  font-size: large;
-  transition: all 0.2s ease-in-out;
-  color: white;
-  border: 0.5px solid #ffffff3b;
-  border-radius: 0px;
+    width: 60%;
+    height: 32px;
+    outline: 0;
+    background: none;
+    text-align: center;
+    margin-top: 26px;
+    margin-left: 125px;
+    font-size: large;
+    transition: all 0.2s ease-in-out;
+    color: white;
+    border: 0.5px solid #ffffff3b;
+    border-radius: 0px;
 }
 
 .dialog input[type="text"]:active,
 .dialog input[type="text"]:hover {
-  color: white;
+    color: white;
 }
 
 .dialog textarea {
-  width: 100%;
-  height: 128px;
+    width: 100%;
+    height: 128px;
 }
 
 .dialog button[name="submit"] {
-  width: 17.6%;
-  height: 32px;
-  margin-left: 160px;
-  font-weight: 300;
-  color: rgb(37, 34, 53);
-  border-radius: 10px;
-  text-transform: uppercase;
-  background: rgb(50, 79, 208);
-  outline: 0;
-  border: none;
-  transition: all 0.2s ease-in-out;
+    width: 17.6%;
+    height: 32px;
+    margin-left: 160px;
+    font-weight: 300;
+    color: rgb(37, 34, 53);
+    border-radius: 10px;
+    text-transform: uppercase;
+    background: rgb(50, 79, 208);
+    outline: 0;
+    border: none;
+    transition: all 0.2s ease-in-out;
 }
 
 .dialog button {
-  z-index: 9999;
-  transform: translate(-0%, 50%);
+    z-index: 9999;
+    transform: translate(-0%, 50%);
 }
 
 .dialog button[name="cancel"] {
-  width: 17.6%;
-  height: 32px;
-  margin-left: 60px;
-  border: none;
-  text-transform: uppercase;
-  font-weight: 200;
-  border-radius: 10px;
-  color: rgb(53, 34, 34);
-  outline: 0;
-  background: #c74545;
-  transition: all 0.2s ease-in-out;
+    width: 17.6%;
+    height: 32px;
+    margin-left: 60px;
+    border: none;
+    text-transform: uppercase;
+    font-weight: 200;
+    border-radius: 10px;
+    color: rgb(53, 34, 34);
+    outline: 0;
+    background: #c74545;
+    transition: all 0.2s ease-in-out;
 }
 
 .dialog button[name="cancel"]:hover {
-  letter-spacing: 1px;
-  color: #ffffff;
-  width: 17.6%;
+    letter-spacing: 1px;
+    color: #ffffff;
+    width: 17.6%;
 }
 
 .dialog button[name="submit"]:hover {
-  letter-spacing: 1px;
-  color: white;
-  width: 17.6%;
+    letter-spacing: 1px;
+    color: white;
+    width: 17.6%;
 }
 
 .head::before,
 .head::after {
-  content: "";
-  flex-grow: 1;
-  background: #00e1ff;
-  height: 2px;
-  margin: 0px 3px;
+    content: "";
+    flex-grow: 1;
+    background: #00e1ff;
+    height: 2px;
+    margin: 0px 3px;
 }

[core]/esx_menu_dialog/html/js/app.js

@@ -1,184 +1,181 @@
 (function () {
-  let MenuTpl =
-    '<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
-    '<div class="head"><span>{{title}}</span></div>' +
-    '{{#isDefault}}<input type="text" name="value" id="inputText"/>{{/isDefault}}' +
-    '{{#isBig}}<textarea name="value"/>{{/isBig}}' +
-    '<button type="button" name="submit">Submit</button>' +
-    '<button type="button" name="cancel">Cancel</button>' +
-    "</div>" +
-    "</div>";
-  window.ESX_MENU = {};
-  ESX_MENU.ResourceName = "esx_menu_dialog";
-  ESX_MENU.opened = {};
-  ESX_MENU.focus = [];
-  ESX_MENU.pos = {};
+    let MenuTpl =
+        '<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
+        '<div class="head"><span>{{title}}</span></div>' +
+        '{{#isDefault}}<input type="text" name="value" id="inputText"/>{{/isDefault}}' +
+        '{{#isBig}}<textarea name="value"/>{{/isBig}}' +
+        '<button type="button" name="submit">Submit</button>' +
+        '<button type="button" name="cancel">Cancel</button>' +
+        "</div>" +
+        "</div>";
+    window.ESX_MENU = {};
+    ESX_MENU.ResourceName = "esx_menu_dialog";
+    ESX_MENU.opened = {};
+    ESX_MENU.focus = [];
+    ESX_MENU.pos = {};
 
-  ESX_MENU.open = function (namespace, name, data) {
-    if (typeof ESX_MENU.opened[namespace] === "undefined") {
-      ESX_MENU.opened[namespace] = {};
-    }
+    ESX_MENU.open = function (namespace, name, data) {
+        if (typeof ESX_MENU.opened[namespace] === "undefined") {
+            ESX_MENU.opened[namespace] = {};
+        }
 
-    if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
-      ESX_MENU.close(namespace, name);
-    }
+        if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
+            ESX_MENU.close(namespace, name);
+        }
 
-    if (typeof ESX_MENU.pos[namespace] === "undefined") {
-      ESX_MENU.pos[namespace] = {};
-    }
+        if (typeof ESX_MENU.pos[namespace] === "undefined") {
+            ESX_MENU.pos[namespace] = {};
+        }
 
-    if (typeof data.type === "undefined") {
-      data.type = "default";
-    }
+        if (typeof data.type === "undefined") {
+            data.type = "default";
+        }
 
-    if (typeof data.align === "undefined") {
-      data.align = "top-left";
-    }
+        if (typeof data.align === "undefined") {
+            data.align = "top-left";
+        }
 
-    data._index = ESX_MENU.focus.length;
-    data._namespace = namespace;
-    data._name = name;
+        data._index = ESX_MENU.focus.length;
+        data._namespace = namespace;
+        data._name = name;
 
-    ESX_MENU.opened[namespace][name] = data;
-    ESX_MENU.pos[namespace][name] = 0;
+        ESX_MENU.opened[namespace][name] = data;
+        ESX_MENU.pos[namespace][name] = 0;
 
-    ESX_MENU.focus.push({
-      namespace: namespace,
-      name: name,
-    });
+        ESX_MENU.focus.push({
+            namespace: namespace,
+            name: name,
+        });
 
-    document.onkeyup = function (key) {
-      if (key.which === 27) {
-        // Escape key
-        SendMessage(ESX_MENU.ResourceName, "menu_cancel", data);
-      } else if (key.which === 13) {
-        // Enter key
-        SendMessage(ESX_MENU.ResourceName, "menu_submit", data);
-      }
+        document.onkeyup = function (key) {
+            if (key.which === 27) {
+                // Escape key
+                SendMessage(ESX_MENU.ResourceName, "menu_cancel", data);
+            } else if (key.which === 13) {
+                // Enter key
+                SendMessage(ESX_MENU.ResourceName, "menu_submit", data);
+            }
+        };
+
+        ESX_MENU.render();
     };
 
-    ESX_MENU.render();
-  };
+    ESX_MENU.close = function (namespace, name) {
+        delete ESX_MENU.opened[namespace][name];
 
-  ESX_MENU.close = function (namespace, name) {
-    delete ESX_MENU.opened[namespace][name];
-
-    for (let i = 0; i < ESX_MENU.focus.length; i++) {
-      if (
-        ESX_MENU.focus[i].namespace === namespace &&
-        ESX_MENU.focus[i].name === name
-      ) {
-        ESX_MENU.focus.splice(i, 1);
-        break;
-      }
-    }
-
-    ESX_MENU.render();
-  };
-
-  ESX_MENU.render = function () {
-    let menuContainer = $("#menus")[0];
-    $(menuContainer).find('button[name="submit"]').unbind("click");
-    $(menuContainer).find('button[name="cancel"]').unbind("click");
-    $(menuContainer).find('[name="value"]').unbind("input propertychange");
-    menuContainer.innerHTML = "";
-    $(menuContainer).hide();
-
-    for (let namespace in ESX_MENU.opened) {
-      for (let name in ESX_MENU.opened[namespace]) {
-        let menuData = ESX_MENU.opened[namespace][name];
-        let view = JSON.parse(JSON.stringify(menuData));
-
-        switch (menuData.type) {
-          case "default": {
-            view.isDefault = true;
-            break;
-          }
-
-          case "big": {
-            view.isBig = true;
-            break;
-          }
-
-          default:
-            break;
+        for (let i = 0; i < ESX_MENU.focus.length; i++) {
+            if (ESX_MENU.focus[i].namespace === namespace && ESX_MENU.focus[i].name === name) {
+                ESX_MENU.focus.splice(i, 1);
+                break;
+            }
         }
 
-        let menu = $(Mustache.render(MenuTpl, view))[0];
+        ESX_MENU.render();
+    };
 
-        $(menu).css("z-index", 1000 + view._index);
+    ESX_MENU.render = function () {
+        let menuContainer = $("#menus")[0];
+        $(menuContainer).find('button[name="submit"]').unbind("click");
+        $(menuContainer).find('button[name="cancel"]').unbind("click");
+        $(menuContainer).find('[name="value"]').unbind("input propertychange");
+        menuContainer.innerHTML = "";
+        $(menuContainer).hide();
 
-        $(menu)
-          .find('button[name="submit"]')
-          .click(
-            function () {
-              ESX_MENU.submit(this.namespace, this.name, this.data);
-            }.bind({ namespace: namespace, name: name, data: menuData })
-          );
+        for (let namespace in ESX_MENU.opened) {
+            for (let name in ESX_MENU.opened[namespace]) {
+                let menuData = ESX_MENU.opened[namespace][name];
+                let view = JSON.parse(JSON.stringify(menuData));
 
-        $(menu)
-          .find('button[name="cancel"]')
-          .click(
-            function () {
-              ESX_MENU.cancel(this.namespace, this.name, this.data);
-            }.bind({ namespace: namespace, name: name, data: menuData })
-          );
+                switch (menuData.type) {
+                    case "default": {
+                        view.isDefault = true;
+                        break;
+                    }
 
-        $(menu)
-          .find('[name="value"]')
-          .bind(
-            "input propertychange",
-            function () {
-              this.data.value = $(menu).find('[name="value"]').val();
-              ESX_MENU.change(this.namespace, this.name, this.data);
-            }.bind({ namespace: namespace, name: name, data: menuData })
-          );
+                    case "big": {
+                        view.isBig = true;
+                        break;
+                    }
 
-        if (typeof menuData.value != "undefined") {
-          $(menu).find('[name="value"]').val(menuData.value);
+                    default:
+                        break;
+                }
+
+                let menu = $(Mustache.render(MenuTpl, view))[0];
+
+                $(menu).css("z-index", 1000 + view._index);
+
+                $(menu)
+                    .find('button[name="submit"]')
+                    .click(
+                        function () {
+                            ESX_MENU.submit(this.namespace, this.name, this.data);
+                        }.bind({ namespace: namespace, name: name, data: menuData })
+                    );
+
+                $(menu)
+                    .find('button[name="cancel"]')
+                    .click(
+                        function () {
+                            ESX_MENU.cancel(this.namespace, this.name, this.data);
+                        }.bind({ namespace: namespace, name: name, data: menuData })
+                    );
+
+                $(menu)
+                    .find('[name="value"]')
+                    .bind(
+                        "input propertychange",
+                        function () {
+                            this.data.value = $(menu).find('[name="value"]').val();
+                            ESX_MENU.change(this.namespace, this.name, this.data);
+                        }.bind({ namespace: namespace, name: name, data: menuData })
+                    );
+
+                if (typeof menuData.value != "undefined") {
+                    $(menu).find('[name="value"]').val(menuData.value);
+                }
+
+                menuContainer.appendChild(menu);
+            }
         }
 
-        menuContainer.appendChild(menu);
-      }
-    }
+        $(menuContainer).show();
+        $("#inputText").focus();
+    };
 
-    $(menuContainer).show();
-    $("#inputText").focus();
-  };
+    ESX_MENU.submit = function (namespace, name, data) {
+        SendMessage(ESX_MENU.ResourceName, "menu_submit", data);
+    };
 
-  ESX_MENU.submit = function (namespace, name, data) {
-    SendMessage(ESX_MENU.ResourceName, "menu_submit", data);
-  };
+    ESX_MENU.cancel = function (namespace, name, data) {
+        SendMessage(ESX_MENU.ResourceName, "menu_cancel", data);
+    };
 
-  ESX_MENU.cancel = function (namespace, name, data) {
-    SendMessage(ESX_MENU.ResourceName, "menu_cancel", data);
-  };
+    ESX_MENU.change = function (namespace, name, data) {
+        SendMessage(ESX_MENU.ResourceName, "menu_change", data);
+    };
 
-  ESX_MENU.change = function (namespace, name, data) {
-    SendMessage(ESX_MENU.ResourceName, "menu_change", data);
-  };
+    ESX_MENU.getFocused = function () {
+        return ESX_MENU.focus[ESX_MENU.focus.length - 1];
+    };
 
-  ESX_MENU.getFocused = function () {
-    return ESX_MENU.focus[ESX_MENU.focus.length - 1];
-  };
+    window.onData = (data) => {
+        switch (data.action) {
+            case "openMenu": {
+                ESX_MENU.open(data.namespace, data.name, data.data);
+                break;
+            }
 
-  window.onData = (data) => {
-    switch (data.action) {
-      case "openMenu": {
-        ESX_MENU.open(data.namespace, data.name, data.data);
-        break;
-      }
+            case "closeMenu": {
+                ESX_MENU.close(data.namespace, data.name);
+                break;
+            }
+        }
+    };
 
-      case "closeMenu": {
-        ESX_MENU.close(data.namespace, data.name);
-        break;
-      }
-    }
-  };
-
-  window.onload = function (e) {
-    window.addEventListener("message", (event) => {
-      onData(event.data);
-    });
-  };
+    window.onload = function (e) {
+        window.addEventListener("message", (event) => {
+            onData(event.data);
+        });
+    };
 })();

[core]/esx_menu_dialog/html/ui.html

@@ -1,26 +1,17 @@
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,300&family=PT+Sans+Narrow&display=swap"
-      rel="stylesheet"
-    />
-  </head>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,300&family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
+    </head>
 
-  <body>
-    <div id="menus"></div>
+    <body>
+        <div id="menus"></div>
 
-    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
-    <script src="nui://es_extended/html/js/wrapper.js"></script>
-    <script
-      src="nui://esx_menu_dialog/html/js/mustache.min.js"
-      type="text/javascript"
-    ></script>
-    <script
-      src="nui://esx_menu_dialog/html/js/app.js"
-      type="text/javascript"
-    ></script>
-  </body>
+        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+        <script src="nui://es_extended/html/js/wrapper.js"></script>
+        <script src="nui://esx_menu_dialog/html/js/mustache.min.js" type="text/javascript"></script>
+        <script src="nui://esx_menu_dialog/html/js/app.js" type="text/javascript"></script>
+    </body>
 </html>

[core]/esx_menu_list/html/css/app.css

@@ -1,55 +1,55 @@
 @font-face {
-  font-family: bankgothic;
-  src: url("../fonts/bankgothic.ttf");
+    font-family: bankgothic;
+    src: url("../fonts/bankgothic.ttf");
 }
 
 @font-face {
-  font-family: pcdown;
-  src: url("../fonts/pdown.ttf");
+    font-family: pcdown;
+    src: url("../fonts/pdown.ttf");
 }
 
 .menu {
-  font-family: bankgothic;
-  position: absolute;
-  left: 50%;
-  top: 40%;
-  transform: translate(-50%, -50%);
-  overflow-y: auto;
-  max-height: 90%;
+    font-family: bankgothic;
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -50%);
+    overflow-y: auto;
+    max-height: 90%;
 }
 
 .menu button {
-  font-family: bankgothic;
+    font-family: bankgothic;
 }
 
 .menu > table {
-  border-collapse: separate;
-  border-spacing: 0 5px;
-  min-width: 400px;
-  background: rgba(33, 33, 33, 0);
+    border-collapse: separate;
+    border-spacing: 0 5px;
+    min-width: 400px;
+    background: rgba(33, 33, 33, 0);
 }
 
 .menu > table > thead {
-  background: rgba(10, 10, 10, 0.9);
-  text-align: center;
-  height: 20px;
-  line-height: 20px;
-  margin-bottom: 20px;
-  color: #fff;
+    background: rgba(10, 10, 10, 0.9);
+    text-align: center;
+    height: 20px;
+    line-height: 20px;
+    margin-bottom: 20px;
+    color: #fff;
 }
 
 .menu td {
-  text-align: center;
-  padding: 8px;
-  margin: 20px;
+    text-align: center;
+    padding: 8px;
+    margin: 20px;
 }
 
 .menu tbody tr:nth-child(even) {
-  color: #fff;
-  background: rgba(40, 40, 40, 0.8);
+    color: #fff;
+    background: rgba(40, 40, 40, 0.8);
 }
 
 .menu tbody tr:nth-child(odd) {
-  color: #fff;
-  background: rgba(40, 40, 40, 0.8);
+    color: #fff;
+    background: rgba(40, 40, 40, 0.8);
 }

[core]/esx_menu_list/html/js/app.js

@@ -1,209 +1,189 @@
 (function () {
-  let MenuTpl =
-    '<div id="menu_{{_namespace}}_{{_name}}" class="menu">' +
-    "<table>" +
-    "<thead>" +
-    "<tr>" +
-    "{{#head}}<td>{{content}}</td>{{/head}}" +
-    "</tr>" +
-    "</thead>" +
-    "<tbody>" +
-    "{{#rows}}" +
-    "<tr>" +
-    "{{#cols}}<td>{{{content}}}</td>{{/cols}}" +
-    "</tr>" +
-    "{{/rows}}" +
-    "</tbody>" +
-    "</table>" +
-    "</div>";
-  window.ESX_MENU = {};
-  ESX_MENU.ResourceName = "esx_menu_list";
-  ESX_MENU.opened = {};
-  ESX_MENU.focus = [];
-  ESX_MENU.data = {};
+    let MenuTpl =
+        '<div id="menu_{{_namespace}}_{{_name}}" class="menu">' +
+        "<table>" +
+        "<thead>" +
+        "<tr>" +
+        "{{#head}}<td>{{content}}</td>{{/head}}" +
+        "</tr>" +
+        "</thead>" +
+        "<tbody>" +
+        "{{#rows}}" +
+        "<tr>" +
+        "{{#cols}}<td>{{{content}}}</td>{{/cols}}" +
+        "</tr>" +
+        "{{/rows}}" +
+        "</tbody>" +
+        "</table>" +
+        "</div>";
+    window.ESX_MENU = {};
+    ESX_MENU.ResourceName = "esx_menu_list";
+    ESX_MENU.opened = {};
+    ESX_MENU.focus = [];
+    ESX_MENU.data = {};
 
-  ESX_MENU.open = function (namespace, name, data) {
-    if (typeof ESX_MENU.opened[namespace] === "undefined") {
-      ESX_MENU.opened[namespace] = {};
-    }
-
-    if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
-      ESX_MENU.close(namespace, name);
-    }
-
-    data._namespace = namespace;
-    data._name = name;
-
-    ESX_MENU.opened[namespace][name] = data;
-
-    ESX_MENU.focus.push({
-      namespace: namespace,
-      name: name,
-    });
-
-    ESX_MENU.render();
-  };
-
-  ESX_MENU.close = function (namespace, name) {
-    delete ESX_MENU.opened[namespace][name];
-
-    for (let i = 0; i < ESX_MENU.focus.length; i++) {
-      if (
-        ESX_MENU.focus[i].namespace === namespace &&
-        ESX_MENU.focus[i].name === name
-      ) {
-        ESX_MENU.focus.splice(i, 1);
-        break;
-      }
-    }
-
-    ESX_MENU.render();
-  };
-
-  ESX_MENU.render = function () {
-    let menuContainer = document.getElementById("menus");
-    let focused = ESX_MENU.getFocused();
-    menuContainer.innerHTML = "";
-
-    $(menuContainer).hide();
-
-    for (let namespace in ESX_MENU.opened) {
-      if (typeof ESX_MENU.data[namespace] === "undefined") {
-        ESX_MENU.data[namespace] = {};
-      }
-
-      for (let name in ESX_MENU.opened[namespace]) {
-        ESX_MENU.data[namespace][name] = [];
-
-        let menuData = ESX_MENU.opened[namespace][name];
-        let view = {
-          _namespace: menuData._namespace,
-          _name: menuData._name,
-          head: [],
-          rows: [],
-        };
-
-        for (let i = 0; i < menuData.head.length; i++) {
-          let item = { content: menuData.head[i] };
-          view.head.push(item);
+    ESX_MENU.open = function (namespace, name, data) {
+        if (typeof ESX_MENU.opened[namespace] === "undefined") {
+            ESX_MENU.opened[namespace] = {};
         }
 
-        for (let i = 0; i < menuData.rows.length; i++) {
-          let row = menuData.rows[i];
-          let data = row.data;
-
-          ESX_MENU.data[namespace][name].push(data);
-
-          view.rows.push({ cols: [] });
-
-          for (let j = 0; j < row.cols.length; j++) {
-            let col = menuData.rows[i].cols[j];
-            let regex = /\{\{(.*?)\|(.*?)\}\}/g;
-            let matches = [];
-            let match;
-
-            while ((match = regex.exec(col)) != null) {
-              matches.push(match);
-            }
-
-            for (let k = 0; k < matches.length; k++) {
-              col = col.replace(
-                "{{" + matches[k][1] + "|" + matches[k][2] + "}}",
-                '<button data-id="' +
-                  i +
-                  '" data-namespace="' +
-                  namespace +
-                  '" data-name="' +
-                  name +
-                  '" data-value="' +
-                  matches[k][2] +
-                  '">' +
-                  matches[k][1] +
-                  "</button>"
-              );
-            }
-
-            view.rows[i].cols.push({ data: data, content: col });
-          }
+        if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
+            ESX_MENU.close(namespace, name);
         }
 
-        let menu = $(Mustache.render(MenuTpl, view));
+        data._namespace = namespace;
+        data._name = name;
 
-        menu.find("button[data-namespace][data-name]").click(function () {
-          ESX_MENU.data[$(this).data("namespace")][$(this).data("name")][
-            parseInt($(this).data("id"))
-          ].currentRow = parseInt($(this).data("id")) + 1;
-          ESX_MENU.submit($(this).data("namespace"), $(this).data("name"), {
-            data: ESX_MENU.data[$(this).data("namespace")][
-              $(this).data("name")
-            ][parseInt($(this).data("id"))],
-            value: $(this).data("value"),
-          });
+        ESX_MENU.opened[namespace][name] = data;
+
+        ESX_MENU.focus.push({
+            namespace: namespace,
+            name: name,
         });
 
-        menu.hide();
+        ESX_MENU.render();
+    };
 
-        menuContainer.appendChild(menu[0]);
-      }
-    }
+    ESX_MENU.close = function (namespace, name) {
+        delete ESX_MENU.opened[namespace][name];
 
-    if (typeof focused != "undefined") {
-      $("#menu_" + focused.namespace + "_" + focused.name).show();
-    }
+        for (let i = 0; i < ESX_MENU.focus.length; i++) {
+            if (ESX_MENU.focus[i].namespace === namespace && ESX_MENU.focus[i].name === name) {
+                ESX_MENU.focus.splice(i, 1);
+                break;
+            }
+        }
 
-    $(menuContainer).show();
-  };
+        ESX_MENU.render();
+    };
 
-  ESX_MENU.submit = function (namespace, name, data) {
-    $.post(
-      "http://" + ESX_MENU.ResourceName + "/menu_submit",
-      JSON.stringify({
-        _namespace: namespace,
-        _name: name,
-        data: data.data,
-        value: data.value,
-      })
-    );
-  };
+    ESX_MENU.render = function () {
+        let menuContainer = document.getElementById("menus");
+        let focused = ESX_MENU.getFocused();
+        menuContainer.innerHTML = "";
 
-  ESX_MENU.cancel = function (namespace, name) {
-    $.post(
-      "http://" + ESX_MENU.ResourceName + "/menu_cancel",
-      JSON.stringify({
-        _namespace: namespace,
-        _name: name,
-      })
-    );
-  };
+        $(menuContainer).hide();
 
-  ESX_MENU.getFocused = function () {
-    return ESX_MENU.focus[ESX_MENU.focus.length - 1];
-  };
+        for (let namespace in ESX_MENU.opened) {
+            if (typeof ESX_MENU.data[namespace] === "undefined") {
+                ESX_MENU.data[namespace] = {};
+            }
 
-  window.onData = (data) => {
-    switch (data.action) {
-      case "openMenu": {
-        ESX_MENU.open(data.namespace, data.name, data.data);
-        break;
-      }
+            for (let name in ESX_MENU.opened[namespace]) {
+                ESX_MENU.data[namespace][name] = [];
 
-      case "closeMenu": {
-        ESX_MENU.close(data.namespace, data.name);
-        break;
-      }
-    }
-  };
+                let menuData = ESX_MENU.opened[namespace][name];
+                let view = {
+                    _namespace: menuData._namespace,
+                    _name: menuData._name,
+                    head: [],
+                    rows: [],
+                };
 
-  window.onload = function (e) {
-    window.addEventListener("message", (event) => {
-      onData(event.data);
-    });
-  };
+                for (let i = 0; i < menuData.head.length; i++) {
+                    let item = { content: menuData.head[i] };
+                    view.head.push(item);
+                }
 
-  document.onkeyup = function (data) {
-    if (data.which === 27) {
-      let focused = ESX_MENU.getFocused();
-      ESX_MENU.cancel(focused.namespace, focused.name);
-    }
-  };
+                for (let i = 0; i < menuData.rows.length; i++) {
+                    let row = menuData.rows[i];
+                    let data = row.data;
+
+                    ESX_MENU.data[namespace][name].push(data);
+
+                    view.rows.push({ cols: [] });
+
+                    for (let j = 0; j < row.cols.length; j++) {
+                        let col = menuData.rows[i].cols[j];
+                        let regex = /\{\{(.*?)\|(.*?)\}\}/g;
+                        let matches = [];
+                        let match;
+
+                        while ((match = regex.exec(col)) != null) {
+                            matches.push(match);
+                        }
+
+                        for (let k = 0; k < matches.length; k++) {
+                            col = col.replace("{{" + matches[k][1] + "|" + matches[k][2] + "}}", '<button data-id="' + i + '" data-namespace="' + namespace + '" data-name="' + name + '" data-value="' + matches[k][2] + '">' + matches[k][1] + "</button>");
+                        }
+
+                        view.rows[i].cols.push({ data: data, content: col });
+                    }
+                }
+
+                let menu = $(Mustache.render(MenuTpl, view));
+
+                menu.find("button[data-namespace][data-name]").click(function () {
+                    ESX_MENU.data[$(this).data("namespace")][$(this).data("name")][parseInt($(this).data("id"))].currentRow = parseInt($(this).data("id")) + 1;
+                    ESX_MENU.submit($(this).data("namespace"), $(this).data("name"), {
+                        data: ESX_MENU.data[$(this).data("namespace")][$(this).data("name")][parseInt($(this).data("id"))],
+                        value: $(this).data("value"),
+                    });
+                });
+
+                menu.hide();
+
+                menuContainer.appendChild(menu[0]);
+            }
+        }
+
+        if (typeof focused != "undefined") {
+            $("#menu_" + focused.namespace + "_" + focused.name).show();
+        }
+
+        $(menuContainer).show();
+    };
+
+    ESX_MENU.submit = function (namespace, name, data) {
+        $.post(
+            "http://" + ESX_MENU.ResourceName + "/menu_submit",
+            JSON.stringify({
+                _namespace: namespace,
+                _name: name,
+                data: data.data,
+                value: data.value,
+            })
+        );
+    };
+
+    ESX_MENU.cancel = function (namespace, name) {
+        $.post(
+            "http://" + ESX_MENU.ResourceName + "/menu_cancel",
+            JSON.stringify({
+                _namespace: namespace,
+                _name: name,
+            })
+        );
+    };
+
+    ESX_MENU.getFocused = function () {
+        return ESX_MENU.focus[ESX_MENU.focus.length - 1];
+    };
+
+    window.onData = (data) => {
+        switch (data.action) {
+            case "openMenu": {
+                ESX_MENU.open(data.namespace, data.name, data.data);
+                break;
+            }
+
+            case "closeMenu": {
+                ESX_MENU.close(data.namespace, data.name);
+                break;
+            }
+        }
+    };
+
+    window.onload = function (e) {
+        window.addEventListener("message", (event) => {
+            onData(event.data);
+        });
+    };
+
+    document.onkeyup = function (data) {
+        if (data.which === 27) {
+            let focused = ESX_MENU.getFocused();
+            ESX_MENU.cancel(focused.namespace, focused.name);
+        }
+    };
 })();

[core]/esx_menu_list/html/ui.html

@@ -1,14 +1,14 @@
 <html>
-  <head>
-    <link rel="stylesheet" href="css/app.css" />
-  </head>
+    <head>
+        <link rel="stylesheet" href="css/app.css" />
+    </head>
 
-  <body>
-    <div id="menus"></div>
+    <body>
+        <div id="menus"></div>
 
-    <script src="nui://game/ui/jquery.js"></script>
-    <script src="nui://es_extended/html/js/wrapper.js"></script>
-    <script src="js/mustache.min.js"></script>
-    <script src="js/app.js"></script>
-  </body>
+        <script src="nui://game/ui/jquery.js"></script>
+        <script src="nui://es_extended/html/js/wrapper.js"></script>
+        <script src="js/mustache.min.js"></script>
+        <script src="js/app.js"></script>
+    </body>
 </html>

[core]/esx_multicharacter/client/main.lua

@@ -161,7 +161,7 @@ if ESX.GetConfig().Multichar then
 
 	function CharacterOptions(Characters, slots, SelectedCharacter)
 		local elements = { { title = TranslateCap('character', Characters[SelectedCharacter.value].firstname .. " " .. Characters[SelectedCharacter.value].lastname), icon = "fa-regular fa-user", unselectable = true },
-			{ title = TranslateCap('return'),                                                                                                         unselectable = false,        icon = "fa-solid fa-arrow-left", description = TranslateCap('return_description'), action = "return" } }
+			{ title = TranslateCap('return'),                                                                                                          unselectable = false,        icon = "fa-solid fa-arrow-left", description = TranslateCap('return_description'), action = "return" } }
 		if not Characters[SelectedCharacter.value].disabled then
 			elements[3] = { title = TranslateCap('char_play'), description = TranslateCap('char_play_description'), icon = "fa-solid fa-play", action = 'play', value = SelectedCharacter.value }
 		else

[core]/esx_multicharacter/html/css/main.css

@@ -1,76 +1,76 @@
 @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
 * {
-  margin: 0;
-  padding: 0;
-  user-select: none;
-  color: rgb(255, 255, 255);
-  border-radius: 15px;
-  font-weight: 300;
-  font-size: 1.6vh;
-  font-family: Calibri, "Helvetica", san-serif;
+    margin: 0;
+    padding: 0;
+    user-select: none;
+    color: rgb(255, 255, 255);
+    border-radius: 15px;
+    font-weight: 300;
+    font-size: 1.6vh;
+    font-family: Calibri, "Helvetica", san-serif;
 }
 
 html {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 p {
-  margin: 0 !important;
+    margin: 0 !important;
 }
 
 body {
-  background: transparent;
+    background: transparent;
 }
 
 .main-container {
-  display: none;
-  position: absolute;
-  top: 50%;
-  right: 150;
-  transform: translate(0, -50%);
-  border-radius: 15px;
-  background: rgba(15, 15, 15, 0.9);
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 150;
+    transform: translate(0, -50%);
+    border-radius: 15px;
+    background: rgba(15, 15, 15, 0.9);
 }
 
 .header {
-  font-family: "Oswald", sans-serif;
-  position: absolute;
-  background: rgba(10, 10, 10, 0.9);
-  border-radius: 15px 15px 0px 0px;
-  height: 10%;
-  width: 100%;
-  left: 50%;
-  text-align: center;
-  transform: translate(-50%);
-  font-weight: 700;
-  padding-bottom: 5px;
-  font-size: 1.6rem;
+    font-family: "Oswald", sans-serif;
+    position: absolute;
+    background: rgba(10, 10, 10, 0.9);
+    border-radius: 15px 15px 0px 0px;
+    height: 10%;
+    width: 100%;
+    left: 50%;
+    text-align: center;
+    transform: translate(-50%);
+    font-weight: 700;
+    padding-bottom: 5px;
+    font-size: 1.6rem;
 }
 
 .footer {
-  position: absolute;
-  font-size: 0rem;
+    position: absolute;
+    font-size: 0rem;
 }
 
 .character-box {
-  display: flex;
-  right: 0;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  line-height: 1.4rem;
-  height: calc(30rem);
-  width: 17rem;
-  border: 1px rgba(10, 10, 10, 0.7) solid;
-  box-shadow: 2px 1px 9px 3px rgba(10, 10, 10, 0.7);
+    display: flex;
+    right: 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    line-height: 1.4rem;
+    height: calc(30rem);
+    width: 17rem;
+    border: 1px rgba(10, 10, 10, 0.7) solid;
+    box-shadow: 2px 1px 9px 3px rgba(10, 10, 10, 0.7);
 }
 
 h1 {
-  font-family: "Oswald", sans-serif;
-  font-size: 22px;
-  padding-top: 1.3rem;
-  display: block;
-  font-weight: 0;
+    font-family: "Oswald", sans-serif;
+    font-size: 22px;
+    padding-top: 1.3rem;
+    display: block;
+    font-weight: 0;
 }

[core]/esx_multicharacter/html/js/app.js

@@ -1,68 +1,66 @@
 var money = Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-  minimumFractionDigits: 0,
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
 });
 
 (() => {
-  Kashacter = {};
+    Kashacter = {};
 
-  Kashacter.ShowUI = function (data) {
-    $("body").css({ display: "block" });
-    $(".main-container").css({ display: "block" });
-    $("[data-charid=1]")
-      .html(
-        '<div class="character-info"><p class="character-info-name"><h1>' +
-          `${translate.name} ` +
-          "</h1><span>" +
-          data.firstname +
-          " " +
-          data.lastname +
-          '</span></p><p class="character-info-work"><h1>' +
-          `${translate.job} ` +
-          "</h1><span>" +
-          data.job +
-          " " +
-          data.job_grade +
-          '</span></p><p class="character-info-money"><h1>' +
-          `${translate.money} ` +
-          "</h1><span> " +
-          money.format(data.money) +
-          '</span></p><p class="character-info-bank"><h1>' +
-          `${translate.bank} ` +
-          "</h1><span> " +
-          money.format(data.bank) +
-          '</span></p> <p class="character-info-dateofbirth"><h1>' +
-          `${translate.dob} ` +
-          "</h1><span>" +
-          data.dateofbirth +
-          '</span></p> <p class="character-info-gender"><h1>' +
-          `${translate.gender} ` +
-          "</h1><span>" +
-          data.sex +
-          "</span></p></div>"
-      )
-      .attr("data-ischar", "true");
-  };
+    Kashacter.ShowUI = function (data) {
+        $("body").css({ display: "block" });
+        $(".main-container").css({ display: "block" });
+        $("[data-charid=1]")
+            .html(
+                '<div class="character-info"><p class="character-info-name"><h1>' +
+                    `${translate.name} ` +
+                    "</h1><span>" +
+                    data.firstname +
+                    " " +
+                    data.lastname +
+                    '</span></p><p class="character-info-work"><h1>' +
+                    `${translate.job} ` +
+                    "</h1><span>" +
+                    data.job +
+                    " " +
+                    data.job_grade +
+                    '</span></p><p class="character-info-money"><h1>' +
+                    `${translate.money} ` +
+                    "</h1><span> " +
+                    money.format(data.money) +
+                    '</span></p><p class="character-info-bank"><h1>' +
+                    `${translate.bank} ` +
+                    "</h1><span> " +
+                    money.format(data.bank) +
+                    '</span></p> <p class="character-info-dateofbirth"><h1>' +
+                    `${translate.dob} ` +
+                    "</h1><span>" +
+                    data.dateofbirth +
+                    '</span></p> <p class="character-info-gender"><h1>' +
+                    `${translate.gender} ` +
+                    "</h1><span>" +
+                    data.sex +
+                    "</span></p></div>"
+            )
+            .attr("data-ischar", "true");
+    };
 
-  Kashacter.CloseUI = function () {
-    $("body").css({ display: "none" });
-    $(".main-container").css({ display: "none" });
-    $("[data-charid=1]").html(
-      '<h3 class="character-fullname"></h3><div class="character-info"><p class="character-info-new"></p></div>'
-    );
-  };
+    Kashacter.CloseUI = function () {
+        $("body").css({ display: "none" });
+        $(".main-container").css({ display: "none" });
+        $("[data-charid=1]").html('<h3 class="character-fullname"></h3><div class="character-info"><p class="character-info-new"></p></div>');
+    };
 
-  window.onload = function (e) {
-    window.addEventListener("message", function (event) {
-      switch (event.data.action) {
-        case "openui":
-          Kashacter.ShowUI(event.data.character);
-          break;
-        case "closeui":
-          Kashacter.CloseUI();
-          break;
-      }
-    });
-  };
+    window.onload = function (e) {
+        window.addEventListener("message", function (event) {
+            switch (event.data.action) {
+                case "openui":
+                    Kashacter.ShowUI(event.data.character);
+                    break;
+                case "closeui":
+                    Kashacter.CloseUI();
+                    break;
+            }
+        });
+    };
 })();

[core]/esx_multicharacter/html/ui.html

@@ -1,29 +1,22 @@
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <!-- Custom CSS -->
-    <link rel="stylesheet" type="text/css" href="css/main.css" />
-    <!-- Locales -->
-    <script src="locales/en.js"></script>
-  </head>
-  <body style="display: none">
-    <div class="main-container">
-      <div class="header">Character Info</div>
-      <div class="character-box" data-charid="1">
-        <h3 class="character-fullname"></h3>
-        <div class="character-info"></div>
-      </div>
-      <div class="footer">Multicharacter</div>
-    </div>
-    <script
-      src="https://code.jquery.com/jquery-3.3.1.min.js"
-      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-      crossorigin="anonymous"
-    ></script>
-    <script src="js/app.js" type="text/javascript"></script>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <!-- Custom CSS -->
+        <link rel="stylesheet" type="text/css" href="css/main.css" />
+        <!-- Locales -->
+        <script src="locales/en.js"></script>
+    </head>
+    <body style="display: none">
+        <div class="main-container">
+            <div class="header">Character Info</div>
+            <div class="character-box" data-charid="1">
+                <h3 class="character-fullname"></h3>
+                <div class="character-info"></div>
+            </div>
+            <div class="footer">Multicharacter</div>
+        </div>
+        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+        <script src="js/app.js" type="text/javascript"></script>
+    </body>
 </html>

[core]/esx_notify/nui/css/style.css

@@ -1,84 +1,84 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300;400;500;600;800&display=swap");
 
 :root {
-  --color: #919191;
+    --color: #919191;
 }
 
 * {
-  border: 0;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 body {
-  width: 100vw;
-  height: 100vh;
-  color: var(--color);
-  font-weight: 100;
-  font-family: "Poppins", sans-serif;
-  overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+    color: var(--color);
+    font-weight: 100;
+    font-family: "Poppins", sans-serif;
+    overflow: hidden;
 }
 
 #root {
-  display: grid;
-  justify-content: center;
+    display: grid;
+    justify-content: center;
 }
 
 #root .notify {
-  display: flex;
-  position: relative;
-  flex: auto;
-  min-width: 20rem;
-  width: fit-content;
-  height: 3.5rem;
-  background: rgba(5, 5, 5, 0.9);
-  border-radius: 0.5rem;
-  margin-top: 0.5rem;
-  animation: anim 300ms ease-in-out;
-  align-items: center;
+    display: flex;
+    position: relative;
+    flex: auto;
+    min-width: 20rem;
+    width: fit-content;
+    height: 3.5rem;
+    background: rgba(5, 5, 5, 0.9);
+    border-radius: 0.5rem;
+    margin-top: 0.5rem;
+    animation: anim 300ms ease-in-out;
+    align-items: center;
 }
 
 #root .innerText {
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  width: 100%;
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+    width: 100%;
 }
 
 #root .icon {
-  float: left;
-  color: #fff;
+    float: left;
+    color: #fff;
 }
 
 #root .text {
-  display: inline-block;
-  margin-left: 0.5rem;
+    display: inline-block;
+    margin-left: 0.5rem;
 }
 
 #root .error {
-  border-bottom: 3px solid #c0392b;
+    border-bottom: 3px solid #c0392b;
 }
 
 #root .success {
-  border-bottom: 3px solid #2ecc71;
+    border-bottom: 3px solid #2ecc71;
 }
 
 #root .info {
-  border-bottom: 3px solid #2980b9;
+    border-bottom: 3px solid #2980b9;
 }
 
 .material-symbols-outlined {
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
 
 @keyframes anim {
-  0% {
-    transform: scaleY(0);
-  }
-  80% {
-    transform: scaleY(1.1);
-  }
-  100% {
-    transform: scaleY(1);
-  }
+    0% {
+        transform: scaleY(0);
+    }
+    80% {
+        transform: scaleY(1.1);
+    }
+    100% {
+        transform: scaleY(1);
+    }
 }

[core]/esx_notify/nui/index.html

@@ -1,18 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <script src="js/script.js"></script>
-    <title>ESX Notify</title>
-  </head>
-  <body>
-    <div id="root">
-      <!-- this is just a template! No touchy touchy -->
-    </div>
-  </body>
+    <head>
+        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+        <link rel="stylesheet" href="css/style.css" />
+        <script src="js/script.js"></script>
+        <title>ESX Notify</title>
+    </head>
+    <body>
+        <div id="root">
+            <!-- this is just a template! No touchy touchy -->
+        </div>
+    </body>
 </html>

[core]/esx_notify/nui/js/script.js

@@ -2,75 +2,73 @@ const w = window;
 
 // Gets the current icon it needs to use.
 const types = {
-  ["success"]: {
-    ["icon"]: "check_circle",
-  },
-  ["error"]: {
-    ["icon"]: "error",
-  },
-  ["info"]: {
-    ["icon"]: "info",
-  },
+    ["success"]: {
+        ["icon"]: "check_circle",
+    },
+    ["error"]: {
+        ["icon"]: "error",
+    },
+    ["info"]: {
+        ["icon"]: "info",
+    },
 };
 
 // the color codes example `i ~r~love~s~ donuts`
 const codes = {
-  "~r~": "red",
-  "~b~": "#378cbf",
-  "~g~": "green",
-  "~y~": "yellow",
-  "~p~": "purple",
-  "~c~": "grey",
-  "~m~": "#212121",
-  "~u~": "black",
-  "~o~": "orange",
+    "~r~": "red",
+    "~b~": "#378cbf",
+    "~g~": "green",
+    "~y~": "yellow",
+    "~p~": "purple",
+    "~c~": "grey",
+    "~m~": "#212121",
+    "~u~": "black",
+    "~o~": "orange",
 };
 
 w.addEventListener("message", (event) => {
-  notification({
-    type: event.data.type,
-    message: event.data.message,
-    length: event.data.length,
-  });
+    notification({
+        type: event.data.type,
+        message: event.data.message,
+        length: event.data.length,
+    });
 });
 
 const replaceColors = (str, obj) => {
-  let strToReplace = str;
+    let strToReplace = str;
 
-  for (let id in obj) {
-    strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
-  }
+    for (let id in obj) {
+        strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
+    }
 
-  return strToReplace;
+    return strToReplace;
 };
 
 notification = (data) => {
-  for (color in codes) {
-    if (data["message"].includes(color)) {
-      let objArr = {};
-      objArr[color] = `<span style="color: ${codes[color]}">`;
-      objArr["~s~"] = "</span>";
+    for (color in codes) {
+        if (data["message"].includes(color)) {
+            let objArr = {};
+            objArr[color] = `<span style="color: ${codes[color]}">`;
+            objArr["~s~"] = "</span>";
 
-      let newStr = replaceColors(data["message"], objArr);
+            let newStr = replaceColors(data["message"], objArr);
 
-      data["message"] = newStr;
+            data["message"] = newStr;
+        }
     }
-  }
 
-  const notification = $(`
+    const notification = $(`
         <div class="notify ${data.type}">
             <div class="innerText">
-                <span class="material-symbols-outlined icon">${
-                  types[data.type]["icon"]
-                }</span>
+                <span class="material-symbols-outlined icon">${types[data.type]["icon"]}</span>
                 <p class="text">${data["message"]}</p>
             </div>
         </div>
     `).appendTo(`#root`);
 
-  setTimeout(() => {
-    notification.fadeOut(700);
-  }, data.length);
+    setTimeout(() => {
+        notification.fadeOut(700);
+    }, data.length);
 
-  return notification;
+    return notification;
 };

[core]/esx_progressbar/nui/css/style.css

@@ -1,14 +1,14 @@
 :root {
-  --color: white;
-  --bgColor: #212121;
+    --color: white;
+    --bgColor: #212121;
 }
 
 * {
-  padding: 0;
-  margin: 0;
+    padding: 0;
+    margin: 0;
 }
 
 body {
-  color: var(--color);
-  font-family: sans-serif;
+    color: var(--color);
+    font-family: sans-serif;
 }

[core]/esx_progressbar/nui/index.html

@@ -1,90 +1,85 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
-    <link rel="stylesheet" href="css/style.css" />
-  </head>
-  <body>
-    <div id="notifyInfo" class="notify">
-      <div class="innerText">
-        <i class="fas fa-info-circle icon info"></i>
-        <p class="text" id="infoMessage"></p>
-      </div>
-      <div id="progline" class="progline"></div>
-    </div>
-  </body>
-  <script src="js/script.js"></script>
+    <head>
+        <script src="https://kit.fontawesome.com/a81368914c.js"></script>
+        <link rel="stylesheet" href="css/style.css" />
+    </head>
+    <body>
+        <div id="notifyInfo" class="notify">
+            <div class="innerText">
+                <i class="fas fa-info-circle icon info"></i>
+                <p class="text" id="infoMessage"></p>
+            </div>
+            <div id="progline" class="progline"></div>
+        </div>
+    </body>
+    <script src="js/script.js"></script>
 </html>
 
 <style>
-  .notify {
-    flex: auto;
-    display: none;
-    position: absolute;
-    margin: 0 auto;
-    left: 0;
-    right: 0;
-    bottom: 100px;
-    min-width: 15%;
-    width: fit-content;
-    height: 45px;
-    background-color: rgba(5, 5, 5, 0.8);
-    border-radius: 5px;
-    animation: growDown 300ms ease-in-out;
-    padding-right: 10px;
-  }
-
-  .progline {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    width: 100%;
-    border-radius: 20px;
-    background: linear-gradient(
-      to right,
-      #0052d4,
-      #4364f7,
-      #6fb1fc
-    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-  }
-
-  .icon {
-    border: 0;
-  }
-
-  .innerText {
-    flex: auto;
-    margin-top: 15px;
-    width: 100%;
-  }
-
-  .innerText {
-    margin-left: 10px;
-  }
-  p {
-    flex: auto;
-    word-wrap: break-word;
-    margin-left: 30px;
-    margin-top: 15px;
-  }
-
-  .innerText .icon {
-    float: left;
-    margin-left: 5px;
-    font-size: 20px;
-  }
-
-  @keyframes growDown {
-    0% {
-      transform: scaleY(0);
+    .notify {
+        flex: auto;
+        display: none;
+        position: absolute;
+        margin: 0 auto;
+        left: 0;
+        right: 0;
+        bottom: 100px;
+        min-width: 15%;
+        width: fit-content;
+        height: 45px;
+        background-color: rgba(5, 5, 5, 0.8);
+        border-radius: 5px;
+        animation: growDown 300ms ease-in-out;
+        padding-right: 10px;
     }
-    80% {
-      transform: scaleY(1.1);
+
+    .progline {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        width: 100%;
+        border-radius: 20px;
+        background: linear-gradient(to right, #0052d4, #4364f7, #6fb1fc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     }
-    100% {
-      transform: scaleY(1);
+
+    .icon {
+        border: 0;
+    }
+
+    .innerText {
+        flex: auto;
+        margin-top: 15px;
+        width: 100%;
+    }
+
+    .innerText {
+        margin-left: 10px;
+    }
+    p {
+        flex: auto;
+        word-wrap: break-word;
+        margin-left: 30px;
+        margin-top: 15px;
+    }
+
+    .innerText .icon {
+        float: left;
+        margin-left: 5px;
+        font-size: 20px;
+    }
+
+    @keyframes growDown {
+        0% {
+            transform: scaleY(0);
+        }
+        80% {
+            transform: scaleY(1.1);
+        }
+        100% {
+            transform: scaleY(1);
+        }
     }
-  }
 </style>

[core]/esx_progressbar/nui/js/script.js

@@ -1,69 +1,69 @@
 const codes = {
-  "~r~": "red",
-  "~b~": "#378cbf",
-  "~g~": "green",
-  "~y~": "yellow",
-  "~p~": "purple",
-  "~c~": "grey",
-  "~m~": "#212121",
-  "~u~": "black",
-  "~o~": "orange",
+    "~r~": "red",
+    "~b~": "#378cbf",
+    "~g~": "green",
+    "~y~": "yellow",
+    "~p~": "purple",
+    "~c~": "grey",
+    "~m~": "#212121",
+    "~u~": "black",
+    "~o~": "orange",
 };
 
 const elems = {
-  infoMessage: document.getElementById("infoMessage"),
-  notifyInfo: document.getElementById("notifyInfo"),
-  progline: document.getElementById("progline"),
+    infoMessage: document.getElementById("infoMessage"),
+    notifyInfo: document.getElementById("notifyInfo"),
+    progline: document.getElementById("progline"),
 };
 
 const replaceColors = (str, obj) => {
-  let strToReplace = str;
+    let strToReplace = str;
 
-  for (let id in obj) {
-    strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
-  }
+    for (let id in obj) {
+        strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
+    }
 
-  return strToReplace;
+    return strToReplace;
 };
 
 window.addEventListener("message", function ({ data }) {
-  if (data.type === "Progressbar") {
-    let { message } = data;
+    if (data.type === "Progressbar") {
+        let { message } = data;
 
-    for (color in codes) {
-      if (message.includes(color)) {
-        let objArr = {};
-        objArr[color] = `<span style="color: ${codes[color]}">`;
-        objArr["~s~"] = "</span>";
+        for (color in codes) {
+            if (message.includes(color)) {
+                let objArr = {};
+                objArr[color] = `<span style="color: ${codes[color]}">`;
+                objArr["~s~"] = "</span>";
 
-        let newStr = replaceColors(message, objArr);
+                let newStr = replaceColors(message, objArr);
 
-        message = newStr;
-      }
-    }
+                message = newStr;
+            }
+        }
 
-    elems.infoMessage.innerHTML = message;
-    elems.notifyInfo.style.display = "block";
+        elems.infoMessage.innerHTML = message;
+        elems.notifyInfo.style.display = "block";
 
-    const start = new Date();
-    const maxTime = data.length;
-    const timeoutValue = Math.floor(maxTime / 100);
-    animUpdate();
+        const start = new Date();
+        const maxTime = data.length;
+        const timeoutValue = Math.floor(maxTime / 100);
+        animUpdate();
 
-    function animUpdate() {
-      const now = new Date();
-      const timeoutDiff = now.getTime() - start.getTime();
-      const prc = Math.round((timeoutDiff / maxTime) * 100);
-      if (prc <= 100) {
-        elems.progline.style.width = prc + "%";
-        this.timeoutID = setTimeout(animUpdate, timeoutValue);
-      } else {
+        function animUpdate() {
+            const now = new Date();
+            const timeoutDiff = now.getTime() - start.getTime();
+            const prc = Math.round((timeoutDiff / maxTime) * 100);
+            if (prc <= 100) {
+                elems.progline.style.width = prc + "%";
+                this.timeoutID = setTimeout(animUpdate, timeoutValue);
+            } else {
+                elems.notifyInfo.style.display = "none";
+            }
+        }
+    } else {
         elems.notifyInfo.style.display = "none";
-      }
+        clearTimeout(this.timeoutID);
+        timeoutValue = 0;
     }
-  } else {
-    elems.notifyInfo.style.display = "none";
-    clearTimeout(this.timeoutID);
-    timeoutValue = 0;
-  }
 });

[core]/esx_textui/nui/css/style.css

@@ -1,77 +1,77 @@
 :root {
-  --color: white;
-  --bgColor: #212121;
+    --color: white;
+    --bgColor: #212121;
 }
 
 * {
-  padding: 0;
-  margin: 0;
-  border: 0;
-  box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    box-sizing: border-box;
 }
 
 body {
-  color: var(--color);
-  font-family: sans-serif;
+    color: var(--color);
+    font-family: sans-serif;
 }
 
 .notify {
-  display: none;
-  position: absolute;
-  right: 2%;
-  bottom: 50%;
-  flex: auto;
-  min-width: 15%;
-  width: fit-content;
-  height: 50px;
-  background: rgba(5, 5, 5, 0.9);
-  border-radius: 0.5rem;
-  animation: growDown 300ms ease-in-out;
-  align-items: center;
+    display: none;
+    position: absolute;
+    right: 2%;
+    bottom: 50%;
+    flex: auto;
+    min-width: 15%;
+    width: fit-content;
+    height: 50px;
+    background: rgba(5, 5, 5, 0.9);
+    border-radius: 0.5rem;
+    animation: growDown 300ms ease-in-out;
+    align-items: center;
 }
 
 .error {
-  border-left: 5px solid #c0392b;
+    border-left: 5px solid #c0392b;
 }
 
 .success {
-  border-left: 5px solid #2ecc71;
+    border-left: 5px solid #2ecc71;
 }
 
 .info {
-  border-left: 5px solid #2980b9;
+    border-left: 5px solid #2980b9;
 }
 
 .innerText {
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 12.5px;
-  width: 100%;
-  height: 100%;
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+    padding-top: 12.5px;
+    width: 100%;
+    height: 100%;
 }
 
 .innerText .icon {
-  float: left;
+    float: left;
 }
 
 .innerText .text {
-  display: inline-block;
-  margin-left: 0.5rem;
-  margin-top: 4px;
+    display: inline-block;
+    margin-left: 0.5rem;
+    margin-top: 4px;
 }
 
 @keyframes growDown {
-  0% {
-    transform: scaleY(0);
-  }
-  80% {
-    transform: scaleY(1.1);
-  }
-  100% {
-    transform: scaleY(1);
-  }
+    0% {
+        transform: scaleY(0);
+    }
+    80% {
+        transform: scaleY(1.1);
+    }
+    100% {
+        transform: scaleY(1);
+    }
 }
 
 .material-symbols-outlined {
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }

[core]/esx_textui/nui/index.html

@@ -1,32 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
-    />
-    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
-    <link rel="stylesheet" href="css/style.css" />
-    <script src="js/script.js"></script>
-  </head>
-  <body>
-    <div id="notifyInfo" class="notify info">
-      <div class="innerText">
-        <span class="material-symbols-outlined icon">info</span>
-        <p class="text" id="infoMessage"></p>
-      </div>
-    </div>
-    <div id="notifySuccess" class="notify success">
-      <div class="innerText">
-        <span class="material-symbols-outlined icon">check_circle</span>
-        <p class="text" id="successMessage"></p>
-      </div>
-    </div>
-    <div id="notifyError" class="notify error">
-      <div class="innerText">
-        <span class="material-symbols-outlined icon">error</span>
-        <p class="text" id="errorMessage"></p>
-      </div>
-    </div>
-  </body>
+    <head>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+        <script src="https://kit.fontawesome.com/a81368914c.js"></script>
+        <link rel="stylesheet" href="css/style.css" />
+        <script src="js/script.js"></script>
+    </head>
+    <body>
+        <div id="notifyInfo" class="notify info">
+            <div class="innerText">
+                <span class="material-symbols-outlined icon">info</span>
+                <p class="text" id="infoMessage"></p>
+            </div>
+        </div>
+        <div id="notifySuccess" class="notify success">
+            <div class="innerText">
+                <span class="material-symbols-outlined icon">check_circle</span>
+                <p class="text" id="successMessage"></p>
+            </div>
+        </div>
+        <div id="notifyError" class="notify error">
+            <div class="innerText">
+                <span class="material-symbols-outlined icon">error</span>
+                <p class="text" id="errorMessage"></p>
+            </div>
+        </div>
+    </body>
 </html>

[core]/esx_textui/nui/js/script.js

@@ -4,80 +4,80 @@ let lastType = "";
 
 // Gets the current icon it needs to use.
 const types = {
-  ["success"]: {
-    ["message"]: "successMessage",
-    ["id"]: "notifySuccess",
-  },
-  ["error"]: {
-    ["message"]: "errorMessage",
-    ["id"]: "notifyError",
-  },
-  ["info"]: {
-    ["message"]: "infoMessage",
-    ["id"]: "notifyInfo",
-  },
+    ["success"]: {
+        ["message"]: "successMessage",
+        ["id"]: "notifySuccess",
+    },
+    ["error"]: {
+        ["message"]: "errorMessage",
+        ["id"]: "notifyError",
+    },
+    ["info"]: {
+        ["message"]: "infoMessage",
+        ["id"]: "notifyInfo",
+    },
 };
 
 // the color codes example `i ~r~love~s~ donuts`
 const codes = {
-  "~r~": "red",
-  "~b~": "#378cbf",
-  "~g~": "green",
-  "~y~": "yellow",
-  "~p~": "purple",
-  "~c~": "grey",
-  "~m~": "#212121",
-  "~u~": "black",
-  "~o~": "orange",
+    "~r~": "red",
+    "~b~": "#378cbf",
+    "~g~": "green",
+    "~y~": "yellow",
+    "~p~": "purple",
+    "~c~": "grey",
+    "~m~": "#212121",
+    "~u~": "black",
+    "~o~": "orange",
 };
 
 w.addEventListener("message", (event) => {
-  if (event.data.action === "show") {
-    if (lastType) {
-      doc.getElementById(lastType).style.display = "none";
-      notification({
-        type: event.data.type,
-        message: event.data.message,
-      });
-    } else {
-      notification({
-        type: event.data.type,
-        message: event.data.message,
-      });
+    if (event.data.action === "show") {
+        if (lastType) {
+            doc.getElementById(lastType).style.display = "none";
+            notification({
+                type: event.data.type,
+                message: event.data.message,
+            });
+        } else {
+            notification({
+                type: event.data.type,
+                message: event.data.message,
+            });
+        }
+    } else if (event.data.action === "hide") {
+        if (lastType !== "") {
+            doc.getElementById(lastType).style.display = "none";
+        } else {
+            console.log("There isn't a textUI displaying!?");
+        }
     }
-  } else if (event.data.action === "hide") {
-    if (lastType !== "") {
-      doc.getElementById(lastType).style.display = "none";
-    } else {
-      console.log("There isn't a textUI displaying!?");
-    }
-  }
 });
 
 const replaceColors = (str, obj) => {
-  let strToReplace = str;
+    let strToReplace = str;
 
-  for (let id in obj) {
-    strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
-  }
+    for (let id in obj) {
+        strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
+    }
 
-  return strToReplace;
+    return strToReplace;
 };
 
 notification = (data) => {
-  for (color in codes) {
-    if (data["message"].includes(color)) {
-      let objArr = {};
-      objArr[color] = `<span style="color: ${codes[color]}">`;
-      objArr["~s~"] = "</span>";
+    for (color in codes) {
+        if (data["message"].includes(color)) {
+            let objArr = {};
+            objArr[color] = `<span style="color: ${codes[color]}">`;
+            objArr["~s~"] = "</span>";
 
-      let newStr = replaceColors(data["message"], objArr);
+            let newStr = replaceColors(data["message"], objArr);
 
-      data["message"] = newStr;
+            data["message"] = newStr;
+        }
     }
-  }
 
-  doc.getElementById(types[data.type]["id"]).style.display = "block";
-  lastType = types[data.type]["id"];
-  doc.getElementById(types[data.type]["message"]).innerHTML = data["message"];
+    doc.getElementById(types[data.type]["id"]).style.display = "block";
+    lastType = types[data.type]["id"];
+    doc.getElementById(types[data.type]["message"]).innerHTML = data["message"];
 };