From 3f833ed302c3d221b6bdec158a1e48a958f2ba0c Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Tue, 22 Nov 2022 00:56:48 +0100
Subject: [PATCH] Upgrade template to v3

---
 package-lock.json   | Bin 210457 -> 204504 bytes
 package.json        |  12 +++---
 src/main/index.html |  88 +++++++++++++++++++-------------------
 src/main/js/main.js | 102 ++++++++++++++++++--------------------------
 4 files changed, 90 insertions(+), 112 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 92d843482bc7b89a4b5d0a523e38311fddbae9a0..2c01f69004e890424e48cdb109b03b38a153c935 100644
GIT binary patch
delta 8710
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
MGWNxNn(wdrZ{}LFxc~qF

delta 9495
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

diff --git a/package.json b/package.json
index fa33546..559fdd3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "dice",
-    "version": "1.0.18",
+    "version": "1.0.19",
     "description": "Calculates the probability of rolling a value given a combination of dice.",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
@@ -16,18 +16,18 @@
         "deploy": "grunt deploy"
     },
     "dependencies": {
-        "chart.js": "^3.7.1"
+        "chart.js": "^4.0.1"
     },
     "devDependencies": {
-        "grunt": "^1.4.1",
+        "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
-        "grunt-contrib-clean": "^2.0.0",
+        "grunt-contrib-clean": "^2.0.1",
         "grunt-contrib-copy": "^1.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
         "grunt-webpack": "^5.0.0",
-        "webpack": "^5.69.1",
-        "webpack-cli": "^4.9.2"
+        "webpack": "^5.75.0",
+        "webpack-cli": "^5.0.0"
     }
 }
diff --git a/src/main/index.html b/src/main/index.html
index 6a8c68e..8c2c347 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -8,15 +8,21 @@
     <meta name="description" content="Calculates the probability of rolling a value given a combination of dice." />
     <meta name="theme-color" content="#0033cc" />
 
+    <meta name="fwd:auto:show-main" />
+    <meta name="fwd:nav:target" content="#nav" />
+    <meta name="fwd:nav:highlight-path" content="/Tools/Dice/" />
+    <meta name="fwd:footer:target" content="#footer" />
+    <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/dice/" />
+    <meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
+
     <title>Dice probabilities | FWDekker</title>
 
-    <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
-    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
+    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
     <script async src="https://stats.fwdekker.com/count.js"
             data-goatcounter="https://stats.fwdekker.com/count"></script>
 </head>
 <body>
-<noscript>
+<noscript class="fwd-js-notice">
     <img src="https://stats.fwdekker.com/count?p=/tools/dice/" alt="Counting pixel" />
 
     <p>
@@ -25,56 +31,48 @@
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main class="hidden">
-    <div id="nav"></div>
-    <div id="contents">
-        <div id="header"></div>
+<nav id="nav"></nav>
+<main class="container hidden">
+    <div role="document">
+        <section>
+            <header class="fwd-header">
+                <hgroup>
+                    <h1><a href=".">Dice</a></h1>
+                    <h2>Calculate the probability of rolling a value given a combination of dice.</h2>
+                </hgroup>
+            </header>
 
-        <!-- Input -->
-        <section class="container">
-            <div class="row">
-                <div class="column">
-                    <form>
-                        <fieldset>
-                            <table id="dieSettings">
-                                <thead>
-                                <tr>
-                                    <th>Sides per die</th>
-                                    <th>Number of rolls</th>
-                                    <th></th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>
-                                        <button id="addDieRowButton" class="button-outline" type="button">Add dice
-                                        </button>
-                                    </td>
-                                </tr>
-                                </tbody>
-                            </table>
+            <form id="inputs">
+                <table id="die-settings">
+                    <thead>
+                    <tr>
+                        <th>Sides per die</th>
+                        <th>Number of rolls</th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>
+                            <button id="add-die-row-button" class="button-outline" type="button">
+                                Add dice
+                            </button>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
 
-                            <button id="submit" type="button">Recalculate</button>
-                        </fieldset>
-                    </form>
-                </div>
-            </div>
-        </section>
+                <button type="submit">Recalculate</button>
+            </form>
 
-        <!-- Output -->
-        <section class="container">
             <h2>Probabilities</h2>
-            <div class="row">
-                <div class="column">
-                    <canvas id="probChart"></canvas>
-                </div>
-            </div>
+            <canvas id="prob-chart"></canvas>
         </section>
+        <footer id="footer"></footer>
     </div>
-    <div id="footer"></div>
 </main>
 
-<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script>
+<script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
 <!--suppress HtmlUnknownTarget -->
 <script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
 </body>
diff --git a/src/main/js/main.js b/src/main/js/main.js
index 2337d00..b0845f7 100644
--- a/src/main/js/main.js
+++ b/src/main/js/main.js
@@ -1,6 +1,6 @@
 // noinspection JSUnresolvedVariable
-const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
-import {Chart, CategoryScale, Filler, LineController, LineElement, LinearScale, PointElement, Tooltip} from "chart.js"
+const {$, $a, doAfterLoad} = window.fwdekker;
+import {CategoryScale, Chart, Filler, LinearScale, LineController, LineElement, PointElement, Tooltip} from "chart.js"
 
 Chart.register(CategoryScale, Filler, LineController, LineElement, LinearScale, PointElement, Tooltip);
 
@@ -31,33 +31,6 @@ const rangeInclusive = (from, to) => {
     return rangeArray;
 };
 
-const iterateNodeList = (nodeList, fun) => {
-    for (let i = 0; i < nodeList.length; i++) {
-        const node = nodeList.item(i);
-        fun(node);
-    }
-};
-
-
-//////
-///
-/// Template
-///
-//////
-
-doAfterLoad(() => {
-    $("#nav").appendChild(nav("/Tools/Dice/"));
-    $("#header").appendChild(header({
-        title: "Dice",
-        description: "Calculate the probability of rolling a value given a combination of dice"
-    }));
-    $("#footer").appendChild(footer({
-        vcsURL: "https://git.fwdekker.com/tools/dice/",
-        version: "v%%VERSION_NUMBER%%"
-    }));
-    $("main").classList.remove("hidden");
-});
-
 
 //////
 ///
@@ -69,15 +42,15 @@ const inputTable = {};
 
 
 // Functions
-inputTable.getTable = () => $("#dieSettings tbody");
+inputTable.getTable = () => $("#die-settings tbody");
 
-inputTable.dieRowCount = () => inputTable.getTable().querySelectorAll(".dieEyes").length;
+inputTable.dieRowCount = () => $a(".die-eyes", inputTable.getTable()).length;
 
 inputTable.highestDieRowIndex = () => {
     const table = inputTable.getTable();
 
     let highestDieRowIndex = -1;
-    iterateNodeList(table.getElementsByTagName("tr"), (node) => {
+    $a("tr", table).forEach((node) => {
         if ("index" in node.dataset)
             highestDieRowIndex = Math.max(highestDieRowIndex, +node.dataset.index);
     });
@@ -104,10 +77,9 @@ inputTable.addDieRow = () => {
     const createRemoveLink = (index, className) => {
         const link = document.createElement("button");
         link.id = className + index;
-        link.className = className + " button-clear";
-        link.type = "button";
+        link.className = className + " outline";
         link.innerHTML = "Remove";
-        link.onclick = (() => inputTable.removeDieRow(index));
+        link.addEventListener("click", () => inputTable.removeDieRow(index));
         return link;
     };
 
@@ -118,31 +90,36 @@ inputTable.addDieRow = () => {
     const row = table.insertRow(inputTable.dieRowCount());
     row.dataset.index = "" + newIndex;
 
-    row.insertCell().appendChild(createNumberInput(newIndex, "dieEyes", 6));
-    row.insertCell().appendChild(createNumberInput(newIndex, "dieCount", 2));
-    row.insertCell().appendChild(createRemoveLink(newIndex, "dieRemove"));
+    row.insertCell().appendChild(createNumberInput(newIndex, "die-eyes", 6));
+    row.insertCell().appendChild(createNumberInput(newIndex, "die-count", 2));
+    row.insertCell().appendChild(createRemoveLink(newIndex, "die-remove"));
 
-    $("#dieEyes" + newIndex).focus();
+    if (inputTable.dieRowCount() === 1)
+        $(".die-remove").disabled = true;
+    else
+        $a(".die-remove").forEach((button) => button.disabled = false);
+    $("#die-eyes" + newIndex).focus();
 };
 
 inputTable.removeDieRow = index => {
-    if (inputTable.dieRowCount() > 1) {
-        const table = inputTable.getTable();
-        const row = table.querySelector("tr[data-index=\"" + index + "\"]");
-        row.parentElement.removeChild(row);
-    }
+    if (inputTable.dieRowCount() > 1)
+        $(`tr[data-index="${index}"]`, inputTable.getTable()).remove();
+
+    if (inputTable.dieRowCount() === 1)
+        $(".die-remove").disabled = true;
 };
 
 inputTable.getDice = () => {
     const dice = [];
 
-    const eyesInputs = document.getElementsByClassName("dieEyes");
-    const countInputs = document.getElementsByClassName("dieCount");
+    const countInputs = $a(".die-count");
+    const eyesInputs = $a(".die-eyes");
     for (let i = 0; i < eyesInputs.length; i++) {
         const count = parseInt(countInputs.item(i).value);
+        const eyes = parseInt(eyesInputs.item(i).value);
 
         for (let j = 0; j < count; j++)
-            dice.push(parseInt(eyesInputs.item(i).value));
+            dice.push(eyes);
     }
 
     return dice;
@@ -151,9 +128,9 @@ inputTable.getDice = () => {
 
 // Init
 doAfterLoad(() => {
-    const button = $("#addDieRowButton");
-    button.onclick = inputTable.addDieRow;
-    button.click();
+    const button = $("#add-die-row-button");
+    button.addEventListener("click", () => inputTable.addDieRow());
+    inputTable.addDieRow();
 });
 
 
@@ -190,9 +167,7 @@ outputChart.calculateDiceFrequencies = dice => {
 
     // Calculate frequencies
     const totalRolls = rollFreqs.reduce((a, b) => a + b, 0);
-    rangeExclusive(0, rollFreqs.length).forEach(roll => {
-        rollFreqs[roll] = rollFreqs[roll] / totalRolls;
-    });
+    rangeExclusive(0, rollFreqs.length).forEach(roll => rollFreqs[roll] = rollFreqs[roll] / totalRolls);
 
 
     return rollFreqs;
@@ -213,13 +188,18 @@ outputChart.updateProbGraph = () => {
 
 // Init
 doAfterLoad(() => {
-    probChart = new Chart($("#probChart").getContext("2d"), {
-        type: "line",
-        data: {},
-        options: {fill: true},
-    });
+    probChart = new Chart(
+        $("#prob-chart").getContext("2d"),
+        {
+            type: "line",
+            data: {},
+            options: {fill: true},
+        }
+    );
 
-    const submit = $("#submit");
-    submit.onclick = outputChart.updateProbGraph;
-    submit.click()
+    $("#inputs").addEventListener("submit", (event) => {
+        event.preventDefault();
+        outputChart.updateProbGraph();
+    });
+    outputChart.updateProbGraph();
 });