cferdinandi/dice.html

## dice.html
<!DOCTYPE html>
<html>
<head>
	<title>Dice</title>

	<style type="text/css">
		body {
			margin: 1em auto;
			max-width: 40em;
			width: 88%;
		}

		button {
			font-size: 1.5em;
			font-weight: bold;
			padding: 0.5em 1em;
		}

		#result {
			font-size: 2em;
			font-weight: bold;
			text-align: center;
		}
	</style>
</head>
<body>

	<h1>Digital Dice</h1>

	<p>
		<button data-roll="d4">D4</button>
		<button data-roll="d6">D6</button>
		<button data-roll="d8">D8</button>
		<button data-roll="d10">D10</button>
		<button data-roll="d12">D12</button>
		<button data-roll="d20">D20</button>
	</p>

	<p>
		<label for="best-worst">
			<input type="checkbox" id="best-worst">
			Use Best Of/Worst Of
		</label>
	</p>

	<div id="result" aria-live="polite"></div>


	<script>
		//
		// Variables
		//

		// Elements in the UI
		var result = document.querySelector('#result');
		var bestWorst = document.querySelector('#best-worst');

		// Dice arrays
		var dice = {
			d4: [1, 2, 3, 4],
			d6: [1, 2, 3, 4, 5, 6],
			d8: [1, 2, 3, 4, 5, 6, 7, 8],
			d10: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
			d12: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
			d20: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
		};

		// Placeholder for die rolls
		var rolls;


		//
		// Methods
		//

		/**
		 * Randomly shuffle an array
		 * https://stackoverflow.com/a/2450976/1293256
		 * @param  {Array} array The array to shuffle
		 * @return {String}      The first item in the shuffled array
		 */
		var shuffle = function (array) {

			var currentIndex = array.length;
			var temporaryValue, randomIndex;

			// While there remain elements to shuffle...
			while (0 !== currentIndex) {
				// Pick a remaining element...
				randomIndex = Math.floor(Math.random() * currentIndex);
				currentIndex -= 1;

				// And swap it with the current element.
				temporaryValue = array[currentIndex];
				array[currentIndex] = array[randomIndex];
				array[randomIndex] = temporaryValue;
			}

			return array;

		};

		/**
		 * Shuffle the dice on page load
		 */
		var startingShuffle = function () {
			for (var key in dice) {
				if (dice.hasOwnProperty(key)) {
					shuffle(dice[key]);
				}
			}
		};

		/**
		 * Roll the dice
		 * @param  {String} d The die size to use
		 */
		var roll = function (d) {
			shuffle(dice[d]);
			rolls.push(dice[d][0]);
		};

		/**
		 * Handle click events
		 * @param  {Event} event The event object
		 */
		var clickHandler = function (event) {

			// Only run on [data-roll] elements
			var d = event.target.getAttribute('data-roll');
			if (!d) return;

			// Clear the rolls array
			rolls = [];

			// Roll the dice
			roll(d);

			// If best of/worst of, roll again
			if (bestWorst.checked) {
				roll(d);
			}

			// Render the result in the UI
			result.textContent = rolls.join(' - ');

		};


		//
		// Event Listeners
		//

		// Shuffle the dice numbers on load
		startingShuffle();

		// Listen for clicks in the DOM
		document.addEventListener('click', clickHandler);
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dice</title>

	<style type="text/css">
	body {
	margin: 1em auto;
	max-width: 40em;
	width: 88%;
	}

	button {
	font-size: 1.5em;
	font-weight: bold;
	padding: 0.5em 1em;
	}

	#result {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	}
	</style>
	</head>
	<body>

	<h1>Digital Dice</h1>

	<p>
	<button data-roll="d4">D4</button>
	<button data-roll="d6">D6</button>
	<button data-roll="d8">D8</button>
	<button data-roll="d10">D10</button>
	<button data-roll="d12">D12</button>
	<button data-roll="d20">D20</button>
	</p>

	<p>
	<label for="best-worst">
	<input type="checkbox" id="best-worst">
	Use Best Of/Worst Of
	</label>
	</p>

	<div id="result" aria-live="polite"></div>


	<script>
	//
	// Variables
	//

	// Elements in the UI
	var result = document.querySelector('#result');
	var bestWorst = document.querySelector('#best-worst');

	// Dice arrays
	var dice = {
	d4: [1, 2, 3, 4],
	d6: [1, 2, 3, 4, 5, 6],
	d8: [1, 2, 3, 4, 5, 6, 7, 8],
	d10: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
	d12: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
	d20: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
	};

	// Placeholder for die rolls
	var rolls;


	//
	// Methods
	//

	/**
	* Randomly shuffle an array
	* https://stackoverflow.com/a/2450976/1293256
	* @param {Array} array The array to shuffle
	* @return {String} The first item in the shuffled array
	*/
	var shuffle = function (array) {

	var currentIndex = array.length;
	var temporaryValue, randomIndex;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {
	// Pick a remaining element...
	randomIndex = Math.floor(Math.random() * currentIndex);
	currentIndex -= 1;

	// And swap it with the current element.
	temporaryValue = array[currentIndex];
	array[currentIndex] = array[randomIndex];
	array[randomIndex] = temporaryValue;
	}

	return array;

	};

	/**
	* Shuffle the dice on page load
	*/
	var startingShuffle = function () {
	for (var key in dice) {
	if (dice.hasOwnProperty(key)) {
	shuffle(dice[key]);
	}
	}
	};

	/**
	* Roll the dice
	* @param {String} d The die size to use
	*/
	var roll = function (d) {
	shuffle(dice[d]);
	rolls.push(dice[d][0]);
	};

	/**
	* Handle click events
	* @param {Event} event The event object
	*/
	var clickHandler = function (event) {

	// Only run on [data-roll] elements
	var d = event.target.getAttribute('data-roll');
	if (!d) return;

	// Clear the rolls array
	rolls = [];

	// Roll the dice
	roll(d);

	// If best of/worst of, roll again
	if (bestWorst.checked) {
	roll(d);
	}

	// Render the result in the UI
	result.textContent = rolls.join(' - ');

	};


	//
	// Event Listeners
	//

	// Shuffle the dice numbers on load
	startingShuffle();

	// Listen for clicks in the DOM
	document.addEventListener('click', clickHandler);
	</script>
	</body>
	</html>