@scriptless/react-dice/build/index.js

A React dice component.

import{Fragment as B,useCallback as Y,useContext as Z,useEffect as z,useRef as _,useState as w}from"react";import{createContext as J,useState as $,useMemo as L,useCallback as U}from"react";import{jsx as q}from"react/jsx-runtime";var M=J(null),W={display:"flex",gap:"10px"},X=({onChange:i,children:o,className:u,style:t=W,disabled:a})=>{let[s,c]=$([]),g=U(({handleRoll:d})=>{let m={handleRoll:d};return c(p=>[...p,m]),{unregister:()=>{c(p=>p.filter(R=>R!==m))}}},[c]),[x,f]=$(!1),V=async()=>{if(x||a)return;f(!0);let d=await Promise.all(s.map(m=>m.handleRoll()));i?.(d),f(!1)},b=L(()=>({registerDie:g,disabled:a}),[g,a]);return q(M.Provider,{value:b,children:q("div",{style:t,className:u,onClick:V,children:o})})};import{Fragment as de,jsx as l,jsxs as ue}from"react/jsx-runtime";var j="scriptlessReactDiceAnimationContrastKeyframes",ee="scriptlessReactDiceAnimationBlurKeyframes",ae="scriptlessReactDiceAnimationScaleKeyframes",E=["a","b","c","d","e","f"],Q={1:{1:{a:"a"},2:{a:["a","b"]},3:{a:["a","b","c"]},4:{a:["a","b","c","d"]},5:{a:["a","b","c","d","e"]},6:{a:["a","b","c","d","e","f"]}},2:{1:{a:"a",b:"a"},2:{a:"b",b:"a"},3:{a:"c",b:["a","b"]},4:{a:["b","c"],b:["a","d"]},5:{a:["c","d"],b:["a","b","e"]},6:{a:["d","e","f"],b:["a","b","c"]}},3:{1:{a:"a",b:"a",c:"a"},2:{a:"b",b:"b",c:"a"},3:{a:"c",b:"b",c:"a"},4:{a:"d",b:"c",c:["a","b"]},5:{a:["c","e"],b:"d",c:["a","b"]},6:{a:["c","e"],b:"d",c:["a","b","f"]}},4:{1:{a:"a",b:"a",c:"a",d:"a"},2:{a:"a",b:"b",c:"b",d:"a"},3:{a:"c",b:"b",c:"a",d:"a"},4:{a:"d",b:"c",c:"b",d:"a"},5:{a:["d","e"],b:"c",c:"b",d:"a"},6:{a:["d","e","f"],b:"c",c:"b",d:"a"}},5:{1:{a:"a",b:"a",c:"a",d:"a",e:"a"},2:{a:"b",b:"a",c:"a",d:"a",e:"a"},3:{a:"c",b:"b",c:"a",d:"a",e:"a"},4:{a:"d",b:"c",c:"b",d:"a",e:"a"},5:{a:"e",b:"d",c:"c",d:"b",e:"a"},6:{a:"f",b:"e",c:"d",d:"c",e:["a","b"]}},6:{1:{a:"a",b:"a",c:"a",d:"a",e:"a",f:"a"},2:{a:"b",b:"a",c:"a",d:"b",e:"b",f:"a"},3:{a:"c",b:"b",c:"a",d:"c",e:"b",f:"a"},4:{a:"d",b:"c",c:"b",d:"a",e:"b",f:"d"},5:{a:"e",b:"d",c:"c",d:"b",e:"a",f:"a"},6:{a:"f",b:"e",c:"d",d:"c",e:"b",f:"a"}}},I={1:{a:{x:.5,y:.5}},2:{a:{x:.3,y:.3},b:{x:.7,y:.7}},3:{a:{x:.25,y:.25},b:{x:.5,y:.5},c:{x:.75,y:.75}},4:{a:{x:.25,y:.25},b:{x:.75,y:.25},c:{x:.25,y:.75},d:{x:.75,y:.75}},5:{a:{x:.25,y:.25},b:{x:.75,y:.25},c:{x:.25,y:.75},d:{x:.75,y:.75},e:{x:.5,y:.5}},6:{a:{x:.25,y:.25},b:{x:.75,y:.25},c:{x:.25,y:.75},d:{x:.75,y:.75},e:{x:.25,y:.5},f:{x:.75,y:.5}}},k=i=>i<1?1:i>6?6:i,ie=66,te=12,D=240,N=Math.round(D/6),ne=2,P=D+N,oe=(i,o)=>{if(!o||!i.value)return{};let u=Q[i.value][o],t={};for(let a of E){let s=u[a];s&&(Array.isArray(s)?s.forEach(c=>{t[c]=i.pose[a]}):t[s]=i.pose[a])}return t},se=(i,o)=>{if(!o||!i.value)return{};let u=I[o],t=Q[i.value][o],a={};for(let s of Object.keys(i.pose)){let c=t[s];c&&typeof c=="string"&&(a[s]=u[c])}return a},re=()=>Math.floor(Math.random()*6)+1,ce=({startValue:i,endValue:o})=>{let u=Math.floor(Math.random()*3)+5,t=[i];for(;t.length<u-1;){let a;do a=Math.floor(Math.random()*6)+1;while(a===t[t.length-1]);t.push(a)}if(i===o&&t.length>1){let a;do a=Math.floor(Math.random()*6)+1;while(a===i);t.splice(1,0,a)}if(t[t.length-1]===o){let a;do a=Math.floor(Math.random()*6)+1;while(a===o);t.push(a)}return t.push(o),t},le=({initialValue:i,disabled:o,onChange:u,getNextValue:t=re,size:a=ie,pipSize:s=te,borderColor:c="black",borderRadius:g=8,borderWidth:x=3,backgroundColor:f="white",pipColor:V="black"})=>{let b=a-(x||0)*2,d=Z(M),m=!!d,p=o||d?.disabled,[R,O]=w(typeof i=="number"?k(i):1),[T,F]=w(!1),[y,C]=w({animate:!1,value:void 0,pose:{}}),[v,G]=w(()=>typeof i=="number"?[k(i)]:[]),S=_(!1);z(()=>{if(S.current||!v.length)return;F(!0),S.current=!0;let e=v[0],r=e?I[e]:{};(async()=>{C(n=>(e||0)<(n.value||e||0)?n:{animate:!1,pose:oe(n,e),value:n.value}),await new Promise(n=>requestAnimationFrame(n)),C(n=>(e||0)<(n.value||e||0)?{animate:!0,pose:se(n,e),value:e}:{animate:!0,pose:r,value:e}),await new Promise(n=>setTimeout(n,P+ne)),await new Promise(n=>requestAnimationFrame(n)),C({animate:!1,pose:r,value:e}),await new Promise(n=>requestAnimationFrame(n)),S.current=!1,F(!1),G(n=>n.slice(1)),v.length===1&&(u?.(e),O(e))})()},[v]);let K=({pipPose:e,scale:r=1})=>({borderRadius:"50%",position:"absolute",backgroundColor:V,height:s*r,width:s*r,top:e.y*b-s*r/2,left:e.x*b-s*r/2}),A=Y(async()=>{if(p||T)return;let e=t();if(e instanceof Promise&&(e=await e),typeof e=="number"){let r=k(e),h=ce({startValue:R,endValue:r});return G(h),await new Promise(n=>setTimeout(n,P*h.length)),r}},[p,t,m,T,R]);return z(()=>{if(!d?.registerDie)return;let{unregister:e}=d.registerDie({handleRoll:A});return()=>{e()}},[d?.registerDie,A]),l(de,{children:l("div",{style:{height:b,width:b,cursor:p||T?"default":"pointer",display:"inline-block",position:"relative",overflow:"hidden",borderColor:c,borderRadius:g,borderWidth:x,backgroundColor:f,borderStyle:"solid",boxSizing:"content-box"},onClick:m?void 0:A,children:l("div",{style:{animationDuration:P+"ms",animationFillMode:"forwards",animationName:y.animate?j:void 0,position:"relative",backgroundColor:f},children:l("div",{style:{animationDuration:P+"ms",animationFillMode:"forwards",animationName:y.animate?ee:void 0,position:"relative",backgroundColor:f,height:b,width:b},children:E.map(e=>{let r=y.pose[e];if(!r)return l(B,{children:l("div",{children:l("div",{})})},e);let h=K({pipPose:r});return ue(B,{children:[l("div",{style:{...h,transition:y.animate?`top ${D}ms ease, left ${D}ms ease`:""},children:l("div",{style:{borderRadius:"50%",height:"100%",width:"100%",animationName:y.animate?ae:void 0,animationDuration:P+"ms",animationFillMode:"forwards",backgroundColor:V}})}),l("div",{style:{...K({pipPose:r,scale:.8}),transition:y.animate?`top ${D}ms ease ${N}ms, left ${D}ms ease ${N}ms`:""}})]},e)})})})})})};export{le as Dice,X as DiceGroup};
//# sourceMappingURL=index.js.map