@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/waka-achievement-unlock/index.tsx

@@ -0,0 +1,716 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Trophy, Star, Crown, Gem, Shield, Zap, Award, Target } from "lucide-react"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type AchievementRarity = "common" | "rare" | "epic" | "legendary"
+
+export interface AchievementData {
+  /** Unique identifier */
+  id: string
+  /** Achievement title */
+  title: string
+  /** Achievement description */
+  description: string
+  /** Icon name or custom React node */
+  icon?: React.ReactNode
+  /** Rarity level */
+  rarity?: AchievementRarity
+  /** XP reward */
+  xpReward?: number
+  /** Optional image URL for badge */
+  imageUrl?: string
+  /** Unlock date */
+  unlockedAt?: Date
+}
+
+export interface WakaAchievementUnlockProps {
+  /** Achievement data */
+  achievement: AchievementData
+  /** Whether the achievement is unlocked (triggers animation) */
+  isUnlocked?: boolean
+  /** Audio source URL for unlock sound */
+  audioSrc?: string
+  /** Enable sound effects */
+  enableSound?: boolean
+  /** Callback when unlock animation completes */
+  onAnimationComplete?: () => void
+  /** Callback when close is triggered */
+  onClose?: () => void
+  /** Auto-hide after delay (ms), 0 to disable */
+  autoHideDelay?: number
+  /** Size variant */
+  size?: "sm" | "default" | "lg"
+  /** Custom className */
+  className?: string
+}
+
+export interface WakaAchievementBadgeProps {
+  /** Achievement data */
+  achievement: AchievementData
+  /** Whether the achievement is locked */
+  locked?: boolean
+  /** Show progress towards unlock */
+  progress?: number
+  /** Size variant */
+  size?: "sm" | "default" | "lg"
+  /** Clickable badge */
+  onClick?: () => void
+  /** Custom className */
+  className?: string
+}
+
+// ============================================================================
+// Rarity Configuration
+// ============================================================================
+
+const rarityConfig = {
+  common: {
+    gradient: "from-slate-400 to-slate-600",
+    glow: "shadow-slate-400/50",
+    glowColor: "#94a3b8",
+    borderColor: "border-slate-400",
+    bgColor: "bg-slate-100",
+    textColor: "text-slate-600",
+    particleColors: ["#94a3b8", "#cbd5e1", "#64748b"],
+    label: "Common",
+  },
+  rare: {
+    gradient: "from-blue-400 to-blue-600",
+    glow: "shadow-blue-400/50",
+    glowColor: "#60a5fa",
+    borderColor: "border-blue-400",
+    bgColor: "bg-blue-100",
+    textColor: "text-blue-600",
+    particleColors: ["#60a5fa", "#93c5fd", "#3b82f6"],
+    label: "Rare",
+  },
+  epic: {
+    gradient: "from-purple-400 to-purple-600",
+    glow: "shadow-purple-400/50",
+    glowColor: "#a855f7",
+    borderColor: "border-purple-400",
+    bgColor: "bg-purple-100",
+    textColor: "text-purple-600",
+    particleColors: ["#a855f7", "#c084fc", "#9333ea"],
+    label: "Epic",
+  },
+  legendary: {
+    gradient: "from-amber-400 via-orange-500 to-red-500",
+    glow: "shadow-amber-400/50",
+    glowColor: "#fbbf24",
+    borderColor: "border-amber-400",
+    bgColor: "bg-amber-100",
+    textColor: "text-amber-600",
+    particleColors: ["#fbbf24", "#f59e0b", "#ef4444", "#fcd34d"],
+    label: "Legendary",
+  },
+}
+
+// ============================================================================
+// Particle Effect Component
+// ============================================================================
+
+interface ParticleEffectProps {
+  active: boolean
+  colors: string[]
+  count?: number
+}
+
+function ParticleEffect({ active, colors, count = 40 }: ParticleEffectProps) {
+  if (!active) return null
+
+  return (
+    <div className="pointer-events-none absolute inset-0 overflow-hidden">
+      {[...Array(count)].map((_, i) => {
+        const angle = (i / count) * 360
+        const distance = 80 + Math.random() * 60
+        const size = 4 + Math.random() * 6
+        const duration = 0.8 + Math.random() * 0.4
+
+        return (
+          <div
+            key={i}
+            className="absolute left-1/2 top-1/2 rounded-full animate-particle"
+            style={{
+              width: size,
+              height: size,
+              backgroundColor: colors[Math.floor(Math.random() * colors.length)],
+              "--angle": `${angle}deg`,
+              "--distance": `${distance}px`,
+              animationDuration: `${duration}s`,
+              animationDelay: `${Math.random() * 0.2}s`,
+            } as React.CSSProperties}
+          />
+        )
+      })}
+      <style>{`
+        @keyframes particle {
+          0% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
+            opacity: 1;
+          }
+          100% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0);
+            opacity: 0;
+          }
+        }
+        .animate-particle {
+          animation: particle 1s ease-out forwards;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+// ============================================================================
+// Glow Effect Component
+// ============================================================================
+
+interface GlowEffectProps {
+  active: boolean
+  color: string
+}
+
+function GlowEffect({ active, color }: GlowEffectProps) {
+  if (!active) return null
+
+  return (
+    <>
+      <div
+        className="absolute inset-0 rounded-full animate-glow-pulse"
+        style={{
+          background: `radial-gradient(circle, ${color}40 0%, transparent 70%)`,
+        }}
+      />
+      <div
+        className="absolute inset-0 rounded-full animate-glow-ring"
+        style={{
+          boxShadow: `0 0 60px 20px ${color}60`,
+        }}
+      />
+      <style>{`
+        @keyframes glow-pulse {
+          0%, 100% { transform: scale(1); opacity: 0.8; }
+          50% { transform: scale(1.2); opacity: 1; }
+        }
+        @keyframes glow-ring {
+          0% { transform: scale(0.8); opacity: 0; }
+          50% { transform: scale(1.1); opacity: 1; }
+          100% { transform: scale(1.3); opacity: 0; }
+        }
+        .animate-glow-pulse {
+          animation: glow-pulse 2s ease-in-out infinite;
+        }
+        .animate-glow-ring {
+          animation: glow-ring 1.5s ease-out infinite;
+        }
+      `}</style>
+    </>
+  )
+}
+
+// ============================================================================
+// Shine Effect Component
+// ============================================================================
+
+function ShineEffect({ active }: { active: boolean }) {
+  if (!active) return null
+
+  return (
+    <>
+      <div className="absolute inset-0 overflow-hidden rounded-full">
+        <div className="absolute inset-0 animate-shine" />
+      </div>
+      <style>{`
+        @keyframes shine {
+          0% {
+            transform: translateX(-100%) rotate(45deg);
+          }
+          50%, 100% {
+            transform: translateX(100%) rotate(45deg);
+          }
+        }
+        .animate-shine {
+          background: linear-gradient(
+            90deg,
+            transparent 0%,
+            rgba(255, 255, 255, 0.4) 50%,
+            transparent 100%
+          );
+          animation: shine 2s ease-in-out infinite;
+        }
+      `}</style>
+    </>
+  )
+}
+
+// ============================================================================
+// Default Icon Component
+// ============================================================================
+
+function DefaultIcon({ rarity }: { rarity: AchievementRarity }) {
+  const icons = {
+    common: Shield,
+    rare: Award,
+    epic: Gem,
+    legendary: Crown,
+  }
+  const Icon = icons[rarity]
+  return <Icon className="h-full w-full" />
+}
+
+// ============================================================================
+// Achievement Unlock Modal Component
+// ============================================================================
+
+export function WakaAchievementUnlock({
+  achievement,
+  isUnlocked = false,
+  audioSrc,
+  enableSound = true,
+  onAnimationComplete,
+  onClose,
+  autoHideDelay = 5000,
+  size = "default",
+  className,
+}: WakaAchievementUnlockProps) {
+  const [showModal, setShowModal] = React.useState(false)
+  const [animationPhase, setAnimationPhase] = React.useState<"idle" | "reveal" | "particles" | "complete">("idle")
+  const audioRef = React.useRef<HTMLAudioElement | null>(null)
+
+  const rarity = achievement.rarity || "common"
+  const config = rarityConfig[rarity]
+
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      container: "w-64 p-4",
+      badge: "h-16 w-16",
+      iconSize: "h-8 w-8",
+      title: "text-lg",
+      description: "text-xs",
+    },
+    default: {
+      container: "w-80 p-6",
+      badge: "h-24 w-24",
+      iconSize: "h-12 w-12",
+      title: "text-xl",
+      description: "text-sm",
+    },
+    lg: {
+      container: "w-96 p-8",
+      badge: "h-32 w-32",
+      iconSize: "h-16 w-16",
+      title: "text-2xl",
+      description: "text-base",
+    },
+  }
+
+  const sizes = sizeConfig[size]
+
+  // Handle unlock animation
+  React.useEffect(() => {
+    if (isUnlocked && animationPhase === "idle") {
+      setShowModal(true)
+      setAnimationPhase("reveal")
+
+      // Play sound
+      if (enableSound && audioSrc) {
+        audioRef.current = new Audio(audioSrc)
+        audioRef.current.play().catch(() => {})
+      }
+
+      // Animation phases
+      setTimeout(() => setAnimationPhase("particles"), 300)
+      setTimeout(() => {
+        setAnimationPhase("complete")
+        onAnimationComplete?.()
+      }, 1500)
+
+      // Auto hide
+      if (autoHideDelay > 0) {
+        setTimeout(() => {
+          setShowModal(false)
+          onClose?.()
+        }, autoHideDelay)
+      }
+    }
+  }, [isUnlocked, animationPhase, enableSound, audioSrc, autoHideDelay, onAnimationComplete, onClose])
+
+  // Reset when closed
+  React.useEffect(() => {
+    if (!isUnlocked) {
+      setAnimationPhase("idle")
+      setShowModal(false)
+    }
+  }, [isUnlocked])
+
+  if (!showModal) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fadeIn"
+        onClick={() => {
+          setShowModal(false)
+          onClose?.()
+        }}
+      />
+
+      {/* Modal */}
+      <div
+        className={cn(
+          "relative flex flex-col items-center rounded-2xl border bg-card text-card-foreground shadow-2xl",
+          "animate-bounceIn",
+          sizes.container,
+          className
+        )}
+      >
+        {/* Achievement Unlocked Text */}
+        <div className="mb-4 text-center">
+          <div className="text-xs font-semibold uppercase tracking-widest text-muted-foreground animate-slideDown">
+            Achievement Unlocked!
+          </div>
+        </div>
+
+        {/* Badge with effects */}
+        <div className="relative mb-4">
+          <GlowEffect active={animationPhase !== "idle"} color={config.glowColor} />
+          <ParticleEffect
+            active={animationPhase === "particles" || animationPhase === "complete"}
+            colors={config.particleColors}
+          />
+
+          {/* Badge */}
+          <div
+            className={cn(
+              "relative flex items-center justify-center rounded-full border-4 bg-gradient-to-br",
+              "transition-all duration-500",
+              config.gradient,
+              config.borderColor,
+              sizes.badge,
+              animationPhase === "idle" && "scale-0 opacity-0",
+              animationPhase === "reveal" && "scale-110 opacity-100",
+              animationPhase !== "idle" && "scale-100 opacity-100"
+            )}
+          >
+            <ShineEffect active={animationPhase === "complete"} />
+            <div className={cn("text-white", sizes.iconSize)}>
+              {achievement.icon || <DefaultIcon rarity={rarity} />}
+            </div>
+          </div>
+        </div>
+
+        {/* Rarity Badge */}
+        <div
+          className={cn(
+            "mb-2 rounded-full px-3 py-1 text-xs font-bold uppercase tracking-wider",
+            config.bgColor,
+            config.textColor
+          )}
+        >
+          {config.label}
+        </div>
+
+        {/* Title */}
+        <h3
+          className={cn(
+            "mb-1 font-bold text-center",
+            sizes.title,
+            animationPhase !== "idle" && "animate-slideUp"
+          )}
+        >
+          {achievement.title}
+        </h3>
+
+        {/* Description */}
+        <p
+          className={cn(
+            "text-center text-muted-foreground",
+            sizes.description,
+            animationPhase !== "idle" && "animate-slideUp"
+          )}
+          style={{ animationDelay: "0.1s" }}
+        >
+          {achievement.description}
+        </p>
+
+        {/* XP Reward */}
+        {achievement.xpReward && (
+          <div
+            className={cn(
+              "mt-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 px-4 py-2 text-white shadow-lg",
+              animationPhase !== "idle" && "animate-slideUp"
+            )}
+            style={{ animationDelay: "0.2s" }}
+          >
+            <Zap className="h-4 w-4" />
+            <span className="font-bold">+{achievement.xpReward} XP</span>
+          </div>
+        )}
+
+        <style>{`
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes bounceIn {
+            0% { transform: scale(0.5); opacity: 0; }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); opacity: 1; }
+          }
+          @keyframes slideDown {
+            from { transform: translateY(-20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+          }
+          @keyframes slideUp {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+          }
+          .animate-fadeIn { animation: fadeIn 0.3s ease-out; }
+          .animate-bounceIn { animation: bounceIn 0.5s ease-out; }
+          .animate-slideDown { animation: slideDown 0.5s ease-out; }
+          .animate-slideUp { animation: slideUp 0.5s ease-out backwards; }
+        `}</style>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Achievement Badge Component (for display in lists/grids)
+// ============================================================================
+
+export function WakaAchievementBadge({
+  achievement,
+  locked = false,
+  progress,
+  size = "default",
+  onClick,
+  className,
+}: WakaAchievementBadgeProps) {
+  const [isHovered, setIsHovered] = React.useState(false)
+  const rarity = achievement.rarity || "common"
+  const config = rarityConfig[rarity]
+
+  const sizeConfig = {
+    sm: {
+      badge: "h-12 w-12",
+      iconSize: "h-6 w-6",
+    },
+    default: {
+      badge: "h-16 w-16",
+      iconSize: "h-8 w-8",
+    },
+    lg: {
+      badge: "h-24 w-24",
+      iconSize: "h-12 w-12",
+    },
+  }
+
+  const sizes = sizeConfig[size]
+
+  return (
+    <div
+      className={cn(
+        "group relative cursor-pointer",
+        onClick && "cursor-pointer",
+        className
+      )}
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Badge */}
+      <div
+        className={cn(
+          "relative flex items-center justify-center rounded-full border-2 transition-all duration-300",
+          locked ? "bg-muted border-muted-foreground/30" : cn("bg-gradient-to-br", config.gradient, config.borderColor),
+          sizes.badge,
+          !locked && isHovered && "scale-110 shadow-lg",
+          !locked && config.glow
+        )}
+        style={!locked && isHovered ? { boxShadow: `0 0 20px 4px ${config.glowColor}40` } : {}}
+      >
+        {/* Lock overlay */}
+        {locked && (
+          <div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40">
+            <Target className="h-6 w-6 text-white/60" />
+          </div>
+        )}
+
+        {/* Icon */}
+        {!locked && (
+          <div className={cn("text-white", sizes.iconSize)}>
+            {achievement.icon || <DefaultIcon rarity={rarity} />}
+          </div>
+        )}
+
+        {/* Progress ring */}
+        {locked && progress !== undefined && progress > 0 && (
+          <svg
+            className="absolute inset-0"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              cx="50"
+              cy="50"
+              r="46"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="4"
+              className="text-muted-foreground/20"
+            />
+            <circle
+              cx="50"
+              cy="50"
+              r="46"
+              fill="none"
+              stroke={config.glowColor}
+              strokeWidth="4"
+              strokeLinecap="round"
+              strokeDasharray={`${progress * 2.89} 289`}
+              transform="rotate(-90 50 50)"
+              className="transition-all duration-500"
+            />
+          </svg>
+        )}
+
+        {/* Shine effect on hover */}
+        {!locked && <ShineEffect active={isHovered} />}
+      </div>
+
+      {/* Tooltip on hover */}
+      {isHovered && (
+        <div className="absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-popover px-3 py-2 text-sm shadow-lg border animate-fadeIn">
+          <div className="font-semibold">{achievement.title}</div>
+          {locked && progress !== undefined && (
+            <div className="text-xs text-muted-foreground">
+              {Math.round(progress)}% complete
+            </div>
+          )}
+          <style>{`
+            @keyframes fadeIn {
+              from { opacity: 0; transform: translate(-50%, 10px); }
+              to { opacity: 1; transform: translate(-50%, 0); }
+            }
+            .animate-fadeIn { animation: fadeIn 0.2s ease-out; }
+          `}</style>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Achievement Grid Component
+// ============================================================================
+
+export interface WakaAchievementGridProps {
+  achievements: (AchievementData & { locked?: boolean; progress?: number })[]
+  columns?: 3 | 4 | 5 | 6
+  size?: "sm" | "default" | "lg"
+  onAchievementClick?: (achievement: AchievementData) => void
+  className?: string
+}
+
+export function WakaAchievementGrid({
+  achievements,
+  columns = 4,
+  size = "default",
+  onAchievementClick,
+  className,
+}: WakaAchievementGridProps) {
+  const columnClasses = {
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+  }
+
+  return (
+    <div className={cn("grid gap-4", columnClasses[columns], className)}>
+      {achievements.map((achievement) => (
+        <div key={achievement.id} className="flex flex-col items-center gap-2">
+          <WakaAchievementBadge
+            achievement={achievement}
+            locked={achievement.locked}
+            progress={achievement.progress}
+            size={size}
+            onClick={() => onAchievementClick?.(achievement)}
+          />
+          <span className="text-xs text-center text-muted-foreground truncate max-w-full">
+            {achievement.title}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ============================================================================
+// Hook for managing achievements
+// ============================================================================
+
+export interface UseAchievementsOptions {
+  achievements: AchievementData[]
+  unlockedIds?: string[]
+  onUnlock?: (achievement: AchievementData) => void
+}
+
+export function useAchievements({ achievements, unlockedIds = [], onUnlock }: UseAchievementsOptions) {
+  const [unlocked, setUnlocked] = React.useState<Set<string>>(new Set(unlockedIds))
+  const [currentUnlock, setCurrentUnlock] = React.useState<AchievementData | null>(null)
+  const [pendingUnlocks, setPendingUnlocks] = React.useState<AchievementData[]>([])
+
+  const unlock = React.useCallback((achievementId: string) => {
+    if (unlocked.has(achievementId)) return
+
+    const achievement = achievements.find((a) => a.id === achievementId)
+    if (!achievement) return
+
+    setUnlocked((prev) => new Set([...prev, achievementId]))
+    setPendingUnlocks((prev) => [...prev, { ...achievement, unlockedAt: new Date() }])
+    onUnlock?.(achievement)
+  }, [achievements, unlocked, onUnlock])
+
+  // Process pending unlocks one by one
+  React.useEffect(() => {
+    if (!currentUnlock && pendingUnlocks.length > 0) {
+      setCurrentUnlock(pendingUnlocks[0])
+      setPendingUnlocks((prev) => prev.slice(1))
+    }
+  }, [currentUnlock, pendingUnlocks])
+
+  const dismissCurrentUnlock = React.useCallback(() => {
+    setCurrentUnlock(null)
+  }, [])
+
+  const isUnlocked = React.useCallback((achievementId: string) => {
+    return unlocked.has(achievementId)
+  }, [unlocked])
+
+  const getProgress = React.useCallback((achievementId: string) => {
+    // This should be extended to track actual progress
+    return unlocked.has(achievementId) ? 100 : 0
+  }, [unlocked])
+
+  return {
+    unlocked,
+    currentUnlock,
+    unlock,
+    dismissCurrentUnlock,
+    isUnlocked,
+    getProgress,
+    unlockedCount: unlocked.size,
+    totalCount: achievements.length,
+    completionPercentage: (unlocked.size / achievements.length) * 100,
+  }
+}