Skills

fx_version 'cerulean' game 'gta5' author 'Jit' description 'Skills system with NUI similar UI to vms_skills' version '1.0.0' ui_page 'html/index.html' files { 'html/index.html', 'html/style.css', 'html/script.js' } client_scripts { 'config.lua', 'client.lua' } server_scripts { 'config.lua', 'server.lua' } Config = {} -- Skill definitions -- id: internal id -- label: display name -- icon: emoji or SVG string (keep simple) -- max_level: maximum level -- base_xp: XP required for level 1 -- xp_growth: multiplier per level (XP for next level = base_xp * (xp_growth ^ (level - 1))) Config.Skills = { { id = "strength", label = "Strength", icon = "💪", max_level = 100, base_xp = 100, xp_growth = 1.12 }, { id = "stamina", label = "Stamina", icon = "🏃", max_level = 100, base_xp = 100, xp_growth = 1.12 }, { id = "shooting", label = "Shooting", icon = "🔫", max_level = 100, base_xp = 120, xp_growth = 1.15 }, { id = "driving", label = "Driving", icon = "🚗", max_level = 100, base_xp = 90, xp_growth = 1.10 } } -- UI settings Config.UI = { toggle_key = "F2", -- client-side command to open/close (also register command 'skills') nui_resource = "skills", -- resource name used for NUI callbacks: https:///action open_command = "skills" -- chat command to open the UI } -- Server save settings Config.Save = { enabled = false, -- set to true and configure your DB saving logic in server.lua -- identifierField = "steam", -- example: steam or license depending on framework } -- Framework integration: "none", "qb", "esx" Config.Framework = "none" local json = json or (function() return {} end) -- placeholder if environment doesn't provide -- Simple in-memory store: players[identifier] = { skills = { [id] = {level, xp} } } local players = {} local function getPlayerIdentifier(source) -- This tries to get a stable identifier. Framework-specific implementations can be used instead. if source == nil then return nil end for _, id in ipairs(GetPlayerIdentifiers(source)) do if string.find(id, "steam:") or string.find(id, "license:") or string.find(id, "license2:") then return id end end return tostring(source) end local function initPlayerData(identifier) if players[identifier] then return end players[identifier] = { skills = {} } for _, s in ipairs(Config.Skills) do players[identifier].skills[s.id] = { level = 1, xp = 0 } end end -- Calculate XP needed for next level local function xpForLevel(skillDef, level) -- xp required to reach next level from current level local base = skillDef.base_xp or 100 local growth = skillDef.xp_growth or 1.1 return math.floor(base * (growth ^ (level - 1))) end -- Add XP to a player's skill RegisterNetEvent('skills:addXP', function(skillId, amount) local _src = source local identifier = getPlayerIdentifier(_src) if not identifier then return end initPlayerData(identifier) local skillDef for _, s in ipairs(Config.Skills) do if s.id == skillId then skillDef = s break end end if not skillDef then return end local pdata = players[identifier].skills[skillId] if not pdata then return end pdata.xp = pdata.xp + (tonumber(amount) or 0) -- Level up loop while true do local needed = xpForLevel(skillDef, pdata.level) if pdata.xp >= needed and pdata.level < skillDef.max_level then pdata.xp = pdata.xp - needed pdata.level = pdata.level + 1 -- Notify player of level up TriggerClientEvent('skills:levelUp', _src, skillId, pdata.level) else break end end -- Send updated skill data to the client TriggerClientEvent('skills:update', _src, skillId, pdata.level, pdata.xp, xpForLevel(skillDef, pdata.level)) end) -- Return a full skills table to client on request or when opening UI RegisterNetEvent('skills:requestFull', function() local _src = source local identifier = getPlayerIdentifier(_src) if not identifier then return end initPlayerData(identifier) local out = {} for _, s in ipairs(Config.Skills) do local p = players[identifier].skills[s.id] table.insert(out, { id = s.id, label = s.label, icon = s.icon, level = p.level, xp = p.xp, next_xp = xpForLevel(s, p.level), max_level = s.max_level }) end TriggerClientEvent('skills:fullData', _src, out) end) -- Optional: simple command to give XP for testing (server-side) RegisterCommand('giveskillxp', function(source, args, raw) local target = tonumber(args[1]) local skill = args[2] local amount = tonumber(args[3]) or 0 if not skill or amount == 0 then print('Usage: /giveskillxp ') return end if not target then print('You must specify a player id to give xp to.') return end TriggerClientEvent('skills:notify', target, ('You received %s XP for %s'):format(amount, skill)) TriggerClientEvent('skills:serverAddXP', target, skill, amount) -- server event to actually add XP TriggerEvent('skills:addXP', skill, amount) -- if called from server console this will act on console source; mainly illustrative end) -- When a player joins, initialize their data AddEventHandler('playerConnecting', function(name, setKickReason, deferrals) local src = source local id = getPlayerIdentifier(src) if id then initPlayerData(id) end end) -- Example of save/load hooks (disabled by default). Implement DB save/load here if Config.Save.enabled = true. --[[ AddEventHandler('playerDropped', function(reason) local src = source local id = getPlayerIdentifier(src) if not id then return end if Config.Save.enabled then local pdata = players[id] if pdata then -- Save to DB, e.g., using oxmysql or ghmattimysql exports.oxmysql:execute('UPDATE skills SET data = ? WHERE identifier = ?', { json.encode(pdata.skills), id }) end end end) RegisterNetEvent('playerJoined', function() local src = source local id = getPlayerIdentifier(src) if id and Config.Save.enabled then -- load from DB... end end) ]] local isUiOpen = false -- Helper to send NUI messages local function sendNui(msg) SendNUIMessage(msg) end -- Toggle UI local function toggleUI(show) isUiOpen = show SetNuiFocus(show, show) if show then -- Request full data from server TriggerServerEvent('skills:requestFull') else sendNui({ action = 'close' }) end end RegisterCommand(Config.UI.open_command, function() toggleUI(not isUiOpen) end) -- Key mapping (optional) RegisterKeyMapping(Config.UI.open_command, 'Open Skills UI', 'keyboard', 'F2') -- Receive full data and open UI RegisterNetEvent('skills:fullData', function(data) sendNui({ action = 'open', skills = data }) isUiOpen = true SetNuiFocus(true, true) end) -- Receive incremental update for a skill RegisterNetEvent('skills:update', function(skillId, level, xp, next_xp) sendNui({ action = 'update', id = skillId, level = level, xp = xp, next_xp = next_xp }) end) RegisterNetEvent('skills:levelUp', function(skillId, level) -- Simple notification (can be replaced by your framework notify) sendNui({ action = 'levelup', id = skillId, level = level }) end) -- A thin shim so server 'skills:addXP' can be called from client events that want to request XP addition RegisterNetEvent('skills:serverAddXP', function(skillId, amount) TriggerServerEvent('skills:addXP', skillId, amount) end) RegisterNetEvent('skills:notify', function(msg) -- Just forward to UI notifications sendNui({ action = 'notify', text = msg }) end) -- NUI callbacks RegisterNUICallback('close', function(data, cb) toggleUI(false) cb('ok') end) RegisterNUICallback('addXP', function(data, cb) -- data: { id = skillId, amount = number } if data and data.id and data.amount then TriggerServerEvent('skills:addXP', data.id, tonumber(data.amount)) end cb('ok') end) -- Close UI on resource stop AddEventHandler('onResourceStop', function(res) if res == GetCurrentResourceName() then SetNuiFocus(false, false) end end) Skills :root{ --bg: #0f1724; --panel: #0b1220; --muted: #9aa4b2; --accent: #22c1c3; --glass: rgba(255,255,255,0.03); } *{box-sizing:border-box;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;} body,html{ height:100%; margin:0; background:transparent; -webkit-user-select:none; -ms-user-select:none; user-select:none; } .hidden{display:none;} .overlay{ position:fixed; inset:0; background:rgba(3,6,10,0.6); backdrop-filter: blur(4px); } .panel{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:720px; max-width:94%; background: linear-gradient(180deg,var(--panel), rgba(11,18,32,0.9)); border-radius:12px; box-shadow: 0 10px 40px rgba(2,6,23,0.7); padding:12px; color:#e6eef6; display:flex; flex-direction:column; max-height:80vh; overflow:hidden; } header{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.03); } header h1{ margin:0; font-size:20px; letter-spacing:0.4px; } #close-btn{ background:transparent; border:0; color:var(--muted); font-size:26px; line-height:1; cursor:pointer; } main#skills-list{ padding:12px; overflow:auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:6px; } .skill{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:10px; padding:10px; display:flex; gap:10px; align-items:center; border:1px solid rgba(255,255,255,0.02); } .skill .icon{ width:56px; height:56px; border-radius:8px; background:var(--glass); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; } .skill .meta{ flex:1; display:flex; flex-direction:column; gap:6px; } .skill .meta .row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); } .skill .meta .label{ font-weight:600; color:#e7f0ff; font-size:15px; } .progress{ width:100%; height:10px; background:rgba(255,255,255,0.04); border-radius:6px; overflow:hidden; margin-top:6px; } .progress > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), #7af0d9); transition:width 600ms cubic-bezier(.2,.9,.2,1); } footer{ padding:8px 12px; border-top:1px solid rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .controls{ display:flex; gap:8px; align-items:center; } .controls input[type="number"], .controls select{ padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:#fff; width:120px; } .controls button{ padding:8px 12px; border-radius:8px; border:0; cursor:pointer; background:linear-gradient(90deg,var(--accent),#32e6e8); color:#022; font-weight:700; } .hint{ color:var(--muted); font-size:12px; } /* small screens */ @media (max-width:480px){ main#skills-list{ grid-template-columns:1fr; } .panel{ width:94%; padding:10px; } } (() => { const skillsApp = document.getElementById('skills-app') const skillsList = document.getElementById('skills-list') const closeBtn = document.getElementById('close-btn') const overlay = document.getElementById('overlay') const xpAmountInput = document.getElementById('xp-amount') const xpSkillSelect = document.getElementById('xp-skill-select') const giveXpBtn = document.getElementById('give-xp') let skills = {} function createSkillCard(s) { const el = document.createElement('div') el.className = 'skill' el.dataset.id = s.id el.innerHTML = `

${s.icon || '⭐'}

${s.label}

Lv ${s.level}/${s.max_level}

${s.xp} / ${s.next_xp} XP

${Math.floor((s.xp / s.next_xp) * 100)}%

` return el } function renderList() { skillsList.innerHTML = '' xpSkillSelect.innerHTML = '' const arr = Object.values(skills) arr.sort((a,b) => a.label.localeCompare(b.label)) arr.forEach(s => { skillsList.appendChild(createSkillCard(s)) const opt = document.createElement('option') opt.value = s.id opt.textContent = s.label xpSkillSelect.appendChild(opt) }) } function openUI() { skillsApp.classList.remove('hidden') document.body.style.overflow = 'hidden' } function closeUI() { skillsApp.classList.add('hidden') document.body.style.overflow = '' // notify client to unfocus fetch('https://' + (GetParentResourceName ? GetParentResourceName() : 'skills') + '/close', { method: 'POST', headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify({}) }).catch(()=>{}) } // Generic NUI message handler (FiveM posts messages via window.addEventListener) window.addEventListener('message', (ev) => { const data = ev.data if (!data) return switch (data.action) { case 'open': if (Array.isArray(data.skills)) { skills = {} data.skills.forEach(s => { skills[s.id] = s }) renderList() } openUI() break case 'close': closeUI() break case 'update': { const id = data.id if (!skills[id]) { // fetch full data skills[id] = { id: id, label: id, level: data.level or 1, xp: data.xp or 0, next_xp: data.next_xp or 100, icon: '⭐', max_level: 100 } } skills[id].level = data.level skills[id].xp = data.xp skills[id].next_xp = data.next_xp const card = skillsList.querySelector(`.skill[data-id="${id}"]`) if (card) { const perc = Math.min(100, (skills[id].xp / skills[id].next_xp) * 100) card.querySelector('.row div:nth-child(1)').textContent = `${skills[id].xp} / ${skills[id].next_xp} XP` card.querySelector('.row div:nth-child(2)').textContent = `${Math.floor(perc)}%` card.querySelector('.progress > i').style.width = perc + '%' card.querySelector('.label:last-child').textContent = `Lv ${skills[id].level}/${skills[id].max_level}` } else { renderList() } } break case 'levelup': { // simple visual flash const id = data.id const card = skillsList.querySelector(`.skill[data-id="${id}"]`) if (card) { card.animate([{ transform: 'scale(1)' }, { transform: 'scale(1.03)' }, { transform: 'scale(1)' }], { duration: 600 }) } // show toast notify(`Level up! ${id} → ${data.level}`) } break case 'notify': notify(data.text) break default: break } }) // Local notify function notify(text) { const n = document.createElement('div') n.textContent = text n.style.position = 'fixed' n.style.right = '20px' n.style.bottom = '20px' n.style.background = 'linear-gradient(90deg, #22c1c3, #32e6e8)' n.style.color = '#022' n.style.padding = '10px 14px' n.style.borderRadius = '8px' n.style.boxShadow = '0 8px 24px rgba(0,0,0,0.4)' n.style.zIndex = 999999 document.body.appendChild(n) setTimeout(() => n.style.opacity = '0', 2200) setTimeout(() => n.remove(), 2600) } // UI events closeBtn.addEventListener('click', () => { closeUI() }) overlay.addEventListener('click', () => closeUI()) giveXpBtn.addEventListener('click', () => { const amount = parseInt(xpAmountInput.value, 10) || 0 const skill = xpSkillSelect.value if (!skill || amount <= 0) { notify('Select a skill and amount') return } // POST to client: fiveM expects https:///addXP fetch('https://' + (GetParentResourceName ? GetParentResourceName() : 'skills') + '/addXP', { method: 'POST', headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify({ id: skill, amount: amount }) }).then(resp => resp.json()).catch(()=>{}) }) // Expose focus helpers for FiveM environment (safe fallback) function GetParentResourceName(){ try { return document.querySelector('meta[data-parent-resource]').getAttribute('data-parent-resource') } catch (e) { return null } } // Initialize hidden on load skillsApp.classList.add('hidden') // For testing in browser: populate sample skills if loaded outside FiveM window.addEventListener('load', () => { if (!window.__inFiveM) { // sample data for dev preview const sample = [ { id: 'strength', label: 'Strength', icon: '💪', level: 5, xp: 30, next_xp: 100, max_level: 100 }, { id: 'stamina', label: 'Stamina', icon: '🏃', level: 3, xp: 10, next_xp: 80, max_level: 100 }, { id: 'shooting', label: 'Shooting', icon: '🔫', level: 8, xp: 50, next_xp: 200, max_level: 100 }, { id: 'driving', label: 'Driving', icon: '🚗', level: 2, xp: 20, next_xp: 90, max_level: 100 } ] skills = {} sample.forEach(s => skills[s.id] = s) renderList() // show UI for preview skillsApp.classList.remove('hidden') } }) })();