# 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/`:

```powershell
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](https://docs.cxgstudios.com/docs/it/01-cxg-tattoos/03-configuracion.md).