Wheels of destiny

multi wheel

by rob Davis

HTML

Wheel of Dev 
<input type="button" id="btn-spin" value="spin"/><br/>
<div class="output" id="info1">_</div>
<div class="output" id="info2">_</div>
<div class="output" id="info3">_</div>
<div class="output" id="info4">_</div><br />
<div id="container1" ></div>
<div id="container2" ></div>
<div id="container3" ></div>
<div id="container4" ></div>

CSS

#container1, #container2, #container3, #container4 { 
    background-color:#ccc;
    width:200px;
    height:200px;
    display:block;
    float:left;
    display:block;
}

.output {    float:left; margin-left:8px;}

canvas {
    position:absolute;
}
.canvasForeground, .canvasWheel, .canvasSelector { display:none; }

JavaScript

// add sound - really? no!
// github etc

// issues
// none at the moment


// declare our global namespace
var SPINWHEEL = SPINWHEEL || {};

// create the closure for the instance of the object
SPINWHEEL.wheelOfDev = (function(targetId, list){
    // canvas layers array, properties get populated as they are dynamically created
    var canvases = [{"name":'canvasMain'}, {"name":'canvasWheel'}, {"name":'canvasForeground'},{"name":'canvasSelector'}];
    var fps = 14; // anything faster than 14 is unnoticable
    var intervalHandle = null; // animation handle
    
    var spinAngle = 5; // starting offset
    var spinAngleEnd = -1; // target
    var spinRate = -1;
    var spinAlt = -1;
    var spinReverseAngle = -1;
    
    var minSpins = 1;
    var maxSpins = 8;
    
    var appWidth  = -1;
    var appHeight = -1;
    var appRadius = -1;
    var wheelRadius = -1;
    var sliceSize = -1;
    
    var pegSize = -1; // peg size is used to calculate the pointer geometry
    
    var theme = {
        "Colour1":"#ff0", 
        "Colour2":"#000",
        "WheelColour":"#fff",
        "FontColour1":"#000",
        "FontColour2":"#ff0",
        "Slice1Colour":"#006",
        "Font":"Arial",
        "PegColour1":"#fff", 
        "PegColour2":"#000",
        "PointerColour1":"#fff",
        "PointerColour2":"#000",
        "CentreColour":"#903",
        "HighlightColour":"rgba(255,100,100,0.5)",
        "SliceText":"Spin again"
    };
    
    // cannot make public but can expose a setter SetOnCompleted()
    var onCompleted = null;
    
    // initialise all the dynamic canvases
    var init = function() {
    	var targetDiv = document.getElementById(targetId);
		for (var i=0;i<canvases.length;i++) {
		    if (getCanvas(canvases[i].name)) break;
		    canvases[i]=newCanvas(targetId, canvases[i].name);
		    targetDiv.appendChild(canvases[i].canvas);
		}
		appWidth = targetDiv.offsetWidth;
		appHeight = targetDiv.offsetHeight;
        appRadius = appWidth/2;
       ...