✅Public TLBB GUI Web Renderer

🖥️ Ứng dụng Web Render & Edit XML Giao Diện TLBB

Ứng dụng web giúp render và chỉnh sửa file XML UI của game Thiên Long Bát Bộ (TLBB) thành HTML/CSS/JavaScript trực quan.

Do có nhiều anh em hỏi mua quá, mà project còn chưa hoàn thiện + mình bận vọc game khác nên public luôn cho cộng đồng TLBB. Chúc anh em dev TLBB ngày càng lớn mạnh và bớt bị lùa gà 😅.

---

📂 1. Chuẩn bị cấu trúc thư mục game

Thêm đúng các thư mục sau vào thư mục data của tool:

• data\Config\StrDic.txt → chứa từ điển chuỗi giao diện.

• data\Interface → chứa các file XML layout của game.

• data\Material → chứa toàn bộ tài nguyên hình ảnh UI.

---

🚀 2. Khởi chạy ứng dụng

Chỉ cần:

• Mở index.html bằng Chrome / Firefox / Edge
  hoặc

• Dùng VSCode → Live Server

---

✨ 3. Tính năng chính

🎯 Core Features

• XML Rendering: Render layout TLBB XML → HTML interactive

• Real-time Editing: Move/resize elements với auto-update

• Property Management: Edit & save property theo đúng format game

• XML Export: Copy XML đã format chuẩn TLBB

• Visual Editor: Drag-drop, snapping, resize handles

🎨 Enhanced GUI

• 3-panel layout: XML Tree | Canvas | Properties

• Canvas: zoom, pan, chọn element, transform

• Properties panel: cập nhật theo thời gian thực

• Dark theme chuyên nghiệp

• Visual transform feedback

• Viền màu khác nhau theo cấp độ hierarchy

• Debug mode hiển thị level từng node

📊 TLBB Format Support

• UnifiedPosition / UnifiedSize chuẩn:
  {{rel, abs}, {rel, abs}} (6 chữ số thập phân)

• Property validation

• Đồng bộ 2 chiều: Bounds ↔ Properties

• Hỗ trợ AbsolutePosition / AbsoluteSize (fallback)

🔧 Technical Features

Real-time Property Updates

• Resize → auto update UnifiedPosition/Size

• Thay đổi property → áp dụng ngay lên canvas

• Lưu → XML + localStorage

• Kiểm tra format

Advanced XML Processing

• Parser thông minh, tự xử lý lỗi

• Sinh XML sạch, không rác

• Lưu history vào localStorage

• Undo/Redo

---

🚀 4. Hướng dẫn sử dụng

🟢 Cơ bản

1. Load XML: mở file hoặc paste vào

2. Select element: click trên canvas hoặc tree

3. Edit properties: chỉnh các giá trị bên panel

4. Transform: kéo thả hoặc resize

5. Save changes

6. Export XML → copy vào clipboard

🔵 Nâng cao

• Debug hierarchy: hiển thị cấp độ phân cấp

• Indicators:

  • Có icon ▼ nếu element có children

  • Hiển thị số lượng con

  • Viền màu theo cấp độ

• Multi-level selection: highlight cả cây phân cấp

---

🛠️ 5. Cấu trúc thư mục module

tlbb_web_ui/
├── index.html           # File chạy chính
├── css/
│   ├── main.css
│   └── property-panel.css
├── js/
│   ├── main.js          # Toàn bộ logic core
│   └── utils/           # Parser, renderer, tính toán
└── data/                # File test và resource

---

📝 6. Implementation Notes

🔑 Các hàm quan trọng

1. _updateElementPropertiesFromBounds(element)

• Đồng bộ bounds → properties

• Auto-update UnifiedPosition / UnifiedSize

• Format: {{rel,abs},{rel,abs}}

2. _applyPropertiesToBounds(element)

• Properties → visual bounds

• Parse UnifiedPosition/Size

• Hỗ trợ AbsolutePosition/Size

3. _handleSaveButton(panel, element)

• Lưu nâng cao với feedback

• Validation + báo lỗi

• Re-render canvas

• Lưu history & localStorage

4. generateXMLFromElements(elements)

• Xuất XML sạch đúng chuẩn TLBB

• Tự loại bỏ test elements

• Copy-to-clipboard

---

📐 Property Format Support

• UnifiedPosition
  {{0.150000,150.000000},{0.200000,200.000000}}

• UnifiedSize
  {{0.350000,350.000000},{0.180000,180.000000}}

• AbsolutePosition
  {100.000000,150.000000}

• AbsoluteSize
  {200.000000,100.000000}

• Precision: 6 số thập phân

---

🔗 GitHub Source Code

👉 https://github.com/gamedevgs/TLBB_GUI_RENDER_XML

---

⚠️ Một số hạn chế hiện tại

❗ Kéo thả thêm component mới chưa có
❗ Thuật toán resize còn sai lệch nhẹ
❗ Chủ yếu dùng để xem & sửa XML có sẵn
❗ Anh em nào code tốt có thể PR lên repo giúp hoàn thiện hơn