paritybit.ca

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

commit bfe591e744be2dd45f1e75c77982f181205e19bb
parent ef247276257434525d5415314816c399394b92b9
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Fri, 31 Jan 2020 00:47:06 -0500

Make D&D Dice Roller Accessible

Diffstat:
Mpages/projects/dnd/roll.md | 94+++++++++++++++++++++++++++++++++----------------------------------------------
Mpublic/js/roll.js | 4++--
Mstyle/roll.css | 203+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------
3 files changed, 224 insertions(+), 77 deletions(-)

diff --git a/pages/projects/dnd/roll.md b/pages/projects/dnd/roll.md @@ -2,7 +2,7 @@ [//]: # "A super simple dice roller for Dungeons and Dragons with every die from the d4 to the d20 to the dX." -[//]: # "main.min.css roll.min.css" +[//]: # "main.min.css roll.css" [//]: # @@ -20,62 +20,46 @@ physical dice? Don't have any physical dice? Well this is the roller for you!</p 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"> - <th>Die</th> - <th>Num</th> - <th>Mod</th> - <th>Result</th> - </tr> - <tr class="dnd-roll"> - <td class="dice-td"><button id="4" onClick="roll(this)">d4</button></td> - <td class="dice-td"><input type="number" min=1 value=1 id="num4"></td> - <td class="dice-td"><input type="number" value=0 id="mod4"></td> - <td class="dice-td"><p class="field" id="4result">0</p> - </tr> - <tr class="dnd-roll"> - <td class="dice-td"><button id="6" onClick="roll(this)">d6</button></td> - <td class="dice-td"><input type="number" min=1 value=1 id="num6"></td> - <td class="dice-td"><input type="number" value=0 id="mod6"></td> - <td class="dice-td"><p class="field" id="6result">0</p> - </tr> - <tr class="dnd-roll"> - <td class="dice-td"><button id="8" onClick="roll(this)">d8</button></td> - <td class="dice-td"><input type="number" min=1 value=1 id="num8"></td> - <td class="dice-td"><input type="number" value=0 id="mod8"></td> - <td class="dice-td"><p class="field" id="8result">0</p> - </tr> - <tr class="dnd-roll"> - <td class="dice-td"><button id="10" onClick="roll(this)">d10</button></td> - <td class="dice-td"><input type="number" min=1 value=1 id="num10"></td> - <td class="dice-td"><input type="number" value=0 id="mod10"></td> - <td class="dice-td"><p class="field" id="10result">0</p> - </tr> - <tr class="dnd-roll"> - <td class="dice-td"><button id="12" onClick="roll(this)">d12</button></td> - <td class="dice-td"><input type="number" min=1 value=1 id="num12"></td> - <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" 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> - <td class="dice-td"><p class="field" id="20result">0</p> - </tr> - <tr class="dnd-roll"> - <td class="dice-td"><button id="100" onClick="roll(this)">d100</button></td> - <td class="dice-td"><input type="number" min=1 value=1 id="num100"></td> - <td class="dice-td"><input type="number" value=0 id="mod100"></td> - <td class="dice-td"><p class="field" id="100result">0</p> - </tr> -</table> -<div id="history"> - <textarea id="history-text" rows=16 cols=34>-------&#13;&#10;History</textarea> - <button id="clear-history" onClick="clear_history()">Clear History</button> +<div id="grid-container"> + <h3 id="die-header">Die</h3> + <h3 id="num-header">Num</h3> + <h3 id="mod-header">Mod</h3> + <h3 id="res-header">Result</h3> + <button id="d4" onClick="roll(this)" aria-label="Roll d4">d4</button> + <input type="number" min=1 value=1 id="num4" aria-label="Number of d4 dice to roll"> + <input type="number" value=0 id="mod4" aria-label="d4 plus/minus modifier"> + <p class="field" id="d4result" aria-label="d4 result">0</p> + <button id="d6" onClick="roll(this)" aria-label="Roll d6">d6</button> + <input type="number" min=1 value=1 id="num6" aria-label="Number of d6 dice to roll"> + <input type="number" value=0 id="mod6" aria-label="d6 plus/minus modifier"> + <p class="field" id="d6result" aria-label="d6 result">0</p> + <button id="d8" onClick="roll(this)" aria-label="Roll d8">d8</button> + <input type="number" min=1 value=1 id="num8" aria-label="Number of d8 dice to roll"> + <input type="number" value=0 id="mod8" aria-label="d8 plus/minus modifier"> + <p class="field" id="d8result" aria-label="d8 result">0</p> + <button id="d10" onClick="roll(this)" aria-label="Roll d10">d10</button> + <input type="number" min=1 value=1 id="num10" aria-label="Number of d10 dice to roll"> + <input type="number" value=0 id="mod10" aria-label="d10 plus/minus modifier"> + <p class="field" id="d10result" aria-label="d10 result">0</p> + <button id="d12" onClick="roll(this)" aria-label="Roll d12">d12</button> + <input type="number" min=1 value=1 id="num12" aria-label="Number of d12 dice to roll"> + <input type="number" value=0 id="mod12" aria-label="d12 plus/minus modifier"> + <p class="field" id="d12result" aria-label="d12 result">0</p> + <button id="d20" onClick="roll(this)" aria-label="Roll d20">d20</button> + <input type="number" min=1 value=1 id="num20" aria-label="Number of d20 dice to roll"> + <input type="number" value=0 id="mod20" aria-label="d20 plus/minus modifier"> + <p class="field" id="d20result" aria-label="d20 result">0</p> + <button id="d100" onClick="roll(this)" aria-label="Roll d100">d100</button> + <input type="number" min=1 value=1 id="num100" aria-label="Number of d100 dice to roll"> + <input type="number" value=0 id="mod100" aria-label="d100 plus/minus modifier"> + <p class="field" id="d100result" aria-label="d100 result">0</p> + <div id="history"> + <textarea id="history-text" rows=16 cols=34 aria-label="Roll history">-------&#13;&#10;History</textarea> + <button id="clear-history" onClick="clear_history()">Clear History</button> + </div> </div> <div id="stringRoll" onload=registerShortcut()> - or type here (modifier optional): <input type="text" id="inputString" placeholder="1d20+0"> + or type here (modifier optional): <input type="text" id="inputString" placeholder="1d20+0" aria-label="Custom dice value in the form <number_of_dice>d<dice_value>+/-<modifier>"> <button id="textRollSubmit" onClick="stringRoll()">Roll</button> </div> diff --git a/public/js/roll.js b/public/js/roll.js @@ -80,7 +80,7 @@ function stringRoll() { * @input Element The button representing which dice to roll */ function roll(element) { - let btnId = element.id; + let btnId = (element.id).substring(1); let numRolls = document.getElementById(('num'+btnId)).value; let modifier = document.getElementById(('mod'+btnId)).value; let result = 0; @@ -112,7 +112,7 @@ function roll(element) { resultStr += " + " + modifier + " = " + result; } // Show the result as a number in the die's row - document.getElementById((btnId+"result")).innerHTML = result; + document.getElementById(("d"+btnId+"result")).innerHTML = result; // Add the result to the history box let hist = document.getElementById("history-text"); hist.innerHTML = (resultStr + "\n") + hist.innerHTML; diff --git a/style/roll.css b/style/roll.css @@ -1,34 +1,28 @@ -#dice-table { - float: left; - width: 15%; -} - -.dice-td { - width: 100%; - line-height: 0px; - text-align: center; - height: 1.7em; -} - -.dice-td>button { - width: 100%; +button:not(#clear-history) { + width: 4em; } -.dice-td>input { - width: 50px; +input:not(#inputString) { + width: 4em; } .field { - margin: 0 0 0 -10px; + font-weight: bold; + margin: 0 0 0 0.8em; + padding-top: 0.3em; } -#d20row { - background-color: #b77; +#grid-container { + display: grid; + grid-template-columns: auto auto auto auto auto; + justify-content: left; + grid-gap: 0.2em; } #history { - display: inline-block; position: relative; + grid-column: 5; + grid-row: 2 / span 7; } #history-text { @@ -47,3 +41,172 @@ left: 1px; width: 10em; height: 1.5em; +} + +#die-header { + grid-column: 1; + grid-row: 1; +} + +#num-header { + grid-column: 2; + grid-row: 1; +} + +#mod-header { + grid-column: 3; + grid-row: 1; +} + +#res-header { + grid-column: 4; + grid-row: 1; +} + +#d4 { + grid-column: 1; + grid-row: 2; +} + +#d6 { + grid-column: 1; + grid-row: 3; +} + +#d8 { + grid-column: 1; + grid-row: 4; +} + +#d10 { + grid-column: 1; + grid-row: 5; +} + +#d12 { + grid-column: 1; + grid-row: 6; +} + +#d20 { + grid-column: 1; + grid-row: 7; +} + +#d100 { + grid-column: 1; + grid-row: 8; +} + +#num4 { + grid-column: 2; + grid-row: 2; +} + +#num6 { + grid-column: 2; + grid-row: 3; +} + +#num8 { + grid-column: 2; + grid-row: 4; +} + +#num10 { + grid-column: 2; + grid-row: 5; +} + +#num12 { + grid-column: 2; + grid-row: 6; +} + +#num20 { + grid-column: 2; + grid-row: 7; +} + +#num100 { + grid-column: 2; + grid-row: 8; +} + +#mod4 { + grid-column: 3; + grid-row: 2; +} + +#mod6 { + grid-column: 3; + grid-row: 3; +} + +#mod8 { + grid-column: 3; + grid-row: 4; +} + +#mod10 { + grid-column: 3; + grid-row: 5; +} + +#mod12 { + grid-column: 3; + grid-row: 6; +} + +#mod20 { + grid-column: 3; + grid-row: 7; +} + +#mod100 { + grid-column: 3; + grid-row: 8; +} + +#d4result { + grid-column: 4; + grid-row: 2; +} + +#d6result { + grid-column: 4; + grid-row: 3; +} + +#d8result { + grid-column: 4; + grid-row: 4; +} + +#d10result { + grid-column: 4; + grid-row: 5; +} + +#d12result { + grid-column: 4; + grid-row: 6; +} + +#d20result { + grid-column: 4; + grid-row: 7; +} + +#d100result { + grid-column: 4; + grid-row: 8; +} + +@media only screen and (max-width: 680px) { + #history { + position: relative; + grid-column: 1 / span 4; + grid-row: 9; + } +}