diff --git a/src/components/gamification/BadgeDisplay.tsx b/src/components/gamification/BadgeDisplay.tsx index e53a789..47db67e 100644 --- a/src/components/gamification/BadgeDisplay.tsx +++ b/src/components/gamification/BadgeDisplay.tsx @@ -4,6 +4,7 @@ import { useState } from "react"; import { Badge } from "@/types"; import { BADGE_TEMPLATES, + BadgeRequirement, RARITY_COLORS, RARITY_LABELS, getBadgeTemplate, @@ -24,6 +25,27 @@ interface BadgeCardProps { onClick?: () => void; } +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`; + case "consistency": + return `Maintain consistent eco-friendly activity tracking`; + default: + return "Complete the requirement to unlock this badge"; + } +} + function BadgeCard({ badge, isEarned, onClick }: BadgeCardProps) { const template = getBadgeTemplate(badge.id); const rarity = template?.rarity || "common"; @@ -56,10 +78,7 @@ function BadgeCard({ badge, isEarned, onClick }: BadgeCardProps) { - This badge is earned by achieving a total CO₂ reduction of at least{" "} - {" "} - {badge.requirement.threshold}% over a {badge.requirement.period}{" "} - period. + {getBadgeRequirementDescription(badge.requirement)} }