Tuồng Việt Nam - Nền Tảng Tương Tác

Nền tảng web tương tác tích hợp AI nhằm số hoá và truyền tải nghệ thuật Tuồng Việt Nam theo cách hiện đại, trực quan và cá nhân hoá.

Cấu trúc thư mục

TestYTuongEXE/
├── public/                 # Tài nguyên tĩnh (Vite serve từ /)
│   ├── masks/              # Ảnh mặt nạ (PNG)
│   ├── models/             # File 3D (GLB, STL)
│   │   ├── masks/          # Mô hình mặt nạ
│   │   └── objects/        # Vật thể trong cảnh
│   └── README.md
├── src/
│   ├── components/         # React components (.jsx + .css)
│   ├── data/               # Dữ liệu (tuongData, sceneData, costumeData)
│   ├── styles/             # CSS toàn cục (index.css, App.css)
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js
└── README.md

Tính năng

• 🎭 Bộ Sưu Tập Mặt Nạ: Khám phá các loại mặt nạ Tuồng với thông tin chi tiết
• 👤 Nhân Vật Tuồng: Tìm hiểu về các nhân vật nổi tiếng và trang phục của họ
• 📅 Lịch diễn (MVP): Danh sách vở, ngày‑giờ, địa điểm — lọc theo thành phố và khoảng thời gian
• 🤖 AI Giải Thích: Tương tác với AI để hiểu sâu hơn về ý nghĩa, lịch sử và vai trò
• 📷 Trải Nghiệm AR: Thử nghiệm mặt nạ Tuồng với camera của bạn
• 🎪 Theater Manager: Quản lý rạp hát và địa điểm

Cài đặt (một lệnh)

Mac / Linux: mở terminal trong thư mục dự án, chạy:

./setup.sh

Windows: double-click file setup.bat hoặc mở CMD trong thư mục dự án và chạy setup.bat.

Script sẽ kiểm tra Node.js và chạy npm install để cài toàn bộ dependencies. Nếu chưa có Node.js, cài từ nodejs.org (bản LTS).

Cách khác (khi đã có Node/npm):

npm install
# hoặc
npm run setup

Chạy ứng dụng

npm run dev

Ứng dụng chạy tại http://localhost:5173

Build

npm run build

Công nghệ

• React 18
• Vite
• Framer Motion (animations)
• Three.js / React Three Fiber (3D)
• CSS3 với backdrop-filter
• Supabase (authentication & database)

Validation & business rules (Lịch diễn)

• Event phải có: id, title, startDatetime (ISO), timezone, venue.{id,name,city}. Các entry không hợp lệ sẽ bị bỏ qua và logged.
• Event status: one of scheduled|canceled|postponed|draft.
• Derived statuses: ongoing, soon (within 48h), upcoming, past; canceled luôn ưu tiên hiển thị.
• Filters are URL-sync'd and validated (invalid date ranges are rejected in the UI).
• For production: migrate events to a DB (Postgres/Supabase) and validate at API boundary.

Lưu ý

• Đây là demo; AI được mô phỏng với dữ liệu tĩnh
• Tính năng AR dùng camera trình duyệt; cần cấp quyền camera

Documentation

• docs/THEATER_MANAGER_GUIDE.md - Hướng dẫn Theater Manager
• docs/DATABASE_DESIGN.md - Thiết kế database
• docs/HUONG_DAN_DU_LIEU_VA_TRIEN_KHAI.md - Hướng dẫn dữ liệu và triển khai