UNPKG

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

2 lines 3.17 kB
import {useState,useEffect}from'react';import {jsxs,jsx}from'react/jsx-runtime';function b({rings:r,size:s=200,strokeWidth:o=20,gap:e=8,showCenter:d=true,centerText:a,centerLabel:l,animated:f=true,animationDuration:x=1e3,style:m,className:g}){let p=r[0],c=p?`${Math.round(p.value/p.max*100)}%`:"0%";return jsxs("div",{className:g,style:{position:"relative",width:s,height:s,...m},children:[r.map((n,u)=>{let h=s-u*(o+e)*2,v=o;return jsx("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},children:jsx(S,{value:n.value,max:n.max,size:h,strokeWidth:v,color:n.color,gradientColor:n.gradientColor,animated:f,animationDuration:x})},u)}),d&&jsxs("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"},children:[jsx("div",{style:{fontSize:s*.15,fontWeight:"bold",color:"#1e293b",lineHeight:1},children:a??c}),l&&jsx("div",{style:{fontSize:s*.06,color:"#64748b",marginTop:s*.02,textTransform:"uppercase",letterSpacing:"0.5px"},children:l})]})]})}function S({value:r,max:s,size:o,strokeWidth:e,color:d,gradientColor:a,animated:l=true,animationDuration:f=1e3,className:x}){let[m,g]=useState(l?0:r);useEffect(()=>{if(!l){g(r);return}let v=Date.now(),y=0,k=r,w=f,P=()=>{let W=Date.now()-v,R=Math.min(W/w,1),D=1-Math.pow(1-R,3),M=y+(k-y)*D;g(M),R<1&&requestAnimationFrame(P);};requestAnimationFrame(P);},[r,l,f]);let p=Math.min(m/s*100,100),c=(o-e)/2,n=2*Math.PI*c,u=n-p/100*n,h=`gradient-${Math.random().toString(36).substr(2,9)}`;return jsxs("svg",{width:o,height:o,className:x,style:{transform:"rotate(-90deg)"},children:[jsx("defs",{children:a&&jsxs("linearGradient",{id:h,x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[jsx("stop",{offset:"0%",stopColor:d}),jsx("stop",{offset:"100%",stopColor:a})]})}),jsx("circle",{cx:o/2,cy:o/2,r:c,fill:"none",stroke:"#e2e8f0",strokeWidth:e}),jsx("circle",{cx:o/2,cy:o/2,r:c,fill:"none",stroke:a?`url(#${h})`:d,strokeWidth:e,strokeDasharray:n,strokeDashoffset:u,strokeLinecap:"round",style:{transition:l?"stroke-dashoffset 0.3s ease":void 0}})]})}function L({rings:r,showLabels:s=true,...o}){return jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[jsx(b,{rings:r,...o}),s&&jsx("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:r.map((e,d)=>{let a=Math.round(e.value/e.max*100);return jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[jsx("div",{style:{width:"12px",height:"12px",borderRadius:"50%",background:e.gradientColor?`linear-gradient(135deg, ${e.color}, ${e.gradientColor})`:e.color,flexShrink:0}}),jsx("div",{style:{flex:1,minWidth:0},children:jsx("div",{style:{fontSize:"14px",fontWeight:600,color:"#1e293b",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:e.label})}),jsxs("div",{style:{fontSize:"14px",fontWeight:600,color:"#64748b",flexShrink:0},children:[e.value,"/",e.max]}),jsxs("div",{style:{fontSize:"14px",fontWeight:600,color:e.color,minWidth:"40px",textAlign:"right",flexShrink:0},children:[a,"%"]})]},d)})})]})}export{b as a,S as b,L as c};//# sourceMappingURL=chunk-LJL2YPXN.mjs.map //# sourceMappingURL=chunk-LJL2YPXN.mjs.map