vue-spin-the-wheel/dist/vue-spin-the-wheel.umd.cjs

Component "Wheel of Names" for Vue

(function(z,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(z=typeof globalThis<"u"?globalThis:z||self,t(z["vue-spin-the-wheel"]={},z.Vue))})(this,function(z,t){"use strict";function C(e,u){const d=[];for(;e!=="";){let a=e.substr(0,u);if(e.charAt(u)!==""&&e.charAt(u)!==" "){const n=a.lastIndexOf(" ");n!==-1&&(a=a.substr(0,n))}e=e.replace(a,"").trim(),d.push(a)}return d}const I={radius:250,textRadius:190,textLength:6,textDirection:"horizontal",lineHeight:20,borderWidth:0,borderColor:"transparent",btnText:"Spin",btnWidth:140,fontSize:34};function M(e){const u=t.ref(),d=t.computed(()=>Object.assign(I,e.canvas||{}));let a,n;function g(){if(a=u.value,a.getContext){const{radius:l,textRadius:i,borderWidth:r,borderColor:s,fontSize:b}=d.value;if(!l||!i||!r||!s||!b)throw new Error("radius, textRadius, borderWidth, borderColor, and fontSize are required");const h=Math.PI/(e.prizes.length/2);n=a.getContext("2d"),n.clearRect(0,0,l*2,l*2),n.strokeStyle=s,n.lineWidth=r*2,n.font=`${b}px Arial`,e.prizes.forEach((f,E)=>{w(f,E,h,l,i,r)})}}function w(l,i,r,s,b,h=0){const f=i*r-Math.PI/2;n.fillStyle=l.bgColor,n.beginPath(),n.arc(s,s,s-h,f,f+r,!1),n.stroke(),n.arc(s,s,0,f+r,f,!0),n.fill(),n.save(),n.fillStyle=l.color,n.translate(s+Math.cos(f+r/2)*b,s+Math.sin(f+r/2)*b),S(f,r,l.name),n.restore()}function S(l,i,r){const{lineHeight:s,textLength:b,textDirection:h}=d.value;if(!s||!b||!h)throw new Error("lineHeight, textLength, and textDirection are required");const f=C(r,b);f&&(h==="vertical"?n.rotate(l+i/2+Math.PI):n.rotate(l+i/2+Math.PI/2),f.forEach((E,p)=>x(E,p,h,s,f.length)))}function x(l,i,r,s,b=0){let h=-n.measureText(l).width/2,f=(i+1)*s;r==="vertical"&&(h=0,f=(i+1)*s-b*s/2),n.fillText(l,h,f)}return t.onMounted(()=>{e.type==="canvas"&&g()}),t.onUpdated(()=>{e.type==="canvas"&&g()}),{wheelEl:u,canvasConfig:d,drawCanvas:g}}function T(e,u){const d=t.ref(!1),a=t.ref(0),n=t.ref(),g=t.computed(()=>e.useWeight?100:e.prizes.reduce((o,c)=>o+(c.probability||0),0)),w=t.computed(()=>{if(e.useWeight)return 0;const o=[...e.prizes].sort((m,k)=>{const B=String(m.probability).split(".")[1],v=String(k.probability).split(".")[1],A=B?B.length:0;return(v?v.length:0)-A}),c=String(o[0].probability).split(".")[1],y=c?c.length:0;return[1,10,100,1e3,1e4][y>4?4:y]}),S=t.computed(()=>{const o=[];return e.prizes.forEach(c=>{const y=e.useWeight?c.weight||0:(c.probability||0)*w.value;console.log(o,y,e,c);const m=new Array(y).fill(c.id);o.push(...m)}),o}),x=t.computed(()=>d.value?e.duration/1e3:0),l=t.computed(()=>({"-webkit-transform":`rotateZ(${a.value}deg)`,transform:`rotateZ(${a.value}deg)`,"-webkit-transition-duration":`${x.value}s`,"transition-duration":`${x.value}s`,"-webkit-transition-timing-function:":e.timingFun,"transition-timing-function":e.timingFun})),i=t.computed(()=>{let o=e.angleBase*360;return e.angleBase<0&&(o-=360),o}),r=t.computed(()=>!e.disabled&&!d.value&&g.value===100);t.watch(()=>e.prizeId,o=>{if(!d.value)return;let c=R(o);e.angleBase<0&&(c-=360);const y=a.value;let m=e.angleBase*360+c;const k=360*Math.floor((m-y)/360);e.angleBase>=0?m+=Math.abs(k):m+=-360-k,a.value=m}),s();function s(){if(g.value!==100)throw new Error("Prizes Is Error: Sum of probabilities is not 100!");return!0}function b(){if(r.value){if(e.verify){u("rotateStart",h);return}u("rotateStart"),h()}}function h(){d.value=!0;const o=e.prizeId||p();a.value=i.value+R(o)}function f(){d.value=!1,a.value%=360,u("rotateEnd",n.value)}function E(o,c){return o=Math.ceil(o),c=Math.floor(c),Math.floor(Math.random()*(c-o+1))+o}function p(){const o=S.value.length;return S.value[E(0,o-1)]}function R(o){const c=360/e.prizes.length,y=e.prizes.findIndex(m=>m.id===o);return n.value=e.prizes[y],360-(c*y+c/2)}return{handleRotate:b,rotateStyle:l,onRotateEnd:f}}const _={class:"fw-container"},P=["width","height"],W={class:"fw-btn"},D=((e,u)=>{const d=e.__vccOpts||e;for(const[a,n]of u)d[a]=n;return d})(t.defineComponent({__name:"index",props:{type:{default:"canvas"},useWeight:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},canRotate:{type:Boolean,default:!1},verify:{type:Boolean,default:!1},canvas:null,duration:{default:6e3},timingFun:{default:"cubic-bezier(0.36, 0.95, 0.64, 1)"},angleBase:{default:10},prizeId:{default:0},prizes:{default:()=>[]}},emits:["rotateStart","rotateEnd"],setup(e,{expose:u,emit:d}){const a=e,{wheelEl:n,canvasConfig:g}=M(a),{handleRotate:w,rotateStyle:S,onRotateEnd:x}=T(a,d);return u({startRotate:()=>{console.log("startRotate"),w()}}),(l,i)=>(t.openBlock(),t.createElementBlock("div",_,[t.createElementVNode("div",{class:"fw-wheel",style:t.normalizeStyle(t.unref(S)),onTransitionend:i[0]||(i[0]=(...r)=>t.unref(x)&&t.unref(x)(...r)),"on:webkitTransitionend":i[1]||(i[1]=(...r)=>t.unref(x)&&t.unref(x)(...r))},[e.type==="canvas"?(t.openBlock(),t.createElementBlock("canvas",{key:0,ref_key:"wheelEl",ref:n,width:(t.unref(g).radius||1)*2,height:(t.unref(g).radius||1)*2},null,8,P)):t.renderSlot(l.$slots,"wheel",{key:1},void 0,!0)],36),t.createElementVNode("div",W,[e.type==="canvas"?(t.openBlock(),t.createElementBlock("div",{key:0,class:"fw-btn__btn",style:t.normalizeStyle({width:t.unref(g).btnWidth+"px",height:t.unref(g).btnWidth+"px"}),onClick:i[2]||(i[2]=(...r)=>t.unref(w)&&t.unref(w)(...r))},t.toDisplayString(t.unref(g).btnText),5)):(t.openBlock(),t.createElementBlock("div",{key:1,class:"fw-btn__image",onClick:i[3]||(i[3]=(...r)=>t.unref(w)&&t.unref(w)(...r))},[t.renderSlot(l.$slots,"button",{},void 0,!0)]))])]))}}),[["__scopeId","data-v-45b073d4"]]);z.SpinTheWheel=D,Object.defineProperty(z,Symbol.toStringTag,{value:"Module"})});