Oberfläche, Sprache und Vorschau

Die Tattoo-Oberfläche wird aus den erzeugten Dateien in ui/dist/ geladen. Das Paket enthält diesen Build und die Vanilla-Miniaturbilder in ui/public/ImagenesVanilla/; gehe nicht davon aus, dass React-Quellcode oder Entwicklungsdateien von ui/ enthalten sind.

Ausgelieferte Dateien bearbeiten

Für kleinere Anpassungen kannst du die mit der Ressource gelieferten Dateien bearbeiten:

Farben und Schrift: Öffne ui/dist/assets/index-*.css und ändere die Werte der Variablen --tat-* und --cxg-*. Behalte den aktuellen CSS-Dateinamen bei, da die NUI-Seite auf diese Datei verweist. Dieses CSS ist kompiliert und kann sich mit einem neuen Build ändern; sichere deine Anpassungen.
Logo: Ersetze ui/dist/assets/cxg-logo-CmIGK6Fh.png und behalte exakt denselben Namen und Pfad bei, da sie in der generierten JavaScript-Datei referenziert werden. Achte auf passende Proportionen und Transparenz für den Anzeigebereich.
Vanilla-Miniaturbilder: Ersetze die gleichnamige Datei in ui/dist/ImagenesVanilla/, damit die Änderung in der ausgeführten Version sichtbar ist. Ersetze auch die entsprechende Kopie in ui/public/ImagenesVanilla/, falls vorhanden, denn ein neuer Build kopiert die Dateien aus diesem Ordner nach dist/.

Erstelle vor Änderungen an Build-Dateien eine Sicherung und prüfe die Änderungen in FiveM. Für größere Designänderungen, neue Komponenten oder React-Übersetzungen fordere die UI-Quellen an und erstelle einen neuen Build; diese Quelldateien sind nicht Teil der hier beschriebenen Lieferung.

Erscheinungsbild anpassen

Für umfangreiche Änderungen an Layout, Komponenten oder React-Texten verwendest du die UI-Quellen, falls sie separat bereitgestellt wurden. Die wichtigsten Einstiegspunkte sind:

ui/src/index.css: globale Variablen --tat-* für Farben, Schrift, Größen und Schatten.
ui/src/studio-theme.css: Variablen --cxg-* und Studio-Darstellung.
ui/src/components/: React-Komponenten und komponentenspezifische Stile.
ui/src/main.tsx: Importe von Outfit Variable und Geist Mono Variable.

Beginne mit den Theme-Variablen. Bei direkten Änderungen an Komponentenregeln müssen Fokus-, Fehler-, Lade- und Deaktiviert-Zustände erhalten bleiben. Ändere die Schrift in main.tsx, wenn du auch eine andere Schriftart verwenden möchtest; die zugehörigen Stile sind in den Schriftvariablen definiert.

Miniaturbilder und Grafiken

Die enthaltenen Vanilla-Miniaturbilder liegen in ui/public/ImagenesVanilla/ und werden in den Produktions-Build kopiert. Behalte die Namen und Pfade bei, die der Katalog erwartet. Von externen Packs bereitgestellte Bilder verbleiben in diesen Ressourcen; sie werden nicht automatisch in die UI kopiert.

FiveM lädt ui/dist/index.html und die zugehörigen Dateien aus ui/dist/, um die NUI anzuzeigen. Das Verzeichnis ui/dist/ wird generiert. Wenn du den Quellcode erhalten hast, ändere die Quelle und kompiliere erneut, statt minimierte Build-Dateien manuell zu bearbeiten.

Sprache

Config.Locale und Config.LocaleFallback in config.lua legen die Standardsprache der Lua-Nachrichten und der NUI für alle Spieler fest. Der Wert gilt nach einem Neustart von cxg-tattoos; er ist keine individuelle Option und kein Auswahlfeld in der NUI. Unterstützte Codes sind en, es, pt-BR, fr, de, it, pl, ru, tr, th und ar.

Eigene React-Bezeichnungen haben Wörterbücher in ui/src/i18n.tsx, sofern diese Quellen geliefert wurden. Englisch dient als Basis und deckt Schlüssel ohne Übersetzung ab; Arabisch aktiviert die RTL-Leserichtung. Eine Änderung von Config.Locale wählt eine verfügbare Sprache, während eine Änderung der Wörterbücher die enthaltenen UI-Übersetzungen anpasst. Das sind unterschiedliche Einstellungen.

UI-Quellen kompilieren

Diese Schritte gelten nur, wenn du den Quellordner ui/ mit package.json und package-lock.json erhalten hast. Sie erfordern Node.js und npm. Führe sie in ui/ aus:

Code

npm ci
npm run lint
npm run build

npm run lint prüft die TypeScript-Typen und npm run build erzeugt ui/dist/, dessen Inhalt FiveM verwendet. Verteile den aktualisierten Build zusammen mit der Ressource.

Kamera und Vorschau-Outfit

In config.lua kannst du die Kamera und das Outfit anpassen, das beim Öffnen des Studios angewendet wird: Config.CameraOffsets, Config.CameraFraming, Config.CameraFramingBySide, Config.CameraManualControls und Config.PreviewOutfit. Einzelheiten zu diesen Parametern findest du unter Konfiguration.