# Interface, langue et aperçu L’interface de tatouage est chargée depuis les fichiers générés de `ui/dist/`. Le paquet comprend ce build et les miniatures vanilla dans `ui/public/ImagenesVanilla/` ; ne supposez pas qu’il contient les sources React ou les fichiers de développement de `ui/`. ## Modifier les fichiers fournis Pour une petite personnalisation, vous pouvez modifier les fichiers livrés avec la ressource : - **Couleurs et typographie :** ouvrez `ui/dist/assets/index-*.css` et modifiez les valeurs des variables `--tat-*` et `--cxg-*`. Conservez le nom actuel du CSS, car la page NUI pointe déjà vers ce fichier. Ce CSS est compilé et peut changer avec une nouvelle build ; gardez une copie de vos modifications. - **Logo :** remplacez `ui/dist/assets/cxg-logo-CmIGK6Fh.png` en conservant exactement son nom et son chemin, référencés dans le JavaScript généré. Gardez des proportions et une transparence adaptées à l’espace où il s’affiche. - **Miniatures vanilla :** remplacez le fichier portant le même nom dans `ui/dist/ImagenesVanilla/` pour voir le changement dans la version exécutée. Remplacez aussi la copie correspondante dans `ui/public/ImagenesVanilla/` si elle existe, car une nouvelle compilation copie les fichiers de ce dossier vers `dist/`. Faites une sauvegarde avant de modifier les fichiers du build et vérifiez les changements dans FiveM. Pour des changements de conception plus importants, de nouveaux composants ou des traductions React, demandez les sources de l’UI et générez un nouveau build ; ces fichiers sources ne font pas partie de la livraison décrite ici. ## Personnaliser l’apparence Pour des changements importants de mise en page, de composants ou de textes React, utilisez les sources de l’UI si elles vous ont été fournies séparément. Les principaux fichiers sont : - `ui/src/index.css` : variables globales `--tat-*` pour les couleurs, la typographie, les tailles et les ombres. - `ui/src/studio-theme.css` : variables `--cxg-*` et présentation du studio. - `ui/src/components/` : composants React et styles propres à chaque composant. - `ui/src/main.tsx` : importations d’Outfit Variable et de Geist Mono Variable. Commencez par modifier les variables de thème. Pour modifier directement les règles des composants, conservez leurs états de focus, d’erreur, de chargement et de désactivation. Changez la police dans `main.tsx` si vous en utilisez une autre ; les styles qui l’emploient sont définis dans les variables typographiques. ## Miniatures et images Les miniatures vanilla fournies se trouvent dans `ui/public/ImagenesVanilla/` et sont copiées dans le build de production. Conservez les noms et les chemins attendus par le catalogue. Les images des packs externes restent dans ces ressources ; elles ne sont pas copiées automatiquement dans l’UI. FiveM charge `ui/dist/index.html` et ses fichiers dans `ui/dist/` pour afficher la NUI. Le dossier `ui/dist/` est un résultat généré ; si vous avez reçu le code source, modifiez les sources et recompilez au lieu de modifier manuellement les fichiers minifiés du build. ## Langue `Config.Locale` et `Config.LocaleFallback` dans `config.lua` définissent la langue par défaut des messages Lua et de la NUI pour tous les joueurs. La valeur s’applique après le redémarrage de `cxg-tattoos` ; ce n’est ni une préférence individuelle ni un sélecteur dans la NUI. Les codes pris en charge sont `en`, `es`, `pt-BR`, `fr`, `de`, `it`, `pl`, `ru`, `tr`, `th` et `ar`. Les libellés propres à React ont leurs dictionnaires dans `ui/src/i18n.tsx`, si ces sources ont été fournies. L’anglais sert de base et couvre les clés sans traduction ; l’arabe active le sens de lecture RTL. Modifier `Config.Locale` sélectionne une langue disponible, tandis que modifier les dictionnaires adapte les traductions contenues dans l’UI. Ce sont deux réglages distincts. ## Compiler les sources de l’UI Ces étapes ne s’appliquent que si vous avez reçu le dossier source `ui/` avec `package.json` et `package-lock.json`. Elles nécessitent Node.js et npm. Exécutez-les depuis `ui/` : ```powershell npm ci npm run lint npm run build ``` `npm run lint` vérifie les types TypeScript et `npm run build` génère `ui/dist/`, le contenu utilisé par FiveM. Distribuez le build mis à jour avec la ressource. ## Caméra et tenue d’aperçu `config.lua` permet de régler la caméra et la tenue appliquée pendant l’ouverture du studio : `Config.CameraOffsets`, `Config.CameraFraming`, `Config.CameraFramingBySide`, `Config.CameraManualControls` et `Config.PreviewOutfit`. Pour plus de détails sur ces paramètres, consultez [Configuration](https://docs.cxgstudios.com/docs/fr/01-cxg-tattoos/03-configuracion.md).