Skip to content

Project-Sloth's FiveM Inventory System Redesigned to Look Like NoPixel 4.0

License

Notifications You must be signed in to change notification settings

iONDegen/ps-inventory

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ps-inventory

Project-Sloth's FiveM Inventory System Redesigned to Look Like and Feel like NoPixel 4.0

I removed the item images for my own sanity while uploading the changes. So please use your own item images

Preview

image

Credit where Credit is Due

Thanks to loljoshie for originally creating the lj-inventory we've all come to love.

Thanks to ok1ez and the project sloth dev team for continuing lj-inventory's existence with keeping it up to date and maintaining it as ps-inventory.

Thanks to root_ for making the items actually droppable with their respective props.

Thanks to the Project Sloth Community. Without the support on the first version this release wouldn't be possible.

Importing

If you've downloaded the previous version, I've included descriptions / tags above all the UI Changes i've made so you can easily convert over but below will be certain snippets if you'd like to add things yourself without inspecting the code.

Personal Information Snippet

-- Client-Side LUA --

QBCore.Functions.TriggerCallback('inventory:server:ConvertQuality', function(data) inventory = data.inventory other = data.other SendNUIMessage({ action = "open", inventory = inventory, slots = Config.MaxInventorySlots, other = other, maxweight = Config.MaxInventoryWeight, Ammo = PlayerAmmo, maxammo = Config.MaximumAmmoValues, Name = PlayerData.charinfo.firstname .." ".. PlayerData.charinfo.lastname .." - [".. GetPlayerServerId(PlayerId()) .."]", pName = PlayerData.charinfo.firstname .. PlayerData.charinfo.lastname, pNumber = PlayerData.charinfo.phone, pCID = PlayerData.citizenid, pID = GetPlayerServerId(PlayerId()), })

QBCore.Functions.TriggerCallback('inventory:server:ConvertQuality', function(data) inventory = data.inventory other = data.other SendNUIMessage({ action = "open", inventory = inventory, slots = Config.MaxInventorySlots, other = other, maxweight = Config.MaxInventoryWeight, Ammo = PlayerAmmo, maxammo = Config.MaximumAmmoValues, Name = PlayerData.charinfo.firstname .." ".. PlayerData.charinfo.lastname .." - [".. GetPlayerServerId(PlayerId()) .."]", pName = PlayerData.charinfo.firstname .. PlayerData.charinfo.lastname, pNumber = PlayerData.charinfo.phone, pCID = PlayerData.citizenid, pID = GetPlayerServerId(PlayerId()), })

-- HTML --

Name :
Player-Name
Phone Number :
Player-Phone-Number
State ID :
Player-State-ID
Citizen ID :
Player-Citizen-ID

-- JS --

$(".player-name-title").html('Name'); $(".player-name").html(data.pName); $(".phone-number-title").html('Phone Number'); $(".phone-number").html(data.pNumber); $(".player-id-title").html('State ID'); $(".player-id").html(data.pID); $(".citizen-id-title").html('Citizen ID'); $(".citizen-id").html(data.pCID);

-- CSS --

.ply-number-line { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; background-color: rgb(137, 245, 169) !important; border: 1px solid rgba(55, 55, 55, 1); box-shadow: 0 0 1vh rgba(0, 0, 0, 0.3); top: 75%; margin-left: 6%; height: 5.6vh; width: 0.7vh; }

.player-name-title { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.6vh; color: rgb(160, 160, 160); top: 73.5%; margin-left: 6%; font-weight: 300; }

.player-name { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.95vh; color: white; top: 75%; margin-left: 6%; font-weight: 300; }

.phone-number-line { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; background-color: rgb(214, 137, 245) !important; border: 1px solid rgba(55, 55, 55, 1); box-shadow: 0 0 1vh rgba(0, 0, 0, 0.3); top: 75%; margin-left: 17.5%; height: 5.6vh; width: 0.7vh; }

.phone-number-title { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.6vh; color: rgb(160, 160, 160); top: 73.5%; margin-left: 17.5%; font-weight: 300; }

.phone-number { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.95vh; color: white; top: 75%; margin-left: 17.5%; font-weight: 300; }

.player-id-line { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; background-color: rgb(137, 232, 245) !important; border: 1px solid rgba(55, 55, 55, 1); box-shadow: 0 0 1vh rgba(0, 0, 0, 0.3); top: 85%; margin-left: 6%; height: 5.6vh; width: 0.7vh; }

.player-id-title { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.6vh; color: rgb(160, 160, 160); top: 83.5%; margin-left: 6%; font-weight: 300; }

.player-id { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.95vh; color: white; top: 85%; margin-left: 6%; font-weight: 300; }

.citizen-id-line { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; background-color: rgb(245, 207, 137) !important; border: 1px solid rgba(55, 55, 55, 1); box-shadow: 0 0 1vh rgba(0, 0, 0, 0.3); top: 85%; margin-left: 17.5%; height: 5.6vh; width: 0.7vh; }

.citizen-id-title { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.6vh; color: rgb(160, 160, 160); top: 83.5%; margin-left: 17.5%; font-weight: 300; }

.citizen-id { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.95vh; color: white; top: 85%; margin-left: 17.5%; font-weight: 300; }

Basic Damage / Health Snippet

-- Client-Side LUA --

local stress = 0

RegisterNetEvent('hud:client:UpdateStress', function(newStress) -- Add this event with adding stress elsewhere stress = newStress end)

QBCore.Functions.TriggerCallback('inventory:server:ConvertQuality', function(data) inventory = data.inventory other = data.other SendNUIMessage({ action = "open", inventory = inventory, slots = Config.MaxInventorySlots, other = other, maxweight = Config.MaxInventoryWeight, Ammo = PlayerAmmo, maxammo = Config.MaximumAmmoValues, Name = PlayerData.charinfo.firstname .." ".. PlayerData.charinfo.lastname .." - [".. GetPlayerServerId(PlayerId()) .."]", pName = PlayerData.charinfo.firstname .. PlayerData.charinfo.lastname, pNumber = PlayerData.charinfo.phone, pCID = PlayerData.citizenid, pID = GetPlayerServerId(PlayerId()), pStress = stress, pHealth = 200 - GetEntityHealth(PlayerPedId()), })

QBCore.Functions.TriggerCallback('inventory:server:ConvertQuality', function(data) inventory = data.inventory other = data.other SendNUIMessage({ action = "open", inventory = inventory, slots = Config.MaxInventorySlots, other = other, maxweight = Config.MaxInventoryWeight, Ammo = PlayerAmmo, maxammo = Config.MaximumAmmoValues, Name = PlayerData.charinfo.firstname .." ".. PlayerData.charinfo.lastname .." - [".. GetPlayerServerId(PlayerId()) .."]", pName = PlayerData.charinfo.firstname .. PlayerData.charinfo.lastname, pNumber = PlayerData.charinfo.phone, pCID = PlayerData.citizenid, pID = GetPlayerServerId(PlayerId()), pStress = stress, pHealth = 200 - GetEntityHealth(PlayerPedId()), })

-- JS -- $(".skull-damage").html('Stress : '); $(".skull-damage-title").html(data.pStress);

$(".body-damage").html('Damage : '); $(".body-damage-title").html(data.pDamage + "%");

-- HTML --

player-body

-- CSS --

/* Player Body */ .player-body-container { position: absolute; bottom: 27.8%; margin: 0 auto; left: -65%; right: 0; text-align: center; width: 15%; height: 55%; padding: 10%; }

.player-body { position: absolute; bottom: 48%; margin: 0 auto; left: -23%; right: 0; text-align: center; width: 15%; height: 45%; }

/* Player Body & Health */ #player-damage-container { position: absolute; display: none; user-select: none; width: 100%; height: 100%; }

.skull-damage-title { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.35vh; color: white; top: 20.5%; margin-left: 22%; font-weight: 300; opacity: 0; transition: opacity 0.5s; z-index: 1; }

.skull-damage { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.35vh; color: white; top: 20.5%; margin-left: 20%; font-weight: 300; opacity: 0; transition: opacity 0.5s; z-index: 1; }

.skull-damage-line { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; background-color: rgb(255, 255, 255) !important; border: 1px solid rgba(55, 55, 55, 1); box-shadow: 0 0 1vh rgba(0, 0, 0, 0.3); top: 20.5%; margin-left: 23%; height: 7.6vh; width: 0.2vh; rotate: 90deg; opacity: 0; transition: opacity 0.5s; z-index: 1; }

.skull-damage-container:hover .skull-damage, .skull-damage-container:hover .skull-damage-title, .skull-damage-container:hover .skull-damage-line { opacity: 1; }

.body-damage-title { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.35vh; color: white; top: 28%; margin-left: 13%; font-weight: 300; opacity: 0; transition: opacity 0.5s; z-index: 1; }

.body-damage { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; padding: 1%; font-size: 1.35vh; color: white; top: 28%; margin-left: 10.5%; font-weight: 300; opacity: 0; transition: opacity 0.5s; z-index: 1; }

.body-damage-line { overflow: hidden; position: absolute; font-family: 'Oswald', sans-serif; background-color: rgb(255, 255, 255) !important; border: 1px solid rgba(55, 55, 55, 1); box-shadow: 0 0 1vh rgba(0, 0, 0, 0.3); top: 28%; margin-left: 13.5%; height: 7.6vh; width: 0.2vh; rotate: 90deg; opacity: 0; transition: opacity 0.5s; z-index: 1; }

.body-damage-container:hover .body-damage, .body-damage-container:hover .body-damage-title, .body-damage-container:hover .body-damage-line { opacity: 1; }

About

Project-Sloth's FiveM Inventory System Redesigned to Look Like NoPixel 4.0

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published