Last active
April 20, 2023 05:13
-
-
Save jwygralak67/a7c6844bb175916287c6f780eecca549 to your computer and use it in GitHub Desktop.
A simple dice roller for gaming or whatever. Uses html, css, & javascript. Self-contained in one html file. Can be saved and run locally.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head> | |
| <meta name="viewport" content="width=480"> | |
| <style> | |
| input {border-style: none; border-bottom-style: solid; border-width:thin;} | |
| div {border:solid thin black; margin: 0.5em; padding: 0.5em; border-radius: 1em; background: #f7f7f7;} | |
| .die {border:solid thin black; margin: 1px; padding: 1px; border-radius: 5px; display: inline-block;} | |
| .outer {margin: auto; max-width: 750px; background: khaki;} | |
| @viewport { width: 640;} | |
| </style> | |
| <script> | |
| var dieFace = { | |
| 4:'<svg width="50" height="50"><polygon points="0,3 25,46 50,3" style="stroke: black; fill: none" /><text fill="black" x="20" y="26" font-family="Verdana" font-size="18">REPLACEME</text></svg>', | |
| 6:'<svg width="50" height="50"><polygon points="3,3 3,47 47,47 47,3" style="stroke: black; fill: none" /><text fill="black" x="20" y="30" font-family="Verdana" font-size="18">REPLACEME</text></svg>', | |
| 8:'<svg width="60" height="50"><polygon points="17,0 60,25 17,50 17,0 0,25 17,50" style="stroke: black; fill: none" /><text fill="black" x="25" y="30" font-family="Verdana" font-size="18">REPLACEME</text></svg>', | |
| 10:'<svg width="50" height="50"><polygon points="43,50 0,25 43,0 50,25" style="stroke: black; fill: none" /><text fill="black" x="20" y="30" font-family="Verdana" font-size="18">REPLACEME</text></svg>', | |
| 12:'<svg width="50" height="50"><polygon points="25,0 1,17 10,45 40,45 49,17" style="stroke: black; fill: none" /><text fill="black" x="13" y="30" font-family="Verdana" font-size="18">REPLACEME</text></svg>', | |
| 20:'<svg width="50" height="50"><polygon points="0,46 25,0 50,46" style="stroke: black; fill: none" /><text fill="black" x="13" y="40" font-family="Verdana" font-size="18">REPLACEME</text></svg>', | |
| 'other':'<svg width="50" height="50"><circle cx="25" cy="25" r="20" style="stroke: black; fill: none" /><text fill="black" x="13" y="31" font-family="Verdana" font-size="18">REPLACEME</text></svg>' | |
| }; | |
| function rollem(){ | |
| total = 0; | |
| n = document.getElementById('num').value; | |
| d = document.getElementById('die').value; | |
| o = document.getElementById('output'); | |
| p = o.innerHTML; | |
| if (d in dieFace){ | |
| face = dieFace[d]; | |
| } else { | |
| face = dieFace['other']; | |
| } | |
| if (p != ''){ | |
| p = p.concat("<hr>") | |
| } else { | |
| p = p.concat('<button id="clear" onclick="clearme()" style="float:right;">Clear</button>'); | |
| } | |
| for (i = 0; i < n; i++){ | |
| r = Math.ceil(Math.random() * d); | |
| total += r; | |
| p = p.concat("<span> " + face.replace('REPLACEME', r.toString()) + " </span>"); | |
| } | |
| p += " Total: " + total; | |
| o.innerHTML = p; | |
| } | |
| function clearme(){ | |
| o = document.getElementById('output'); | |
| o.innerHTML = ""; | |
| } | |
| function loady(){ | |
| for(f in dieFace){ | |
| e = document.getElementById(f); | |
| if (e) e.innerHTML = dieFace[f].replace("REPLACEME", f); | |
| } | |
| } | |
| function dieClick(whatzis){ | |
| n = document.getElementById('num'); | |
| d = document.getElementById('die'); | |
| if (whatzis.id == d.value){ | |
| n.value = Number(n.value) + 1; | |
| } else { | |
| n.value = 1; | |
| d.value = whatzis.id | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload=loady()> | |
| <div class='outer'> | |
| <div id="control"> | |
| <input type="number" step="1" id="num" value='3' maxlength="3" size="1" width="1em"> d <input type="number" step="1" id="die" value='6' maxlength="3" size="1"> | |
| <button id="roll" onclick="rollem()">Roll</button> | |
| </div> | |
| <span id="4" onclick="dieClick(this)"> | |
| </span> | |
| <span id="6" onclick="dieClick(this)"> | |
| </span> | |
| <span id="8" onclick="dieClick(this)"> | |
| </span> | |
| <span id="10" onclick="dieClick(this)"> | |
| </span> | |
| <span id="12" onclick="dieClick(this)"> | |
| </span> | |
| <span id="20" onclick="dieClick(this)"> | |
| </span> | |
| <div id="output"></div> | |
| </div> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Pretty cool, thanks.