Update

2021-04-06 15:24:07 +02:00
parent e84b52c27d
commit d24d899515
7 changed files with 391 additions and 1 deletions
@@ -0,0 +1,65 @@
+//set default degree (360*5)
+var degree = 1800;
+//number of clicks = 0
+var clicks = 0;
+
+$(document).ready(function () {
+
+	/*WHEEL SPIN FUNCTION*/
+	$('#spin').click(function () {
+
+		//add 1 every click
+		clicks++;
+
+		/*multiply the degree by number of clicks
+	  generate random number between 1 - 360, 
+	then add to the new degree*/
+		var newDegree = degree * clicks;
+		var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
+		totalDegree = newDegree + extraDegree;
+
+		/*let's make the spin btn to tilt every
+		time the edge of the section hits 
+		the indicator*/
+		$('#wheel .sec').each(function () {
+			var t = $(this);
+			var noY = 0;
+
+			var c = 0;
+			var n = 700;
+			var interval = setInterval(function () {
+				c++;
+				if (c === n) {
+					clearInterval(interval);
+				}
+
+				var aoY = t.offset().top;
+				$("#txt").html(aoY);
+				console.log(aoY);
+
+				/*23.7 is the minumum offset number that 
+				each section can get, in a 30 angle degree.
+				So, if the offset reaches 23.7, then we know
+				that it has a 30 degree angle and therefore, 
+				exactly aligned with the spin btn*/
+				if (aoY < 23.89) {
+					console.log('<<<<<<<<');
+					$('#spin').addClass('spin');
+					setTimeout(function () {
+						$('#spin').removeClass('spin');
+					}, 100);
+				}
+			}, 10);
+
+			$('#inner-wheel').css({
+				'transform': 'rotate(' + totalDegree + 'deg)'
+			});
+
+			noY = t.offset().top;
+
+		});
+	});
+
+
+
+});