fa56dfa77e
- Replace all kodo-* color classes across ~100 TSX files: kodo-void → background, kodo-ink → card, kodo-graphite → muted, kodo-steel → muted-foreground, kodo-cyan → primary, kodo-magenta → destructive, kodo-lime → success, kodo-red → destructive, kodo-gold → warning - Replace cyan-500, magenta-500, lime-500 default Tailwind colors with semantic equivalents (primary, destructive, success) - Fix WaveformVisualizer hardcoded hex colors to SUMI values - Delete global-effects.css (conflicting, redundant with index.css) Co-authored-by: Cursor <cursoragent@cursor.com>
79 lines
3 KiB
TypeScript
79 lines
3 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '../ui/card';
|
|
import { Achievement } from '../../types';
|
|
import { Lock, CheckCircle } from 'lucide-react';
|
|
|
|
interface AchievementCardProps {
|
|
achievement: Achievement;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export const AchievementCard: React.FC<AchievementCardProps> = ({
|
|
achievement,
|
|
compact = false,
|
|
}) => {
|
|
const isUnlocked = achievement.progress >= achievement.maxProgress;
|
|
const percentage = Math.min(
|
|
100,
|
|
(achievement.progress / achievement.maxProgress) * 100,
|
|
);
|
|
|
|
return (
|
|
<Card
|
|
variant={isUnlocked ? 'elevated' : 'default'}
|
|
className={`relative overflow-hidden transition-all group ${isUnlocked ? 'border-warning/30 bg-warning/5 hover:-translate-y-1 hover:shadow-xl' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`}
|
|
>
|
|
{/* Shine sweep animation for unlocked achievements */}
|
|
{isUnlocked && (
|
|
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
|
<div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12" />
|
|
</div>
|
|
)}
|
|
{isUnlocked && (
|
|
<div className="absolute top-2 right-2 text-warning animate-pulse">
|
|
<CheckCircle className="w-5 h-5" />
|
|
</div>
|
|
)}
|
|
{!isUnlocked && (
|
|
<div className="absolute top-2 right-2 text-muted-foreground">
|
|
<Lock className="w-4 h-4" />
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`flex ${compact ? 'flex-row items-center gap-4' : 'flex-col items-center text-center gap-4'}`}
|
|
>
|
|
<div
|
|
className={`rounded-full bg-gradient-to-br from-muted to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-warning w-16 h-16 text-3xl shadow-gold-glow' : 'border-border w-12 h-12 text-xl text-muted-foreground'}`}
|
|
>
|
|
{achievement.icon}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<h4
|
|
className={`font-bold truncate ${isUnlocked ? 'text-foreground' : 'text-muted-foreground'}`}
|
|
>
|
|
{achievement.name}
|
|
</h4>
|
|
<p className="text-xs text-muted-foreground line-clamp-2 mb-2">
|
|
{achievement.description}
|
|
</p>
|
|
|
|
{/* Progress */}
|
|
<div className="w-full bg-card h-1.5 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-warning' : 'bg-muted'}`}
|
|
style={{ width: `${percentage}%` }}
|
|
></div>
|
|
</div>
|
|
<div className="flex justify-between text-xs mt-1 font-mono">
|
|
<span className={isUnlocked ? 'text-warning' : 'text-muted-foreground'}>
|
|
{achievement.progress} / {achievement.maxProgress}
|
|
</span>
|
|
<span className="text-muted-foreground">+{achievement.xpReward} XP</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|