# Interfejs, język i podgląd

Interfejs tatuaży jest ładowany z wygenerowanych plików w `ui/dist/`. Pakiet zawiera tę kompilację i miniatury vanilla z `ui/public/ImagenesVanilla/`; nie zakładaj, że zawiera źródła React ani pliki deweloperskie `ui/`.

## Edytowanie dostarczonych plików

Przy niewielkiej personalizacji możesz edytować pliki dołączone do zasobu:

- **Kolory i krój pisma:** otwórz `ui/dist/assets/index-*.css` i zmień wartości zmiennych `--tat-*` oraz `--cxg-*`. Zachowaj obecną nazwę CSS, ponieważ strona NUI wskazuje ten plik. Ten CSS jest skompilowany i może się zmienić po otrzymaniu nowej kompilacji; zachowaj kopię swoich ustawień.
- **Logo:** zastąp `ui/dist/assets/cxg-logo-CmIGK6Fh.png`, zachowując dokładnie nazwę i ścieżkę, do których odwołuje się wygenerowany JavaScript. Zachowaj proporcje i przezroczystość dopasowane do miejsca wyświetlania.
- **Miniatury vanilla:** zastąp plik o tej samej nazwie w `ui/dist/ImagenesVanilla/`, aby zmiana była widoczna w uruchomionej wersji. Zastąp także odpowiadającą mu kopię w `ui/public/ImagenesVanilla/`, jeśli ją masz, ponieważ nowa kompilacja kopiuje pliki z tego folderu do `dist/`.

Przed edycją skompilowanych plików zrób kopię zapasową i sprawdź zmiany w FiveM. Przy większych zmianach projektu, nowych komponentach lub tłumaczeniach React poproś o źródła UI i utwórz nową kompilację; opisane tu wydanie nie zawiera tych plików źródłowych.

## Personalizacja wyglądu

Przy większych zmianach układu, komponentów lub tekstów React użyj źródeł UI, jeśli zostały dostarczone osobno. Główne punkty wejścia:

- `ui/src/index.css`: globalne zmienne `--tat-*` dotyczące kolorów, kroju pisma, rozmiarów i cieni.
- `ui/src/studio-theme.css`: zmienne `--cxg-*` i wygląd studia.
- `ui/src/components/`: komponenty React i style poszczególnych komponentów.
- `ui/src/main.tsx`: importy Outfit Variable i Geist Mono Variable.

Zacznij od zmiany zmiennych motywu. Przy bezpośrednich zmianach reguł komponentów zachowaj ich stany fokusu, błędu, ładowania i wyłączenia. Zmień krój pisma w `main.tsx`, jeśli chcesz używać innego; style korzystające z niego są określone w zmiennych typograficznych.

## Miniatury i obrazy

Dołączone miniatury vanilla znajdują się w `ui/public/ImagenesVanilla/` i są kopiowane do kompilacji produkcyjnej. Zachowaj nazwy i ścieżki oczekiwane przez katalog. Obrazy z zewnętrznych pakietów pozostają w tych zasobach; nie są automatycznie kopiowane do UI.

FiveM ładuje `ui/dist/index.html` oraz pliki z `ui/dist/`, aby wyświetlić NUI. Folder `ui/dist/` jest wygenerowanym wynikiem; jeśli otrzymałeś kod źródłowy, zmień źródła i skompiluj ponownie zamiast ręcznie edytować zminifikowane pliki kompilacji.

## Język

`Config.Locale` i `Config.LocaleFallback` w `config.lua` ustawiają domyślny język komunikatów Lua i NUI dla wszystkich graczy. Ustawienie zaczyna obowiązywać po ponownym uruchomieniu `cxg-tattoos`; nie jest indywidualną opcją ani selektorem w NUI. Obsługiwane kody: `en`, `es`, `pt-BR`, `fr`, `de`, `it`, `pl`, `ru`, `tr`, `th` i `ar`.

Własne etykiety React mają słowniki w `ui/src/i18n.tsx`, jeśli te źródła zostały dostarczone. Angielski jest językiem bazowym i uzupełnia brakujące tłumaczenia; arabski włącza kierunek RTL. Zmiana `Config.Locale` wybiera dostępny język, a zmiana słowników dostosowuje tłumaczenia zawarte w UI. To odrębne ustawienia.

## Kompilowanie źródeł UI

Te kroki mają zastosowanie tylko wtedy, gdy otrzymałeś folder źródłowy `ui/` z `package.json` i `package-lock.json`. Wymagają Node.js i npm. Uruchom je z folderu `ui/`:

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

`npm run lint` sprawdza typy TypeScript, a `npm run build` generuje `ui/dist/`, którego używa FiveM. Rozpowszechniaj zaktualizowaną kompilację razem z zasobem.

## Kamera i strój podglądu

W `config.lua` można dostosować kamerę oraz strój zakładany po otwarciu studia: `Config.CameraOffsets`, `Config.CameraFraming`, `Config.CameraFramingBySide`, `Config.CameraManualControls` i `Config.PreviewOutfit`. Szczegóły tych parametrów znajdują się w sekcji [Konfiguracja](https://docs.cxgstudios.com/docs/pl/01-cxg-tattoos/03-configuracion.md).