diff --git a/examples/auto_basic_wheel/README.md b/examples/auto_basic_wheel/README.md new file mode 100644 index 0000000..0e6d61e --- /dev/null +++ b/examples/auto_basic_wheel/README.md @@ -0,0 +1,7 @@ +# Spin Wheel + +Sound from https://freesound.org/people/JustinBW/sounds/80921/ + +WinWheel from https://github.com/zarocknz/javascript-winwheel + +Bootstrap 4.3 https://getbootstrap.com diff --git a/examples/auto_basic_wheel/css/main.css b/examples/auto_basic_wheel/css/main.css new file mode 100644 index 0000000..1970d93 --- /dev/null +++ b/examples/auto_basic_wheel/css/main.css @@ -0,0 +1,81 @@ +/* +Description: + Contains all the styles for the winning wheel page. + +Verison History: + 2012-01-28, Douglas McKechie + - Created based off earlier version. + + 2015-09-26, Douglas McKechie + - Minor updates for the 2.0 winwheel example. +*/ + +body +{ + font-family: arial; +} + +/* Sets the background image for the wheel */ +td.the_wheel +{ + background-image: url(../img/wheel_back.png); + background-position: center; + background-repeat: none; +} + +/* Do some css reset on selected elements */ +h1, p +{ + margin: 0; +} + +div.power_controls +{ + margin-right:70px; +} + +div.html5_logo +{ + margin-left:70px; +} + +/* Styles for the power selection controls */ +table.power +{ + background-color: #cccccc; + cursor: pointer; + border:1px solid #333333; +} + +table.power th +{ + background-color: white; + cursor: default; +} + +td.pw1 +{ + background-color: #6fe8f0; +} + +td.pw2 +{ + background-color: #86ef6f; +} + +td.pw3 +{ + background-color: #ef6f6f; +} + +/* Style applied to the spin button once a power has been selected */ +.clickable +{ + cursor: pointer; +} + +/* Other misc styles */ +.margin_bottom +{ + margin-bottom: 5px; +} \ No newline at end of file diff --git a/examples/auto_basic_wheel/img/wheel_back.png b/examples/auto_basic_wheel/img/wheel_back.png new file mode 100644 index 0000000..a208ca3 Binary files /dev/null and b/examples/auto_basic_wheel/img/wheel_back.png differ diff --git a/examples/auto_basic_wheel/index.html b/examples/auto_basic_wheel/index.html new file mode 100644 index 0000000..8ac496c --- /dev/null +++ b/examples/auto_basic_wheel/index.html @@ -0,0 +1,101 @@ + + + + Wheel + + + + + + +
+


+
+
+
+

Çark Ayarları

+
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+
+
+

Alan Ayarları

+
+
+
+
+
+ +
+
+ +
+
+ + +
+
+
+
+ +
+

+ + + + +
+ +

Sorry, your browser doesn't support canvas. Please try + another.

+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/examples/auto_basic_wheel/js/Wheel.js b/examples/auto_basic_wheel/js/Wheel.js new file mode 100644 index 0000000..a59a31e --- /dev/null +++ b/examples/auto_basic_wheel/js/Wheel.js @@ -0,0 +1,54 @@ +function Winwheel(a,b){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:!0,imageOverlay:!1,drawText:!0,pointerAngle:0,wheelImage:null,imageDirection:"N"}; +for(var c in defaultOptions)this[c]=null!=a&&"undefined"!==typeof a[c]?a[c]:defaultOptions[c];if(null!=a)for(c in a)"undefined"===typeof this[c]&&(this[c]=a[c]);this.canvasId?(this.canvas=document.getElementById(this.canvasId))?(null==this.centerX&&(this.centerX=this.canvas.width/2),null==this.centerY&&(this.centerY=this.canvas.height/2),null==this.outerRadius&&(this.outerRadius=this.canvas.widthb;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){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="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(){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/auto_basic_wheel/js/main.js b/examples/auto_basic_wheel/js/main.js new file mode 100644 index 0000000..1e498f9 --- /dev/null +++ b/examples/auto_basic_wheel/js/main.js @@ -0,0 +1,129 @@ +var fields = []; +var properties = { + speed: 1, + time: 10 +}; + +// Checkbox Component +var componentHtml = + '
'; + +$('#addfield').click(() => { + AddNewField(); +}); +$('#setfield').click(() => { + Resolver(); +}); +$('#start').click(() => { + Start(); +}); +$('#reset').click(() => { + ResetAndStop(); +}); + +$('#reset').prop('disabled', true); + +// Add new field +function AddNewField() { + var element = document.createElement('div'); + + element.setAttribute('class', 'input-group mb-3'); + element.innerHTML = componentHtml; + + $('#fieldscontainer').append(element); +} + +// Resolve Active Field +function Resolver() { + fields = []; + + $('#field:checked').each((i, field) => { + var fieldValue = $(field).closest('.input-group').find('input[type=text]').val(); + + fields.push({ + 'fillStyle': '#ffffff', + 'text': fieldValue + }); + }); + + optionsWheel(); +} + +function Start() { + DisableConfigureButtons(); + + properties = { + speed: parseInt($('#speed').val()) || 1, + time: parseInt($('#repeataftertime').val()) || 10 + }; + + optionsWheel(); + startWheel(); + + if ($('#type').val() === 'auto') { + window.wheelInterval = setInterval(() => { + startWheel(); + }, properties.time * 1000); + } + else { + startWheel(); + } +} + +function DisableConfigureButtons() { + $('#addfield').prop('disabled', true); + $('#setfield').prop('disabled', true); + $('#start').prop('disabled', true); + $('#reset').prop('disabled', false); +} + +function EnableConfigureButtons() { + $('#addfield').prop('disabled', false); + $('#setfield').prop('disabled', false); + $('#start').prop('disabled', false); + $('#reset').prop('disabled', true); +} + +function ResetAndStop() { + EnableConfigureButtons(); + clearInterval(window.wheelInterval); + resetWheel(); +} + +var theWheel = new Winwheel({}); + +function optionsWheel() { + theWheel = new Winwheel({ + 'numSegments': fields.length, // Specify number of segments. + 'outerRadius': 212, // Set outer radius so wheel fits inside the background. + 'textFontSize': 12, // Set font size as desired. + 'segments': fields, + 'animation': // Specify the animation to use. + { + 'type': 'spinToStop', + 'duration': 5, // Duration in seconds. + 'spins': properties.speed, // Number of complete spins. + 'callbackFinished': alertPrize + } + }); + + theWheel.draw(); +} + +function resetWheel() { + theWheel.stopAnimation(false); + theWheel.rotationAngle = 0; + theWheel.draw(); +} + +function startWheel() { + resetWheel(); + theWheel.draw(); + theWheel.startAnimation(); +} + +function alertPrize(indicatedSegment) { + var audio = new Audio('./sound/80921__justinbw__buttonchime02up.wav'); + audio.play(); + $('#wheelSelectionResult').text('Seçilen : ' + indicatedSegment.text); +} \ No newline at end of file diff --git a/examples/auto_basic_wheel/sound/80921__justinbw__buttonchime02up.wav b/examples/auto_basic_wheel/sound/80921__justinbw__buttonchime02up.wav new file mode 100644 index 0000000..7123fe1 Binary files /dev/null and b/examples/auto_basic_wheel/sound/80921__justinbw__buttonchime02up.wav differ