Vocab V2 Concept: Set View Leaderboard ("The Islet Competition")

Vocab V2 Concept: Set View Leaderboard (“The Islet Competition”)

1. Metaphor & Philosophy (Triết lý & Hình ảnh)

• Context: “The Islet” (Hòn đảo nhỏ) - Nơi user học chi tiết từng Set từ vựng (Unit, Topic).
• Theme: “Cuộc đua trong lồng kính” (The Greenhouse Race).
  • Khác với Global là “đường trường”, Set View là những chặng đua ngắn (Sprint).
  • Mục tiêu: Ai chăm sóc khu vườn nhỏ này nhanh nhất và đẹp nhất?

2. The Two Paths (Hai Con Đường Đua)

Hệ thống chia làm 2 tab thi đấu riêng biệt, phục vụ 2 kiểu người chơi khác nhau:

A. Tab 1: “Top Cultivators” (Những người gieo trồng)

Đây là BXH chính (Default), dành cho Achievers - những người muốn hoàn thành mục tiêu.

• Cảm giác (Vibe): Sôi động, Tốc độ, Năng suất.
• Metric Chính: Mastery % (Tỉ lệ thành thạo của Set).
  • Định nghĩa: % số từ đạt trạng thái “Mastered” (hoặc gần Mastered theo ngưỡng quy định).
• Yếu tố “Race” (Cuộc đua):
  • Vì Mastery % bị giới hạn trần (100%), nên Thời gian (Time) là vua.
  • Tie-breaker: Ai đạt 100% sớm hơn (theo timestamp) sẽ xếp trên.
  • Visual: User đạt 100% sẽ có icon ⚡️ (Bolt) kèm thời gian “Finished at…”.

B. Tab 2: “Sharpshooters” (Xạ thủ tỉ mỉ)

Đây là BXH phụ, dành cho Perfectionists - những người ám ảnh sự hoàn hảo.

• Cảm giác (Vibe): Tĩnh lặng, Uy tín, Chất lượng cao.
• Metric Chính: Average Accuracy % (Độ chính xác trung bình).
  • Định nghĩa: (Số câu đúng / Tổng số câu đã làm) trong phạm vi Set đó.
• Rào cản (Barrier): Phải làm tối thiểu 20 câu hỏi mới được xuất hiện (chống việc làm 1 câu đúng 100% rồi “trốn”).

3. Visual Concept (Mô tả giao diện)

Layout: “The Widget”

• Format: Floating Card / Modal (không phải full-screen page).
• Kích thước: Max-width 400px, bo góc lớn (32px), tạo cảm giác như một “bảng phi tiêu” hoặc “bảng thông báo” treo trong vườn.

Visual Elements

1. Ranking Header (Top 3):
   • Không dùng list dọc. Top 3 đứng trên bục (Podium) hoặc Avatar to hơn.
   • Crown/Medal: Vàng, Bạc, Đồng thiết kế style low-poly/3D nhẹ.
2. The List (Rank 4+):
   • List dọc, compact.
   • Me-Highlight: Dòng của User luôn được neo (sticky) hoặc highlight bằng background brand-subtle.
3. Metrics Display:
   • Cultivators: Progress Bar + % + Time Icon (nếu 100%).
   • Sharpshooters: Số % to, font Monospace/Digital (tạo cảm giác chính xác).

4. Interaction Flow (Luồng tương tác)

1. Tab Switch:
   • Chuyển đổi giữa 2 tab mượt mà (Slide animation).
   • Màu sắc theme đổi nhẹ: Cultivators (Xanh lá/Năng lượng) <-> Sharpshooters (Xanh dương/Tập trung).
2. Review Mode:
   • Click vào User khác -> Xem “Mini Profile” (Snapshot vườn của họ).
   • Nút “Challenge” (Tương lai): Gửi lời thách đấu (Ghost mode).

5. Logic Mapping (Theo Mechanics)

Element	Data Field	Logic
Rank	calculated_rank	Sort theo Metric -> Timestamp.
Score (Cultivators)	set_mastery_rate	(Items $\ge$ threshold) / Total Items.
Tie-breaker	last_mastery_update_at	Timestamp khi user đạt mốc điểm hiện tại.
Score (Sharpshooters)	set_accuracy	correct_count / total_attempt.
Condition	valid_attempts	Only show if total_attempt > 20.