summaryrefslogtreecommitdiff
path: root/www/dice
diff options
context:
space:
mode:
authorSteph Enders <steph@senders.io>2024-02-29 09:31:15 -0500
committerSteph Enders <steph@senders.io>2024-02-29 09:31:15 -0500
commit2b39175011422a0d8f96d7f598f46e2a781dd28f (patch)
treedd896a1e35e2ec194bfce829afd61f553652464a /www/dice
parent350a5058cf383733a7e75f753abdcd1cb7aae2c5 (diff)
Initial rework commit: Build Script POC and CSS done
I've created the main CSS layout and a proof of concept for the build script: this will actually build any "done" _post/ file and generate it as a workable HTML file. However, no index file generate, rss, or gemini is implemented
Diffstat (limited to 'www/dice')
-rw-r--r--www/dice/index.css38
-rw-r--r--www/dice/index.html105
2 files changed, 0 insertions, 143 deletions
diff --git a/www/dice/index.css b/www/dice/index.css
deleted file mode 100644
index 9c3a8e4..0000000
--- a/www/dice/index.css
+++ /dev/null
@@ -1,38 +0,0 @@
-#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
deleted file mode 100644
index 990be2d..0000000
--- a/www/dice/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta name="generator"
- content="HTML Tidy for HTML5 for Linux version 5.7.45">
- <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>
- <div id='copyright'>
- <small>© 2023 senders dot io - <a rel=
- "license external noopener noreferrer"
- target="_blank"
- href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
- unless otherwise noted.</small>
- </div>
- <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>