paritybit.ca

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

commit 990f76ef4d796c079d947990d901f01bf6bca130
parent cc5be9e0c9ca238eb005b208072e0e7239e8e3d8
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Sun,  7 Apr 2019 02:13:07 -0400

Make improvements to new text input rolling

Allow <enter> key to be used to submit rolls. Also better stylize
history output for table-based rolls and improve styling on "Clear
History" button.

Diffstat:
Mbuild/base.css | 5+++--
Mpages/projects/dnd/roll.md | 29++++++++++++++++++++---------
Mpublic/js/roll.js | 6+++---
3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/build/base.css b/build/base.css @@ -192,8 +192,9 @@ ul.inline { margin-left: 1em; margin-bottom: 1em; bottom: 1px; - left: 0px; - width: 7em; + left: 1px; + width: 10em; + height: 1.5em; } /* Ensure proper scaling with differently-sized displays */ diff --git a/pages/projects/dnd/roll.md b/pages/projects/dnd/roll.md @@ -2,13 +2,14 @@ <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 +<p>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! +physical dice? Don't have any physical dice? Well this is the roller for you!</p> -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. +<p>The text-based rolling must be fed with an input in the format of: +<code>&lt;number&gt;d&lt;number&gt;</code> which can be optionally suffixed +with a plus or minus sign followed by another number. This text field will +accept dice of any value.</p> <table id="dice-table"> <tr class="dnd-roll"> @@ -62,9 +63,19 @@ minus sign followed by another number. </table> <div id="history"> <textarea id="history-text" rows=16 cols=34>-------&#13;&#10;History</textarea> - <button id="clear-history" onClick="clear_history()">Clear</button> + <button id="clear-history" onClick="clear_history()">Clear History</button> </div> -<div id="stringRoll"> -or type here (modifier optional): <input type="text" id="inputString" placeholder="1d20+0"> -<button onClick="stringRoll()">Roll</button> +<div id="stringRoll" onload=registerShortcut()> + or type here (modifier optional): <input type="text" id="inputString" placeholder="1d20+0"> + <button id="textRollSubmit" onClick="stringRoll()">Roll</button> </div> + +<script> + let rollInput = document.getElementById("inputString"); + rollInput.addEventListener("keyup", (event) => { + if (event.keyCode === 13) { + event.preventDefault(); + document.getElementById("textRollSubmit").click(); + } + }); +</script> diff --git a/public/js/roll.js b/public/js/roll.js @@ -17,10 +17,11 @@ function stringRoll() { } catch { alert("Invalid text input! See example for proper string format."); + return; } try { operation = rollString.match(/[\+\-]/ig)[0]; - modifier = rollString.match(/\d$/ig)[0]; + modifier = rollString.match(/\d+$/ig)[0]; } catch(TypeError) { // Ignore missing operation or modifier strings @@ -87,7 +88,7 @@ function roll(element) { if (modifier < 0) { resultStr += " - " + Math.abs(modifier) + " = " + result; } - else { + else if (modifier > 0) { resultStr += " + " + modifier + " = " + result; } // Show the result as a number in the die's row @@ -120,4 +121,3 @@ function clear_history() { let hist = document.getElementById("history-text"); hist.innerHTML = "-------&#13;&#10;History"; } -