Convenzioni UI / NUI

Ogni risorsa ha la propria pagina NUI (ui_page 'html/index.html'). bs_ui è l’HUD, le notifiche e le parti condivise.

Un pannello alla volta: bs:ui:opened / bs:ui:closed

Quando il tuo pannello si apre lo annunci. Ogni altro pannello lo sente e si chiude. Quando il tuo si chiude, annunci anche questo. Codice reale da bs_config:

local function close()
    if not isOpen then return end
    isOpen = false
    SetNuiFocus(false, false)
    SendNUIMessage({ action = 'close' })
    TriggerEvent('bs:ui:closed', 'config')
end

local function open()
    if isOpen then return close() end
    isOpen = true
    SetNuiFocus(true, true)
    SendNUIMessage({ action = 'open', data = data })
    TriggerEvent('bs:ui:opened', 'config')
end

-- another UI took over: step aside
AddEventHandler('bs:ui:opened', function(what)
    if what ~= 'config' and isOpen then close() end
end)

AddEventHandler('onResourceStop', function(res)
    if res == GetCurrentResourceName() and isOpen then
        SetNuiFocus(false, false)
        TriggerEvent('bs:ui:closed', 'config')
    end
end)

Regole:

• Passa il nome del tuo pannello in entrambi gli eventi. I gestori lo controllano, un gestore che reagiva a qualsiasi chiusura ha rotto la mappa del campo per mesi.
• Accoppiali su ogni uscita: pulsante di chiusura, Esc, tasto di alternanza, apertura di un’altra UI, arresto della risorsa. Ne manchi una e il giocatore resta con un cursore del mouse e senza gioco.
• Annuncia opened dopo che sei aperto, e chiuditi dal tuo gestore, non dare per scontato che lo facciano gli altri.

/refreshui (bs_ui) è il pulsante del panico: chiude tutto, rilascia il focus e attiva bs:ui:closed con nil.

Notifiche

-- client
TriggerEvent('bs:ui:notify', { type = 'info', title = 'Radio', message = 'Signal found.', duration = 3000 })
-- server
TriggerClientEvent('bs:ui:notify', src, { type = 'error', title = 'Denied', message = 'Nope.' })

Tipi usati nel codice: info, success, error.

scale.js

Le pagine sono impaginate per 1920x1080. Includi lo scaler condiviso perché si adattino a qualsiasi risoluzione:

<script src="https://cfx-nui-bs_ui/html/shared/scale.js"></script>

Scala <body> con un transform: --ui-scale = clamp(min(w/1920, h/1080), 0.6, 1.25). I giocatori possono sovrascriverlo (da 0.6 a 1.4) nelle impostazioni.

Cose da sapere quando lo usi:

• Nel CSS della pagina scrivi vh/vw come calc(Nvh / var(--ui-scale, 1)), così restano vere frazioni del viewport.
• Il JS che imposta style.left/top da clientX/clientY o da un bounding rect deve dividere per BSScale.get(). BSScale.w() / BSScale.h() danno il viewport locale.
• Disattivalo con <html data-bs-noscale>.

Stile della casa

• html, body { background: transparent !important; } su ogni pagina. Altrimenti hai uno schermo nero sopra il gioco.
• Nessun messaggio NUI a ogni frame da fermi. Invia al cambiamento, o limita (l’HUD del drone invia ogni 150 ms in volo, è circa il massimo).
• La palette è ambra / ruggine / osso / polvere su quasi nero. Riusa i token CSS di bs_ui e bs_menu/html/css/faction-hub.css. Niente font esterni né CDN, i giocatori potrebbero non avere accesso a internet per quelli ed è comunque una questione di privacy.
• Icone: icone a linee in bs_ui/html/js/icons.js.
• Suoni: bs_ui/html/js/sound.js gestisce i suoni posizionali (maxDistance, panning).