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