Current Behavior
The [SYS_BADGES] section only mounts and displays the badges the user has actively earned.
Desired Behavior
We should display a visible grid/list of all possible badges a user can earn. If the user hasn't earned a specific badge, it should be displayed visually grayed out (opacity 0.4), with a subdued border, and perhaps an [LOCKED] text state.
Why?
Gamification relies on users knowing what they are missing! By showing grayed-out badges, users are incentivized to figure out how to unlock them.
Implementation Steps
- Maintain a master list of all valid badges in
badges.js (e.g. ['HOT_STREAK', 'SPEEDRUN', 'UP_LINK']).
- Map over the master list when rendering the profile.
- If
userData.badges.includes(badge), render normal bright colors.
- If
false, apply a .badge-locked CSS class which drastically lowers opacity and dims colors.
Current Behavior
The
[SYS_BADGES]section only mounts and displays the badges the user has actively earned.Desired Behavior
We should display a visible grid/list of all possible badges a user can earn. If the user hasn't earned a specific badge, it should be displayed visually grayed out (opacity
0.4), with a subdued border, and perhaps an[LOCKED]text state.Why?
Gamification relies on users knowing what they are missing! By showing grayed-out badges, users are incentivized to figure out how to unlock them.
Implementation Steps
badges.js(e.g.['HOT_STREAK', 'SPEEDRUN', 'UP_LINK']).userData.badges.includes(badge), render normal bright colors.false, apply a.badge-lockedCSS class which drastically lowers opacity and dims colors.