function Winwheel(options,drawWheel) {defaultOptions={'canvasId':'canvas','centerX':null,'centerY':null,'outerRadius':null,'innerRadius':0,'numSegments':1,'drawMode':'code','rotationAngle':0,'textFontFamily':'Arial','textFontSize':20,'textFontWeight':'bold','textOrientation':'horizontal','textAlignment':'center','textDirection':'normal','textMargin':null,'textFillStyle':'black','textStrokeStyle':null,'textLineWidth':1,'fillStyle':'silver','strokeStyle':'black','lineWidth':1,'clearTheCanvas':true,'imageOverlay':false,'drawText':true,'pointerAngle':0,'wheelImage':null,'imageDirection':'N','responsive':false,'scaleFactor':1,};for(let key in defaultOptions){if((options!=null)&&(typeof(options[key])!=='undefined')){this[key]=options[key];}else{this[key]=defaultOptions[key];}} if(options!=null){for(let key in options){if(typeof(this[key])==='undefined'){this[key]=options[key];}}} if(this.canvasId){this.canvas=document.getElementById(this.canvasId);if(this.canvas){if(this.centerX==null){this.centerX=this.canvas.width/2;} if(this.centerY==null){this.centerY=this.canvas.height/2;} if(this.outerRadius==null){if(this.canvas.width0){degreesEach=(arcLeft/(this.numSegments-numSet));} let currentDegree=0;for(let x=1;x<=this.numSegments;x++){this.segments[x].startAngle=currentDegree;if(this.segments[x].size){currentDegree+=this.segments[x].size;}else{currentDegree+=degreesEach;} this.segments[x].endAngle=currentDegree;}}} Winwheel.prototype.clearCanvas=function() {if(this.ctx){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);}} Winwheel.prototype.draw=function(clearTheCanvas) {if(this.ctx){if(typeof(clearTheCanvas)!=='undefined'){if(clearTheCanvas==true){this.clearCanvas();}}else{this.clearCanvas();} if(this.drawMode=='image'){this.drawWheelImage();if(this.drawText==true){this.drawSegmentText();} if(this.imageOverlay==true){this.drawSegments();}}else if(this.drawMode=='segmentImage'){this.drawSegmentImages();if(this.drawText==true){this.drawSegmentText();} if(this.imageOverlay==true){this.drawSegments();}}else{this.drawSegments();if(this.drawText==true){this.drawSegmentText();}} if(typeof this.pins!=='undefined'){if(this.pins.visible==true){this.drawPins();}} if(this.pointerGuide.display==true){this.drawPointerGuide();}}} Winwheel.prototype.drawPins=function() {if((this.pins)&&(this.pins.number)){let centerX=(this.centerX*this.scaleFactor);let centerY=(this.centerY*this.scaleFactor);let outerRadius=(this.outerRadius*this.scaleFactor);let pinOuterRadius=this.pins.outerRadius;let pinMargin=this.pins.margin;if(this.pins.responsive){pinOuterRadius=(this.pins.outerRadius*this.scaleFactor);pinMargin=(this.pins.margin*this.scaleFactor);} let pinSpacing=(360/this.pins.number);for(let i=1;i<=this.pins.number;i++){this.ctx.save();this.ctx.strokeStyle=this.pins.strokeStyle;this.ctx.lineWidth=this.pins.lineWidth;this.ctx.fillStyle=this.pins.fillStyle;this.ctx.translate(centerX,centerY);this.ctx.rotate(this.degToRad(i*pinSpacing+this.rotationAngle));this.ctx.translate(-centerX,-centerY);this.ctx.beginPath();this.ctx.arc(centerX,(centerY-outerRadius)+pinOuterRadius+pinMargin,pinOuterRadius,0,2*Math.PI);if(this.pins.fillStyle){this.ctx.fill();} if(this.pins.strokeStyle){this.ctx.stroke();} this.ctx.restore();}}} Winwheel.prototype.drawPointerGuide=function() {if(this.ctx){let centerX=(this.centerX*this.scaleFactor);let centerY=(this.centerY*this.scaleFactor);let outerRadius=(this.outerRadius*this.scaleFactor);this.ctx.save();this.ctx.translate(centerX,centerY);this.ctx.rotate(this.degToRad(this.pointerAngle));this.ctx.translate(-centerX,-centerY);this.ctx.strokeStyle=this.pointerGuide.strokeStyle;this.ctx.lineWidth=this.pointerGuide.lineWidth;this.ctx.beginPath();this.ctx.moveTo(centerX,centerY);this.ctx.lineTo(centerX,-(outerRadius/4));this.ctx.stroke();this.ctx.restore();}} Winwheel.prototype.drawWheelImage=function() {if(this.wheelImage!=null){let centerX=(this.centerX*this.scaleFactor);let centerY=(this.centerY*this.scaleFactor);let scaledWidth=(this.wheelImage.width*this.scaleFactor);let scaledHeight=(this.wheelImage.height*this.scaleFactor);let imageLeft=(centerX-(scaledWidth/2));let imageTop=(centerY-(scaledHeight/2));this.ctx.save();this.ctx.translate(centerX,centerY);this.ctx.rotate(this.degToRad(this.rotationAngle));this.ctx.translate(-centerX,-centerY);this.ctx.drawImage(this.wheelImage,imageLeft,imageTop,scaledWidth,scaledHeight);this.ctx.restore();}} Winwheel.prototype.drawSegmentImages=function() {if(this.ctx){let centerX=(this.centerX*this.scaleFactor);let centerY=(this.centerY*this.scaleFactor);if(this.segments){for(let x=1;x<=this.numSegments;x++){let seg=this.segments[x];if(seg.imgData.height){let imageLeft=0;let imageTop=0;let imageAngle=0;let imageDirection='';let scaledWidth=(seg.imgData.width*this.scaleFactor);let scaledHeight=(seg.imgData.height*this.scaleFactor);if(seg.imageDirection!==null){imageDirection=seg.imageDirection;}else{imageDirection=this.imageDirection;} if(imageDirection=='S'){imageLeft=(centerX-(scaledWidth/2));imageTop=centerY;imageAngle=(seg.startAngle+180+((seg.endAngle-seg.startAngle)/2));}else if(imageDirection=='E'){imageLeft=centerX;imageTop=(centerY-(scaledHeight/2));imageAngle=(seg.startAngle+270+((seg.endAngle-seg.startAngle)/2));}else if(imageDirection=='W'){imageLeft=(centerX-scaledWidth);imageTop=(centerY-(scaledHeight/2));imageAngle=(seg.startAngle+90+((seg.endAngle-seg.startAngle)/2));}else{imageLeft=(centerX-(scaledWidth/2));imageTop=(centerY-scaledHeight);imageAngle=(seg.startAngle+((seg.endAngle-seg.startAngle)/2));} this.ctx.save();this.ctx.translate(centerX,centerY);this.ctx.rotate(this.degToRad(this.rotationAngle+imageAngle));this.ctx.translate(-centerX,-centerY);this.ctx.drawImage(seg.imgData,imageLeft,imageTop,scaledWidth,scaledHeight);this.ctx.restore();}else{console.log('Segment '+x+' imgData is not loaded');}}}}} Winwheel.prototype.drawSegments=function() {if(this.ctx){if(this.segments){let centerX=(this.centerX*this.scaleFactor);let centerY=(this.centerY*this.scaleFactor);let innerRadius=(this.innerRadius*this.scaleFactor);let outerRadius=(this.outerRadius*this.scaleFactor);for(let x=1;x<=this.numSegments;x++){let seg=this.segments[x];let fillStyle;let lineWidth;let strokeStyle;if(seg.fillStyle!==null){fillStyle=seg.fillStyle;}else{fillStyle=this.fillStyle;} this.ctx.fillStyle=fillStyle;if(seg.lineWidth!==null){lineWidth=seg.lineWidth;}else{lineWidth=this.lineWidth;} this.ctx.lineWidth=lineWidth;if(seg.strokeStyle!==null){strokeStyle=seg.strokeStyle;}else{strokeStyle=this.strokeStyle;} this.ctx.strokeStyle=strokeStyle;if((strokeStyle)||(fillStyle)){this.ctx.beginPath();if(!this.innerRadius){this.ctx.moveTo(centerX,centerY);}else{let iX=Math.cos(this.degToRad(seg.startAngle+this.rotationAngle-90))*(innerRadius-lineWidth/2);let iY=Math.sin(this.degToRad(seg.startAngle+this.rotationAngle-90))*(innerRadius-lineWidth/2);this.ctx.moveTo(centerX+iX,centerY+iY);} this.ctx.arc(centerX,centerY,outerRadius,this.degToRad(seg.startAngle+this.rotationAngle-90),this.degToRad(seg.endAngle+this.rotationAngle-90),false);if(this.innerRadius){this.ctx.arc(centerX,centerY,innerRadius,this.degToRad(seg.endAngle+this.rotationAngle-90),this.degToRad(seg.startAngle+this.rotationAngle-90),true);}else{this.ctx.lineTo(centerX,centerY);} if(fillStyle){this.ctx.fill();} if(strokeStyle){this.ctx.stroke();}}}}}} Winwheel.prototype.drawSegmentText=function() {if(this.ctx){let fontFamily;let fontSize;let fontWeight;let orientation;let alignment;let direction;let margin;let fillStyle;let strokeStyle;let lineWidth;let fontSetting;let centerX=(this.centerX*this.scaleFactor);let centerY=(this.centerY*this.scaleFactor);let outerRadius=(this.outerRadius*this.scaleFactor);let innerRadius=(this.innerRadius*this.scaleFactor);for(let x=1;x<=this.numSegments;x++){this.ctx.save();let seg=this.segments[x];if(seg.text){if(seg.textFontFamily!==null)fontFamily=seg.textFontFamily;else fontFamily=this.textFontFamily;if(seg.textFontSize!==null)fontSize=seg.textFontSize;else fontSize=this.textFontSize;if(seg.textFontWeight!==null)fontWeight=seg.textFontWeight;else fontWeight=this.textFontWeight;if(seg.textOrientation!==null)orientation=seg.textOrientation;else orientation=this.textOrientation;if(seg.textAlignment!==null)alignment=seg.textAlignment;else alignment=this.textAlignment;if(seg.textDirection!==null)direction=seg.textDirection;else direction=this.textDirection;if(seg.textMargin!==null)margin=seg.textMargin;else margin=this.textMargin;if(seg.textFillStyle!==null)fillStyle=seg.textFillStyle;else fillStyle=this.textFillStyle;if(seg.textStrokeStyle!==null)strokeStyle=seg.textStrokeStyle;else strokeStyle=this.textStrokeStyle;if(seg.textLineWidth!==null)lineWidth=seg.textLineWidth;else lineWidth=this.textLineWidth;fontSize=(fontSize*this.scaleFactor);margin=(margin*this.scaleFactor);let fontSetting='';if(fontWeight!=null){fontSetting+=fontWeight+' ';} if(fontSize!=null){fontSetting+=fontSize+'px ';} if(fontFamily!=null){fontSetting+=fontFamily;} this.ctx.font=fontSetting;this.ctx.fillStyle=fillStyle;this.ctx.strokeStyle=strokeStyle;this.ctx.lineWidth=lineWidth;let lines=seg.text.split('\n');let lineOffset=0-(fontSize*(lines.length/2))+(fontSize/2);if((orientation=='curved')&&((alignment=='inner')||(alignment=='outer'))){lineOffset=0;} for(let i=0;i=0;c--){let character=lines[i].charAt(c);if(fillStyle){this.ctx.fillText(character,centerX+lineOffset,yPos);} if(strokeStyle){this.ctx.strokeText(character,centerX+lineOffset,yPos);} yPos-=yInc;}}else if(alignment=='inner'){for(let c=0;c1){centerAdjustment=(yInc*(lines[i].length-1)/2);} let yPos=(centerY+innerRadius+((outerRadius-innerRadius)/2))+centerAdjustment+margin;for(let c=(lines[i].length-1);c>=0;c--){let character=lines[i].charAt(c);if(fillStyle){this.ctx.fillText(character,centerX+lineOffset,yPos);} if(strokeStyle){this.ctx.strokeText(character,centerX+lineOffset,yPos);} yPos-=yInc;}} this.ctx.restore();}else if(orientation=='curved'){let radius=0;if(alignment=='inner'){radius=innerRadius+margin;this.ctx.textBaseline='top';}else if(alignment=='outer'){radius=outerRadius-margin;this.ctx.textBaseline='bottom';radius-=(fontSize*(lines.length-1));}else if(alignment=='center'){radius=innerRadius+margin+((outerRadius-innerRadius)/2);this.ctx.textBaseline='middle';} let anglePerChar=0;let drawAngle=0;if(lines[i].length>1){this.ctx.textAlign='left';anglePerChar=(4*(fontSize/10));let radiusPercent=(100/radius);anglePerChar=(anglePerChar*radiusPercent);let totalArc=(anglePerChar*lines[i].length);drawAngle=seg.startAngle+(((seg.endAngle-seg.startAngle)/2)-(totalArc/2));}else{drawAngle=(seg.startAngle+((seg.endAngle-seg.startAngle)/2));this.ctx.textAlign='center';} drawAngle+=this.rotationAngle;drawAngle-=180;for(let c=lines[i].length;c>=0;c--){this.ctx.save();let character=lines[i].charAt(c);this.ctx.translate(centerX,centerY);this.ctx.rotate(this.degToRad(drawAngle));this.ctx.translate(-centerX,-centerY);if(strokeStyle){this.ctx.strokeText(character,centerX,centerY+radius+lineOffset);} if(fillStyle){this.ctx.fillText(character,centerX,centerY+radius+lineOffset);} drawAngle+=anglePerChar;this.ctx.restore();}}}else{if(orientation=='horizontal'){if(alignment=='inner'){this.ctx.textAlign='left';}else if(alignment=='outer'){this.ctx.textAlign='right';}else{this.ctx.textAlign='center';} this.ctx.textBaseline='middle';let textAngle=this.degToRad(seg.endAngle-((seg.endAngle-seg.startAngle)/2)+this.rotationAngle-90);this.ctx.save();this.ctx.translate(centerX,centerY);this.ctx.rotate(textAngle);this.ctx.translate(-centerX,-centerY);if(alignment=='inner'){if(fillStyle){this.ctx.fillText(lines[i],centerX+innerRadius+margin,centerY+lineOffset);} if(strokeStyle){this.ctx.strokeText(lines[i],centerX+innerRadius+margin,centerY+lineOffset);}}else if(alignment=='outer'){if(fillStyle){this.ctx.fillText(lines[i],centerX+outerRadius-margin,centerY+lineOffset);} if(strokeStyle){this.ctx.strokeText(lines[i],centerX+outerRadius-margin,centerY+lineOffset);}}else{if(fillStyle){this.ctx.fillText(lines[i],centerX+innerRadius+((outerRadius-innerRadius)/2)+margin,centerY+lineOffset);} if(strokeStyle){this.ctx.strokeText(lines[i],centerX+innerRadius+((outerRadius-innerRadius)/2)+margin,centerY+lineOffset);}} this.ctx.restore();}else if(orientation=='vertical'){this.ctx.textAlign='center';if(alignment=='inner'){this.ctx.textBaseline='bottom';}else if(alignment=='outer'){this.ctx.textBaseline='top';}else{this.ctx.textBaseline='middle';} let textAngle=seg.endAngle-((seg.endAngle-seg.startAngle)/2);textAngle+=this.rotationAngle;this.ctx.save();this.ctx.translate(centerX,centerY);this.ctx.rotate(this.degToRad(textAngle));this.ctx.translate(-centerX,-centerY);let yPos=0;if(alignment=='outer'){yPos=(centerY-outerRadius+margin);}else if(alignment=='inner'){yPos=(centerY-innerRadius-margin);} let yInc=(fontSize-(fontSize/9));if(alignment=='outer'){for(let c=0;c=0;c--){let character=lines[i].charAt(c);if(fillStyle){this.ctx.fillText(character,centerX+lineOffset,yPos);} if(strokeStyle){this.ctx.strokeText(character,centerX+lineOffset,yPos);} yPos-=yInc;}}else if(alignment=='center'){let centerAdjustment=0;if(lines[i].length>1){centerAdjustment=(yInc*(lines[i].length-1)/2);} let yPos=(centerY-innerRadius-((outerRadius-innerRadius)/2))-centerAdjustment-margin;for(let c=0;c1){this.ctx.textAlign='left';anglePerChar=(4*(fontSize/10));let radiusPercent=(100/radius);anglePerChar=(anglePerChar*radiusPercent);let totalArc=(anglePerChar*lines[i].length);drawAngle=seg.startAngle+(((seg.endAngle-seg.startAngle)/2)-(totalArc/2));}else{drawAngle=(seg.startAngle+((seg.endAngle-seg.startAngle)/2));this.ctx.textAlign='center';} drawAngle+=this.rotationAngle;for(let c=0;c<(lines[i].length);c++){this.ctx.save();let character=lines[i].charAt(c);this.ctx.translate(centerX,centerY);this.ctx.rotate(this.degToRad(drawAngle));this.ctx.translate(-centerX,-centerY);if(strokeStyle){this.ctx.strokeText(character,centerX,centerY-radius+lineOffset);} if(fillStyle){this.ctx.fillText(character,centerX,centerY-radius+lineOffset);} drawAngle+=anglePerChar;this.ctx.restore();}}} lineOffset+=fontSize;}} this.ctx.restore();}}} Winwheel.prototype.degToRad=function(d) {return d*0.0174532925199432957;} Winwheel.prototype.setCenter=function(x,y) {this.centerX=x;this.centerY=y;} Winwheel.prototype.addSegment=function(options,position) {let newSegment=new Segment(options);this.numSegments++;let segmentPos;if(typeof position!=='undefined'){for(let x=this.numSegments;x>position;x--){this.segments[x]=this.segments[x-1];} this.segments[position]=newSegment;segmentPos=position;}else{this.segments[this.numSegments]=newSegment;segmentPos=this.numSegments;} this.updateSegmentSizes();return this.segments[segmentPos];} Winwheel.prototype.setCanvasId=function(canvasId) {if(canvasId){this.canvasId=canvasId;this.canvas=document.getElementById(this.canvasId);if(this.canvas){this.ctx=this.canvas.getContext('2d');}}else{this.canvasId=null this.ctx=null;this.canvas=null;}} Winwheel.prototype.deleteSegment=function(position) {if(this.numSegments>1){if(typeof position!=='undefined'){for(let x=position;xcenterX){adjacentSideLength=(loc.x-centerX);leftRight='R';}else{adjacentSideLength=(centerX-loc.x);leftRight='L';} if(loc.y>centerY){oppositeSideLength=(loc.y-centerY);topBottom='B';}else{oppositeSideLength=(centerY-loc.y);topBottom='T';} let tanVal=oppositeSideLength/adjacentSideLength;let result=(Math.atan(tanVal)*180/Math.PI);let locationAngle=0;hypotenuseSideLength=Math.sqrt((oppositeSideLength*oppositeSideLength)+(adjacentSideLength*adjacentSideLength));if((topBottom=='T')&&(leftRight=='R')){locationAngle=Math.round(90-result);}else if((topBottom=='B')&&(leftRight=='R')){locationAngle=Math.round(result+90);}else if((topBottom=='B')&&(leftRight=='L')){locationAngle=Math.round((90-result)+180);}else if((topBottom=='T')&&(leftRight=='L')){locationAngle=Math.round(result+270);} if(this.rotationAngle!=0){let rotatedPosition=this.getRotationPosition();locationAngle=(locationAngle-rotatedPosition);if(locationAngle<0){locationAngle=(360-Math.abs(locationAngle));}} let foundSegmentNumber=null;for(let x=1;x<=this.numSegments;x++){if((locationAngle>=this.segments[x].startAngle)&&(locationAngle<=this.segments[x].endAngle)){if((hypotenuseSideLength>=innerRadius)&&(hypotenuseSideLength<=outerRadius)){foundSegmentNumber=x;break;}}} return foundSegmentNumber;} Winwheel.prototype.getIndicatedSegment=function() {let prizeNumber=this.getIndicatedSegmentNumber();return this.segments[prizeNumber];} Winwheel.prototype.getIndicatedSegmentNumber=function() {let indicatedPrize=0;let rawAngle=this.getRotationPosition();let relativeAngle=Math.floor(this.pointerAngle-rawAngle);if(relativeAngle<0){relativeAngle=360-Math.abs(relativeAngle);} for(let x=1;x<(this.segments.length);x++){if((relativeAngle>=this.segments[x]['startAngle'])&&(relativeAngle<=this.segments[x]['endAngle'])){indicatedPrize=x;break;}} return indicatedPrize;} Winwheel.prototype.getCurrentPinNumber=function() {let currentPin=0;if(this.pins){let rawAngle=this.getRotationPosition();let relativeAngle=Math.floor(this.pointerAngle-rawAngle);if(relativeAngle<0){relativeAngle=360-Math.abs(relativeAngle);} let pinSpacing=(360/this.pins.number);let totalPinAngle=0;for(let x=0;x<(this.pins.number);x++){if((relativeAngle>=totalPinAngle)&&(relativeAngle<=(totalPinAngle+pinSpacing))){currentPin=x;break;} totalPinAngle+=pinSpacing;} if(this.animation.direction=='clockwise'){currentPin++;if(currentPin>this.pins.number){currentPin=0;}}} return currentPin;} Winwheel.prototype.getRotationPosition=function() {let rawAngle=this.rotationAngle;if(rawAngle>=0){if(rawAngle>360){let timesPast360=Math.floor(rawAngle/360);rawAngle=(rawAngle-(360*timesPast360));}}else{if(rawAngle<-360){let timesPast360=Math.ceil(rawAngle/360);rawAngle=(rawAngle-(360*timesPast360));} rawAngle=(360+rawAngle);} return rawAngle;} Winwheel.prototype.startAnimation=function() {if(this.animation){this.computeAnimation();winwheelToDrawDuringAnimation=this;let properties=new Array(null);properties[this.animation.propertyName]=this.animation.propertyValue;properties['yoyo']=this.animation.yoyo;properties['repeat']=this.animation.repeat;properties['ease']=this.animation.easing;properties['onUpdate']=winwheelAnimationLoop;properties['onComplete']=winwheelStopAnimation;this.tween=TweenMax.to(this,this.animation.duration,properties);}} Winwheel.prototype.stopAnimation=function(canCallback) {if(winwheelToDrawDuringAnimation){if(winwheelToDrawDuringAnimation.tween){winwheelToDrawDuringAnimation.tween.kill();} winwheelStopAnimation(canCallback);} winwheelToDrawDuringAnimation=this;} Winwheel.prototype.pauseAnimation=function() {if(this.tween){this.tween.pause();}} Winwheel.prototype.resumeAnimation=function() {if(this.tween){this.tween.play();}} Winwheel.prototype.computeAnimation=function() {if(this.animation){if(this.animation.type=='spinOngoing'){this.animation.propertyName='rotationAngle';if(this.animation.spins==null){this.animation.spins=5;} if(this.animation.repeat==null){this.animation.repeat=-1;} if(this.animation.easing==null){this.animation.easing='Linear.easeNone';} if(this.animation.yoyo==null){this.animation.yoyo=false;} this.animation.propertyValue=(this.animation.spins*360);if(this.animation.direction=='anti-clockwise'){this.animation.propertyValue=(0-this.animation.propertyValue);}}else if(this.animation.type=='spinToStop'){this.animation.propertyName='rotationAngle';if(this.animation.spins==null){this.animation.spins=5;} if(this.animation.repeat==null){this.animation.repeat=0;} if(this.animation.easing==null){this.animation.easing='Power3.easeOut';} if(this.animation.stopAngle==null){this.animation._stopAngle=Math.floor((Math.random()*359));}else{this.animation._stopAngle=(360-this.animation.stopAngle+this.pointerAngle);} if(this.animation.yoyo==null){this.animation.yoyo=false;} this.animation.propertyValue=(this.animation.spins*360);if(this.animation.direction=='anti-clockwise'){this.animation.propertyValue=(0-this.animation.propertyValue);this.animation.propertyValue-=(360-this.animation._stopAngle);}else{this.animation.propertyValue+=this.animation._stopAngle;}}else if(this.animation.type=='spinAndBack'){this.animation.propertyName='rotationAngle';if(this.animation.spins==null){this.animation.spins=5;} if(this.animation.repeat==null){this.animation.repeat=1;} if(this.animation.easing==null){this.animation.easing='Power2.easeInOut';} if(this.animation.yoyo==null){this.animation.yoyo=true;} if(this.animation.stopAngle==null){this.animation._stopAngle=0;}else{this.animation._stopAngle=(360-this.animation.stopAngle);} this.animation.propertyValue=(this.animation.spins*360);if(this.animation.direction=='anti-clockwise'){this.animation.propertyValue=(0-this.animation.propertyValue);this.animation.propertyValue-=(360-this.animation._stopAngle);}else{this.animation.propertyValue+=this.animation._stopAngle;}}else if(this.animation.type=='custom'){}}} Winwheel.prototype.getRandomForSegment=function(segmentNumber) {let stopAngle=0;if(segmentNumber){if(typeof this.segments[segmentNumber]!=='undefined'){let startAngle=this.segments[segmentNumber].startAngle;let endAngle=this.segments[segmentNumber].endAngle;let range=(endAngle-startAngle)-2;if(range>0){stopAngle=(startAngle+1+Math.floor((Math.random()*range)));}else{console.log('Segment size is too small to safely get random angle inside it');}}else{console.log('Segment '+segmentNumber+' undefined');}}else{console.log('Segment number not specified');} return stopAngle;} function Pin(options) {let defaultOptions={'visible':true,'number':36,'outerRadius':3,'fillStyle':'grey','strokeStyle':'black','lineWidth':1,'margin':3,'responsive':false,};for(let key in defaultOptions){if((options!=null)&&(typeof(options[key])!=='undefined')){this[key]=options[key];}else{this[key]=defaultOptions[key];}} if(options!=null){for(let key in options){if(typeof(this[key])==='undefined'){this[key]=options[key];}}}} function Animation(options) {let defaultOptions={'type':'spinOngoing','direction':'clockwise','propertyName':null,'propertyValue':null,'duration':10,'yoyo':false,'repeat':null,'easing':null,'stopAngle':null,'spins':null,'clearTheCanvas':null,'callbackFinished':null,'callbackBefore':null,'callbackAfter':null,'callbackSound':null,'soundTrigger':'segment'};for(let key in defaultOptions){if((options!=null)&&(typeof(options[key])!=='undefined')){this[key]=options[key];}else{this[key]=defaultOptions[key];}} if(options!=null){for(let key in options){if(typeof(this[key])==='undefined'){this[key]=options[key];}}}} function Segment(options) {let defaultOptions={'size':null,'text':'','fillStyle':null,'strokeStyle':null,'lineWidth':null,'textFontFamily':null,'textFontSize':null,'textFontWeight':null,'textOrientation':null,'textAlignment':null,'textDirection':null,'textMargin':null,'textFillStyle':null,'textStrokeStyle':null,'textLineWidth':null,'image':null,'imageDirection':null,'imgData':null};for(let key in defaultOptions){if((options!=null)&&(typeof(options[key])!=='undefined')){this[key]=options[key];}else{this[key]=defaultOptions[key];}} if(options!=null){for(let key in options){if(typeof(this[key])==='undefined'){this[key]=options[key];}}} this.startAngle=0;this.endAngle=0;} Segment.prototype.changeImage=function(image,imageDirection) {this.image=image;this.imgData=null;if(imageDirection){this.imageDirection=imageDirection;} winhweelAlreadyDrawn=false;this.imgData=new Image();this.imgData.onload=winwheelLoadedImage;this.imgData.src=this.image;} function PointerGuide(options) {let defaultOptions={'display':false,'strokeStyle':'red','lineWidth':3};for(let key in defaultOptions){if((options!=null)&&(typeof(options[key])!=='undefined')){this[key]=options[key];}else{this[key]=defaultOptions[key];}}} function winwheelPercentToDegrees(percentValue) {let degrees=0;if((percentValue>0)&&(percentValue<=100)){let divider=(percentValue/100);degrees=(360*divider);} return degrees;} function winwheelAnimationLoop() {if(winwheelToDrawDuringAnimation){if(winwheelToDrawDuringAnimation.animation.clearTheCanvas!=false){winwheelToDrawDuringAnimation.ctx.clearRect(0,0,winwheelToDrawDuringAnimation.canvas.width,winwheelToDrawDuringAnimation.canvas.height);} let callbackBefore=winwheelToDrawDuringAnimation.animation.callbackBefore;let callbackAfter=winwheelToDrawDuringAnimation.animation.callbackAfter;if(callbackBefore!=null){if(typeof callbackBefore==='function'){callbackBefore();}else{eval(callbackBefore);}} winwheelToDrawDuringAnimation.draw(false);if(callbackAfter!=null){if(typeof callbackAfter==='function'){callbackAfter();}else{eval(callbackAfter);}} if(winwheelToDrawDuringAnimation.animation.callbackSound){winwheelTriggerSound();}}} function winwheelTriggerSound() {if(winwheelToDrawDuringAnimation.hasOwnProperty('_lastSoundTriggerNumber')==false){winwheelToDrawDuringAnimation._lastSoundTriggerNumber=0;} let callbackSound=winwheelToDrawDuringAnimation.animation.callbackSound;let currentTriggerNumber=0;if(winwheelToDrawDuringAnimation.animation.soundTrigger=='pin'){currentTriggerNumber=winwheelToDrawDuringAnimation.getCurrentPinNumber();}else{currentTriggerNumber=winwheelToDrawDuringAnimation.getIndicatedSegmentNumber();} if(currentTriggerNumber!=winwheelToDrawDuringAnimation._lastSoundTriggerNumber){if(typeof callbackSound==='function'){callbackSound();}else{eval(callbackSound);} winwheelToDrawDuringAnimation._lastSoundTriggerNumber=currentTriggerNumber;}} let winwheelToDrawDuringAnimation=null;function winwheelStopAnimation(canCallback) {if(canCallback!=false){let callback=winwheelToDrawDuringAnimation.animation.callbackFinished;if(callback!=null){if(typeof callback==='function'){callback(winwheelToDrawDuringAnimation.getIndicatedSegment());}else{eval(callback);}}}} let winhweelAlreadyDrawn=false;function winwheelLoadedImage() {if(winhweelAlreadyDrawn==false){let winwheelImageLoadCount=0;for(let i=1;i<=winwheelToDrawDuringAnimation.numSegments;i++){if((winwheelToDrawDuringAnimation.segments[i].imgData!=null)&&(winwheelToDrawDuringAnimation.segments[i].imgData.height)){winwheelImageLoadCount++;}} if(winwheelImageLoadCount==winwheelToDrawDuringAnimation.numSegments){winhweelAlreadyDrawn=true;winwheelToDrawDuringAnimation.draw();}}} function winwheelResize() {let margin=40;if(typeof(winwheelToDrawDuringAnimation._responsiveMargin)!=='undefined'){margin=winwheelToDrawDuringAnimation._responsiveMargin;} let width=window.innerWidth-margin;let minWidth=winwheelToDrawDuringAnimation._responsiveMinWidth;let minHeight=winwheelToDrawDuringAnimation._responsiveMinHeight;if(widthwinwheelToDrawDuringAnimation._originalCanvasWidth){width=winwheelToDrawDuringAnimation._originalCanvasWidth;} let percent=(width/winwheelToDrawDuringAnimation._originalCanvasWidth);winwheelToDrawDuringAnimation.canvas.width=(winwheelToDrawDuringAnimation._originalCanvasWidth*percent);if(winwheelToDrawDuringAnimation._responsiveScaleHeight){let height=(winwheelToDrawDuringAnimation._originalCanvasHeight*percent);if(heightwinwheelToDrawDuringAnimation._originalCanvasHeight){height=winwheelToDrawDuringAnimation._originalCanvasHeight;} winwheelToDrawDuringAnimation.canvas.height=height;} winwheelToDrawDuringAnimation.scaleFactor=percent;winwheelToDrawDuringAnimation.draw();}