Fix badge tooltip content to support all requirement types #47
Description
Problem
The badge tooltips currently show hardcoded content that only works for total_reduction type badges:
This badge is earned by achieving a total CO₂ reduction of at least{" "}
{badge.requirement.threshold}% over a {badge.requirement.period} period.
This breaks for other badge types because:
Not all requirements have a period property
Different requirement types need different explanations
Badge Requirement Types
We have 6 different requirement types defined in constants/badges.ts:
total_reduction - Reduce CO₂ by X% over a period
streak_days - Log activities for X consecutive days
activity_limit - Keep specific activity under X units per period
tips_applied - Apply X eco-friendly tips
consistency - General consistency tracking
milestone - Complete X days of tracking
Solution
Create a helper function that generates appropriate tooltip text based on badge.requirement.type:
function getBadgeRequirementDescription(requirement: BadgeRequirement): string {
switch (requirement.type) {
case 'total_reduction':
return Reduce your ${requirement.period} CO₂ footprint by ${requirement.threshold}%;
case 'streak_days':
return Log activities for ${requirement.threshold} consecutive days;
case 'milestone':
return Complete ${requirement.threshold} day${requirement.threshold > 1 ? 's' : ''} of tracking;
case 'activity_limit':
return Keep ${requirement.activity} under ${requirement.threshold} ${requirement.period};
case 'tips_applied':
return Apply ${requirement.threshold} eco-friendly tips;
default:
return 'Complete the requirement to unlock this badge';
}
}
Location
File: src/components/gamification/BadgeDisplay.tsx around line 58-62
Related
PR #41
Issue #19