JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src='http://griffusion.elementfx.com/js/spinwheel.js'></script>

<p><div class='games_wheel_prize'>What are you waiting for?</div><br><div class='games_wheel_spun'>Spins: 0</div></p>
	<div class='games_wheel_container'>
	  <div class='games_wheel'></div>
	  <button class='games_wheel_spinner'><span>Spin!</span><div class='pointer'></div></button>
	</div>

CSS

.games_wheel_container {position:relative;width:600px;min-height:510px; margin:20px auto;border:1px solid white;padding:10px;text-align:center;}
	.games_wheel {position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-250px;width:500px;height:500px; background-color:red;background-image: url('http://griffusion.elementfx.com/pics/ui/wheel.gif');border-radius:100%;}
	.games_wheel_spinner {cursor: pointer;color:white;font-weight:bold;border:none;position:absolute;width:50px;height:50px;top:225px;left:225px;border-radius:100%;z-index:60;background-color:blue;}
	.games_wheel_spinner .pointer {position:absolute;width:0;height:0;top:-8px;left:15px;border-left:10px solid transparent;border-right:10px  solid transparent;border-bottom:10px solid blue;}

JavaScript

var segments = [{name:'Keythong'},{name:'Pegasus'},{name:'Aquila'},{name:'Minoan'},{name:'Qilin'},{name:'Dragon'},{name:'Solvine'},{name: 'Tillia'}];
var spun = 0;

$(function() {

var $r = $('.games_wheel').fortune(segments);
	
	var spinWheel = function(){
	  $('.games_wheel_spinner').off('click');
	  $('.games_wheel_spinner span').fadeOut(300);
	  $r.spin().done(function(segment){
	    // now we have a result generated
	    $('.games_wheel_prize').html('You got... <b>'+segment.name+'</b>!');
	    spun = spun + 1; $('.games_wheel_spun').html('Spins: '+spun);
	    if(spun > 700){ // max for testing
	      $('.games_wheel_spinner').fadeOut(400); // hide spinner
	      $('.games_wheel_spun').append('<br>All done!'); // and tell user
	    }
	    $('.games_wheel_spinner').on('click', spinWheel);
	    $('.games_wheel_spinner span').fadeIn(300); // after spin done, show 'Spin!' again
	  });
	};

	$('.games_wheel_spinner').on('click', spinWheel);
});