Concept UI: The Living Knowledge Forest (Rừng Tri Thức Sống)

Core Philosophy: Biến hàng ngàn con số khô khan (Vocab Data) thành một hệ sinh thái tự nhiên, nơi sự chăm chỉ của người học quyết định sự sống của khu rừng.

1. Visual Rules: Quy tắc Sinh học (Bio-Visualization)

Giao diện sử dụng góc nhìn Isometric (2.5D) hoặc Top-down 3D để bao quát “gia tài” từ vựng. Ngoại hình cây được map trực tiếp từ dữ liệu:

A. Kích thước & Hình thái (Growth Stage)

Phản ánh chỉ số Fluency và Success Count.

Level	Visual Metaphor	Logic Condition	Status	Description
🟤 Hạt giống	Level 0: Seed	F = 0	Chưa học / Đã héo. Từ về 0, phải gieo lại.
Level 1-2 (Mầm)	Cây bụi thấp, thân mềm (Sprout).	F > 0 (New / Growing)
Level 3-4 (Cây)	Cây thân gỗ, tán lá bắt đầu rộng (Sapling).	F_peak >= Threshold
Level 5 (Hoa)	Cổ thụ khổng lồ, hoa rực rỡ/quả phát sáng.	Status = Mastery

B. Màu sắc & Sức khỏe (Health State)

Phản ánh chỉ số Decay Rate và Last Review.

Trạng thái	Visual	Logic Condition
Khỏe mạnh	🍃 Lá xanh tươi, đung đưa trong gió.	F >= Threshold
Đang khát	🍂 Lá chuyển vàng thu, rũ xuống.	0 < F < Threshold
Héo (Withered)	🥀 Cây khô héo, rụng lá, thân xám. 💧 Icon “Giọt nước” báo động đỏ.	F = 0 (Cần trồng lại)

C. Đa dạng loài (Species by Skill)

Để phân biệt loại từ vựng (Skill Tag):

• Speaking Words: 🌳 Cây tán tròn, mềm mại (Sồi/Bàng) -> Tượng trưng sự trôi chảy.
• Writing Words: 🌲 Cây lá kim, dáng nhọn (Thông/Tùng) -> Tượng trưng sự chính xác, sắc bén.
• Reading/Listening: 🌿 Cây bụi nhiều tầng hoặc dây leo -> Tượng trưng sự kết nối ngữ nghĩa.
• Độ khó ($F_{base}$):
  • Từ dễ: Cây mọng nước, thân to (Dễ sống).
  • Từ khó: Hoa mong manh, dây leo (Đẹp nhưng khó chiều).

---

2. Môi trường & Khí hậu (Atmosphere)

• Bố cục (Layout): Không xếp Grid. Sử dụng Poisson Disk Sampling để rải cây tự nhiên. Các từ đồng nghĩa (Synonyms) sẽ mọc cụm lại gần nhau (Magnetic Clustering).
• Thời tiết (Streak):
  • ☀️ Nắng đẹp: User học đều đặn (Streak cao).
  • im Sương mù/Mưa: User bỏ học (Decay tăng).
• Chu kỳ Ngày/Đêm:
  • Ban đêm, các cây Mastery (Nở hoa) sẽ phát sáng (Glow), tạo cảm giác “Thành phố đom đóm” lung linh -> Sense of Progress.

---

3. Trải nghiệm Tương tác (UX Flow)

Structure Overview (3-Part UI)

• Header (Control View): Chứa các nút chuyển đổi chế độ hiển thị (Growth vs Decay) và Reset Camera.
• Filter Bar: Thanh điều hướng dạng pills (All, Sapling, Flowering, Needs Care). Khi chọn, các cây không thuộc nhóm sẽ ẩn đi hoàn toàn (Scale = 0).
• Stats Panel: Khu vực hiển thị chỉ số quan trọng (Total, Health, Urgent) ở góc dưới trái.

Chế độ Chăm sóc (Random Fly-to)

• Action: Click vào chỉ số “Urgent” trên Stats Panel.
• Effect: Camera bay ngẫu nhiên đến một cây đang trong tình trạng báo động (Red/Brown).
• Feedback: Trả lời ĐÚNG -> Nước tưới xuống -> Cây chuyển Nâu sang Xanh.

Chế độ Khám phá (Interactive)

• Hover: Hiện Tooltip (Từ vựng + Thanh Fluency).
• Click: Mở Flashcard chi tiết.

Post-Learning UX (Sau khi học)

• Immediate Feedback: Hiển thị thông báo ”✨ Memory strengthened!” ngay sau khi hoàn thành bài tập (Tưới cây).
• Recent Items Dock:
  • Vị trí: Góc dưới bên phải (Bottom Right), cố định trên màn hình.
  • Chức năng: Hiển thị các chấm tròn (Color-coded theo Level) đại diện cho các từ vừa tương tác.
  • Tác dụng: Giúp truy cập nhanh lại các từ vừa học mà không cần tìm kiếm trong rừng.

SRS & Unlock Mechanics

• Saturation (Bão hòa):
  • Nếu học 1 từ quá nhiều lần liên tiếp -> Cây bị “Bão hòa” (Saturated).
  • Effect: Action Button bị khóa, hiển thị đếm ngược (VD: “Unlocks in 5m”).
  • Unlock: Chờ hết thời gian (5 phút) HOẶC tưới nước cho 3 cây xung quanh (Neighbor Interaction) để mở khóa sớm.
• True Modal:
  • Khi làm bài tập (Exercise Modal), toàn bộ tương tác phía sau (3D Scene, Canvas) bị khóa hoàn toàn.
  • Bắt buộc hoàn thành bài hoặc bấm nút đóng (X) để thoát. Tránh bấm nhầm ra ngoài.

---

4. Technical Stack Proposal

Để render >10.000 cây mượt mà (60fps), loại bỏ DOM, sử dụng WebGL.

Recommend: React Three Fiber (R3F)

• Structure: React-based, dễ maintain.
• Perf: Sử dụng <InstancedMesh /> để clone 1 model cây da ngàn bản.
• Physics: Dùng react-spring cho animation cây lớn lên.
• Layout: poisson-disk-sampling (JS lib) để tính tọa độ cây.

Fallback: PixiJS (2D)

• Chỉ dùng nếu muốn style Game Pixel Art / Stardew Valley.

---

5. References (Logic Source)

• Data Model: Vocab v2/Core Logic/VOCV2_Data_Model.md (Nguồn gốc F, D).
• Growth Logic: Vocab v2/Core Logic/VOCV2_Mechanism_Exlpained.md (6 Stages).