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

Code

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.