BadgeCollectionScreen
Component Detail
User Interface
medium complexity
mobile
0
Dependencies
0
Dependents
2
Entities
0
Integrations
Description
Full-screen view displaying all badges a peer mentor has earned or can earn, organized into locked and unlocked states. Each badge tile shows the badge image, name, and a short description of the criteria. Tapping an unlocked badge opens a detail overlay; locked badges show grayed-out art with a progress hint.
badge-collection-screen
Sources & reasoning
Statusbadges are explicitly named alongside the Wrapped concept in workshop output at line 76. The priority matrix (line 149) places the gamification cluster as NICE TO HAVE in Phase 3. The Phase 3 roadmap at line 353 groups badges with Wrapped and Advantage Calculator, normalizing to v1.1.
-
docs/source/likeperson.md · line 76Tre organisasjoner er inspirert av Spotify Wrapped og ønsker en funksjon som viser likepersonens bidrag over tid - «Din likepersonsårek». Målet er å gi frivillige stolthet og motivasjon, og gjøre usynlig innsats synlig. Også nevnt: «Årets koordinator
-
docs/source/likeperson.md · line 149| Gamification / Spotify Wrapped | ✓ | ✓ | - | ✓ | ✓ | NICE TO HAVE | 3 |
-
docs/source/likeperson.md · line 353Gamification / «Ditt likepersonsår» (Wrapped, badges, Advantage Calculator)
Responsibilities
- Render the complete badge grid with locked/unlocked visual states
- Display progress indicators toward the next locked badge threshold
- Navigate to badge detail overlay on selection
- Refresh badge data when the screen receives focus after background activity
Interfaces
loadBadges(mentorId: string): Promise<BadgeViewModel[]>
renderBadgeGrid(badges: BadgeViewModel[]): void
openBadgeDetail(badgeId: string): void
Related Data Entities (2)
Data entities managed by this component