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/:

Kod

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.