25 lines
1.8 KiB
Markdown
25 lines
1.8 KiB
Markdown
# Rank guide and badge art
|
|
|
|
## Outcome
|
|
|
|
Replace the profile rank help dialog with a standalone, responsive visual guide at `/rank-guide`. The profile help control opens the guide in a new tab. Show every current overall level and activity badge milestone with its transparent PNG, label, and earning requirement. Profile badge collections continue to show earned badges only.
|
|
|
|
## Design direction
|
|
|
|
- Keep the association's teal surface and border tokens, with cobalt, cyan, and gold drawn from the approved glossy medal artwork.
|
|
- Lead with a visual five-level progression strip, then show four activity ladders as image-led rows.
|
|
- Keep scoring and reversal rules in short supporting blocks; no text is embedded in badge images.
|
|
- Make larger overall-level art distinct from activity badges, and keep the layout RTL and responsive.
|
|
|
|
## Implementation tasks
|
|
|
|
1. Add an explicit catalog mapping API badge IDs to the 18 generated PNG assets, labels, milestones, and concise explanations.
|
|
2. Replace the profile help dialog with an accessible new-tab link to `/rank-guide` and show the user's current overall badge larger in the rank card.
|
|
3. Render earned badge artwork in signed-in and public profiles without exposing unearned badges.
|
|
4. Build `/rank-guide` with all five overall levels, all activity milestones, scoring rules, and short guidance on reversals.
|
|
5. Verify assets have transparency, lint affected components, and run a production build.
|
|
|
|
## Backend contract
|
|
|
|
The backend already returns current levels, points per activity, activity badge thresholds, and earned badge IDs. This page uses the existing contract and current rules; it does not require a migration or a new scoring API. Keep frontend asset IDs aligned with the backend's current IDs (`post-*`, singular `comment-*`, `attendance-*`, `likes-*`, and `level-*`).
|