"use client"; import { useEffect, useState } from "react"; interface ScoreModalProps { score: number; // 0-100 onClose?: () => void; onReplay?: () => void; } interface Grade { letter: string; color: string; message: string; } function getGrade(score: number): Grade { if (score >= 95) { return { letter: "A+", color: "#FFD700", // Gold message: "Perfect! You're a Dance Legend! 🌟", }; } else if (score >= 90) { return { letter: "A", color: "#00FFD1", // Cyan message: "Amazing! Keep that energy! 💃", }; } else if (score >= 85) { return { letter: "A-", color: "#00FFD1", message: "Great job! Almost perfect! ✨", }; } else if (score >= 80) { return { letter: "B+", color: "#4ADE80", // Green message: "Good work! You've got moves! 🎵", }; } else if (score >= 75) { return { letter: "B", color: "#4ADE80", message: "Nice! Keep practicing! 🔥", }; } else if (score >= 70) { return { letter: "B-", color: "#FBBF24", // Yellow message: "Not bad! You're getting there! 💪", }; } else if (score >= 65) { return { letter: "C+", color: "#FBBF24", message: "Good effort! Keep going! 🎶", }; } else if (score >= 60) { return { letter: "C", color: "#F97316", // Orange message: "Keep practicing! You'll improve! 🌈", }; } else if (score >= 50) { return { letter: "C-", color: "#F97316", message: "Try again! Practice makes perfect! 💫", }; } else { return { letter: "D", color: "#EF4444", // Red message: "Don't give up! Everyone starts somewhere! 🎯", }; } } export default function ScoreModal({ score, onClose, onReplay }: ScoreModalProps) { const [animateScore, setAnimateScore] = useState(false); const [animateGrade, setAnimateGrade] = useState(false); const [animateMessage, setAnimateMessage] = useState(false); const [displayScore, setDisplayScore] = useState(0); const grade = getGrade(score); useEffect(() => { // Animate score counting up const duration = 1500; // 1.5 seconds const steps = 60; const increment = score / steps; let current = 0; let step = 0; const timer = setInterval(() => { step++; current = Math.min(score, current + increment); setDisplayScore(Math.round(current)); if (step >= steps) { clearInterval(timer); setDisplayScore(score); setAnimateScore(true); // Show grade after score animation setTimeout(() => setAnimateGrade(true), 300); // Show message after grade setTimeout(() => setAnimateMessage(true), 600); } }, duration / steps); return () => clearInterval(timer); }, [score]); return (

{/* Simple backdrop */}

{/* Modal Content with Suno Design */}

{/* Suno Background Image */}

{/* Gradient Overlay */}

{/* Content overlay */}

{/* Header with Suno Logo */}

Dancify

Dance Complete!

Here's how you did

{/* Score Display */}

{/* Glow effect */}

{displayScore}

points

{/* Grade Display */}

{/* Subtle glow */}

{grade.letter}

{/* Message */}

{grade.message}

{/* Action Buttons */}

{onReplay && ( )}

{/* Confetti effect for high scores */} {score >= 90 && animateGrade && (

{[...Array(30)].map((_, i) => (

✨

))}

)} {/* Sparkle falling animation */}

); }