diff --git a/README.md b/README.md index 9e6b6a3..c1b839e 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ Winwheel.js Features Include: * Draw wheels using code generated segments or graphically rich images. * Numerous text orientation, direction, size and colour options. * Random or Pre-calculated prize stopping location. +* Play sounds while the wheel is spinning including a "tick" sound. * Ability to get the segment the user clicked upon. * Fully commented source code. Plenty of tutorials and other documentation. * Winwheel.js is free to use with an open source licence. diff --git a/Winwheel.js b/Winwheel.js index 7b7ce8c..7e1af2a 100644 --- a/Winwheel.js +++ b/Winwheel.js @@ -4,7 +4,7 @@ The MIT License (MIT) - Copyright (c) 2017 Douglas McKechie + Copyright (c) 2018 Douglas McKechie Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/Winwheel.min.js b/Winwheel.min.js index 4f00896..a59a31e 100644 --- a/Winwheel.min.js +++ b/Winwheel.min.js @@ -3,48 +3,52 @@ for(var c in defaultOptions)this[c]=null!=a&&"undefined"!==typeof a[c]?a[c]:defa this.ctx=this.canvas=null:this.ctx=this.cavnas=null;this.segments=Array(null);for(x=1;x<=this.numSegments;x++)this.segments[x]=null!=a&&a.segments&&"undefined"!==typeof a.segments[x-1]?new Segment(a.segments[x-1]):new Segment;this.updateSegmentSizes();null===this.textMargin&&(this.textMargin=this.textFontSize/1.7);this.animation=null!=a&&a.animation&&"undefined"!==typeof a.animation?new Animation(a.animation):new Animation;null!=a&&a.pins&&"undefined"!==typeof a.pins&&(this.pins=new Pin(a.pins)); "image"==this.drawMode||"segmentImage"==this.drawMode?("undefined"===typeof a.fillStyle&&(this.fillStyle=null),"undefined"===typeof a.strokeStyle&&(this.strokeStyle="red"),"undefined"===typeof a.drawText&&(this.drawText=!1),"undefined"===typeof a.lineWidth&&(this.lineWidth=1),"undefined"===typeof b&&(b=!1)):"undefined"===typeof b&&(b=!0);this.pointerGuide=null!=a&&a.pointerGuide&&"undefined"!==typeof a.pointerGuide?new PointerGuide(a.pointerGuide):new PointerGuide;if(1==b)this.draw(this.clearTheCanvas); else if("segmentImage"==this.drawMode)for(winwheelToDrawDuringAnimation=this,winhweelAlreadyDrawn=!1,y=1;y<=this.numSegments;y++)null!==this.segments[y].image&&(this.segments[y].imgData=new Image,this.segments[y].imgData.onload=winwheelLoadedImage,this.segments[y].imgData.src=this.segments[y].image)} -Winwheel.prototype.updateSegmentSizes=function(){if(this.segments){var a=0,b=0;for(x=1;x<=this.numSegments;x++)null!==this.segments[x].size&&(a+=this.segments[x].size,b++);var c=360-a,a=0;0b;c--)this.segments[c]=this.segments[c-1];this.segments[b]=newSegment;c=b}else this.segments[this.numSegments]=newSegment,c=this.numSegments;this.updateSegmentSizes();return this.segments[c]}; Winwheel.prototype.setCanvasId=function(a){if(a){if(this.canvasId=a,this.canvas=document.getElementById(this.canvasId))this.ctx=this.canvas.getContext("2d")}else this.canvas=this.ctx=this.canvasId=null};Winwheel.prototype.deleteSegment=function(a){if(1this.centerX?(n=c.x-this.centerX,e="R"):(n=this.centerX-c.x,e="L");c.y>this.centerY?(f=c.y-this.centerY,l="B"):(f=this.centerY-c.y,l="T");var k=180*Math.atan(f/n)/Math.PI,c=0;n=Math.sqrt(f*f+n*n);"T"==l&&"R"==e?c=Math.round(90-k):"B"==l&&"R"==e?c=Math.round(k+90):"B"==l&&"L"==e?c=Math.round(90-k+180):"T"==l&&"L"==e&&(c=Math.round(k+270));0!=this.rotationAngle&&(e=this.getRotationPosition(),c-=e,0>c&&(c= -360-Math.abs(c)));e=null;for(a=1;a<=this.numSegments;a++)if(c>=this.segments[a].startAngle&&c<=this.segments[a].endAngle&&n>=this.innerRadius&&n<=this.outerRadius){e=a;break}return e};Winwheel.prototype.getIndicatedSegment=function(){var a=this.getIndicatedSegmentNumber();return this.segments[a]}; -Winwheel.prototype.getIndicatedSegmentNumber=function(){var a=0,b=this.getRotationPosition(),b=Math.floor(this.pointerAngle-b);0>b&&(b=360-Math.abs(b));for(x=1;x=this.segments[x].startAngle&&b<=this.segments[x].endAngle){a=x;break}return a};Winwheel.prototype.getRotationPosition=function(){var a=this.rotationAngle;if(0<=a){if(360a&&(b=Math.ceil(a/360),a-=360*b),a=360+a;return a}; +Winwheel.prototype.windowToCanvas=function(a,b){var c=this.canvas.getBoundingClientRect();return{x:Math.floor(a-this.canvas.width/c.width*c.left),y:Math.floor(b-this.canvas.height/c.height*c.top)}};Winwheel.prototype.getSegmentAt=function(a,b){var c=null,k=this.getSegmentNumberAt(a,b);null!==k&&(c=this.segments[k]);return c}; +Winwheel.prototype.getSegmentNumberAt=function(a,b){var c=this.windowToCanvas(a,b);if(c.x>this.centerX){var k=c.x-this.centerX;var e="R"}else k=this.centerX-c.x,e="L";if(c.y>this.centerY){var q=c.y-this.centerY;var f="B"}else q=this.centerY-c.y,f="T";var l=180*Math.atan(q/k)/Math.PI;c=0;k=Math.sqrt(q*q+k*k);"T"==f&&"R"==e?c=Math.round(90-l):"B"==f&&"R"==e?c=Math.round(l+90):"B"==f&&"L"==e?c=Math.round(90-l+180):"T"==f&&"L"==e&&(c=Math.round(l+270));0!=this.rotationAngle&&(e=this.getRotationPosition(), +c-=e,0>c&&(c=360-Math.abs(c)));e=null;for(a=1;a<=this.numSegments;a++)if(c>=this.segments[a].startAngle&&c<=this.segments[a].endAngle&&k>=this.innerRadius&&k<=this.outerRadius){e=a;break}return e};Winwheel.prototype.getIndicatedSegment=function(){var a=this.getIndicatedSegmentNumber();return this.segments[a]}; +Winwheel.prototype.getIndicatedSegmentNumber=function(){var a=0,b=this.getRotationPosition();b=Math.floor(this.pointerAngle-b);0>b&&(b=360-Math.abs(b));for(x=1;x=this.segments[x].startAngle&&b<=this.segments[x].endAngle){a=x;break}return a}; +Winwheel.prototype.getCurrentPinNumber=function(){var a=0;if(this.pins){var b=this.getRotationPosition();b=Math.floor(this.pointerAngle-b);0>b&&(b=360-Math.abs(b));var c=360/this.pins.number,k=0;for(x=0;x=k&&b<=k+c){a=x;break}k+=c}"clockwise"==this.animation.direction&&(a++,a>this.pins.number&&(a=0))}return a}; +Winwheel.prototype.getRotationPosition=function(){var a=this.rotationAngle;if(0<=a){if(360a&&(b=Math.ceil(a/360),a-=360*b),a=360+a;return a}; Winwheel.prototype.startAnimation=function(){if(this.animation){this.computeAnimation();winwheelToDrawDuringAnimation=this;var a=Array(null);a[this.animation.propertyName]=this.animation.propertyValue;a.yoyo=this.animation.yoyo;a.repeat=this.animation.repeat;a.ease=this.animation.easing;a.onUpdate=winwheelAnimationLoop;a.onComplete=winwheelStopAnimation;this.tween=TweenMax.to(this,this.animation.duration,a)}}; Winwheel.prototype.stopAnimation=function(a){winwheelToDrawDuringAnimation&&(winwheelToDrawDuringAnimation.tween.kill(),winwheelStopAnimation(a));winwheelToDrawDuringAnimation=this};Winwheel.prototype.pauseAnimation=function(){this.tween&&this.tween.pause()};Winwheel.prototype.resumeAnimation=function(){this.tween&&this.tween.play()}; Winwheel.prototype.computeAnimation=function(){this.animation&&("spinOngoing"==this.animation.type?(this.animation.propertyName="rotationAngle",null==this.animation.spins&&(this.animation.spins=5),null==this.animation.repeat&&(this.animation.repeat=-1),null==this.animation.easing&&(this.animation.easing="Linear.easeNone"),null==this.animation.yoyo&&(this.animation.yoyo=!1),this.animation.propertyValue=360*this.animation.spins,"anti-clockwise"==this.animation.direction&&(this.animation.propertyValue= -0-this.animation.propertyValue)):"spinToStop"==this.animation.type?(this.animation.propertyName="rotationAngle",null==this.animation.spins&&(this.animation.spins=5),null==this.animation.repeat&&(this.animation.repeat=0),null==this.animation.easing&&(this.animation.easing="Power4.easeOut"),this.animation._stopAngle=null==this.animation.stopAngle?Math.floor(359*Math.random()):360-this.animation.stopAngle+this.pointerAngle,null==this.animation.yoyo&&(this.animation.yoyo=!1),this.animation.propertyValue= +0-this.animation.propertyValue)):"spinToStop"==this.animation.type?(this.animation.propertyName="rotationAngle",null==this.animation.spins&&(this.animation.spins=5),null==this.animation.repeat&&(this.animation.repeat=0),null==this.animation.easing&&(this.animation.easing="Power3.easeOut"),this.animation._stopAngle=null==this.animation.stopAngle?Math.floor(359*Math.random()):360-this.animation.stopAngle+this.pointerAngle,null==this.animation.yoyo&&(this.animation.yoyo=!1),this.animation.propertyValue= 360*this.animation.spins,"anti-clockwise"==this.animation.direction?(this.animation.propertyValue=0-this.animation.propertyValue,this.animation.propertyValue-=360-this.animation._stopAngle):this.animation.propertyValue+=this.animation._stopAngle):"spinAndBack"==this.animation.type&&(this.animation.propertyName="rotationAngle",null==this.animation.spins&&(this.animation.spins=5),null==this.animation.repeat&&(this.animation.repeat=1),null==this.animation.easing&&(this.animation.easing="Power2.easeInOut"), null==this.animation.yoyo&&(this.animation.yoyo=!0),this.animation._stopAngle=null==this.animation.stopAngle?0:360-this.animation.stopAngle,this.animation.propertyValue=360*this.animation.spins,"anti-clockwise"==this.animation.direction?(this.animation.propertyValue=0-this.animation.propertyValue,this.animation.propertyValue-=360-this.animation._stopAngle):this.animation.propertyValue+=this.animation._stopAngle))}; Winwheel.prototype.getRandomForSegment=function(a){var b=0;if(a)if("undefined"!==typeof this.segments[a]){var c=this.segments[a].startAngle;a=this.segments[a].endAngle-c-2;0=a&&(b=a/100*360);return b} -function winwheelAnimationLoop(){winwheelToDrawDuringAnimation&&(0!=winwheelToDrawDuringAnimation.animation.clearTheCanvas&&winwheelToDrawDuringAnimation.ctx.clearRect(0,0,winwheelToDrawDuringAnimation.canvas.width,winwheelToDrawDuringAnimation.canvas.height),null!=winwheelToDrawDuringAnimation.animation.callbackBefore&&eval(winwheelToDrawDuringAnimation.animation.callbackBefore),winwheelToDrawDuringAnimation.draw(!1),null!=winwheelToDrawDuringAnimation.animation.callbackAfter&&eval(winwheelToDrawDuringAnimation.animation.callbackAfter))} -var winwheelToDrawDuringAnimation=null;function winwheelStopAnimation(a){0!=a&&null!=winwheelToDrawDuringAnimation.animation.callbackFinished&&eval(winwheelToDrawDuringAnimation.animation.callbackFinished)}var winhweelAlreadyDrawn=!1; +function winwheelAnimationLoop(){if(winwheelToDrawDuringAnimation){0!=winwheelToDrawDuringAnimation.animation.clearTheCanvas&&winwheelToDrawDuringAnimation.ctx.clearRect(0,0,winwheelToDrawDuringAnimation.canvas.width,winwheelToDrawDuringAnimation.canvas.height);var a=winwheelToDrawDuringAnimation.animation.callbackBefore,b=winwheelToDrawDuringAnimation.animation.callbackAfter;null!=a&&("function"===typeof a?a():eval(a));winwheelToDrawDuringAnimation.draw(!1);null!=b&&("function"===typeof b?b():eval(b)); +winwheelToDrawDuringAnimation.animation.callbackSound&&winwheelTriggerSound()}} +function winwheelTriggerSound(){0==winwheelToDrawDuringAnimation.hasOwnProperty("_lastSoundTriggerNumber")&&(winwheelToDrawDuringAnimation._lastSoundTriggerNumber=0);var a=winwheelToDrawDuringAnimation.animation.callbackSound;var b="pin"==winwheelToDrawDuringAnimation.animation.soundTrigger?winwheelToDrawDuringAnimation.getCurrentPinNumber():winwheelToDrawDuringAnimation.getIndicatedSegmentNumber();b!=winwheelToDrawDuringAnimation._lastSoundTriggerNumber&&("function"===typeof a?a():eval(a),winwheelToDrawDuringAnimation._lastSoundTriggerNumber= +b)}var winwheelToDrawDuringAnimation=null;function winwheelStopAnimation(a){0!=a&&(a=winwheelToDrawDuringAnimation.animation.callbackFinished,null!=a&&("function"===typeof a?a(winwheelToDrawDuringAnimation.getIndicatedSegment()):eval(a)))}var winhweelAlreadyDrawn=!1; function winwheelLoadedImage(){if(0==winhweelAlreadyDrawn){var a=0;for(i=1;i<=winwheelToDrawDuringAnimation.numSegments;i++)null!=winwheelToDrawDuringAnimation.segments[i].imgData&&winwheelToDrawDuringAnimation.segments[i].imgData.height&&a++;a==winwheelToDrawDuringAnimation.numSegments&&(winhweelAlreadyDrawn=!0,winwheelToDrawDuringAnimation.draw())}}; diff --git a/examples/pins_and_sound_wheel/index.html b/examples/pins_and_sound_wheel/index.html index 85329af..c1dbec5 100644 --- a/examples/pins_and_sound_wheel/index.html +++ b/examples/pins_and_sound_wheel/index.html @@ -4,7 +4,7 @@ The MIT License (MIT) - Copyright (c) 2017 Douglas McKechie + Copyright (c) 2018 Douglas McKechie Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -24,7 +24,10 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - Note: Tick Sound was recorded by DeepFrozenApps and was downloaded from http://soundbible.com/2044-Tick.html + ============================================================================ + Note: + Tick Sound was recorded by DeepFrozenApps and was downloaded from http://soundbible.com/2044-Tick.html + It has an attribution 3.0 licence. -->