JSFiddle - React, Tailwind, and code Playground

by hoss

HTML

<div id="main">

	<div id="left-column">
		<form class="iform" action="#" method="get">
			<label for="joiner"></label>
			<input id="joiner" name="joiner" class="joiner" placeholder="Please Enter your name" />
			<select id="colorer" name="colorer" class="colorer">
				<option value="">auto</option>
				<option value="db0000">Red</option>
				<option value="171515">Black</option>
				<option value="008c0a">Green</option>
			</select>
			<button class="add">Add</button>
			<button class="delete">Delete</button>
			<button class="spin-trigger">Spin</button>
			<button class="clear">Clear</button>
			<button class="reset">Reset</button>
		</form>
		<canvas class="canvas" width="500" height="500"></canvas>
	</div>

	<div id="right-column">
		<p class="winner">The Winner is ... <span>&nbsp;</span></p>
	</div>

	<div style="clear:both"></div>

</div>

CSS

#main {
    width:1000px;
}

#left-column {
    float:left;
    width:600px;
    padding-right:15px;
}

#right-column {
    float:right;
    width:300px;
}

.participants {
    list-style:none;
}

.participants li {
    border-radius:15px;
    padding:15px;
    font-family: 'Carter One', arial, serif;
    font-size:150%;
    text-shadow: 2px 2px 2px #000;
}

.participants li:nth-child(2n+1) {
    background-color:#bada55;
}

.winner {
    font-family: 'Carter One', arial, serif;
    font-size:250%;
    text-shadow: 2px 2px 2px #000;    
    display:none;
}

.winner:before {
    content: "The Winner is ... "
}

JavaScript

(function($) {

	// define main SpinWheel constructor function
	var SpinWheel = function($canvas, config ) {

		// validate config
		// 1: reject invalids
		for (configKey in config) {
			if (!config.hasOwnProperty(configKey)) continue;
			if (!SpinWheel.config.hasOwnProperty(configKey)) throw 'error: invalid config key "'+configKey+'" in SpinWheel instantiation.';
		} // end for
		// 2: check for requireds
		var requiredParams = ['segmentTexts'];
		for (var i = 0; i < requiredParams.length; ++i) {
			var requiredParam = requiredParams[i];
			if (!config.hasOwnProperty(requiredParam)) throw 'error: missing required config key \''+requiredParam+'\' in SpinWheel instantiation.';
		} // end for

		// store the per-instance config on the "this" object
		this.config = config;

		// capture the canvas jQuery object and init the canvas context
		// note: there should only ever be one SpinWheel instantiated per canvas, and there's only one canvas manipulated by a single SpinWheel instance
		this.$canvas = $canvas;
		this.canvasCtx = this.$canvas[0].getContext("2d");

		// initialize the segments, colors, and curAngle -- wrap this in a function for reusability
		this.reset();

	}; // end SpinWheel()

	// SpinWheel statics
	/*  ---  please look at the index.html source in order to understand what they do ---
		*  outerRadius : the big circle border
		*  innerRadius  : the inner circle border
		*  textRadius   : How far the the text on the wheel locate from the center point
		*  spinTrigger  : the element that trigger the spin action
		*  wheelBorderColor : what is the wheel border color
		*  wheelBorderWidth : what is the "thickness" of the border of the wheel
		*  wheelTextFont : what is the style of the text on the wheel
		*  wheelTextColor : what is the color of the tet on the wheel
		*  wheelTextShadow : what is the shadow for the text on the wheel
		*  resultTextFont : it is not being used currently
		*  arrowColor : what is the color of the arrow on the top
		* ...