# อินเทอร์เฟซ ภาษา และการแสดงตัวอย่าง

อินเทอร์เฟซรอยสักโหลดจากไฟล์ที่สร้างไว้ใน `ui/dist/` แพ็กเกจมี build ดังกล่าวและภาพขนาดย่อ vanilla ใน `ui/public/ImagenesVanilla/`; อย่าคาดว่าแพ็กเกจจะมีซอร์สโค้ด React หรือไฟล์พัฒนาของ `ui/`

## แก้ไขไฟล์ที่ให้มา

หากต้องการปรับแต่งเล็กน้อย คุณแก้ไขไฟล์ที่มากับรีซอร์สได้:

- **สีและแบบอักษร:** เปิด `ui/dist/assets/index-*.css` แล้วเปลี่ยนค่าของตัวแปร `--tat-*` และ `--cxg-*` คงชื่อ CSS ปัจจุบันไว้ เพราะหน้า NUI อ้างอิงไฟล์นี้ CSS นี้ผ่านการคอมไพล์แล้วและอาจเปลี่ยนเมื่อได้รับ build ใหม่ สำรองการปรับแต่งของคุณไว้
- **โลโก้:** แทนที่ `ui/dist/assets/cxg-logo-CmIGK6Fh.png` โดยคงชื่อและเส้นทางให้ตรงทุกประการ เพราะเป็นส่วนหนึ่งของการอ้างอิงใน JavaScript ที่สร้างแล้ว รักษาสัดส่วนและความโปร่งใสให้เหมาะกับพื้นที่แสดงผล
- **ภาพขนาดย่อ vanilla:** แทนที่ไฟล์ชื่อเดียวกันใน `ui/dist/ImagenesVanilla/` เพื่อให้การเปลี่ยนแปลงปรากฏในเวอร์ชันที่ใช้งานจริง หากมีสำเนาไฟล์ที่ตรงกันใน `ui/public/ImagenesVanilla/` ให้แทนที่ด้วย เพราะ build ใหม่จะคัดลอกไฟล์จากโฟลเดอร์นั้นไปยัง `dist/`

สำรองข้อมูลก่อนแก้ไฟล์ build และตรวจสอบการเปลี่ยนแปลงใน FiveM หากต้องการเปลี่ยนดีไซน์ครั้งใหญ่ เพิ่ม components หรือแปลข้อความใน React ให้ขอซอร์ส UI แล้วสร้าง build ใหม่ ไฟล์ซอร์สเหล่านั้นไม่รวมอยู่ในชุดส่งมอบที่อธิบายไว้ที่นี่

## ปรับแต่งรูปลักษณ์

หากต้องการเปลี่ยน layout, components หรือข้อความ React อย่างมาก ให้ใช้ซอร์ส UI หากได้รับแยกต่างหาก จุดหลักที่ใช้แก้ไขมีดังนี้:

- `ui/src/index.css`: ตัวแปร global `--tat-*` สำหรับสี แบบอักษร ขนาด และเงา
- `ui/src/studio-theme.css`: ตัวแปร `--cxg-*` และรูปแบบของสตูดิโอ
- `ui/src/components/`: components React และสไตล์เฉพาะของแต่ละ component
- `ui/src/main.tsx`: การ import Outfit Variable และ Geist Mono Variable

เริ่มจากแก้ตัวแปร theme การแก้กฎของ component โดยตรงต้องคงสถานะ focus, error, loading และ disabled ไว้ เปลี่ยนแบบอักษรใน `main.tsx` หากต้องการใช้ฟอนต์อื่นด้วย ส่วนสไตล์ที่เรียกใช้ฟอนต์กำหนดไว้ในตัวแปรแบบอักษร

## ภาพขนาดย่อและรูปภาพ

ภาพขนาดย่อ vanilla ที่ให้มาอยู่ใน `ui/public/ImagenesVanilla/` และจะถูกคัดลอกเข้า production build คงชื่อและเส้นทางที่แคตตาล็อกเรียกใช้ไว้ รูปภาพจากแพ็กภายนอกจะอยู่ในรีซอร์สเหล่านั้น และจะไม่ถูกคัดลอกเข้า UI โดยอัตโนมัติ

FiveM โหลด `ui/dist/index.html` และไฟล์ใน `ui/dist/` เพื่อแสดง NUI ไดเรกทอรี `ui/dist/` เป็นผลลัพธ์ที่สร้างขึ้น หากคุณได้รับซอร์สโค้ด ให้แก้ซอร์สและคอมไพล์ใหม่ แทนการแก้ไฟล์ build ที่ถูก minify ด้วยตนเอง

## ภาษา

`Config.Locale` และ `Config.LocaleFallback` ใน `config.lua` ตั้งค่าภาษาเริ่มต้นของข้อความ Lua และ NUI สำหรับผู้เล่นทุกคน ค่าจะมีผลหลังรีสตาร์ต `cxg-tattoos`; ไม่ใช่ตัวเลือกเฉพาะบุคคลหรือเมนูเลือกภาษาใน NUI รหัสภาษาที่รองรับคือ `en`, `es`, `pt-BR`, `fr`, `de`, `it`, `pl`, `ru`, `tr`, `th` และ `ar`

ข้อความของ React มีพจนานุกรมใน `ui/src/i18n.tsx` หากได้รับซอร์สเหล่านั้น ภาษาอังกฤษเป็นภาษาหลักและใช้แทน key ที่ไม่มีคำแปล ภาษาอาหรับเปิดใช้ทิศทาง RTL การเปลี่ยน `Config.Locale` เป็นการเลือกภาษาที่มีอยู่ ส่วนการแก้พจนานุกรมเป็นการปรับคำแปลที่ UI มีอยู่ เป็นการตั้งค่าคนละส่วนกัน

## คอมไพล์ซอร์ส UI

ขั้นตอนเหล่านี้ใช้เฉพาะเมื่อคุณได้รับโฟลเดอร์ซอร์ส `ui/` ที่มี `package.json` และ `package-lock.json` ต้องใช้ Node.js และ npm ให้รันจาก `ui/`:

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

`npm run lint` ตรวจสอบชนิดข้อมูล TypeScript และ `npm run build` สร้าง `ui/dist/` ซึ่งเป็นเนื้อหาที่ FiveM ใช้ ให้เผยแพร่ build ที่อัปเดตพร้อมกับรีซอร์ส

## กล้องและชุดสำหรับการแสดงตัวอย่าง

`config.lua` ใช้ปรับกล้องและชุดที่ใช้ขณะเปิดสตูดิโอได้: `Config.CameraOffsets`, `Config.CameraFraming`, `Config.CameraFramingBySide`, `Config.CameraManualControls` และ `Config.PreviewOutfit` ดูรายละเอียดพารามิเตอร์เหล่านี้ใน [การตั้งค่า](https://docs.cxgstudios.com/docs/th/01-cxg-tattoos/03-configuracion.md)