# Arayüz, dil ve önizleme

Dövme arayüzü, oluşturulmuş `ui/dist/` dosyalarından yüklenir. Paket bu derlemeyi ve `ui/public/ImagenesVanilla/` içindeki vanilla küçük resimleri içerir; React kaynak kodunun veya `ui/` geliştirme dosyalarının pakette olduğunu varsaymayın.

## Teslim edilen dosyaları düzenleme

Küçük özelleştirmeler için kaynakla birlikte gelen dosyaları düzenleyebilirsiniz:

- **Renkler ve yazı tipi:** `ui/dist/assets/index-*.css` dosyasını açın ve `--tat-*` ile `--cxg-*` değişkenlerinin değerlerini değiştirin. NUI sayfası bu dosyaya başvurduğundan mevcut CSS dosya adını koruyun. Bu CSS derlenmiştir ve yeni bir build alındığında değişebilir; yaptığınız ayarların bir kopyasını saklayın.
- **Logo:** Üretilen JavaScript içindeki başvurunun parçası olan ad ve yolu aynen koruyarak `ui/dist/assets/cxg-logo-CmIGK6Fh.png` dosyasını değiştirin. Görüntülendiği alanla uyumlu en-boy oranını ve saydamlığı koruyun.
- **Vanilla küçük resimleri:** Değişikliğin çalışan sürümde görünmesi için `ui/dist/ImagenesVanilla/` içindeki dosyayı aynı adla değiştirin. Elinizde varsa dosyanın `ui/public/ImagenesVanilla/` içindeki karşılık gelen kopyasını da değiştirin; yeni bir derleme bu klasördeki dosyaları `dist/` içine kopyalar.

Build dosyalarını düzenlemeden önce yedek alın ve değişiklikleri FiveM içinde kontrol edin. Kapsamlı tasarım değişiklikleri, yeni bileşenler veya React çevirileri için UI kaynak kodunu isteyin ve yeni bir build oluşturun; burada açıklanan teslimata bu kaynak dosyalar dahil değildir.

## Görünümü özelleştirme

Sayfa düzeni, bileşen veya React metinlerinde kapsamlı değişiklikler için ayrıca teslim edilmişse UI kaynak kodunu kullanın. Başlıca giriş noktaları şunlardır:

- `ui/src/index.css`: renkler, yazı tipi, boyutlar ve gölgeler için genel `--tat-*` değişkenleri.
- `ui/src/studio-theme.css`: `--cxg-*` değişkenleri ve stüdyo görünümü.
- `ui/src/components/`: React bileşenleri ve her bileşene özel stiller.
- `ui/src/main.tsx`: Outfit Variable ve Geist Mono Variable içe aktarımları.

Tema değişkenlerini düzenleyerek başlayın. Bileşen kurallarında doğrudan değişiklik yaparken odak, hata, yükleniyor ve devre dışı durumları koruyun. Farklı bir yazı tipi kullanacaksanız `main.tsx` içindeki yazı tipini de değiştirin; bu yazı tipini kullanan stiller tipografi değişkenlerinde tanımlıdır.

## Küçük resimler ve görseller

Dahil edilen vanilla küçük resimleri `ui/public/ImagenesVanilla/` içindedir ve üretim derlemesine kopyalanır. Kataloğun beklediği adları ve yolları koruyun. Harici paketlerin sağladığı görseller kendi kaynaklarında kalır; UI'a otomatik olarak kopyalanmaz.

FiveM, NUI'ı göstermek için `ui/dist/index.html` dosyasını ve `ui/dist/` içindeki dosyaları yükler. `ui/dist/` oluşturulmuş bir çıktıdır; kaynak kodu da teslim aldıysanız küçültülmüş build dosyalarını elle düzenlemek yerine kaynakta değişiklik yapıp yeniden derleyin.

## Dil

`config.lua` içindeki `Config.Locale` ve `Config.LocaleFallback`, Lua mesajlarıyla NUI için tüm oyuncuların varsayılan dilini belirler. Değer `cxg-tattoos` yeniden başlatıldıktan sonra uygulanır; oyuncuya özel bir ayar veya NUI içindeki bir seçici değildir. Desteklenen kodlar `en`, `es`, `pt-BR`, `fr`, `de`, `it`, `pl`, `ru`, `tr`, `th` ve `ar` şeklindedir.

React'e özgü etiketlerin sözlükleri, kaynak kodu teslim edildiyse `ui/src/i18n.tsx` içindedir. İngilizce temel dili sağlar ve çevirisi olmayan anahtarları karşılar; Arapça okuma yönü olarak RTL'yi etkinleştirir. `Config.Locale` değiştirmek kullanılabilir bir dili seçer; sözlükleri değiştirmek ise UI metinlerinin çevirilerini düzenler. Bunlar ayrı ayarlardır.

## UI kaynaklarını derleme

Bu adımlar yalnızca `package.json` ve `package-lock.json` içeren `ui/` kaynak klasörü size teslim edildiyse geçerlidir. Node.js ve npm gerekir. `ui/` klasöründen çalıştırın:

```powershell
npm ci
npm run lint
npm run build
```

`npm run lint`, TypeScript türlerini denetler; `npm run build`, FiveM'in kullandığı içerik olan `ui/dist/` klasörünü oluşturur. Güncellenen build'i kaynakla birlikte dağıtın.

## Kamera ve önizleme kıyafeti

`config.lua`, stüdyo açıkken uygulanan kamera ve kıyafeti ayarlamaya olanak tanır: `Config.CameraOffsets`, `Config.CameraFraming`, `Config.CameraFramingBySide`, `Config.CameraManualControls` ve `Config.PreviewOutfit`. Bu parametrelerin ayrıntıları için [Yapılandırma](https://docs.cxgstudios.com/docs/tr/01-cxg-tattoos/03-configuracion.md) bölümüne bakın.