Interface, idioma e prévia

A interface de tatuagens é carregada pelos arquivos gerados em ui/dist/. O pacote inclui esse build e as miniaturas vanilla em ui/public/ImagenesVanilla/; não presuma que inclui o código-fonte React nem os arquivos de desenvolvimento de ui/.

Editar os arquivos fornecidos

Para uma personalização pequena, você pode editar os arquivos que acompanham o recurso:

Cores e tipografia: abra ui/dist/assets/index-*.css e altere os valores das variáveis --tat-* e --cxg-*. Preserve o nome atual do CSS, pois a página NUI aponta para esse arquivo. Esse CSS é compilado e pode mudar em um novo build; mantenha uma cópia dos seus ajustes.
Logotipo: substitua ui/dist/assets/cxg-logo-CmIGK6Fh.png, preservando exatamente o nome e o caminho, que são usados pela referência dentro do JavaScript gerado. Mantenha proporção e transparência compatíveis com o espaço de exibição.
Miniaturas vanilla: substitua o arquivo de mesmo nome em ui/dist/ImagenesVanilla/ para que a alteração apareça na versão em execução. Substitua também a cópia correspondente em ui/public/ImagenesVanilla/, se estiver disponível, pois uma nova compilação copia os arquivos dessa pasta para dist/.

Faça uma cópia de segurança antes de editar arquivos do build e confira as alterações dentro do FiveM. Para mudanças extensas de design, novos componentes ou traduções React, solicite o código-fonte da UI e gere um novo build; esse código-fonte não faz parte da entrega descrita aqui.

Personalizar a aparência

Para mudanças extensas de layout, componentes ou textos React, use o código-fonte da UI se tiver recebido esses arquivos separadamente. Os principais pontos de entrada são:

ui/src/index.css: variáveis globais --tat-* de cores, tipografia, tamanhos e sombras.
ui/src/studio-theme.css: variáveis --cxg-* e aparência do estúdio.
ui/src/components/: componentes React e estilos específicos de cada componente.
ui/src/main.tsx: importações de Outfit Variable e Geist Mono Variable.

Comece alterando as variáveis do tema. Mudanças diretas nas regras dos componentes precisam preservar os estados de foco, erro, carregamento e desabilitado. Altere a fonte em main.tsx se também for usar outra fonte; os estilos que a utilizam estão definidos nas variáveis tipográficas.

Miniaturas e imagens

As miniaturas vanilla incluídas ficam em ui/public/ImagenesVanilla/ e são copiadas para o build de produção. Preserve os nomes e caminhos esperados pelo catálogo. Imagens fornecidas por packs externos permanecem nesses recursos; elas não são copiadas automaticamente para a UI.

O FiveM carrega ui/dist/index.html e seus arquivos em ui/dist/ para exibir a NUI. O diretório ui/dist/ é um artefato gerado; se você recebeu o código-fonte, altere o código-fonte e compile novamente em vez de editar manualmente os arquivos minificados do build.

Idioma

Config.Locale e Config.LocaleFallback em config.lua definem o idioma padrão das mensagens Lua e da NUI para todos os jogadores. O valor é aplicado após reiniciar cxg-tattoos; não é uma opção individual nem um seletor dentro da NUI. Os códigos aceitos são en, es, pt-BR, fr, de, it, pl, ru, tr, th e ar.

Os rótulos próprios do React têm dicionários em ui/src/i18n.tsx, se esse código-fonte tiver sido fornecido. O inglês serve de base e cobre as chaves sem tradução; o árabe ativa a direção de leitura RTL. Alterar Config.Locale seleciona um idioma disponível, enquanto alterar os dicionários modifica as traduções presentes na UI. São ajustes diferentes.

Compilar o código-fonte da UI

Estas etapas só se aplicam se você recebeu a pasta do código-fonte ui/ com package.json e package-lock.json. Elas exigem Node.js e npm. Execute dentro de ui/:

Código

npm ci
npm run lint
npm run build

npm run lint verifica os tipos TypeScript e npm run build gera ui/dist/, o conteúdo usado pelo FiveM. Distribua o build atualizado junto com o recurso.

Câmera e roupa de prévia

config.lua permite ajustar a câmera e a roupa aplicada enquanto o estúdio está aberto: Config.CameraOffsets, Config.CameraFraming, Config.CameraFramingBySide, Config.CameraManualControls e Config.PreviewOutfit. Para detalhes desses parâmetros, consulte Configuração.