wheel-fortune
Version:
A lightweight, customizable spinning wheel component for web games and raffles
2 lines (1 loc) • 4.79 kB
JavaScript
"use strict";var P=t=>{throw TypeError(t)};var O=(t,s,e)=>s.has(t)||P("Cannot "+e);var i=(t,s,e)=>(O(t,s,"read from private field"),e?e.call(t):s.get(t)),n=(t,s,e)=>s.has(t)?P("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(t):s.set(t,e),h=(t,s,e,a)=>(O(t,s,"write to private field"),a?a.call(t,e):s.set(t,e),e),o=(t,s,e)=>(O(t,s,"access private method"),e);var R=(t,s,e,a)=>({set _(x){h(t,s,x,e)},get _(){return i(t,s,a)}});var f,c,m,d,g,p,E,y,M,C,b,$,l,S,u,w,L,v,r,D,I,N,j,W,q,k,z,F,B;module.exports=(B=class{constructor(t){n(this,r);n(this,f);n(this,c);n(this,m);n(this,d,null);n(this,g,null);n(this,p,new WeakMap);n(this,E);n(this,y);n(this,M);n(this,C);n(this,b);n(this,$);n(this,l);n(this,S);n(this,u,0);n(this,w,!1);n(this,L,!1);n(this,v,()=>{o(this,r,N).call(this)});var e,a;this.options=t,h(this,E,t.rotationCount??6),h(this,y,t.duration??5e3),h(this,M,t.overshootDeg??15),h(this,C,t.returnDuration??1350),h(this,b,((e=t.swayOptions)==null?void 0:e.amplitude)??6),h(this,$,((a=t.swayOptions)==null?void 0:a.period)??1500),h(this,S,[...t.spinStates??[]]);const s=t.rootSelector.trim();h(this,l,s.startsWith(".")?s.slice(1):s)}init(){const t=document.querySelector(this.options.rootSelector),s=t==null?void 0:t.querySelector(this.options.wheelSelector),e=t==null?void 0:t.querySelector(this.options.triggerSelector);t&&s&&e&&(h(this,f,t),h(this,c,s),h(this,m,e),o(this,r,D).call(this),i(this,m).addEventListener("click",i(this,v)),o(this,r,W).call(this,i(this,c)))}destroy(){var t;o(this,r,q).call(this),o(this,r,F).call(this,i(this,c)),(t=i(this,m))==null||t.removeEventListener("click",i(this,v)),h(this,p,new WeakMap)}reset(){this.destroy(),i(this,c).style.transform="",i(this,f).classList.remove(`${i(this,l)}--spinning`,`${i(this,l)}--completed`,`${i(this,l)}--first-done`,`${i(this,l)}--final-done`),h(this,u,0),h(this,w,!1),h(this,L,!1),o(this,r,D).call(this),i(this,m).addEventListener("click",i(this,v)),o(this,r,W).call(this,i(this,c))}},f=new WeakMap,c=new WeakMap,m=new WeakMap,d=new WeakMap,g=new WeakMap,p=new WeakMap,E=new WeakMap,y=new WeakMap,M=new WeakMap,C=new WeakMap,b=new WeakMap,$=new WeakMap,l=new WeakMap,S=new WeakMap,u=new WeakMap,w=new WeakMap,L=new WeakMap,v=new WeakMap,r=new WeakSet,D=function(){if(i(this,L))return;const t=i(this,c).animate([{filter:"blur(0)"},{filter:"blur(0.4px)",offset:.5},{filter:"blur(0)"}],{duration:64,fill:"forwards"});i(this,c).getBoundingClientRect(),t.onfinish=()=>{var s;(s=t.commitStyles)==null||s.call(t),t.cancel()},o(this,r,I).call(this,i(this,c)),h(this,L,!0)},I=function(t){t.querySelectorAll("img").forEach(s=>{var e;(e=s.decode)==null||e.call(s).catch(()=>{})})},N=async function(){var s;const t=i(this,S)[i(this,u)];t&&(h(this,w,!0),i(this,f).classList.remove(`${i(this,l)}--completed`),i(this,f).classList.add(`${i(this,l)}--spinning`),o(this,r,q).call(this),await o(this,r,j).call(this,i(this,c),t.targetAngle),i(this,f).classList.remove(`${i(this,l)}--spinning`),i(this,f).classList.add(`${i(this,l)}--completed`),i(this,u)===0&&i(this,f).classList.add(`${i(this,l)}--first-done`),i(this,u)===i(this,S).length-1&&i(this,f).classList.add(`${i(this,l)}--final-done`),(s=t.callback)==null||s.call(t),R(this,u)._++)},j=async function(t,s){const e=o(this,r,z).call(this,t),a=(o(this,r,k).call(this,s)-o(this,r,k).call(this,e)+360)%360,x=e+360*i(this,E)+a,G=x+i(this,M),A=i(this,y)+i(this,C),H=i(this,y)/A,J=t.animate([{transform:`rotate(${e}deg)`,easing:"cubic-bezier(0.86,0,0.07,1)"},{offset:H,transform:`rotate(${G}deg)`,easing:"cubic-bezier(0.77,0,0.175,1)"},{transform:`rotate(${x}deg)`}],{duration:A,fill:"forwards"}),K=t.animate([{filter:"blur(0)"},{offset:.1,filter:"blur(0.4px)"},{offset:.25,filter:"blur(1px)"},{offset:.6,filter:"blur(1px)"},{offset:.9,filter:"blur(0.4px)"},{offset:1,filter:"blur(0)"}],{duration:A,fill:"forwards",easing:"ease-in-out"});await Promise.all([J.finished,K.finished]),i(this,p).set(t,o(this,r,k).call(this,x))},W=function(t){if(i(this,w))return;o(this,r,q).call(this),h(this,g,t);const s=i(this,p).get(t)??o(this,r,z).call(this,t),e=o(this,r,k).call(this,s);h(this,d,t.animate([{transform:`rotate(${e-i(this,b)}deg)`},{transform:`rotate(${e+i(this,b)}deg)`}],{duration:i(this,$),direction:"alternate",iterations:1/0,easing:"ease-in-out",delay:-i(this,$)/2}))},q=function(){var e,a;if(!i(this,d)||!i(this,g))return;const t=i(this,g),s=getComputedStyle(t).transform;(a=(e=i(this,d)).commitStyles)==null||a.call(e),i(this,d).cancel(),t.style.transform=s!=="none"?s:"",h(this,d,null),h(this,g,null)},k=function(t){return(t%360+360)%360},z=function(t){const s=getComputedStyle(t).transform;if(!s||s==="none")return 0;const{a:e,b:a}=new DOMMatrixReadOnly(s);return 180*Math.atan2(a,e)/Math.PI},F=function(t){t.getAnimations().forEach(s=>s.cancel())},B);