questro
Version:
A lightweight, modular gamification library for React with unique visual components. Features combo meters, daily challenges, achievement toasts, and progress rings. Add points, badges, quests, leaderboards, levels/XP, streaks, and notifications with zero
34 lines (32 loc) • 5.15 kB
JavaScript
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');function u({achievement:t,onClose:p,style:c,className:f}){let[i,s]=react.useState(false),[g,y]=react.useState([]),n={badge:{primary:"#3b82f6",secondary:"#2563eb",glow:"rgba(59, 130, 246, 0.4)"},level:{primary:"#f59e0b",secondary:"#d97706",glow:"rgba(245, 158, 11, 0.4)"},quest:{primary:"#10b981",secondary:"#059669",glow:"rgba(16, 185, 129, 0.4)"},milestone:{primary:"#8b5cf6",secondary:"#7c3aed",glow:"rgba(139, 92, 246, 0.4)"},rare:{primary:"#ec4899",secondary:"#db2777",glow:"rgba(236, 72, 153, 0.4)"}}[t.type],d=t.showConfetti??true;react.useEffect(()=>{if(setTimeout(()=>s(true),10),d){let e=["#f59e0b","#3b82f6","#10b981","#ec4899","#8b5cf6"],x=Array.from({length:30},(S,b)=>({id:b,x:Math.random()*100,y:Math.random()*100,rotation:Math.random()*360,color:e[Math.floor(Math.random()*e.length)]||"#fff"}));y(x);}if(t.duration&&t.duration>0){let e=setTimeout(()=>{a();},t.duration);return ()=>clearTimeout(e)}},[]);let a=()=>{s(false),setTimeout(()=>{p?.();},300);};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{style:{position:"fixed",top:0,left:0,right:0,bottom:0,background:"rgba(0,0,0,0.7)",zIndex:9998,opacity:i?1:0,transition:"opacity 0.3s ease"},onClick:a}),d&&jsxRuntime.jsx("div",{style:{position:"fixed",top:0,left:0,right:0,bottom:0,pointerEvents:"none",zIndex:9999,overflow:"hidden"},children:g.map(e=>jsxRuntime.jsx("div",{style:{position:"absolute",left:`${e.x}%`,top:`${e.y}%`,width:"10px",height:"10px",background:e.color,transform:`rotate(${e.rotation}deg)`,animation:"confettiFall 3s ease-out forwards",opacity:i?1:0}},e.id))}),jsxRuntime.jsx("div",{className:f,style:{position:"fixed",top:"50%",left:"50%",transform:i?"translate(-50%, -50%) scale(1)":"translate(-50%, -50%) scale(0.8)",opacity:i?1:0,transition:"all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)",zIndex:1e4,maxWidth:"450px",width:"90%",...c},children:jsxRuntime.jsxs("div",{style:{background:`linear-gradient(135deg, ${n.primary} 0%, ${n.secondary} 100%)`,borderRadius:"20px",padding:"32px",boxShadow:`0 20px 60px ${n.glow}, 0 0 0 1px rgba(255,255,255,0.1)`,color:"#fff",position:"relative",overflow:"hidden"},children:[jsxRuntime.jsx("div",{style:{position:"absolute",top:"-50%",left:"-50%",width:"200%",height:"200%",background:"radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%)",animation:"achievementShine 2s ease-out"}}),jsxRuntime.jsx("button",{onClick:a,style:{position:"absolute",top:"12px",right:"12px",background:"rgba(0,0,0,0.2)",border:"none",borderRadius:"50%",width:"32px",height:"32px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",color:"#fff",fontSize:"20px",zIndex:1},children:"\xD7"}),t.icon&&jsxRuntime.jsx("div",{style:{fontSize:"64px",textAlign:"center",marginBottom:"16px",animation:"achievementBounce 0.6s ease-out"},children:t.icon}),jsxRuntime.jsx("h2",{style:{fontSize:"28px",fontWeight:"bold",textAlign:"center",marginBottom:"8px",textShadow:"0 2px 10px rgba(0,0,0,0.3)",margin:0},children:t.title}),jsxRuntime.jsx("p",{style:{fontSize:"16px",textAlign:"center",opacity:.95,marginBottom:"20px",lineHeight:1.5,margin:"8px 0 20px"},children:t.description}),t.reward&&jsxRuntime.jsxs("div",{style:{display:"flex",justifyContent:"center",gap:"16px",marginBottom:"20px",padding:"16px",background:"rgba(0,0,0,0.2)",borderRadius:"12px"},children:[t.reward.points&&jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsxs("div",{style:{fontSize:"24px",fontWeight:"bold"},children:["+",t.reward.points]}),jsxRuntime.jsx("div",{style:{fontSize:"12px",opacity:.8},children:"Points"})]}),t.reward.xp&&jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsxs("div",{style:{fontSize:"24px",fontWeight:"bold"},children:["+",t.reward.xp]}),jsxRuntime.jsx("div",{style:{fontSize:"12px",opacity:.8},children:"XP"})]}),t.reward.badge&&jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{fontSize:"24px",fontWeight:"bold"},children:t.reward.badge}),jsxRuntime.jsx("div",{style:{fontSize:"12px",opacity:.8},children:"Badge"})]})]}),t.action&&jsxRuntime.jsx("button",{onClick:()=>{t.action?.onClick(),a();},style:{width:"100%",padding:"14px",background:"#fff",color:n.primary,border:"none",borderRadius:"12px",fontSize:"16px",fontWeight:600,cursor:"pointer",boxShadow:"0 4px 12px rgba(0,0,0,0.2)"},children:t.action.label})]})})]})}var h=`
@keyframes achievementShine {
0% {
transform: translate(-50%, -50%) rotate(0deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(50%, 50%) rotate(180deg);
opacity: 0;
}
}
@keyframes achievementBounce {
0%, 100% { transform: scale(1); }
25% { transform: scale(0.9); }
50% { transform: scale(1.1); }
75% { transform: scale(0.95); }
}
@keyframes confettiFall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
`;exports.a=u;exports.b=h;//# sourceMappingURL=chunk-BURE6VTR.js.map
//# sourceMappingURL=chunk-BURE6VTR.js.map