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

```powershell
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](https://docs.cxgstudios.com/docs/de/01-cxg-tattoos/03-configuracion.md).