summaryrefslogtreecommitdiff
path: root/www/dice
diff options
context:
space:
mode:
Diffstat (limited to 'www/dice')
-rw-r--r--www/dice/index.css38
-rw-r--r--www/dice/index.html86
2 files changed, 124 insertions, 0 deletions
diff --git a/www/dice/index.css b/www/dice/index.css
new file mode 100644
index 0000000..9c3a8e4
--- /dev/null
+++ b/www/dice/index.css
@@ -0,0 +1,38 @@
+#numdice {
+ font-size: 2em;
+ width: 100px;
+ text-align: center;
+}
+
+#rollbtn {
+ font-size: 2em;
+ padding: 8px 32px;
+}
+
+.output tbody tr:nth-child(even) {
+ background-color: #e6e6e6;
+}
+
+#history {
+ min-width: 33%;
+}
+
+.num {
+ text-align: center;
+ padding: 0 4px;
+}
+
+tr th {
+ border-bottom: 1px dotted #444;
+}
+
+#history tr th:nth-child(2), #history tr td:nth-child(2) {
+ border-right: 1px solid #444;
+}
+
+.footer {
+ font-size: 0.5em;
+ text-align: center;
+ width: 100%;
+}
+
diff --git a/www/dice/index.html b/www/dice/index.html
new file mode 100644
index 0000000..078e711
--- /dev/null
+++ b/www/dice/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0">
+ <meta charset="utf-8">
+ <title>senders.io - Dice Roller</title>
+ <link rel="stylesheet" type="text/css" href="/index.css">
+ <link rel="stylesheet" type="text/css" href="./index.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+ <article id="body">
+ <h1>Dice Roller</h1>
+ <p>Set your number of dice and press roll. The output tables will display
+ the number of count of each result rolled.</p>
+ <div class='form'>
+ <input type='number' min="1" max="999" id="numdice" value="4">
+ <button id='rollbtn' onclick="roll()">Roll</button>
+ </div>
+ <h2>Roll Results</h2>
+ <table id='results' class='output'>
+ <thead>
+ <tr>
+ <th>Dice Face</th>
+ <th>Num Rolled</th>
+ </tr>
+ </thead>
+ <tbody id='resbody'></tbody>
+ </table>
+ <h2>Roll History</h2>
+ <table id='history' class='output'>
+ <thead>
+ <tr>
+ <th class='num'>#</th>
+ <th colspan="2">cnt</th>
+ <th>1s</th>
+ <th>2s</th>
+ <th>3s</th>
+ <th>4s</th>
+ <th>5s</th>
+ <th>6s</th>
+ </tr>
+ </thead>
+ <tbody id='histbody'></tbody>
+ </table>
+ </article>
+ <article class='footer'>
+ <i>This page uses basic javascript. Nothing external.</i>
+ </article>
+ <script>
+ var numRolls = 0;
+
+ function roll() {
+ numRolls += 1;
+ var nI = document.getElementById("numdice");
+ var numDice = nI.value;
+ var results = {};
+ results[1] = 0;
+ results[2] = 0;
+ results[3] = 0;
+ results[4] = 0;
+ results[5] = 0;
+ results[6] = 0;
+ for (var i = 0; i < numDice; i++) {
+ var r = Math.floor((Math.random() * 100) % 6) + 1;
+ results[r] += 1;
+ }
+ display(results, numDice);
+ }
+
+ function display(res, numDice) {
+ var resBody = document.getElementById("resbody");
+ var histBody = document.getElementById("histbody");
+ resHTML = "";
+ histHTML = `<tr><td class='num'>${numRolls}</td><td colspan=2>${numDice}</td>`;
+ for (var i = 1; i <= 6; i++) {
+ resHTML += `<tr><td>${i}</td><td>${res[i]}</td></tr>`;
+ histHTML += `<td>${res[i]}</td>`;
+ }
+ histHTML += "</tr>";
+ histBody.innerHTML = histHTML + histBody.innerHTML;
+ resBody.innerHTML = resHTML;
+ }
+ </script>
+</body>
+</html>