@everymatrix/casino-engagement-suite-luckywheel 0.20.8 → 0.20.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel-5c877667.js +1 -0
- package/dist/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel.entry.js +1 -1
- package/dist/casino-engagement-suite-luckywheel/index.esm.js +1 -1
- package/dist/cjs/{casino-engagement-suite-luckywheel-da8926d5.js → casino-engagement-suite-luckywheel-ebc86723.js} +36 -15
- package/dist/cjs/casino-engagement-suite-luckywheel.cjs.entry.js +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/collection/components/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel.css +6 -3
- package/dist/collection/components/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel.js +7 -7
- package/dist/collection/utils/class.svgcalc.js +28 -7
- package/dist/esm/{casino-engagement-suite-luckywheel-465c9acd.js → casino-engagement-suite-luckywheel-5c877667.js} +36 -15
- package/dist/esm/casino-engagement-suite-luckywheel.entry.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/packages/stencil/casino-engagement-suite-luckywheel/stencil.config.d.ts +2 -0
- package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/packages/stencil/casino-engagement-suite-luckywheel/stencil.config.dev.d.ts +2 -0
- package/dist/types/{builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/tools/plugins/index.d.ts → Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/tools/plugins/index.d.ts } +1 -0
- package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts +12 -0
- package/dist/types/utils/class.svgcalc.d.ts +5 -2
- package/package.json +1 -1
- package/dist/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel-465c9acd.js +0 -1
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/packages/stencil/casino-engagement-suite-luckywheel/stencil.config.d.ts +0 -2
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/packages/stencil/casino-engagement-suite-luckywheel/stencil.config.dev.d.ts +0 -2
- /package/dist/types/{builds/emfe-widgets → Users/maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/packages/stencil/casino-engagement-suite-luckywheel/storybook/main.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/packages/stencil/casino-engagement-suite-luckywheel/storybook/preview.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/casino-engagement-suite-luckywheel/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
package/dist/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel-5c877667.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as i,g as e}from"./index-48c42d04.js";var s,n,r,a,o,h,c,l,d,u;!function(t){t.ActiveTickets="ActiveTickets",t.ImplicitTickets="ImplicitTickets",t.RemainingTimes="RemainingTimes"}(s||(s={})),function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise",t[t.outward=0]="outward"}(n||(n={})),function(t){t.fulfilled="fulfilled",t.drawn="drawn"}(r||(r={})),function(t){t.noPrize="noprize",t.luckywheel="luckywheel",t.bonus="bonus"}(a||(a={})),function(t){t.Arrow="Arrow",t.Partition="Partition"}(o||(o={})),function(t){t.DownFromTop="DownFromTop",t.UpFromCenter="UpFromCenter",t.DownFromCenter="DownFromCenter",t.UpFromBottom="UpFromBottom"}(h||(h={})),function(t){t.en="en",t.fr="fr",t.de="de",t.tr="tr"}(c||(c={})),function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise",t[t.outward=0]="outward"}(l||(l={})),function(t){t.launch="launch",t.loop="loop",t.halt="halt"}(d||(d={})),function(t){t.quad="quad",t.cubic="cubic",t.quart="quart",t.quint="quint",t.expo="expo",t.sine="sine",t.circ="circ"}(u||(u={}));const g=(t,i)=>{Object.keys(i).map((e=>{t.setAttribute(e.split(/(?=[A-Z])/).map((t=>t.toLocaleLowerCase())).join("-"),i[e])}))},b=t=>new Promise((i=>{let e=document.createElementNS("http://www.w3.org/2000/svg","image");e.onload=()=>i(e),e.onerror=()=>i(e),e.href.baseVal=t})),p=t=>({x:t,y:t}),f=(t,i)=>({x:t.x+i.x,y:t.y+i.y}),m={Image:"",Name:"Thank you",PrizeText:"",PrizeImage:""},v=async(t,i)=>{let e=((t,i)=>{const e=t.map((t=>{const e={};return Object.keys(t).map((s=>{"object"==typeof t[s]&&t[s]&&(e["Image1"===s?"Image":s]=t[s][i]||t[s]["*"])})),e}));return(t=>{let i=0;return t.map((t=>{i+=Number(t.probability)})),i})(t)<1&&e.push(m),e})(t.Program.WheelOfFortune.Partitions,i);return e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent)?e.map((t=>{if(t.Image){const i=document.createElementNS("http://www.w3.org/2000/svg","image");return i.href.baseVal=t.Image,Object.assign(Object.assign({},t),{Image:i})}return t})):await Promise.all(e.map((async t=>Object.assign(Object.assign({},t),await(async t=>t?{Image:await b(t)}:{})(t.Image))))),e},y={in:{quad:t=>Math.pow(t,2),cubic:t=>Math.pow(t,3),quart:t=>Math.pow(t,4),quint:t=>Math.pow(t,5),sine:t=>1-Math.cos(t*Math.PI/2),expo:t=>0===t?0:Math.pow(2,10*t-10),circ:t=>1-Math.sqrt(1-Math.pow(t,2))},out:{quad:t=>1-Math.pow(1-t,2),cubic:t=>1-Math.pow(1-t,3),quart:t=>1-Math.pow(1-t,4),quint:t=>1-Math.pow(1-t,5),sine:t=>Math.sin(t*Math.PI/2),expo:t=>1===t?1:1-Math.pow(2,-10*t),circ:t=>Math.sqrt(1-Math.pow(t-1,2))}},x={quad:2,cubic:3,quart:4,quint:5,sine:Math.PI/2,expo:Math.LN2,circ:1/0},w={in:{quad:t=>2*t,cubic:t=>3*t**2,quart:t=>4*t**3,quint:t=>5*t**4,sine:t=>Math.PI/2*Math.sin(Math.PI/2*t),expo:t=>10*Math.LN2*2**(10*t-10),circ:t=>-.5*(1-t**2)**-.5},out:{cubic:t=>3*t**2-6*t+3}},k=[{launchTurns:5,launchSpeed:.2,loopSpeed:15,haltTurns:2,haltSpeed:.16},{launchTurns:2,launchSpeed:.5,loopSpeed:20,haltTurns:2,haltSpeed:.22},{launchTurns:6,launchSpeed:1.38,loopSpeed:45,haltTurns:6,haltSpeed:.5}],P=t=>Object.keys(t).map((i=>t[i]));var M;!function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise"}(M||(M={}));class j{constructor({size:t,radius:i,options:e,themeIndex:s,contentdirection:n}){this.arrowmode=h.DownFromTop,this.convertDegToArc=t=>t*Math.PI/180,this.convertArcToDeg=t=>180*t/Math.PI%360,this.getArcDelta=t=>2*Math.PI/t,this.findDeg=(t,i)=>t*this.convertArcToDeg(this.getArcDelta(i)),this.angleTransform=t=>{switch(t){case h.DownFromTop:case h.UpFromCenter:return-Math.PI/2;case h.DownFromCenter:case h.UpFromBottom:return Math.PI/2}},this.contentdirection=n,this.center=t/2,this.ratio=t/375,this.options=e,this.length=e.length,this.themeIndex=s,this.radius=i}get sizeImage(){const t=t=>48*this.ratio*5/t;if(this.length<=3)return t(4);switch(this.length){case 8:case 7:return 24*this.ratio;case 6:return 36*this.ratio;case 5:return 48*this.ratio;case 4:return 56*this.ratio;default:return t(this.length)}}getSizeImageByPartition(t){return this.options[t].Name?this.sizeImage/2:this.sizeImage}getSvgImageProps(t,i=1.25){const e=this.getSizeImageByPartition(t);let s;return s=this.options[t].Name?this.radius-e/2-3*this.ratio:(this.radius-e/2)/Number(i)-3*this.ratio,Object.assign(Object.assign({},this.getPropsForPartitionInfo(t,this.getOffsetImage(e),s,l.outward)),{width:170===this.center?24:32,height:170===this.center?24:32})}getSvgTextProps(t,i){const e=this.getSizeImageByPartition(t);let s;return s=this.options[t].Image?this.radius-e-6*this.ratio:this.radius-6*this.ratio,Object.assign({},this.getPropsForPartitionInfo(t,this.offsetText,s,void 0,i))}getSvgTextPropsAdjustedByImage(t,i){let e,s;this.options.length<=8?(e="Mobile"!==i?68:55,s=60):this.options.length<=12?(e=55,s="Mobile"!==i?60:40):this.options.length<=16&&(e="Mobile"!==i?53:47,s=60);const n=this.getSvgTextProps(t,{width:e,height:s});return Object.assign({},n)}get offsetText(){return{center:0,position:{x:0,y:0},transform:{x:0,y:0}}}getOffsetImage(t){return{center:0,position:{x:-1*t/2,y:-1*t/2},transform:{x:0,y:0}}}get direction(){return M.clockwise}getAngleSelf(t,i){return 360*t/this.length*this.direction+360*(void 0!==i?i:l[this.contentdirection])}getPartitionPositions(t,i,e){const s=this.angleTransform(this.arrowmode)+this.direction*t*2*Math.PI/this.length,n=((t,i,e)=>{const s=p(e);return{x:s.x+t*Math.cos(i),y:s.y+t*Math.sin(i)}})(i||this.radius-9*this.ratio,s,this.center+e.center);return{transformOrigin:f(n,e.transform),point:f(n,e.position)}}getPropsForPartitionInfo(t,i,e,s,n){const{point:r,transformOrigin:a}=this.getPartitionPositions(t,e,i),o=this.options.length>=12,h=0===s?(o?-2:0)-7:-(null==n?void 0:n.width)/2||-30,c=0===s?170===this.center?70:76.5:this.options[t].Image?o?-10:0:o?10:this.options.length>8&&this.options.length<12?20:30;return Object.assign(Object.assign({},r),{style:{"font-size":13*this.ratio+"px",transform:`rotate(${this.getAngleSelf(t,s)}deg) translate(${h}px, ${c}px)`,"transform-origin":`${l=a,Object.keys(l).map((t=>`${l[t]}px`)).join(" ")}`,height:`${null==n?void 0:n.height}px`,width:`${null==n?void 0:n.width}px`}});var l}getPartitionDraw(t){const i=p(this.center),e=p(this.radius),{point:s,pointNext:n}=((t,i,e,s)=>{const n=t=>((t,i,e,s)=>{const n=Math.PI/180*(360/i*(t-.5)-90),r=p(s),a=p(e);return{x:r.x+a.x*Math.cos(n),y:r.y+a.y*Math.sin(n)}})(t,i,e,s);return{point:n(t),pointNext:n(t+1)}})(t,this.length,this.radius,this.center);return{d:["M",...P(i),"L",...P(s),"A",...P(e),"0 0 1",...P(n),"Z"].join(" ")}}getDeg(t){return this.findDeg(this.length-t,this.length)}getSpinnerProps(){const t=p(this.center);return{"transform-origin":`${t.x} ${t.y}`}}}class O{constructor(t){this.deg=0,this.degTarget=void 0,this.step=void 0,this.easingType=u.cubic,this.param=k[2],this.halt=(t,i=(()=>{}))=>{this.shouldHalt=()=>{this.step=d.halt,this.cb=()=>{i(),this.setDeg(t,0)},this.degTarget=t+360*this.param.haltTurns,this.continueRepeat()}},this.continueRepeat=()=>setTimeout((()=>this.ticker()),30),this.ticker=()=>{const t=this.param.loopSpeed,i=t=>33*x[this.easingType]*t/this.param.loopSpeed,e=()=>{const t=360*this.param.launchTurns-this.deg,e=i(t);this.animateF(e,this.deg,t,y.in[this.easingType],w.in[this.easingType])},s=()=>{const t=i(this.degTarget);this.animateF(t,0,this.degTarget,y.out[this.easingType],w.out[this.easingType])},n=()=>{this.setDeg((this.deg+t)%360,x[this.easingType]),this.continueRepeat()};({[d.launch]:()=>{this.cb=()=>{this.step=d.loop,this.setDeg(t,x[this.easingType]),this.continueRepeat()},e()},[d.loop]:()=>{this.shouldHalt&&0===this.deg?this.shouldHalt():n()},[d.halt]:()=>{this.deg===360-t?s():n()}})[this.step]()},this.setDeg=(t,i)=>{this.deg=t,this.tick(t,i)},this.animateF=(t,i,e,s,n)=>{let r=null;const a=()=>{let o=(new Date).getTime();r||(r=o);const h=o-r,c=e*s(h/t)+i,l=Math.abs(n(h/t));this.setDeg(c,l),h<t?setTimeout((()=>a()),30):this.cb()};a()},this.animate=(t,i,e,s,n)=>{let r=null;window.cancelAnimationFrame(r);let a=null;const o=h=>{a||(a=h);const c=h-a,l=e*s(c/t)+i,d=Math.abs(n(c/t));this.setDeg(l,d),c<t?r=window.requestAnimationFrame(o):this.cb()};r=window.requestAnimationFrame(o)},this.tick=t.tick}launch(){this.shouldHalt=void 0,this.step=d.launch,this.ticker()}}const C=class{constructor(i){t(this,i),this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.host.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.host.prepend(i)}),1)})).catch((t=>{console.log("Error ",t)}))},this.renderImage=(t,i)=>{const e=this.options[i].Image;g(e,this.settings.getSvgImageProps(i)),t.innerHTML=null,t.appendChild(e)},this.updateSpinable=()=>{this.spinable=!!(this.luckywheel.Current&&Number(this.luckywheel.Current.RemainingTimes)>0)},this.eventSpin=()=>{this.updateSpinable(),this.spinable&&!this.isSpinning&&(this.isSpinning=!0,this.spinContainer=this.svg.querySelector("g.PartitionsContainer"),this.spinner.launch(),window.postMessage({type:"SpinLuckyWheel",data:{lotteryProgramID:this.luckywheel.Program.Id}}))},this.clientStyling="",this.clientStylingUrl="",this.language="en",this.device="Mobile",this.luckywheel=void 0,this.size="440",this.contentdirection="anticlockwise",this.limitStylingAppends=!1,this.isPartitionsCustomableReady=!1,this.isSpinning=!1,this.options=void 0,this.radius=.85*Number(this.size)/2,this.speed=0,this.settings=void 0,this.svg=void 0,this.spinContainer=void 0,this.spinable=void 0,this.spinner=void 0}handleEvent(t){const{type:i,data:e}=null==t?void 0:t.data;if("SpinLuckyWheelRes"===i&&this.isSpinning){const t=+e.Result.WheelOfFortunePartitionIndex||0;e.State===r.fulfilled?this.handleSpinResult(e,t):this.handleSpinError(t)}}handleSpinError(t){const i=this.settings.getDeg(t);this.spinner.halt(i,(()=>{this.isSpinning=!1,this.updateSpinable(),window.postMessage({type:"ShowLuckywheelRewardModal",data:{HasError:!0,NoSpinLeft:0===Number(this.luckywheel.Current.RemainingTimes)}})}))}handleSpinResult(t,i){if(this.luckywheel.Program.Id===t.LotteryProgramID){const e=this.settings.getDeg(i);this.spinner.halt(e,(()=>{var e;this.isSpinning=!1,this.updateSpinable();const s=this.luckywheel.Program.WheelOfFortune.Partitions[i],n=null===(e=t.Result.Outcomes)||void 0===e?void 0:e.some((t=>{var i;return(null===(i=t.Action)||void 0===i?void 0:i.Type)===a.noPrize})),r=(null==s?void 0:s.PrizeImage[this.language])||(null==s?void 0:s.PrizeImage["*"]);window.postMessage({type:"ShowLuckywheelRewardModal",data:{PrizeText:(null==s?void 0:s.PrizeText[this.language])||(null==s?void 0:s.PrizeText["*"]),PrizeMessage:(null==s?void 0:s.Name[this.language])||(null==s?void 0:s.Name["*"]),NoPrize:n,HasError:!1,NoSpinLeft:0===Number(this.luckywheel.Current.RemainingTimes),Assets:r}})}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}async componentWillLoad(){this.options=await v(this.luckywheel,c.en),this.settings=new j({size:this.size,radius:this.radius,options:this.options,themeIndex:1,contentdirection:this.contentdirection}),this.spinner=new O({tick:(t,i)=>{g(this.spinContainer,{style:[`transform: rotate(${t}deg)`,`height: ${this.size}px`,`width: ${this.size}px`].join(";")}),this.speed=.5*i}})}defineGeneralVariables(){return{"--length":`${this.options.length}`,"--radius":`${this.radius}`,"--ratio":""+Number(this.size)/480,"--size":`${this.size}`}}setSvgSize(t){if(!t||!this.size)return;const i=this.size.toString();t.getAttribute("width")!==i&&t.setAttribute("width",i),t.getAttribute("height")!==i&&t.setAttribute("height",i)}render(){const t={height:`${this.size}px`,width:`${this.size}px`};return i("div",{key:"e466a34c9a4526c2379aa601462c65cb65f5a445",class:`WheelContainer ${this.device}`,style:this.defineGeneralVariables()},i("svg",{key:"04b74322b3651a364a92777984b008fe845c16f0",width:this.size,height:this.size,ref:t=>{this.svg=t}},i("foreignObject",{key:"f18c832a86c1474e510cae219eae78b44667b07e",ref:this.setSvgSize.bind(this),class:"Bottom Customable"},i("div",{key:"b0adaa4e02d6394293ed3e4cc4a2331b46cc9fd1",style:t})),i("g",Object.assign({key:"9c08d5fa3cb3bde27b641f71fa2bbc0612b0b93f",class:"PartitionsContainer"},this.settings.getSpinnerProps()),i("g",{key:"cbdc31800e068702b0dc50ced9139c25e8e30785",class:"PartitionsBackgrounds"},this.options.map(((e,s)=>i("foreignObject",{ref:this.setSvgSize.bind(this),"clip-path":`url(#clip${s})`,class:"PartitionBackground Customable",style:Object.assign({"--index":s.toString()},t)},i("div",{style:t}))))),i("g",{key:"af8c9da33f138918e81b80ae691c9a58bbd9232b",class:"PartitionsBackgroundStrokes"},this.options.map(((t,e)=>i("path",Object.assign({class:"PartitionBackgroundStroke"},this.settings.getPartitionDraw(e),{width:this.size,height:this.size}))))),i("g",{key:"6ccca1f63545eae71d024ee5da59d0149607e3d1",class:"Partitions",style:{filter:this.speed>.3?`blur(${this.speed}px)`:""}},this.options.map(((t,e)=>[t.Image&&i("g",Object.assign({class:`PartitionImage PartitionImage${e}`,ref:t=>this.renderImage(t,e)},this.settings.getSvgImageProps(e))),t.Name&&i("foreignObject",Object.assign({class:"PartitionText",ref:t=>{if(t){const i=this.options.length>6?"55":"75";t.setAttribute("width",i),t.setAttribute("height",i)}}},this.settings.getSvgTextPropsAdjustedByImage(e,this.device)),i("div",{class:"PartitionTextEntityContainer"},i("p",{class:`PartitionTextEntity${"clockwise"===this.settings.contentdirection?"":" Anticlockwise"} ${this.device}`,innerHTML:t.Name})))])))),i("g",{key:"a367d23565a8cb54f6435cb120f377d934ebeca1",class:{active:this.isPartitionsCustomableReady,PartitionsCustomable1:!0}},this.options.map(((e,s)=>i("foreignObject",{ref:this.setSvgSize.bind(this),class:"Partition1 Customable",style:{"--index":s.toString()}},i("div",{style:t}))))),i("g",{key:"dbccc30fa53f944b63454d83cab4cae7ab787cb0",class:{active:this.isPartitionsCustomableReady,PartitionsCustomable2:!0}},this.options.map(((e,s)=>i("foreignObject",{ref:this.setSvgSize.bind(this),class:"Partition2 Customable",style:{"--index":s.toString()}},i("div",{style:t}))))),i("foreignObject",{key:"6ad80cb9533ec295bad090831532250cd35afd7e",ref:this.setSvgSize.bind(this),class:"Middle Customable",style:t},i("div",{key:"ba0afa07f997acf338118c1e07e4ad5446db65c1",style:t})),i("foreignObject",{key:"766381cdd2cc4b9c5243a0a78306e8329a208693",ref:this.setSvgSize.bind(this),class:"Top Customable",style:t},i("div",{key:"83df3eb57328d3eda101f90515ef6993253513e9",style:t})),i("g",{key:"d2c1b67fddb67ccc613c31b06a9daa6921eba5f2",class:{spinning:this.isSpinning,Center:!0}},i("foreignObject",{key:"a3353eb0e5d764c867f8193a5d8f7c96b18add80",ref:t=>{t&&(t.setAttribute("width","100"),t.setAttribute("height","100"))},style:{transform:`translate(${Number(this.size)/2-50}px, ${Number(this.size)/2-50}px)`}},i("div",{key:"38948f9a684ef29dc3ff0c4f8d98972cc2b32e25",style:{width:"100px",height:"100px",cursor:"pointer"},onClick:this.eventSpin}))),i("g",{key:"6f0a40abf872f17825ecd63a25970a0a89417728"},this.options.map(((t,e)=>i("clipPath",{id:`clip${e}`},i("path",Object.assign({},this.settings.getPartitionDraw(e)))))))))}get host(){return e(this)}};C.style=':host{font-family:Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"}*,*::before,*::after{margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box}.LotteryProgramWof{background:var(--emw--color-contrast, #07072A);display:flex;align-items:center;flex-direction:column;padding:20px 0}main{max-width:600px;width:100%;display:flex;justify-content:space-around;min-height:200px}svg{transition:opacity 0.3s}.WheelContainer{text-align:center}.FortuneContainer{width:100%;display:flex;align-items:center;flex-direction:column}.Center{cursor:pointer;transition:filter;transition-duration:1s}.Center.disabled{filter:grayscale(80%)}.Center .CenterCircle{fill:#3CE4BB;stroke:rgb(150, 54, 88);stroke-width:2px;cursor:pointer;transition:fill;transition-duration:1s}.Center .CenterText{fill:#FFFFFF}.PointerPartition{opacity:0.3;fill:lightgoldenrodyellow;stroke:red;stroke-width:6px;stroke-dasharray:12}.Current{color:#FFFFFF}.PartitionText{color:#FFFFFF;font-style:normal;font-weight:700;text-anchor:end;text-shadow:0px 3px #000;dominant-baseline:central}.PartitionsShadow{background-blend-mode:multiply;mix-blend-mode:multiply}.PartitionTextEntityContainer{height:100%;display:flex;align-items:center}.PartitionTextEntity{width:100%}.PartitionTextEntity.Anticlockwise{text-align:end}foreignObject.Bottom div{background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg");background-size:calc(var(--radius) * 2px + var(--ratio) * 20px);background-position:center}foreignObject.Middle div{background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg"), url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg");background-position:center, center 5px}foreignObject.Top{mix-blend-mode:multiply}foreignObject.Top div{background-image:var(--img-theme-shadow);background-position:center;background-size:calc(var(--radius) * 2px)}foreignObject.Partition1 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc(var(--index) * 360deg / var(--length)))}foreignObject.Partition2 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc((var(--index) + 0.5) * 360deg / var(--length)))}foreignObject.PointerArea{mix-blend-mode:screen}foreignObject.PointerArea div{background-image:var(--img-theme-pointer-area);background-position:center -3px;background-size:51%}foreignObject.Partition1 div,foreignObject.Partition2 div{transform-origin:center}.PartitionsCustomable1 div,.PartitionsCustomable2 div{visibility:hidden}.PartitionsCustomable1 div.active,.PartitionsCustomable2 div.active{visibility:visible}foreignObject.Customable{overflow:visible}foreignObject.Customable div{background-repeat:no-repeat}.PartitionBackground div{background-size:calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);background-position:center}.PartitionBackground:nth-child(2n) div{background:var(--emw--color-primary, #3F2E75)}.PartitionBackground:nth-child(2n+1) div{background:var(--emw--color-secondary, #9482CE)}.PartitionBackground div{transform-origin:center}.PartitionBackgroundStroke{fill:transparent;stroke:var(--emw--color-background-secondary, #251D3E);stroke-width:3px;stroke-dasharray:none}.PointerPartitionFrame{stroke:#FFDD64;fill:transparent;stroke-dasharray:var(--radius) calc(6.2831853072 / var(--length) * var(--radius));stroke-width:0px}.PointerPartitionFrame.active{stroke-width:3px}.WheelContainer.Mobile foreignObject.Middle div{background-size:95px, 38px}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity{text-align:center;text-transform:uppercase;text-shadow:none;font-size:var(--emw--font-size-small, 10px);font-weight:700}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity.Mobile{font-size:var(--emw--font-size-x-small, 8px)}';export{C}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{C as casino_engagement_suite_luckywheel}from"./casino-engagement-suite-luckywheel-
|
|
1
|
+
export{C as casino_engagement_suite_luckywheel}from"./casino-engagement-suite-luckywheel-5c877667.js";import"./index-48c42d04.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{C as CasinoEngagementSuiteLuckywheel}from"./casino-engagement-suite-luckywheel-
|
|
1
|
+
export{C as CasinoEngagementSuiteLuckywheel}from"./casino-engagement-suite-luckywheel-5c877667.js";import"./index-48c42d04.js";
|
|
@@ -324,7 +324,7 @@ class SvgCalc {
|
|
|
324
324
|
else {
|
|
325
325
|
baseRadius = (this.radius - sizeImage / 2) / Number(partitionDivisor) - 3 * this.ratio;
|
|
326
326
|
}
|
|
327
|
-
return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width:
|
|
327
|
+
return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width: (this.center === 170 ? 24 : 32), height: (this.center === 170 ? 24 : 32) });
|
|
328
328
|
}
|
|
329
329
|
getSvgTextProps(index, size) {
|
|
330
330
|
const sizeImage = this.getSizeImageByPartition(index);
|
|
@@ -337,8 +337,22 @@ class SvgCalc {
|
|
|
337
337
|
}
|
|
338
338
|
return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius, undefined, size));
|
|
339
339
|
}
|
|
340
|
-
getSvgTextPropsAdjustedByImage(index) {
|
|
341
|
-
|
|
340
|
+
getSvgTextPropsAdjustedByImage(index, device) {
|
|
341
|
+
let width;
|
|
342
|
+
let height;
|
|
343
|
+
if (this.options.length <= 8) {
|
|
344
|
+
width = device !== 'Mobile' ? 68 : 55;
|
|
345
|
+
height = device !== 'Mobile' ? 60 : 60;
|
|
346
|
+
}
|
|
347
|
+
else if (this.options.length <= 12) {
|
|
348
|
+
width = device !== 'Mobile' ? 55 : 55;
|
|
349
|
+
height = device !== 'Mobile' ? 60 : 40;
|
|
350
|
+
}
|
|
351
|
+
else if (this.options.length <= 16) {
|
|
352
|
+
width = device !== 'Mobile' ? 53 : 47;
|
|
353
|
+
height = device !== 'Mobile' ? 60 : 60;
|
|
354
|
+
}
|
|
355
|
+
const size = { width, height };
|
|
342
356
|
const props = this.getSvgTextProps(index, size);
|
|
343
357
|
return Object.assign({}, props);
|
|
344
358
|
}
|
|
@@ -373,7 +387,7 @@ class SvgCalc {
|
|
|
373
387
|
}
|
|
374
388
|
getAngleSelf(index, contentDirection) {
|
|
375
389
|
const baseAngle = ((360 * index) / this.length) * this.direction;
|
|
376
|
-
const fixerAngle =
|
|
390
|
+
const fixerAngle = 360 * (contentDirection !== undefined ? contentDirection : ContentDirection[this.contentdirection]);
|
|
377
391
|
const resultAngle = baseAngle + fixerAngle;
|
|
378
392
|
return resultAngle;
|
|
379
393
|
}
|
|
@@ -389,15 +403,22 @@ class SvgCalc {
|
|
|
389
403
|
}
|
|
390
404
|
getPropsForPartitionInfo(index, offset, baseRadius, contentDirection, size) {
|
|
391
405
|
const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset);
|
|
406
|
+
const isSmallSize = this.options.length >= 12;
|
|
407
|
+
const isMiddleSize = this.options.length > 8 && this.options.length < 12;
|
|
408
|
+
const withImage = this.options[index].Image;
|
|
409
|
+
const xTranslate = contentDirection === 0 ? -7 + (isSmallSize ? -2 : 0) : -(size === null || size === void 0 ? void 0 : size.width) / 2 || -30;
|
|
410
|
+
const yTranslate = contentDirection === 0
|
|
411
|
+
? (this.center === 170 ? 70 : 76.5)
|
|
412
|
+
: withImage ? (isSmallSize ? -10 : 0) : (isSmallSize ? 10 : isMiddleSize ? 20 : 30);
|
|
392
413
|
const getTransformOriginString = (vector) => Object.keys(vector)
|
|
393
414
|
.map((axis) => `${vector[axis]}px`)
|
|
394
415
|
.join(' ');
|
|
395
416
|
return Object.assign(Object.assign({}, point), { style: {
|
|
396
417
|
'font-size': `${13 * this.ratio}px`,
|
|
397
|
-
transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${
|
|
418
|
+
transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${xTranslate}px, ${yTranslate}px)`,
|
|
398
419
|
'transform-origin': `${getTransformOriginString(transformOrigin)}`,
|
|
399
|
-
height: `${size}px`,
|
|
400
|
-
width: `${size}px`
|
|
420
|
+
height: `${size === null || size === void 0 ? void 0 : size.height}px`,
|
|
421
|
+
width: `${size === null || size === void 0 ? void 0 : size.width}px`
|
|
401
422
|
} });
|
|
402
423
|
}
|
|
403
424
|
getPartitionDraw(index) {
|
|
@@ -549,7 +570,7 @@ class Spinner {
|
|
|
549
570
|
}
|
|
550
571
|
}
|
|
551
572
|
|
|
552
|
-
const casinoEngagementSuiteLuckywheelCss = ":host{font-family:system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}*,*::before,*::after{margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box}.LotteryProgramWof{background:var(--emw--color-contrast, #07072A);display:flex;align-items:center;flex-direction:column;padding:20px 0}main{max-width:600px;width:100%;display:flex;justify-content:space-around;min-height:200px}svg{transition:opacity 0.3s}.WheelContainer{text-align:center}.FortuneContainer{width:100%;display:flex;align-items:center;flex-direction:column}.Center{cursor:pointer;transition:filter;transition-duration:1s}.Center.disabled{filter:grayscale(80%)}.Center .CenterCircle{fill:#3CE4BB;stroke:rgb(150, 54, 88);stroke-width:2px;cursor:pointer;transition:fill;transition-duration:1s}.Center .CenterText{fill:#FFFFFF}.PointerPartition{opacity:0.3;fill:lightgoldenrodyellow;stroke:red;stroke-width:6px;stroke-dasharray:12}.Current{color:#FFFFFF}.PartitionText{color:#FFFFFF;font-style:normal;font-weight:700;text-anchor:end;text-shadow:0px 3px #000;dominant-baseline:central}.PartitionsShadow{background-blend-mode:multiply;mix-blend-mode:multiply}.PartitionTextEntityContainer{height:100%;display:flex;align-items:center}.PartitionTextEntity{width:100%}.PartitionTextEntity.Anticlockwise{text-align:end}foreignObject.Bottom div{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg\");background-size:calc(var(--radius) * 2px + var(--ratio) * 20px);background-position:center}foreignObject.Middle div{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg\"), url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg\");background-position:center, center 5px}foreignObject.Top{mix-blend-mode:multiply}foreignObject.Top div{background-image:var(--img-theme-shadow);background-position:center;background-size:calc(var(--radius) * 2px)}foreignObject.Partition1 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc(var(--index) * 360deg / var(--length)))}foreignObject.Partition2 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc((var(--index) + 0.5) * 360deg / var(--length)))}foreignObject.PointerArea{mix-blend-mode:screen}foreignObject.PointerArea div{background-image:var(--img-theme-pointer-area);background-position:center -3px;background-size:51%}foreignObject.Partition1 div,foreignObject.Partition2 div{transform-origin:center}.PartitionsCustomable1 div,.PartitionsCustomable2 div{visibility:hidden}.PartitionsCustomable1 div.active,.PartitionsCustomable2 div.active{visibility:visible}foreignObject.Customable{overflow:visible}foreignObject.Customable div{background-repeat:no-repeat}.PartitionBackground div{background-size:calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);background-position:center}.PartitionBackground:nth-child(2n) div{background:var(--emw--color-primary, #3F2E75)}.PartitionBackground:nth-child(2n+1) div{background:var(--emw--color-secondary, #9482CE)}.PartitionBackground div{transform-origin:center}.PartitionBackgroundStroke{fill:transparent;stroke:var(--emw--color-background-secondary, #251D3E);stroke-width:3px;stroke-dasharray:none}.PointerPartitionFrame{stroke:#FFDD64;fill:transparent;stroke-dasharray:var(--radius) calc(6.2831853072 / var(--length) * var(--radius));stroke-width:0px}.PointerPartitionFrame.active{stroke-width:3px}.WheelContainer.Mobile foreignObject.Middle div{background-size:95px, 38px}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity{text-align:center;text-transform:uppercase;text-shadow:none;font-size:var(--emw--font-size-small,
|
|
573
|
+
const casinoEngagementSuiteLuckywheelCss = ":host{font-family:Montserrat, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}*,*::before,*::after{margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box}.LotteryProgramWof{background:var(--emw--color-contrast, #07072A);display:flex;align-items:center;flex-direction:column;padding:20px 0}main{max-width:600px;width:100%;display:flex;justify-content:space-around;min-height:200px}svg{transition:opacity 0.3s}.WheelContainer{text-align:center}.FortuneContainer{width:100%;display:flex;align-items:center;flex-direction:column}.Center{cursor:pointer;transition:filter;transition-duration:1s}.Center.disabled{filter:grayscale(80%)}.Center .CenterCircle{fill:#3CE4BB;stroke:rgb(150, 54, 88);stroke-width:2px;cursor:pointer;transition:fill;transition-duration:1s}.Center .CenterText{fill:#FFFFFF}.PointerPartition{opacity:0.3;fill:lightgoldenrodyellow;stroke:red;stroke-width:6px;stroke-dasharray:12}.Current{color:#FFFFFF}.PartitionText{color:#FFFFFF;font-style:normal;font-weight:700;text-anchor:end;text-shadow:0px 3px #000;dominant-baseline:central}.PartitionsShadow{background-blend-mode:multiply;mix-blend-mode:multiply}.PartitionTextEntityContainer{height:100%;display:flex;align-items:center}.PartitionTextEntity{width:100%}.PartitionTextEntity.Anticlockwise{text-align:end}foreignObject.Bottom div{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg\");background-size:calc(var(--radius) * 2px + var(--ratio) * 20px);background-position:center}foreignObject.Middle div{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg\"), url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg\");background-position:center, center 5px}foreignObject.Top{mix-blend-mode:multiply}foreignObject.Top div{background-image:var(--img-theme-shadow);background-position:center;background-size:calc(var(--radius) * 2px)}foreignObject.Partition1 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc(var(--index) * 360deg / var(--length)))}foreignObject.Partition2 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc((var(--index) + 0.5) * 360deg / var(--length)))}foreignObject.PointerArea{mix-blend-mode:screen}foreignObject.PointerArea div{background-image:var(--img-theme-pointer-area);background-position:center -3px;background-size:51%}foreignObject.Partition1 div,foreignObject.Partition2 div{transform-origin:center}.PartitionsCustomable1 div,.PartitionsCustomable2 div{visibility:hidden}.PartitionsCustomable1 div.active,.PartitionsCustomable2 div.active{visibility:visible}foreignObject.Customable{overflow:visible}foreignObject.Customable div{background-repeat:no-repeat}.PartitionBackground div{background-size:calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);background-position:center}.PartitionBackground:nth-child(2n) div{background:var(--emw--color-primary, #3F2E75)}.PartitionBackground:nth-child(2n+1) div{background:var(--emw--color-secondary, #9482CE)}.PartitionBackground div{transform-origin:center}.PartitionBackgroundStroke{fill:transparent;stroke:var(--emw--color-background-secondary, #251D3E);stroke-width:3px;stroke-dasharray:none}.PointerPartitionFrame{stroke:#FFDD64;fill:transparent;stroke-dasharray:var(--radius) calc(6.2831853072 / var(--length) * var(--radius));stroke-width:0px}.PointerPartitionFrame.active{stroke-width:3px}.WheelContainer.Mobile foreignObject.Middle div{background-size:95px, 38px}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity{text-align:center;text-transform:uppercase;text-shadow:none;font-size:var(--emw--font-size-small, 10px);font-weight:700}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity.Mobile{font-size:var(--emw--font-size-x-small, 8px)}";
|
|
553
574
|
const CasinoEngagementSuiteLuckywheelStyle0 = casinoEngagementSuiteLuckywheelCss;
|
|
554
575
|
|
|
555
576
|
const CasinoEngagementSuiteLuckywheel = class {
|
|
@@ -737,27 +758,27 @@ const CasinoEngagementSuiteLuckywheel = class {
|
|
|
737
758
|
return (index.h("path", Object.assign({ class: "PartitionBackgroundStroke" }, this.settings.getPartitionDraw(index$1), { width: this.size, height: this.size })));
|
|
738
759
|
})), index.h("g", { key: '6ccca1f63545eae71d024ee5da59d0149607e3d1', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index$1) => {
|
|
739
760
|
return [
|
|
740
|
-
el.Image && (index.h("g", { class: `PartitionImage PartitionImage${index$1}`, ref: (el) => this.renderImage(el, index$1) })),
|
|
761
|
+
el.Image && (index.h("g", Object.assign({ class: `PartitionImage PartitionImage${index$1}`, ref: (el) => this.renderImage(el, index$1) }, this.settings.getSvgImageProps(index$1)))),
|
|
741
762
|
el.Name && (index.h("foreignObject", Object.assign({ class: "PartitionText", ref: (el) => {
|
|
742
763
|
if (el) {
|
|
743
|
-
const size = this.options
|
|
764
|
+
const size = this.options.length > 6 ? '55' : '75';
|
|
744
765
|
el.setAttribute('width', size);
|
|
745
766
|
el.setAttribute('height', size);
|
|
746
767
|
}
|
|
747
|
-
} }, this.settings.getSvgTextPropsAdjustedByImage(index$1)), index.h("div", { class: "PartitionTextEntityContainer" }, index.h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`, innerHTML: el.Name }))))
|
|
768
|
+
} }, this.settings.getSvgTextPropsAdjustedByImage(index$1, this.device)), index.h("div", { class: "PartitionTextEntityContainer" }, index.h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'} ${this.device}`, innerHTML: el.Name }))))
|
|
748
769
|
];
|
|
749
|
-
}))), index.h("g", { key: '
|
|
770
|
+
}))), index.h("g", { key: 'a367d23565a8cb54f6435cb120f377d934ebeca1', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable1: true } }, this.options.map((_el, index$1) => {
|
|
750
771
|
return (index.h("foreignObject", { ref: this.setSvgSize.bind(this), class: "Partition1 Customable", style: { '--index': index$1.toString() } }, index.h("div", { style: foreignObjectAgentProps })));
|
|
751
|
-
})), index.h("g", { key: '
|
|
772
|
+
})), index.h("g", { key: 'dbccc30fa53f944b63454d83cab4cae7ab787cb0', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable2: true } }, this.options.map((_el, index$1) => {
|
|
752
773
|
return (index.h("foreignObject", { ref: this.setSvgSize.bind(this), class: "Partition2 Customable", style: { '--index': index$1.toString() } }, index.h("div", { style: foreignObjectAgentProps })));
|
|
753
|
-
})), index.h("foreignObject", { key: '
|
|
774
|
+
})), index.h("foreignObject", { key: '6ad80cb9533ec295bad090831532250cd35afd7e', ref: this.setSvgSize.bind(this), class: "Middle Customable", style: foreignObjectAgentProps }, index.h("div", { key: 'ba0afa07f997acf338118c1e07e4ad5446db65c1', style: foreignObjectAgentProps })), index.h("foreignObject", { key: '766381cdd2cc4b9c5243a0a78306e8329a208693', ref: this.setSvgSize.bind(this), class: "Top Customable", style: foreignObjectAgentProps }, index.h("div", { key: '83df3eb57328d3eda101f90515ef6993253513e9', style: foreignObjectAgentProps })), index.h("g", { key: 'd2c1b67fddb67ccc613c31b06a9daa6921eba5f2', class: { spinning: this.isSpinning, Center: true } }, index.h("foreignObject", { key: 'a3353eb0e5d764c867f8193a5d8f7c96b18add80', ref: (el) => {
|
|
754
775
|
if (el) {
|
|
755
776
|
el.setAttribute('width', '100');
|
|
756
777
|
el.setAttribute('height', '100');
|
|
757
778
|
}
|
|
758
779
|
}, style: {
|
|
759
780
|
transform: `translate(${Number(this.size) / 2 - 100 / 2}px, ${Number(this.size) / 2 - 100 / 2}px)`
|
|
760
|
-
} }, index.h("div", { key: '
|
|
781
|
+
} }, index.h("div", { key: '38948f9a684ef29dc3ff0c4f8d98972cc2b32e25', style: { width: '100px', height: '100px', cursor: 'pointer' }, onClick: this.eventSpin }))), index.h("g", { key: '6f0a40abf872f17825ecd63a25970a0a89417728' }, this.options.map((_el, index$1) => {
|
|
761
782
|
return (index.h("clipPath", { id: `clip${index$1}` }, index.h("path", Object.assign({}, this.settings.getPartitionDraw(index$1)))));
|
|
762
783
|
})))));
|
|
763
784
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-
|
|
5
|
+
const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-ebc86723.js');
|
|
6
6
|
require('./index-6096cc4b.js');
|
|
7
7
|
|
|
8
8
|
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-
|
|
5
|
+
const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-ebc86723.js');
|
|
6
6
|
require('./index-6096cc4b.js');
|
|
7
7
|
|
|
8
8
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
2
|
+
font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
*,
|
|
@@ -208,6 +208,9 @@ foreignObject.Customable div {
|
|
|
208
208
|
text-align: center;
|
|
209
209
|
text-transform: uppercase;
|
|
210
210
|
text-shadow: none;
|
|
211
|
-
font-size: var(--emw--font-size-small,
|
|
212
|
-
font-weight:
|
|
211
|
+
font-size: var(--emw--font-size-small, 10px);
|
|
212
|
+
font-weight: 700;
|
|
213
|
+
}
|
|
214
|
+
.PartitionText .PartitionTextEntityContainer .PartitionTextEntity.Mobile {
|
|
215
|
+
font-size: var(--emw--font-size-x-small, 8px);
|
|
213
216
|
}
|
|
@@ -188,27 +188,27 @@ export class CasinoEngagementSuiteLuckywheel {
|
|
|
188
188
|
return (h("path", Object.assign({ class: "PartitionBackgroundStroke" }, this.settings.getPartitionDraw(index), { width: this.size, height: this.size })));
|
|
189
189
|
})), h("g", { key: '6ccca1f63545eae71d024ee5da59d0149607e3d1', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index) => {
|
|
190
190
|
return [
|
|
191
|
-
el.Image && (h("g", { class: `PartitionImage PartitionImage${index}`, ref: (el) => this.renderImage(el, index) })),
|
|
191
|
+
el.Image && (h("g", Object.assign({ class: `PartitionImage PartitionImage${index}`, ref: (el) => this.renderImage(el, index) }, this.settings.getSvgImageProps(index)))),
|
|
192
192
|
el.Name && (h("foreignObject", Object.assign({ class: "PartitionText", ref: (el) => {
|
|
193
193
|
if (el) {
|
|
194
|
-
const size = this.options
|
|
194
|
+
const size = this.options.length > 6 ? '55' : '75';
|
|
195
195
|
el.setAttribute('width', size);
|
|
196
196
|
el.setAttribute('height', size);
|
|
197
197
|
}
|
|
198
|
-
} }, this.settings.getSvgTextPropsAdjustedByImage(index)), h("div", { class: "PartitionTextEntityContainer" }, h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`, innerHTML: el.Name }))))
|
|
198
|
+
} }, this.settings.getSvgTextPropsAdjustedByImage(index, this.device)), h("div", { class: "PartitionTextEntityContainer" }, h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'} ${this.device}`, innerHTML: el.Name }))))
|
|
199
199
|
];
|
|
200
|
-
}))), h("g", { key: '
|
|
200
|
+
}))), h("g", { key: 'a367d23565a8cb54f6435cb120f377d934ebeca1', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable1: true } }, this.options.map((_el, index) => {
|
|
201
201
|
return (h("foreignObject", { ref: this.setSvgSize.bind(this), class: "Partition1 Customable", style: { '--index': index.toString() } }, h("div", { style: foreignObjectAgentProps })));
|
|
202
|
-
})), h("g", { key: '
|
|
202
|
+
})), h("g", { key: 'dbccc30fa53f944b63454d83cab4cae7ab787cb0', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable2: true } }, this.options.map((_el, index) => {
|
|
203
203
|
return (h("foreignObject", { ref: this.setSvgSize.bind(this), class: "Partition2 Customable", style: { '--index': index.toString() } }, h("div", { style: foreignObjectAgentProps })));
|
|
204
|
-
})), h("foreignObject", { key: '
|
|
204
|
+
})), h("foreignObject", { key: '6ad80cb9533ec295bad090831532250cd35afd7e', ref: this.setSvgSize.bind(this), class: "Middle Customable", style: foreignObjectAgentProps }, h("div", { key: 'ba0afa07f997acf338118c1e07e4ad5446db65c1', style: foreignObjectAgentProps })), h("foreignObject", { key: '766381cdd2cc4b9c5243a0a78306e8329a208693', ref: this.setSvgSize.bind(this), class: "Top Customable", style: foreignObjectAgentProps }, h("div", { key: '83df3eb57328d3eda101f90515ef6993253513e9', style: foreignObjectAgentProps })), h("g", { key: 'd2c1b67fddb67ccc613c31b06a9daa6921eba5f2', class: { spinning: this.isSpinning, Center: true } }, h("foreignObject", { key: 'a3353eb0e5d764c867f8193a5d8f7c96b18add80', ref: (el) => {
|
|
205
205
|
if (el) {
|
|
206
206
|
el.setAttribute('width', '100');
|
|
207
207
|
el.setAttribute('height', '100');
|
|
208
208
|
}
|
|
209
209
|
}, style: {
|
|
210
210
|
transform: `translate(${Number(this.size) / 2 - 100 / 2}px, ${Number(this.size) / 2 - 100 / 2}px)`
|
|
211
|
-
} }, h("div", { key: '
|
|
211
|
+
} }, h("div", { key: '38948f9a684ef29dc3ff0c4f8d98972cc2b32e25', style: { width: '100px', height: '100px', cursor: 'pointer' }, onClick: this.eventSpin }))), h("g", { key: '6f0a40abf872f17825ecd63a25970a0a89417728' }, this.options.map((_el, index) => {
|
|
212
212
|
return (h("clipPath", { id: `clip${index}` }, h("path", Object.assign({}, this.settings.getPartitionDraw(index)))));
|
|
213
213
|
})))));
|
|
214
214
|
}
|
|
@@ -73,7 +73,7 @@ export class SvgCalc {
|
|
|
73
73
|
else {
|
|
74
74
|
baseRadius = (this.radius - sizeImage / 2) / Number(partitionDivisor) - 3 * this.ratio;
|
|
75
75
|
}
|
|
76
|
-
return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width:
|
|
76
|
+
return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width: (this.center === 170 ? 24 : 32), height: (this.center === 170 ? 24 : 32) });
|
|
77
77
|
}
|
|
78
78
|
getSvgTextProps(index, size) {
|
|
79
79
|
const sizeImage = this.getSizeImageByPartition(index);
|
|
@@ -86,8 +86,22 @@ export class SvgCalc {
|
|
|
86
86
|
}
|
|
87
87
|
return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius, undefined, size));
|
|
88
88
|
}
|
|
89
|
-
getSvgTextPropsAdjustedByImage(index) {
|
|
90
|
-
|
|
89
|
+
getSvgTextPropsAdjustedByImage(index, device) {
|
|
90
|
+
let width;
|
|
91
|
+
let height;
|
|
92
|
+
if (this.options.length <= 8) {
|
|
93
|
+
width = device !== 'Mobile' ? 68 : 55;
|
|
94
|
+
height = device !== 'Mobile' ? 60 : 60;
|
|
95
|
+
}
|
|
96
|
+
else if (this.options.length <= 12) {
|
|
97
|
+
width = device !== 'Mobile' ? 55 : 55;
|
|
98
|
+
height = device !== 'Mobile' ? 60 : 40;
|
|
99
|
+
}
|
|
100
|
+
else if (this.options.length <= 16) {
|
|
101
|
+
width = device !== 'Mobile' ? 53 : 47;
|
|
102
|
+
height = device !== 'Mobile' ? 60 : 60;
|
|
103
|
+
}
|
|
104
|
+
const size = { width, height };
|
|
91
105
|
const props = this.getSvgTextProps(index, size);
|
|
92
106
|
return Object.assign({}, props);
|
|
93
107
|
}
|
|
@@ -122,7 +136,7 @@ export class SvgCalc {
|
|
|
122
136
|
}
|
|
123
137
|
getAngleSelf(index, contentDirection) {
|
|
124
138
|
const baseAngle = ((360 * index) / this.length) * this.direction;
|
|
125
|
-
const fixerAngle =
|
|
139
|
+
const fixerAngle = 360 * (contentDirection !== undefined ? contentDirection : ContentDirection[this.contentdirection]);
|
|
126
140
|
const resultAngle = baseAngle + fixerAngle;
|
|
127
141
|
return resultAngle;
|
|
128
142
|
}
|
|
@@ -138,15 +152,22 @@ export class SvgCalc {
|
|
|
138
152
|
}
|
|
139
153
|
getPropsForPartitionInfo(index, offset, baseRadius, contentDirection, size) {
|
|
140
154
|
const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset);
|
|
155
|
+
const isSmallSize = this.options.length >= 12;
|
|
156
|
+
const isMiddleSize = this.options.length > 8 && this.options.length < 12;
|
|
157
|
+
const withImage = this.options[index].Image;
|
|
158
|
+
const xTranslate = contentDirection === 0 ? -7 + (isSmallSize ? -2 : 0) : -(size === null || size === void 0 ? void 0 : size.width) / 2 || -30;
|
|
159
|
+
const yTranslate = contentDirection === 0
|
|
160
|
+
? (this.center === 170 ? 70 : 76.5)
|
|
161
|
+
: withImage ? (isSmallSize ? -10 : 0) : (isSmallSize ? 10 : isMiddleSize ? 20 : 30);
|
|
141
162
|
const getTransformOriginString = (vector) => Object.keys(vector)
|
|
142
163
|
.map((axis) => `${vector[axis]}px`)
|
|
143
164
|
.join(' ');
|
|
144
165
|
return Object.assign(Object.assign({}, point), { style: {
|
|
145
166
|
'font-size': `${13 * this.ratio}px`,
|
|
146
|
-
transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${
|
|
167
|
+
transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${xTranslate}px, ${yTranslate}px)`,
|
|
147
168
|
'transform-origin': `${getTransformOriginString(transformOrigin)}`,
|
|
148
|
-
height: `${size}px`,
|
|
149
|
-
width: `${size}px`
|
|
169
|
+
height: `${size === null || size === void 0 ? void 0 : size.height}px`,
|
|
170
|
+
width: `${size === null || size === void 0 ? void 0 : size.width}px`
|
|
150
171
|
} });
|
|
151
172
|
}
|
|
152
173
|
getPartitionDraw(index) {
|
|
@@ -322,7 +322,7 @@ class SvgCalc {
|
|
|
322
322
|
else {
|
|
323
323
|
baseRadius = (this.radius - sizeImage / 2) / Number(partitionDivisor) - 3 * this.ratio;
|
|
324
324
|
}
|
|
325
|
-
return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width:
|
|
325
|
+
return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width: (this.center === 170 ? 24 : 32), height: (this.center === 170 ? 24 : 32) });
|
|
326
326
|
}
|
|
327
327
|
getSvgTextProps(index, size) {
|
|
328
328
|
const sizeImage = this.getSizeImageByPartition(index);
|
|
@@ -335,8 +335,22 @@ class SvgCalc {
|
|
|
335
335
|
}
|
|
336
336
|
return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius, undefined, size));
|
|
337
337
|
}
|
|
338
|
-
getSvgTextPropsAdjustedByImage(index) {
|
|
339
|
-
|
|
338
|
+
getSvgTextPropsAdjustedByImage(index, device) {
|
|
339
|
+
let width;
|
|
340
|
+
let height;
|
|
341
|
+
if (this.options.length <= 8) {
|
|
342
|
+
width = device !== 'Mobile' ? 68 : 55;
|
|
343
|
+
height = device !== 'Mobile' ? 60 : 60;
|
|
344
|
+
}
|
|
345
|
+
else if (this.options.length <= 12) {
|
|
346
|
+
width = device !== 'Mobile' ? 55 : 55;
|
|
347
|
+
height = device !== 'Mobile' ? 60 : 40;
|
|
348
|
+
}
|
|
349
|
+
else if (this.options.length <= 16) {
|
|
350
|
+
width = device !== 'Mobile' ? 53 : 47;
|
|
351
|
+
height = device !== 'Mobile' ? 60 : 60;
|
|
352
|
+
}
|
|
353
|
+
const size = { width, height };
|
|
340
354
|
const props = this.getSvgTextProps(index, size);
|
|
341
355
|
return Object.assign({}, props);
|
|
342
356
|
}
|
|
@@ -371,7 +385,7 @@ class SvgCalc {
|
|
|
371
385
|
}
|
|
372
386
|
getAngleSelf(index, contentDirection) {
|
|
373
387
|
const baseAngle = ((360 * index) / this.length) * this.direction;
|
|
374
|
-
const fixerAngle =
|
|
388
|
+
const fixerAngle = 360 * (contentDirection !== undefined ? contentDirection : ContentDirection[this.contentdirection]);
|
|
375
389
|
const resultAngle = baseAngle + fixerAngle;
|
|
376
390
|
return resultAngle;
|
|
377
391
|
}
|
|
@@ -387,15 +401,22 @@ class SvgCalc {
|
|
|
387
401
|
}
|
|
388
402
|
getPropsForPartitionInfo(index, offset, baseRadius, contentDirection, size) {
|
|
389
403
|
const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset);
|
|
404
|
+
const isSmallSize = this.options.length >= 12;
|
|
405
|
+
const isMiddleSize = this.options.length > 8 && this.options.length < 12;
|
|
406
|
+
const withImage = this.options[index].Image;
|
|
407
|
+
const xTranslate = contentDirection === 0 ? -7 + (isSmallSize ? -2 : 0) : -(size === null || size === void 0 ? void 0 : size.width) / 2 || -30;
|
|
408
|
+
const yTranslate = contentDirection === 0
|
|
409
|
+
? (this.center === 170 ? 70 : 76.5)
|
|
410
|
+
: withImage ? (isSmallSize ? -10 : 0) : (isSmallSize ? 10 : isMiddleSize ? 20 : 30);
|
|
390
411
|
const getTransformOriginString = (vector) => Object.keys(vector)
|
|
391
412
|
.map((axis) => `${vector[axis]}px`)
|
|
392
413
|
.join(' ');
|
|
393
414
|
return Object.assign(Object.assign({}, point), { style: {
|
|
394
415
|
'font-size': `${13 * this.ratio}px`,
|
|
395
|
-
transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${
|
|
416
|
+
transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${xTranslate}px, ${yTranslate}px)`,
|
|
396
417
|
'transform-origin': `${getTransformOriginString(transformOrigin)}`,
|
|
397
|
-
height: `${size}px`,
|
|
398
|
-
width: `${size}px`
|
|
418
|
+
height: `${size === null || size === void 0 ? void 0 : size.height}px`,
|
|
419
|
+
width: `${size === null || size === void 0 ? void 0 : size.width}px`
|
|
399
420
|
} });
|
|
400
421
|
}
|
|
401
422
|
getPartitionDraw(index) {
|
|
@@ -547,7 +568,7 @@ class Spinner {
|
|
|
547
568
|
}
|
|
548
569
|
}
|
|
549
570
|
|
|
550
|
-
const casinoEngagementSuiteLuckywheelCss = ":host{font-family:system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}*,*::before,*::after{margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box}.LotteryProgramWof{background:var(--emw--color-contrast, #07072A);display:flex;align-items:center;flex-direction:column;padding:20px 0}main{max-width:600px;width:100%;display:flex;justify-content:space-around;min-height:200px}svg{transition:opacity 0.3s}.WheelContainer{text-align:center}.FortuneContainer{width:100%;display:flex;align-items:center;flex-direction:column}.Center{cursor:pointer;transition:filter;transition-duration:1s}.Center.disabled{filter:grayscale(80%)}.Center .CenterCircle{fill:#3CE4BB;stroke:rgb(150, 54, 88);stroke-width:2px;cursor:pointer;transition:fill;transition-duration:1s}.Center .CenterText{fill:#FFFFFF}.PointerPartition{opacity:0.3;fill:lightgoldenrodyellow;stroke:red;stroke-width:6px;stroke-dasharray:12}.Current{color:#FFFFFF}.PartitionText{color:#FFFFFF;font-style:normal;font-weight:700;text-anchor:end;text-shadow:0px 3px #000;dominant-baseline:central}.PartitionsShadow{background-blend-mode:multiply;mix-blend-mode:multiply}.PartitionTextEntityContainer{height:100%;display:flex;align-items:center}.PartitionTextEntity{width:100%}.PartitionTextEntity.Anticlockwise{text-align:end}foreignObject.Bottom div{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg\");background-size:calc(var(--radius) * 2px + var(--ratio) * 20px);background-position:center}foreignObject.Middle div{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg\"), url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg\");background-position:center, center 5px}foreignObject.Top{mix-blend-mode:multiply}foreignObject.Top div{background-image:var(--img-theme-shadow);background-position:center;background-size:calc(var(--radius) * 2px)}foreignObject.Partition1 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc(var(--index) * 360deg / var(--length)))}foreignObject.Partition2 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc((var(--index) + 0.5) * 360deg / var(--length)))}foreignObject.PointerArea{mix-blend-mode:screen}foreignObject.PointerArea div{background-image:var(--img-theme-pointer-area);background-position:center -3px;background-size:51%}foreignObject.Partition1 div,foreignObject.Partition2 div{transform-origin:center}.PartitionsCustomable1 div,.PartitionsCustomable2 div{visibility:hidden}.PartitionsCustomable1 div.active,.PartitionsCustomable2 div.active{visibility:visible}foreignObject.Customable{overflow:visible}foreignObject.Customable div{background-repeat:no-repeat}.PartitionBackground div{background-size:calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);background-position:center}.PartitionBackground:nth-child(2n) div{background:var(--emw--color-primary, #3F2E75)}.PartitionBackground:nth-child(2n+1) div{background:var(--emw--color-secondary, #9482CE)}.PartitionBackground div{transform-origin:center}.PartitionBackgroundStroke{fill:transparent;stroke:var(--emw--color-background-secondary, #251D3E);stroke-width:3px;stroke-dasharray:none}.PointerPartitionFrame{stroke:#FFDD64;fill:transparent;stroke-dasharray:var(--radius) calc(6.2831853072 / var(--length) * var(--radius));stroke-width:0px}.PointerPartitionFrame.active{stroke-width:3px}.WheelContainer.Mobile foreignObject.Middle div{background-size:95px, 38px}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity{text-align:center;text-transform:uppercase;text-shadow:none;font-size:var(--emw--font-size-small,
|
|
571
|
+
const casinoEngagementSuiteLuckywheelCss = ":host{font-family:Montserrat, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}*,*::before,*::after{margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box}.LotteryProgramWof{background:var(--emw--color-contrast, #07072A);display:flex;align-items:center;flex-direction:column;padding:20px 0}main{max-width:600px;width:100%;display:flex;justify-content:space-around;min-height:200px}svg{transition:opacity 0.3s}.WheelContainer{text-align:center}.FortuneContainer{width:100%;display:flex;align-items:center;flex-direction:column}.Center{cursor:pointer;transition:filter;transition-duration:1s}.Center.disabled{filter:grayscale(80%)}.Center .CenterCircle{fill:#3CE4BB;stroke:rgb(150, 54, 88);stroke-width:2px;cursor:pointer;transition:fill;transition-duration:1s}.Center .CenterText{fill:#FFFFFF}.PointerPartition{opacity:0.3;fill:lightgoldenrodyellow;stroke:red;stroke-width:6px;stroke-dasharray:12}.Current{color:#FFFFFF}.PartitionText{color:#FFFFFF;font-style:normal;font-weight:700;text-anchor:end;text-shadow:0px 3px #000;dominant-baseline:central}.PartitionsShadow{background-blend-mode:multiply;mix-blend-mode:multiply}.PartitionTextEntityContainer{height:100%;display:flex;align-items:center}.PartitionTextEntity{width:100%}.PartitionTextEntity.Anticlockwise{text-align:end}foreignObject.Bottom div{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg\");background-size:calc(var(--radius) * 2px + var(--ratio) * 20px);background-position:center}foreignObject.Middle div{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg\"), url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg\");background-position:center, center 5px}foreignObject.Top{mix-blend-mode:multiply}foreignObject.Top div{background-image:var(--img-theme-shadow);background-position:center;background-size:calc(var(--radius) * 2px)}foreignObject.Partition1 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc(var(--index) * 360deg / var(--length)))}foreignObject.Partition2 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc((var(--index) + 0.5) * 360deg / var(--length)))}foreignObject.PointerArea{mix-blend-mode:screen}foreignObject.PointerArea div{background-image:var(--img-theme-pointer-area);background-position:center -3px;background-size:51%}foreignObject.Partition1 div,foreignObject.Partition2 div{transform-origin:center}.PartitionsCustomable1 div,.PartitionsCustomable2 div{visibility:hidden}.PartitionsCustomable1 div.active,.PartitionsCustomable2 div.active{visibility:visible}foreignObject.Customable{overflow:visible}foreignObject.Customable div{background-repeat:no-repeat}.PartitionBackground div{background-size:calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);background-position:center}.PartitionBackground:nth-child(2n) div{background:var(--emw--color-primary, #3F2E75)}.PartitionBackground:nth-child(2n+1) div{background:var(--emw--color-secondary, #9482CE)}.PartitionBackground div{transform-origin:center}.PartitionBackgroundStroke{fill:transparent;stroke:var(--emw--color-background-secondary, #251D3E);stroke-width:3px;stroke-dasharray:none}.PointerPartitionFrame{stroke:#FFDD64;fill:transparent;stroke-dasharray:var(--radius) calc(6.2831853072 / var(--length) * var(--radius));stroke-width:0px}.PointerPartitionFrame.active{stroke-width:3px}.WheelContainer.Mobile foreignObject.Middle div{background-size:95px, 38px}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity{text-align:center;text-transform:uppercase;text-shadow:none;font-size:var(--emw--font-size-small, 10px);font-weight:700}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity.Mobile{font-size:var(--emw--font-size-x-small, 8px)}";
|
|
551
572
|
const CasinoEngagementSuiteLuckywheelStyle0 = casinoEngagementSuiteLuckywheelCss;
|
|
552
573
|
|
|
553
574
|
const CasinoEngagementSuiteLuckywheel = class {
|
|
@@ -735,27 +756,27 @@ const CasinoEngagementSuiteLuckywheel = class {
|
|
|
735
756
|
return (h("path", Object.assign({ class: "PartitionBackgroundStroke" }, this.settings.getPartitionDraw(index), { width: this.size, height: this.size })));
|
|
736
757
|
})), h("g", { key: '6ccca1f63545eae71d024ee5da59d0149607e3d1', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index) => {
|
|
737
758
|
return [
|
|
738
|
-
el.Image && (h("g", { class: `PartitionImage PartitionImage${index}`, ref: (el) => this.renderImage(el, index) })),
|
|
759
|
+
el.Image && (h("g", Object.assign({ class: `PartitionImage PartitionImage${index}`, ref: (el) => this.renderImage(el, index) }, this.settings.getSvgImageProps(index)))),
|
|
739
760
|
el.Name && (h("foreignObject", Object.assign({ class: "PartitionText", ref: (el) => {
|
|
740
761
|
if (el) {
|
|
741
|
-
const size = this.options
|
|
762
|
+
const size = this.options.length > 6 ? '55' : '75';
|
|
742
763
|
el.setAttribute('width', size);
|
|
743
764
|
el.setAttribute('height', size);
|
|
744
765
|
}
|
|
745
|
-
} }, this.settings.getSvgTextPropsAdjustedByImage(index)), h("div", { class: "PartitionTextEntityContainer" }, h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`, innerHTML: el.Name }))))
|
|
766
|
+
} }, this.settings.getSvgTextPropsAdjustedByImage(index, this.device)), h("div", { class: "PartitionTextEntityContainer" }, h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'} ${this.device}`, innerHTML: el.Name }))))
|
|
746
767
|
];
|
|
747
|
-
}))), h("g", { key: '
|
|
768
|
+
}))), h("g", { key: 'a367d23565a8cb54f6435cb120f377d934ebeca1', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable1: true } }, this.options.map((_el, index) => {
|
|
748
769
|
return (h("foreignObject", { ref: this.setSvgSize.bind(this), class: "Partition1 Customable", style: { '--index': index.toString() } }, h("div", { style: foreignObjectAgentProps })));
|
|
749
|
-
})), h("g", { key: '
|
|
770
|
+
})), h("g", { key: 'dbccc30fa53f944b63454d83cab4cae7ab787cb0', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable2: true } }, this.options.map((_el, index) => {
|
|
750
771
|
return (h("foreignObject", { ref: this.setSvgSize.bind(this), class: "Partition2 Customable", style: { '--index': index.toString() } }, h("div", { style: foreignObjectAgentProps })));
|
|
751
|
-
})), h("foreignObject", { key: '
|
|
772
|
+
})), h("foreignObject", { key: '6ad80cb9533ec295bad090831532250cd35afd7e', ref: this.setSvgSize.bind(this), class: "Middle Customable", style: foreignObjectAgentProps }, h("div", { key: 'ba0afa07f997acf338118c1e07e4ad5446db65c1', style: foreignObjectAgentProps })), h("foreignObject", { key: '766381cdd2cc4b9c5243a0a78306e8329a208693', ref: this.setSvgSize.bind(this), class: "Top Customable", style: foreignObjectAgentProps }, h("div", { key: '83df3eb57328d3eda101f90515ef6993253513e9', style: foreignObjectAgentProps })), h("g", { key: 'd2c1b67fddb67ccc613c31b06a9daa6921eba5f2', class: { spinning: this.isSpinning, Center: true } }, h("foreignObject", { key: 'a3353eb0e5d764c867f8193a5d8f7c96b18add80', ref: (el) => {
|
|
752
773
|
if (el) {
|
|
753
774
|
el.setAttribute('width', '100');
|
|
754
775
|
el.setAttribute('height', '100');
|
|
755
776
|
}
|
|
756
777
|
}, style: {
|
|
757
778
|
transform: `translate(${Number(this.size) / 2 - 100 / 2}px, ${Number(this.size) / 2 - 100 / 2}px)`
|
|
758
|
-
} }, h("div", { key: '
|
|
779
|
+
} }, h("div", { key: '38948f9a684ef29dc3ff0c4f8d98972cc2b32e25', style: { width: '100px', height: '100px', cursor: 'pointer' }, onClick: this.eventSpin }))), h("g", { key: '6f0a40abf872f17825ecd63a25970a0a89417728' }, this.options.map((_el, index) => {
|
|
759
780
|
return (h("clipPath", { id: `clip${index}` }, h("path", Object.assign({}, this.settings.getPartitionDraw(index)))));
|
|
760
781
|
})))));
|
|
761
782
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as casino_engagement_suite_luckywheel } from './casino-engagement-suite-luckywheel-
|
|
1
|
+
export { C as casino_engagement_suite_luckywheel } from './casino-engagement-suite-luckywheel-5c877667.js';
|
|
2
2
|
import './index-48c42d04.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as CasinoEngagementSuiteLuckywheel } from './casino-engagement-suite-luckywheel-
|
|
1
|
+
export { C as CasinoEngagementSuiteLuckywheel } from './casino-engagement-suite-luckywheel-5c877667.js';
|
|
2
2
|
import './index-48c42d04.js';
|
|
@@ -53,7 +53,7 @@ export declare class SvgCalc {
|
|
|
53
53
|
x: number;
|
|
54
54
|
y: number;
|
|
55
55
|
};
|
|
56
|
-
getSvgTextPropsAdjustedByImage(index:
|
|
56
|
+
getSvgTextPropsAdjustedByImage(index: number, device: string): {
|
|
57
57
|
style: {
|
|
58
58
|
'font-size': string;
|
|
59
59
|
transform: string;
|
|
@@ -92,7 +92,10 @@ export declare class SvgCalc {
|
|
|
92
92
|
transformOrigin: Point;
|
|
93
93
|
point: Point;
|
|
94
94
|
};
|
|
95
|
-
getPropsForPartitionInfo(index: number, offset: any, baseRadius?: number, contentDirection?: ContentDirection, size?:
|
|
95
|
+
getPropsForPartitionInfo(index: number, offset: any, baseRadius?: number, contentDirection?: ContentDirection, size?: {
|
|
96
|
+
width: string;
|
|
97
|
+
height: string;
|
|
98
|
+
}): {
|
|
96
99
|
style: {
|
|
97
100
|
'font-size': string;
|
|
98
101
|
transform: string;
|
package/package.json
CHANGED
package/dist/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel-465c9acd.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as i,g as e}from"./index-48c42d04.js";var s,r,n,a,o,h,c,l,d,u;!function(t){t.ActiveTickets="ActiveTickets",t.ImplicitTickets="ImplicitTickets",t.RemainingTimes="RemainingTimes"}(s||(s={})),function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise",t[t.outward=0]="outward"}(r||(r={})),function(t){t.fulfilled="fulfilled",t.drawn="drawn"}(n||(n={})),function(t){t.noPrize="noprize",t.luckywheel="luckywheel",t.bonus="bonus"}(a||(a={})),function(t){t.Arrow="Arrow",t.Partition="Partition"}(o||(o={})),function(t){t.DownFromTop="DownFromTop",t.UpFromCenter="UpFromCenter",t.DownFromCenter="DownFromCenter",t.UpFromBottom="UpFromBottom"}(h||(h={})),function(t){t.en="en",t.fr="fr",t.de="de",t.tr="tr"}(c||(c={})),function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise",t[t.outward=0]="outward"}(l||(l={})),function(t){t.launch="launch",t.loop="loop",t.halt="halt"}(d||(d={})),function(t){t.quad="quad",t.cubic="cubic",t.quart="quart",t.quint="quint",t.expo="expo",t.sine="sine",t.circ="circ"}(u||(u={}));const g=(t,i)=>{Object.keys(i).map((e=>{t.setAttribute(e.split(/(?=[A-Z])/).map((t=>t.toLocaleLowerCase())).join("-"),i[e])}))},b=t=>new Promise((i=>{let e=document.createElementNS("http://www.w3.org/2000/svg","image");e.onload=()=>i(e),e.onerror=()=>i(e),e.href.baseVal=t})),p=t=>({x:t,y:t}),m=(t,i)=>({x:t.x+i.x,y:t.y+i.y}),f={Image:"",Name:"Thank you",PrizeText:"",PrizeImage:""},v=async(t,i)=>{let e=((t,i)=>{const e=t.map((t=>{const e={};return Object.keys(t).map((s=>{"object"==typeof t[s]&&t[s]&&(e["Image1"===s?"Image":s]=t[s][i]||t[s]["*"])})),e}));return(t=>{let i=0;return t.map((t=>{i+=Number(t.probability)})),i})(t)<1&&e.push(f),e})(t.Program.WheelOfFortune.Partitions,i);return e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent)?e.map((t=>{if(t.Image){const i=document.createElementNS("http://www.w3.org/2000/svg","image");return i.href.baseVal=t.Image,Object.assign(Object.assign({},t),{Image:i})}return t})):await Promise.all(e.map((async t=>Object.assign(Object.assign({},t),await(async t=>t?{Image:await b(t)}:{})(t.Image))))),e},y={in:{quad:t=>Math.pow(t,2),cubic:t=>Math.pow(t,3),quart:t=>Math.pow(t,4),quint:t=>Math.pow(t,5),sine:t=>1-Math.cos(t*Math.PI/2),expo:t=>0===t?0:Math.pow(2,10*t-10),circ:t=>1-Math.sqrt(1-Math.pow(t,2))},out:{quad:t=>1-Math.pow(1-t,2),cubic:t=>1-Math.pow(1-t,3),quart:t=>1-Math.pow(1-t,4),quint:t=>1-Math.pow(1-t,5),sine:t=>Math.sin(t*Math.PI/2),expo:t=>1===t?1:1-Math.pow(2,-10*t),circ:t=>Math.sqrt(1-Math.pow(t-1,2))}},x={quad:2,cubic:3,quart:4,quint:5,sine:Math.PI/2,expo:Math.LN2,circ:1/0},w={in:{quad:t=>2*t,cubic:t=>3*t**2,quart:t=>4*t**3,quint:t=>5*t**4,sine:t=>Math.PI/2*Math.sin(Math.PI/2*t),expo:t=>10*Math.LN2*2**(10*t-10),circ:t=>-.5*(1-t**2)**-.5},out:{cubic:t=>3*t**2-6*t+3}},k=[{launchTurns:5,launchSpeed:.2,loopSpeed:15,haltTurns:2,haltSpeed:.16},{launchTurns:2,launchSpeed:.5,loopSpeed:20,haltTurns:2,haltSpeed:.22},{launchTurns:6,launchSpeed:1.38,loopSpeed:45,haltTurns:6,haltSpeed:.5}],P=t=>Object.keys(t).map((i=>t[i]));var M;!function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise"}(M||(M={}));class j{constructor({size:t,radius:i,options:e,themeIndex:s,contentdirection:r}){this.arrowmode=h.DownFromTop,this.convertDegToArc=t=>t*Math.PI/180,this.convertArcToDeg=t=>180*t/Math.PI%360,this.getArcDelta=t=>2*Math.PI/t,this.findDeg=(t,i)=>t*this.convertArcToDeg(this.getArcDelta(i)),this.angleTransform=t=>{switch(t){case h.DownFromTop:case h.UpFromCenter:return-Math.PI/2;case h.DownFromCenter:case h.UpFromBottom:return Math.PI/2}},this.contentdirection=r,this.center=t/2,this.ratio=t/375,this.options=e,this.length=e.length,this.themeIndex=s,this.radius=i}get sizeImage(){const t=t=>48*this.ratio*5/t;if(this.length<=3)return t(4);switch(this.length){case 8:case 7:return 24*this.ratio;case 6:return 36*this.ratio;case 5:return 48*this.ratio;case 4:return 56*this.ratio;default:return t(this.length)}}getSizeImageByPartition(t){return this.options[t].Name?this.sizeImage/2:this.sizeImage}getSvgImageProps(t,i=1.25){const e=this.getSizeImageByPartition(t);let s;return s=this.options[t].Name?this.radius-e/2-3*this.ratio:(this.radius-e/2)/Number(i)-3*this.ratio,Object.assign(Object.assign({},this.getPropsForPartitionInfo(t,this.getOffsetImage(e),s,l.outward)),{width:e,height:e})}getSvgTextProps(t,i){const e=this.getSizeImageByPartition(t);let s;return s=this.options[t].Image?this.radius-e-6*this.ratio:this.radius-6*this.ratio,Object.assign({},this.getPropsForPartitionInfo(t,this.offsetText,s,void 0,i))}getSvgTextPropsAdjustedByImage(t){const i=this.getSvgTextProps(t,this.options[t].Image?80:100);return Object.assign({},i)}get offsetText(){return{center:0,position:{x:0,y:0},transform:{x:0,y:0}}}getOffsetImage(t){return{center:0,position:{x:-1*t/2,y:-1*t/2},transform:{x:0,y:0}}}get direction(){return M.clockwise}getAngleSelf(t,i){return 360*t/this.length*this.direction+90*(void 0!==i?i:l[this.contentdirection])}getPartitionPositions(t,i,e){const s=this.angleTransform(this.arrowmode)+this.direction*t*2*Math.PI/this.length,r=((t,i,e)=>{const s=p(e);return{x:s.x+t*Math.cos(i),y:s.y+t*Math.sin(i)}})(i||this.radius-9*this.ratio,s,this.center+e.center);return{transformOrigin:m(r,e.transform),point:m(r,e.position)}}getPropsForPartitionInfo(t,i,e,s,r){const{point:n,transformOrigin:a}=this.getPartitionPositions(t,e,i);return Object.assign(Object.assign({},n),{style:{"font-size":13*this.ratio+"px",transform:`rotate(${this.getAngleSelf(t,s)}deg) translate(${"clockwise"===this.contentdirection?n.x:n.x-100}px, ${n.y-50}px)`,"transform-origin":`${o=a,Object.keys(o).map((t=>`${o[t]}px`)).join(" ")}`,height:`${r}px`,width:`${r}px`}});var o}getPartitionDraw(t){const i=p(this.center),e=p(this.radius),{point:s,pointNext:r}=((t,i,e,s)=>{const r=t=>((t,i,e,s)=>{const r=Math.PI/180*(360/i*(t-.5)-90),n=p(s),a=p(e);return{x:n.x+a.x*Math.cos(r),y:n.y+a.y*Math.sin(r)}})(t,i,e,s);return{point:r(t),pointNext:r(t+1)}})(t,this.length,this.radius,this.center);return{d:["M",...P(i),"L",...P(s),"A",...P(e),"0 0 1",...P(r),"Z"].join(" ")}}getDeg(t){return this.findDeg(this.length-t,this.length)}getSpinnerProps(){const t=p(this.center);return{"transform-origin":`${t.x} ${t.y}`}}}class O{constructor(t){this.deg=0,this.degTarget=void 0,this.step=void 0,this.easingType=u.cubic,this.param=k[2],this.halt=(t,i=(()=>{}))=>{this.shouldHalt=()=>{this.step=d.halt,this.cb=()=>{i(),this.setDeg(t,0)},this.degTarget=t+360*this.param.haltTurns,this.continueRepeat()}},this.continueRepeat=()=>setTimeout((()=>this.ticker()),30),this.ticker=()=>{const t=this.param.loopSpeed,i=t=>33*x[this.easingType]*t/this.param.loopSpeed,e=()=>{const t=360*this.param.launchTurns-this.deg,e=i(t);this.animateF(e,this.deg,t,y.in[this.easingType],w.in[this.easingType])},s=()=>{const t=i(this.degTarget);this.animateF(t,0,this.degTarget,y.out[this.easingType],w.out[this.easingType])},r=()=>{this.setDeg((this.deg+t)%360,x[this.easingType]),this.continueRepeat()};({[d.launch]:()=>{this.cb=()=>{this.step=d.loop,this.setDeg(t,x[this.easingType]),this.continueRepeat()},e()},[d.loop]:()=>{this.shouldHalt&&0===this.deg?this.shouldHalt():r()},[d.halt]:()=>{this.deg===360-t?s():r()}})[this.step]()},this.setDeg=(t,i)=>{this.deg=t,this.tick(t,i)},this.animateF=(t,i,e,s,r)=>{let n=null;const a=()=>{let o=(new Date).getTime();n||(n=o);const h=o-n,c=e*s(h/t)+i,l=Math.abs(r(h/t));this.setDeg(c,l),h<t?setTimeout((()=>a()),30):this.cb()};a()},this.animate=(t,i,e,s,r)=>{let n=null;window.cancelAnimationFrame(n);let a=null;const o=h=>{a||(a=h);const c=h-a,l=e*s(c/t)+i,d=Math.abs(r(c/t));this.setDeg(l,d),c<t?n=window.requestAnimationFrame(o):this.cb()};n=window.requestAnimationFrame(o)},this.tick=t.tick}launch(){this.shouldHalt=void 0,this.step=d.launch,this.ticker()}}const C=class{constructor(i){t(this,i),this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.host.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.host.prepend(i)}),1)})).catch((t=>{console.log("Error ",t)}))},this.renderImage=(t,i)=>{const e=this.options[i].Image;g(e,this.settings.getSvgImageProps(i)),t.innerHTML=null,t.appendChild(e)},this.updateSpinable=()=>{this.spinable=!!(this.luckywheel.Current&&Number(this.luckywheel.Current.RemainingTimes)>0)},this.eventSpin=()=>{this.updateSpinable(),this.spinable&&!this.isSpinning&&(this.isSpinning=!0,this.spinContainer=this.svg.querySelector("g.PartitionsContainer"),this.spinner.launch(),window.postMessage({type:"SpinLuckyWheel",data:{lotteryProgramID:this.luckywheel.Program.Id}}))},this.clientStyling="",this.clientStylingUrl="",this.language="en",this.device="Mobile",this.luckywheel=void 0,this.size="440",this.contentdirection="anticlockwise",this.limitStylingAppends=!1,this.isPartitionsCustomableReady=!1,this.isSpinning=!1,this.options=void 0,this.radius=.85*Number(this.size)/2,this.speed=0,this.settings=void 0,this.svg=void 0,this.spinContainer=void 0,this.spinable=void 0,this.spinner=void 0}handleEvent(t){const{type:i,data:e}=null==t?void 0:t.data;if("SpinLuckyWheelRes"===i&&this.isSpinning){const t=+e.Result.WheelOfFortunePartitionIndex||0;e.State===n.fulfilled?this.handleSpinResult(e,t):this.handleSpinError(t)}}handleSpinError(t){const i=this.settings.getDeg(t);this.spinner.halt(i,(()=>{this.isSpinning=!1,this.updateSpinable(),window.postMessage({type:"ShowLuckywheelRewardModal",data:{HasError:!0,NoSpinLeft:0===Number(this.luckywheel.Current.RemainingTimes)}})}))}handleSpinResult(t,i){if(this.luckywheel.Program.Id===t.LotteryProgramID){const e=this.settings.getDeg(i);this.spinner.halt(e,(()=>{var e;this.isSpinning=!1,this.updateSpinable();const s=this.luckywheel.Program.WheelOfFortune.Partitions[i],r=null===(e=t.Result.Outcomes)||void 0===e?void 0:e.some((t=>{var i;return(null===(i=t.Action)||void 0===i?void 0:i.Type)===a.noPrize})),n=(null==s?void 0:s.PrizeImage[this.language])||(null==s?void 0:s.PrizeImage["*"]);window.postMessage({type:"ShowLuckywheelRewardModal",data:{PrizeText:(null==s?void 0:s.PrizeText[this.language])||(null==s?void 0:s.PrizeText["*"]),PrizeMessage:(null==s?void 0:s.Name[this.language])||(null==s?void 0:s.Name["*"]),NoPrize:r,HasError:!1,NoSpinLeft:0===Number(this.luckywheel.Current.RemainingTimes),Assets:n}})}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}async componentWillLoad(){this.options=await v(this.luckywheel,c.en),this.settings=new j({size:this.size,radius:this.radius,options:this.options,themeIndex:1,contentdirection:this.contentdirection}),this.spinner=new O({tick:(t,i)=>{g(this.spinContainer,{style:[`transform: rotate(${t}deg)`,`height: ${this.size}px`,`width: ${this.size}px`].join(";")}),this.speed=.5*i}})}defineGeneralVariables(){return{"--length":`${this.options.length}`,"--radius":`${this.radius}`,"--ratio":""+Number(this.size)/480,"--size":`${this.size}`}}setSvgSize(t){if(!t||!this.size)return;const i=this.size.toString();t.getAttribute("width")!==i&&t.setAttribute("width",i),t.getAttribute("height")!==i&&t.setAttribute("height",i)}render(){const t={height:`${this.size}px`,width:`${this.size}px`};return i("div",{key:"e466a34c9a4526c2379aa601462c65cb65f5a445",class:`WheelContainer ${this.device}`,style:this.defineGeneralVariables()},i("svg",{key:"04b74322b3651a364a92777984b008fe845c16f0",width:this.size,height:this.size,ref:t=>{this.svg=t}},i("foreignObject",{key:"f18c832a86c1474e510cae219eae78b44667b07e",ref:this.setSvgSize.bind(this),class:"Bottom Customable"},i("div",{key:"b0adaa4e02d6394293ed3e4cc4a2331b46cc9fd1",style:t})),i("g",Object.assign({key:"9c08d5fa3cb3bde27b641f71fa2bbc0612b0b93f",class:"PartitionsContainer"},this.settings.getSpinnerProps()),i("g",{key:"cbdc31800e068702b0dc50ced9139c25e8e30785",class:"PartitionsBackgrounds"},this.options.map(((e,s)=>i("foreignObject",{ref:this.setSvgSize.bind(this),"clip-path":`url(#clip${s})`,class:"PartitionBackground Customable",style:Object.assign({"--index":s.toString()},t)},i("div",{style:t}))))),i("g",{key:"af8c9da33f138918e81b80ae691c9a58bbd9232b",class:"PartitionsBackgroundStrokes"},this.options.map(((t,e)=>i("path",Object.assign({class:"PartitionBackgroundStroke"},this.settings.getPartitionDraw(e),{width:this.size,height:this.size}))))),i("g",{key:"6ccca1f63545eae71d024ee5da59d0149607e3d1",class:"Partitions",style:{filter:this.speed>.3?`blur(${this.speed}px)`:""}},this.options.map(((t,e)=>[t.Image&&i("g",{class:`PartitionImage PartitionImage${e}`,ref:t=>this.renderImage(t,e)}),t.Name&&i("foreignObject",Object.assign({class:"PartitionText",ref:t=>{if(t){const i=this.options[e].Image?"80":"100";t.setAttribute("width",i),t.setAttribute("height",i)}}},this.settings.getSvgTextPropsAdjustedByImage(e)),i("div",{class:"PartitionTextEntityContainer"},i("p",{class:"PartitionTextEntity"+("clockwise"===this.settings.contentdirection?"":" Anticlockwise"),innerHTML:t.Name})))])))),i("g",{key:"3716205850e37ff3c28b0f2b60eb802030c43486",class:{active:this.isPartitionsCustomableReady,PartitionsCustomable1:!0}},this.options.map(((e,s)=>i("foreignObject",{ref:this.setSvgSize.bind(this),class:"Partition1 Customable",style:{"--index":s.toString()}},i("div",{style:t}))))),i("g",{key:"ae4c41ce94798a93b9177acc06e5239978ae68c9",class:{active:this.isPartitionsCustomableReady,PartitionsCustomable2:!0}},this.options.map(((e,s)=>i("foreignObject",{ref:this.setSvgSize.bind(this),class:"Partition2 Customable",style:{"--index":s.toString()}},i("div",{style:t}))))),i("foreignObject",{key:"9ecdb1ed900fe490f410aaf723d42d70ace00abb",ref:this.setSvgSize.bind(this),class:"Middle Customable",style:t},i("div",{key:"11f52db7cb359d4c7d06c60f90522e79fcdba8d6",style:t})),i("foreignObject",{key:"fe41edba48d92e874b2d91710109915462b84c1e",ref:this.setSvgSize.bind(this),class:"Top Customable",style:t},i("div",{key:"4184ba626040e1bd02e99528155e739a78f91b88",style:t})),i("g",{key:"b7aec5044c7eb0876f3538315a07249f63e8ce7a",class:{spinning:this.isSpinning,Center:!0}},i("foreignObject",{key:"8ac120e48cca2609822cc2a56a631b644b31f817",ref:t=>{t&&(t.setAttribute("width","100"),t.setAttribute("height","100"))},style:{transform:`translate(${Number(this.size)/2-50}px, ${Number(this.size)/2-50}px)`}},i("div",{key:"dfe3083c12038c4a5ee24cdc7e0cc25c8e6d2220",style:{width:"100px",height:"100px",cursor:"pointer"},onClick:this.eventSpin}))),i("g",{key:"67813a6d878b3e75605cf35acc436848a1ed7138"},this.options.map(((t,e)=>i("clipPath",{id:`clip${e}`},i("path",Object.assign({},this.settings.getPartitionDraw(e)))))))))}get host(){return e(this)}};C.style=':host{font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"}*,*::before,*::after{margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box}.LotteryProgramWof{background:var(--emw--color-contrast, #07072A);display:flex;align-items:center;flex-direction:column;padding:20px 0}main{max-width:600px;width:100%;display:flex;justify-content:space-around;min-height:200px}svg{transition:opacity 0.3s}.WheelContainer{text-align:center}.FortuneContainer{width:100%;display:flex;align-items:center;flex-direction:column}.Center{cursor:pointer;transition:filter;transition-duration:1s}.Center.disabled{filter:grayscale(80%)}.Center .CenterCircle{fill:#3CE4BB;stroke:rgb(150, 54, 88);stroke-width:2px;cursor:pointer;transition:fill;transition-duration:1s}.Center .CenterText{fill:#FFFFFF}.PointerPartition{opacity:0.3;fill:lightgoldenrodyellow;stroke:red;stroke-width:6px;stroke-dasharray:12}.Current{color:#FFFFFF}.PartitionText{color:#FFFFFF;font-style:normal;font-weight:700;text-anchor:end;text-shadow:0px 3px #000;dominant-baseline:central}.PartitionsShadow{background-blend-mode:multiply;mix-blend-mode:multiply}.PartitionTextEntityContainer{height:100%;display:flex;align-items:center}.PartitionTextEntity{width:100%}.PartitionTextEntity.Anticlockwise{text-align:end}foreignObject.Bottom div{background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg");background-size:calc(var(--radius) * 2px + var(--ratio) * 20px);background-position:center}foreignObject.Middle div{background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg"), url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg");background-position:center, center 5px}foreignObject.Top{mix-blend-mode:multiply}foreignObject.Top div{background-image:var(--img-theme-shadow);background-position:center;background-size:calc(var(--radius) * 2px)}foreignObject.Partition1 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc(var(--index) * 360deg / var(--length)))}foreignObject.Partition2 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc((var(--index) + 0.5) * 360deg / var(--length)))}foreignObject.PointerArea{mix-blend-mode:screen}foreignObject.PointerArea div{background-image:var(--img-theme-pointer-area);background-position:center -3px;background-size:51%}foreignObject.Partition1 div,foreignObject.Partition2 div{transform-origin:center}.PartitionsCustomable1 div,.PartitionsCustomable2 div{visibility:hidden}.PartitionsCustomable1 div.active,.PartitionsCustomable2 div.active{visibility:visible}foreignObject.Customable{overflow:visible}foreignObject.Customable div{background-repeat:no-repeat}.PartitionBackground div{background-size:calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);background-position:center}.PartitionBackground:nth-child(2n) div{background:var(--emw--color-primary, #3F2E75)}.PartitionBackground:nth-child(2n+1) div{background:var(--emw--color-secondary, #9482CE)}.PartitionBackground div{transform-origin:center}.PartitionBackgroundStroke{fill:transparent;stroke:var(--emw--color-background-secondary, #251D3E);stroke-width:3px;stroke-dasharray:none}.PointerPartitionFrame{stroke:#FFDD64;fill:transparent;stroke-dasharray:var(--radius) calc(6.2831853072 / var(--length) * var(--radius));stroke-width:0px}.PointerPartitionFrame.active{stroke-width:3px}.WheelContainer.Mobile foreignObject.Middle div{background-size:95px, 38px}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity{text-align:center;text-transform:uppercase;text-shadow:none;font-size:var(--emw--font-size-small, 14px);font-weight:900}';export{C}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|