feat(ui): refactor gamification UI for role awareness and remove floaters

2026-02-22 01:24:26 +05:30
parent 058b5bb217
commit b8a20144d3
5 changed files with 668 additions and 96 deletions
@@ -0,0 +1,90 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Star, Trophy, Zap } from 'lucide-react';
+import { useGamification } from '../../../context/GamificationContext';
+
+const LevelUpModal = () => {
+    const { levelUpData } = useGamification();
+
+    return (
+        <AnimatePresence>
+            {levelUpData && (
+                <div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none">
+                    {/* Backdrop glow */}
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm pointer-events-auto"
+                    />
+
+                    <motion.div
+                        initial={{ scale: 0.5, opacity: 0, y: 50 }}
+                        animate={{ scale: 1, opacity: 1, y: 0 }}
+                        exit={{ scale: 0.8, opacity: 0, y: -50 }}
+                        transition={{ type: "spring", stiffness: 300, damping: 20 }}
+                        className="relative z-10 w-full max-w-sm"
+                    >
+                        {/* Celebration Ring */}
+                        <motion.div
+                            className="absolute inset-x-0 -top-12 h-40 bg-gradient-to-b from-yellow-400/20 to-transparent blur-2xl rounded-t-full"
+                            animate={{ opacity: [0.5, 1, 0.5] }}
+                            transition={{ repeat: Infinity, duration: 2 }}
+                        />
+
+                        <div className="bg-slate-900 border-2 border-yellow-500/50 rounded-3xl p-8 shadow-[0_0_50px_rgba(234,179,8,0.3)] relative overflow-hidden pointer-events-auto text-center">
+
+                            {/* Rotating background ray effect */}
+                            <motion.div
+                                className="absolute inset-0 z-0 opacity-20"
+                                animate={{ rotate: 360 }}
+                                transition={{ repeat: Infinity, duration: 20, ease: "linear" }}
+                                style={{
+                                    background: 'repeating-conic-gradient(from 0deg, transparent 0deg 15deg, #eab308 15deg 30deg)'
+                                }}
+                            />
+
+                            <div className="relative z-10 flex flex-col items-center">
+                                <motion.div
+                                    initial={{ scale: 0 }}
+                                    animate={{ scale: 1, rotate: [0, -10, 10, -10, 0] }}
+                                    transition={{ delay: 0.2, type: "spring", stiffness: 200, damping: 10 }}
+                                    className="w-24 h-24 bg-gradient-to-br from-yellow-300 to-yellow-600 rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(234,179,8,0.8)] mb-6 border-4 border-slate-900"
+                                >
+                                    <Star className="w-12 h-12 text-slate-900 fill-slate-900" />
+                                </motion.div>
+
+                                <h2 className="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300 mb-2 uppercase tracking-wide">
+                                    Level Up!
+                                </h2>
+
+                                <div className="text-xl font-bold text-yellow-400 mb-6 flex justify-center items-center gap-2">
+                                    <Zap className="w-5 h-5 fill-current" />
+                                    Level {levelUpData.newLevel} Reached
+                                    <Zap className="w-5 h-5 fill-current" />
+                                </div>
+
+                                {levelUpData.titleChanged && (
+                                    <motion.div
+                                        initial={{ opacity: 0, y: 20 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        transition={{ delay: 0.5 }}
+                                        className="bg-slate-800/80 border border-slate-700 rounded-xl p-4 w-full shadow-inner"
+                                    >
+                                        <div className="text-xs text-slate-400 uppercase tracking-widest font-bold mb-1">New Rank Unlocked</div>
+                                        <div className="flex items-center justify-center gap-2 text-2xl font-black text-white">
+                                            <Trophy className="w-6 h-6 text-yellow-500" />
+                                            {levelUpData.newTitle}
+                                        </div>
+                                    </motion.div>
+                                )}
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+};
+
+export default LevelUpModal;