Interfaccia, lingua e anteprima

L'interfaccia dei tatuaggi viene caricata dai file generati in ui/dist/. Il pacchetto include questa build e le miniature vanilla in ui/public/ImagenesVanilla/; non dare per scontato che includa i sorgenti React o i file di sviluppo di ui/.

Modificare i file forniti

Per una piccola personalizzazione puoi modificare i file inclusi nella risorsa:

Colori e tipografia: apri ui/dist/assets/index-*.css e modifica i valori delle variabili --tat-* e --cxg-*. Mantieni il nome attuale del CSS, perché la pagina NUI punta già a quel file. Questo CSS è compilato e può cambiare con una nuova build; conserva una copia delle modifiche.
Logo: sostituisci ui/dist/assets/cxg-logo-CmIGK6Fh.png mantenendo esattamente nome e percorso, che sono referenziati nel JavaScript generato. Mantieni proporzioni e trasparenza compatibili con lo spazio in cui viene mostrato.
Miniature vanilla: sostituisci il file omonimo in ui/dist/ImagenesVanilla/ perché la modifica sia visibile nella versione eseguita. Se disponibile, sostituisci anche la copia corrispondente in ui/public/ImagenesVanilla/, dato che una nuova compilazione copia i file da quella cartella a dist/.

Fai una copia di sicurezza prima di modificare i file della build e verifica le modifiche in FiveM. Per modifiche estese al design, nuovi componenti o traduzioni React, richiedi i sorgenti UI e genera una nuova build; i file sorgente non fanno parte della distribuzione descritta qui.

Personalizzare l'aspetto

Per modifiche estese alla disposizione, ai componenti o ai testi React, usa i sorgenti UI se ti sono stati forniti separatamente. I principali punti di ingresso sono:

ui/src/index.css: variabili globali --tat-* per colori, tipografia, dimensioni e ombre.
ui/src/studio-theme.css: variabili --cxg-* e presentazione dello studio.
ui/src/components/: componenti React e stili specifici dei componenti.
ui/src/main.tsx: importazioni di Outfit Variable e Geist Mono Variable.

Inizia modificando le variabili del tema. Le modifiche dirette alle regole dei componenti devono conservarne gli stati di focus, errore, caricamento e disabilitato. Cambia il font in main.tsx se vuoi usarne uno diverso; gli stili che lo utilizzano sono definiti nelle variabili tipografiche.

Miniature e immagini

Le miniature vanilla incluse si trovano in ui/public/ImagenesVanilla/ e vengono copiate nella build di produzione. Mantieni i nomi e i percorsi previsti dal catalogo. Le immagini fornite dai pacchetti esterni restano nelle rispettive risorse; non vengono copiate automaticamente nell'interfaccia.

FiveM carica ui/dist/index.html e i relativi file ui/dist/ per mostrare la NUI. La cartella ui/dist/ è un risultato generato; se hai ricevuto il codice sorgente, modifica i sorgenti e ricompila invece di modificare manualmente i file minificati della build.

Lingua

Config.Locale e Config.LocaleFallback in config.lua impostano la lingua predefinita dei messaggi Lua e della NUI per tutti i giocatori. Il valore si applica dopo il riavvio di cxg-tattoos; non è un'opzione individuale né un selettore nella NUI. I codici supportati sono en, es, pt-BR, fr, de, it, pl, ru, tr, th e ar.

Le etichette proprie dei componenti React hanno dizionari in ui/src/i18n.tsx, se i sorgenti sono stati forniti. L'inglese funge da base e copre le chiavi senza traduzione; l'arabo attiva la direzione di lettura RTL. Modificare Config.Locale seleziona una lingua disponibile, mentre modificare i dizionari adatta le traduzioni contenute nell'interfaccia. Sono impostazioni distinte.

Compilare i sorgenti UI

Questi passaggi si applicano solo se hai ricevuto la cartella sorgente ui/ con package.json e package-lock.json. Richiedono Node.js e npm. Esegui dalla cartella ui/:

Codice

npm ci
npm run lint
npm run build

npm run lint controlla i tipi TypeScript e npm run build genera ui/dist/, il contenuto utilizzato da FiveM. Distribuisci la build aggiornata insieme alla risorsa.

Telecamera e abito di anteprima

config.lua permette di regolare la telecamera e l'abito applicato all'apertura dello studio: Config.CameraOffsets, Config.CameraFraming, Config.CameraFramingBySide, Config.CameraManualControls e Config.PreviewOutfit. Per i dettagli di questi parametri, consulta Configurazione.