Parent : [[INDEX-WEB-UIUX]]

FiveM - Appearance Config with Accent Colors : RGB, opacités multiples, lifestyle items par rôle

Problème

Les UI de personnalisation (barbier, chirurgie, vêtements) nécessitent un système de couleurs cohérent avec hover, glow, text, shadow. Les items de départ diffèrent selon le rôle du joueur.

Solution

Configuration UI avec système de couleurs d'accent configurable (RGB + opacités multiples), lifestyle items par personnage, et mapping interne des couleurs/opacités.

-- gw-appearance/shared/config.lua
Config = {}

-- Système de couleurs d'accent complet
Config.Colors = {
    accent = {255, 255, 130},        -- RGB accent principal
    accentMain = 0.70,                -- Opacité main
    accentHover = 0.95,               -- Opacité hover
    accentGlow = 0.14,                -- Opacité glow
    bgNav = {8, 8, 14, 0.97},        -- Background navigation
    bgPanel = {13, 13, 21, 0.94},    -- Background panel
    textPrimary = {230, 230, 230},
    textSecondary = {180, 180, 180},
    textMuted = {120, 120, 120},
    border = {255, 255, 255, 0.06},
    success = {46, 213, 115},
    error = {255, 71, 87},
    warning = {255, 165, 2}
}

-- Items de départ par rôle de personnage
Config.Lifestyle = {
    civil = {
        { item = "money", count = 500 },
        { item = "burger", count = 3 },
        { item = "water", count = 3 },
        { item = "phone", count = 1 }
    },
    police = {
        { item = "money", count = 1000 },
        { item = "policebadge", count = 1 },
        { item = "radio", count = 1 },
        { item = "weapon_stungun", count = 1 }
    },
    criminal = {
        { item = "lockpick", count = 5 },
        { item = "money", count = 200 },
        { item = "weapon_knife", count = 1 }
    }
}

-- Mapping opacité interne pour le frontend (NUI)
Config.OpacityMap = {
    hover = function() return Config.Colors.accentHover end,
    glow = function() return Config.Colors.accentGlow end,
    panel = function() return Config.Colors.bgPanel[4] end
}

-- Conversion helper pour NUI (RGB array → hex)
function Config.RgbToHex(rgb)
    local r, g, b = rgb[1], rgb[2], rgb[3]
    return string.format('#%02X%02X%02X', r, g, b)
end

-- Envoi au client au chargement
RegisterNetEvent('gw-appearance:loadConfig')
AddEventHandler('gw-appearance:loadConfig', function()
    local src = source
    TriggerClientEvent('gw-appearance:receiveConfig', src, {
        colors = Config.Colors,
        lifestyle = Config.Lifestyle
    })
end)

Pourquoi

• Opacités séparées (hover, glow, main) permettent des transitions fluides
• Lifestyle items par rôle évite de donner un badge de police à un civil
• RgbToHex standardise l'envoi vers le frontend NUI

Quand l'utiliser

• UI de personnalisation (barbier, chirurgie, tatouages)
• HUD custom avec thème configurable
• Inventaires, menus, MDT

Quand NE PAS l'utiliser

• UI simple avec 2 couleurs → overkill

Exemples

Correct

-- Thème dynamique avec accent configurable par admin
Config.Themes = {
    default = { accent = {255, 255, 130} },
    dark = { accent = {100, 100, 255} },
    red = { accent = {255, 50, 50} }
}

function SetTheme(themeName)
    local theme = Config.Themes[themeName]
    if theme then
        Config.Colors.accent = theme.accent
        -- Broadcast aux clients connectés
        for _, playerId in ipairs(ESX.GetPlayers()) do
            TriggerClientEvent('ui:updateTheme', playerId, theme)
        end
    end
end

Incorrect

-- Couleurs hardcodées dans le code → pas de personnalisation
-- client.lua
DrawRect(0.5, 0.5, 0.3, 0.4, 255, 255, 130, 200) -- Jaune hardcodé
-- Si le serveur veut changer le thème → modifier tous les fichiers

Références

• gw-appearance/shared/config.lua L1-60
• gw-barber/shared/main.config.lua L1-80