Add option to display all results

MartyHimmel · Oct 14, 2016 · 946f9af · 946f9af
1 parent 6caa48a
commit 946f9af
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 34 deletions.
diff --git a/form/form-widget.html b/form/form-widget.html
@@ -1,10 +1,10 @@
-<form id="mh_rpg_dice_roller_widget" class="widget">
+<div id="mh_rpg_dice_widget_container" class="widget">
 	<p>Number of dice<br>
-		<input type="number" id="mh_rpg_number_of_dice_widget" name="mh_rpg_number_of_dice_widget" value="1">
+		<input type="number" id="mh_rpg_number_of_dice_widget" value="1" min="1">
 	</p>
 
 	<p>Type of die:<br>
-		<select id="mh_rpg_die_type_widget" name="mh_rpg_die_type_widget">
+		<select id="mh_rpg_die_type_widget">
 			<option value="4" selected>4</option>
 			<option value="6">6</option>
 			<option value="8">8</option>
@@ -14,7 +14,11 @@
 			<option value="100">100</option>
 		</select>
 	</p>
+
+	<label for="mh_rpg_display_all_cb_widget">Display all rolls? 
+	<input type="checkbox" id="mh_rpg_display_all_cb_widget"></label><br>
 
-	<input type="button" onclick="mh_rpg_roll_dice_widget()" value="Roll">
-	<p>Result: <span id="mh_rpg_dice_roll_widget"></span></p>
-</form>
+	<input type="button" id="mh_rpg_roll_button_widget" value="Roll">
+	<p>Result: <span id="mh_rpg_dice_roll_widget"></span> 
+	<span id="mh_rpg_all_rolls_widget"></span></p>
+</div>
diff --git a/form/form.html b/form/form.html
@@ -1,10 +1,10 @@
-<form id="mh_rpg_dice_roller_form">
+<div id="mh_rpg_dice_container">
 	<p>Number of dice<br>
-		<input type="number" id="mh_rpg_number_of_dice" name="mh_rpg_number_of_dice" value="1">
+		<input type="number" id="mh_rpg_number_of_dice" value="1" min="1">
 	</p>
 
 	<p>Type of die:<br>
-		<select id="mh_rpg_die_type" name="mh_rpg_die_type">
+		<select id="mh_rpg_die_type">
 			<option value="4" selected>4</option>
 			<option value="6">6</option>
 			<option value="8">8</option>
@@ -14,7 +14,11 @@
 			<option value="100">100</option>
 		</select>
 	</p>
+
+	<label for="mh_rpg_display_all_cb">Display all rolls? 
+	<input type="checkbox" id="mh_rpg_display_all_cb"></label><br>
 
-	<input type="button" onclick="mh_rpg_roll_dice()" value="Roll">
-	<p>Result: <span id="mh_rpg_dice_roll"></span></p>
-</form>
+	<input type="button" id="mh_rpg_roll_button" value="Roll">
+	<p>Result: <span id="mh_rpg_dice_roll"></span> 
+	<span id="mh_rpg_all_rolls"></span></p>
+</div>
diff --git a/js/mh-rpg-dice-roller.js b/js/mh-rpg-dice-roller.js
@@ -1,27 +1,71 @@
-function mh_rpg_roll_dice() {
-	var number_of_dice = document.getElementById("mh_rpg_number_of_dice").value;
-	var die_type = document.getElementById("mh_rpg_die_type").value;
-	var total = 0;
+(function() {
+	var rollButton = document.getElementById('mh_rpg_roll_button'),
+		widgetRollButton = document.getElementById('mh_rpg_roll_button_widget');
 
-	for (var i = 0; i < number_of_dice; i++) {
-		total += mh_rpg_random_number(1, die_type);
+	if (rollButton !== null)
+		rollButton.addEventListener('click', rollDice);
+	if (widgetRollButton !== null)
+		widgetRollButton.addEventListener('click', widgetRollDice);
+
+	function rollDice() {
+		clearRolls('mh_rpg_dice_roll', 'mh_rpg_all_rolls');
+		var numberOfDice = document.getElementById("mh_rpg_number_of_dice").value;
+
+		if (numberOfDice < 1)
+			return;
+
+		var dieType = document.getElementById("mh_rpg_die_type").value,
+			rolls = getRolls(numberOfDice, dieType);
+
+		displayTotal('mh_rpg_dice_roll', rolls.reduce(addValues));
+
+		if (document.getElementById('mh_rpg_display_all_cb').checked)
+			displayAllRolls('mh_rpg_all_rolls', rolls);
+	}
+
+	function widgetRollDice() {
+		clearRolls('mh_rpg_dice_roll_widget', 'mh_rpg_all_rolls_widget');
+		var numberOfDice = document.getElementById("mh_rpg_number_of_dice_widget").value;
+
+		if (numberOfDice < 1)
+			return;
+
+		var dieType = document.getElementById("mh_rpg_die_type_widget").value,
+			rolls = getRolls(numberOfDice, dieType);
+
+
+		displayTotal('mh_rpg_dice_roll_widget', rolls.reduce(addValues));
+
+		if (document.getElementById('mh_rpg_display_all_cb_widget').checked)
+			displayAllRolls('mh_rpg_all_rolls_widget', rolls);
 	}
 
-	document.getElementById("mh_rpg_dice_roll").innerHTML = total;
-}
+	function getRolls(numberOfDice, dieType) {
+		var rolls = [];
+		for (var i = 0; i < numberOfDice; i++) {
+			rolls.push(randomNumber(1, dieType));
+		}
+		return rolls;
+	}
 
-function mh_rpg_roll_dice_widget() {
-	var number_of_dice = document.getElementById("mh_rpg_number_of_dice_widget").value;
-	var die_type = document.getElementById("mh_rpg_die_type_widget").value;
-	var total = 0;
+	function randomNumber(min, max) {
+		return Math.floor(Math.random() * (max - min + 1)) + min;
+	}
 
-	for (var i = 0; i < number_of_dice; i++) {
-		total += mh_rpg_random_number(1, die_type);
+	function addValues(a, b) {
+		return a + b;
 	}
 
-	document.getElementById("mh_rpg_dice_roll_widget").innerHTML = total;
-}
+	function displayTotal(containerId, value) {
+		document.getElementById(containerId).innerHTML = value;
+	}
 
-function mh_rpg_random_number(min, max) {
-	return Math.floor(Math.random() * (max - min + 1)) + min;
-}
+	function displayAllRolls(containerId, values) {
+		document.getElementById(containerId).innerHTML = '(' + values.join(', ') + ')';
+	}
+
+	function clearRolls(rollContainerId, allRollsContainerId) {
+		document.getElementById(rollContainerId).innerHTML = '';
+		document.getElementById(allRollsContainerId).innerHTML = '';
+	}
+})();
diff --git a/readme.txt b/readme.txt
@@ -1,6 +1,8 @@
 === RPG Dice Roller ===
+Contributors: Threllous
+Donate link: http://www.martyhimmel.me
 Tags: rpg, dice, dungeons, dragons, pathfinder, star wars, table top
-Tested up to: 4.2
+Tested up to: 4.6.1
 License: GPL2
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -19,5 +21,11 @@ If embedding the plugin in a page, use the shortcode [mh_rpg_dice_roller] on you
 If using the plugin as a widget, simply add it to your preferred widget location and it\'s ready to go.
 
 == Changelog ==
+1.1.0
+Added an option to see individual results when rolling multiple dice.
+
+1.0.1
+Fixed a shortcode display bug.
+
 1.0
-Initial version with the core dice rolling functionality supporting multiple die rolls and all standard dice (4-100 sides). Allows embedding on pages with a shortcode and a widget option.
+Initial version with the core dice rolling functionality supporting multiple die rolls and all standard dice (4-100 sides). Allows embedding on pages with a shortcode and a widget option. 
diff --git a/rpg-dice-roller.php b/rpg-dice-roller.php
@@ -3,7 +3,7 @@
 Plugin Name: RPG Dice Roller
 Plugin URI:  http://www.martyhimmel.me/rpg-dice-roller/
 Description: Dice roller designed for table top RPGs.
-Version:     1.0
+Version:     1.1.0
 Author:      Martin Himmel
 Author URI:  http://www.martyhimmel.me
 Donate link: http://www.martyhimmel.me
@@ -33,7 +33,10 @@ function __construct() {
 		 */
 		function shortcode($atts, $content = null) {
 			$this->enqueue_js();
+			ob_start();
 			require_once('form/form.html');
+			$html = ob_get_clean();
+			return $html;
 		}
 
 		/**