paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit cc5be9e0c9ca238eb005b208072e0e7239e8e3d8
parent 8642a57d0484a76590c50cd3c43f8a8d403dd342
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Sun,  7 Apr 2019 01:37:59 -0400

Add text entry feature to dice roller

Add the ability for someone to put in a text based roll for the dice
roller using the format ndn+/-n.

Additionally, improve understandability and usability by adding
instructions and background-color to the D20 row of the table.

Diffstat:
Mbuild/base.css | 16++++++++++++++++
Mpages/projects/dnd/roll.md | 15++++++++++++++-
Mpublic/js/roll.js | 64++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
3 files changed, 92 insertions(+), 3 deletions(-)

diff --git a/build/base.css b/build/base.css @@ -42,8 +42,20 @@ pre { word-wrap: break-word; } +code { + font-size: 15px; + background-color: #b2b2b2; + color: #3a3a3a; +} + +input { + background-color: #eaeaea; + height: 1.4em; +} + button { background-color: #bababa; + height: 1.9em; } video, audio { @@ -158,6 +170,10 @@ ul.inline { margin-left: -10px; } +#d20row { + background-color: #b77; +} + #history { display: inline-block; position: relative; diff --git a/pages/projects/dnd/roll.md b/pages/projects/dnd/roll.md @@ -1,6 +1,15 @@ ## D&D Simple Dice Roller <script type="text/javascript" src=/js/math.js></script> <script type="text/javascript" src=/js/roll.js></script> + +This page is designed to make rolling dice quick and easy during any D&D +session. Need to roll many dice at once but don't want to have to bother with +physical dice? Don't have any physical dice? Well this is the roller for you! + +The text-based rolling must be fed with an input in the format of: +`<number>d<number>` which can be optionally suffixed with a plus or +minus sign followed by another number. + <table id="dice-table"> <tr class="dnd-roll"> <th>Die</th> @@ -38,7 +47,7 @@ <td class="dice-td"><input type="number" value=0 id="mod12"></td> <td class="dice-td"><p class="field" id="12result">0</p> </tr> - <tr class="dnd-roll"> + <tr class="dnd-roll" id="d20row"> <td class="dice-td"><button id="20" onClick="roll(this)">d20</button></td> <td class="dice-td"><input type="number" min=1 value=1 id="num20"></td> <td class="dice-td"><input type="number" value=0 id="mod20"></td> @@ -55,3 +64,7 @@ <textarea id="history-text" rows=16 cols=34>-------&#13;&#10;History</textarea> <button id="clear-history" onClick="clear_history()">Clear</button> </div> +<div id="stringRoll"> +or type here (modifier optional): <input type="text" id="inputString" placeholder="1d20+0"> +<button onClick="stringRoll()">Roll</button> +</div> diff --git a/public/js/roll.js b/public/js/roll.js @@ -3,10 +3,65 @@ // 2019-03-14 // Simple functions for rolling dice. +function stringRoll() { + let rollString = document.getElementById("inputString").value; + let result = 0; + let numRolls, die, operation, modifier, resultStr = ""; + + // Parse values from string + try { + numRolls = rollString.match(/\d+d/ig)[0]; + numRolls = numRolls.substring(0, numRolls.length-1); + die = rollString.match(/d\d+/ig)[0]; + die = die.substring(1); + } + catch { + alert("Invalid text input! See example for proper string format."); + } + try { + operation = rollString.match(/[\+\-]/ig)[0]; + modifier = rollString.match(/\d$/ig)[0]; + } + catch(TypeError) { + // Ignore missing operation or modifier strings + } + + // Conduct rolls + for (let i = 0; i < numRolls; i++) { + let intermediate = Math.floor((Math.random()*die)+1); + if (i == numRolls-1) { + // If it's the last roll, don't add a + symbol to the string + resultStr += intermediate; + } + else { + resultStr += intermediate + " + "; + } + result += intermediate; + } + // Finalize the result string + resultStr += " = " + result; + if (numRolls == 1) { + resultStr = result; + } + // Apply the modifier + resultStr = "d"+ die + ": " + resultStr; + if (operation === '-') { + result = Number(result) - Number(modifier); + resultStr += " - " + modifier + " = " + result; + } + else if (operation === '+') { + result = Number(result) + Number(modifier); + resultStr += " + " + modifier + " = " + result; + } + // Add the result to the history box + let hist = document.getElementById("history-text"); + hist.innerHTML = (resultStr + "\n") + hist.innerHTML; +} + function roll(element) { let btnId = element.id; let numRolls = document.getElementById(('num'+btnId)).value; - let modifier = document.getElementById(('mod'+btnId)).value; + let modifier = document.getElementById(('mod'+btnId)).value; let result = 0; let resultStr = ""; // Conduct rolls @@ -29,7 +84,12 @@ function roll(element) { // Apply the modifier result = Number(result) + Number(modifier); resultStr = "d"+ btnId + ": " + resultStr; - resultStr += " + " + modifier + " = " + result; + if (modifier < 0) { + resultStr += " - " + Math.abs(modifier) + " = " + result; + } + else { + resultStr += " + " + modifier + " = " + result; + } // Show the result as a number in the die's row document.getElementById((btnId+"result")).innerHTML = result; // Add the result to the history box