Interfaz, idioma y vista previa

La interfaz de tatuajes se carga desde los archivos generados de ui/dist/. El paquete incluye ese build y las miniaturas vanilla de ui/public/ImagenesVanilla/; no presupongas que incluye el código fuente React ni los archivos de desarrollo de ui/.

Editar archivos entregados

Para una personalización pequeña puedes editar los archivos que llegan con el recurso:

Colores y tipografía: abre ui/dist/assets/index-*.css y cambia los valores de las variables --tat-* y --cxg-*. Conserva el nombre actual del CSS, porque la página NUI ya apunta a ese archivo. Este CSS está compilado y puede cambiar al recibir una nueva build; guarda una copia de tus ajustes.
Logotipo: reemplaza ui/dist/assets/cxg-logo-CmIGK6Fh.png conservando exactamente el nombre y la ruta, que forman parte de la referencia dentro del JavaScript generado. Mantén una proporción y transparencia compatibles con el espacio donde se muestra.
Miniaturas vanilla: reemplaza el archivo con el mismo nombre en ui/dist/ImagenesVanilla/ para que el cambio se vea en la versión ejecutada. Reemplaza también la copia correspondiente en ui/public/ImagenesVanilla/ si la tienes, ya que una compilación nueva copia los archivos de esa carpeta a dist/.

Haz una copia de seguridad antes de editar archivos del build y comprueba los cambios dentro de FiveM. Para cambios extensos de diseño, nuevos componentes o traducciones React, pide las fuentes de UI y genera una build nueva; esos archivos fuente no forman parte de la entrega descrita aquí.

Personalizar la apariencia

Para cambios extensos de distribución, componentes o textos de React, utiliza las fuentes de UI si se te han entregado por separado. Los principales puntos de entrada son:

ui/src/index.css: variables globales --tat-* para colores, tipografía, tamaños y sombras.
ui/src/studio-theme.css: variables --cxg-* y presentación del estudio.
ui/src/components/: componentes React y estilos específicos de cada componente.
ui/src/main.tsx: importaciones de Outfit Variable y Geist Mono Variable.

Empieza modificando las variables de tema. Los cambios directos a reglas de componentes requieren conservar sus estados de foco, error, carga y deshabilitado. Cambia la fuente en main.tsx si también vas a usar una fuente distinta; los estilos que la consumen están definidos en las variables tipográficas.

Miniaturas e imágenes

Las miniaturas vanilla incluidas están en ui/public/ImagenesVanilla/ y se copian al build de producción. Conserva los nombres y rutas que espera el catálogo. Las imágenes proporcionadas por packs externos permanecen en esos recursos; no se copian automáticamente a la UI.

FiveM carga ui/dist/index.html y sus archivos de ui/dist/ para mostrar la NUI. El directorio ui/dist/ es un resultado generado; si recibiste el código fuente, modifica la fuente y vuelve a compilar en vez de editar manualmente los archivos minificados del build.

Idioma

Config.Locale y Config.LocaleFallback en config.lua configuran el idioma predeterminado de los mensajes Lua y la NUI para todos los jugadores. El valor se aplica tras reiniciar cxg-tattoos; no es una opción individual ni un selector dentro de la NUI. Los códigos admitidos son en, es, pt-BR, fr, de, it, pl, ru, tr, th y ar.

Las etiquetas propias de React tienen diccionarios en ui/src/i18n.tsx, si se entregaron esas fuentes. El inglés sirve de base y cubre las claves que no tengan traducción; el árabe activa la dirección de lectura RTL. Cambiar Config.Locale elige un idioma disponible, mientras que cambiar los diccionarios adapta las traducciones que contiene la UI. Son ajustes distintos.

Compilar las fuentes de UI

Estos pasos solo aplican si recibiste la carpeta fuente ui/ con package.json y package-lock.json. Requieren Node.js y npm. Ejecuta desde ui/:

Código

npm ci
npm run lint
npm run build

npm run lint comprueba los tipos de TypeScript y npm run build genera ui/dist/, que es el contenido consumido por FiveM. Distribuye el build actualizado junto con el recurso.

Cámara y atuendo de vista previa

config.lua permite ajustar la cámara y el atuendo que se aplica mientras se abre el estudio: Config.CameraOffsets, Config.CameraFraming, Config.CameraFramingBySide, Config.CameraManualControls y Config.PreviewOutfit. Para los detalles de estos parámetros, consulta Configuración.