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

---
 Gruntfile.js          |   2 +-
 package-lock.json     | Bin 209876 -> 206641 bytes
 package.json          |  12 ++---
 src/main/css/main.css |  18 ++++++--
 src/main/index.html   |  99 +++++++++++++++++++++++++-----------------
 src/main/js/index.js  |  87 ++++++++++++++-----------------------
 6 files changed, 113 insertions(+), 105 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 12dbc30..bee1163 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -4,7 +4,7 @@ module.exports = grunt => {
     grunt.initConfig({
         pkg: grunt.file.readJSON("package.json"),
         clean: {
-            default: ["dist/"],
+            default: ["dist/*", "!dist/.fo76-dumps-ids.db"],
         },
         copy: {
             css: {
diff --git a/package-lock.json b/package-lock.json
index e80eb1f5e0243680a6c4592c77caabbfc4b5e976..ba965fda14b1b7e4a15bdba570b0c17102355104 100644
GIT binary patch
delta 8505
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

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

diff --git a/package.json b/package.json
index 2dfbefb..de22ee4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "random-fo76",
-    "version": "1.0.19",
-    "description": "Random Fallout 76 record.",
+    "version": "1.0.20",
+    "description": "Random Fallout 76 record picker.",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
     "repository": {
@@ -16,15 +16,15 @@
         "deploy": "grunt deploy"
     },
     "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/css/main.css b/src/main/css/main.css
index 930bbb1..e9eb3f9 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,7 +1,17 @@
-table#metadata {
-    max-width: 300px;
-}
-
 .error {
     color: red;
 }
+
+#signatures {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#signatures > div {
+    flex-basis: 15%;
+}
+
+button {
+    width: unset;
+    display: inline-block;
+}
diff --git a/src/main/index.html b/src/main/index.html
index 76e937e..5f62cd0 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -4,21 +4,27 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="Florine W. Dekker" />
-    <meta name="application-name" content="Random Fallout 76 record" />
+    <meta name="application-name" content="Random Fallout 76 record picker" />
     <meta name="description" content="Returns a random Fallout 76 record." />
     <meta name="theme-color" content="#0033cc" />
 
-    <title>Random Fallout 76 record | FWDekker</title>
+    <meta name="fwd:auto:show-main" />
+    <meta name="fwd:nav:target" content="#nav" />
+    <meta name="fwd:nav:highlight-path" content="/Tools/Random FO76/" />
+    <meta name="fwd:footer:target" content="#footer" />
+    <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/random-fo76/" />
+    <meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
 
-    <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" />
+    <title>Random Fallout 76 record picker | FWDekker</title>
+
+    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
     <!--suppress HtmlUnknownTarget -->
     <link rel="stylesheet" href="main.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/random-fo76/" alt="Counting pixel" />
 
     <p>
@@ -27,46 +33,59 @@
         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 container-with-aside-right">
+    <div role="document">
+        <section>
+            <article>
+                <header class="fwd-header">
+                    <hgroup>
+                        <h1><a href=".">Random <i>Fallout 76</i> record picker</a></h1>
+                        <h2>
+                            Retrieve a random record from the <i>Fallout 76</i> game files using
+                            <a href="https://github.com/FWDekker/fo76-dumps" target="_blank">my data dumps</a>.
+                        </h2>
+                    </hgroup>
+                </header>
+                <table class="metadata">
+                    <tr>
+                        <th>Game version</th>
+                        <td id="game-version" aria-busy="true"></td>
+                    </tr>
+                    <tr>
+                        <th>Dumps version</th>
+                        <td id="dumps-version" aria-busy="true"></td>
+                    </tr>
+                </table>
+            </article>
 
-        <!-- Metadata -->
-        <section class="container">
-            <table class="metadata">
-                <tr>
-                    <th>Game version</th>
-                    <td id="gameVersion">loading...</td>
-                </tr>
-                <tr>
-                    <th>Dumps version</th>
-                    <td id="dumpsVersion">loading...</td>
-                </tr>
-            </table>
-        </section>
-
-        <!-- Input -->
-        <section class="container">
-            <h2>Settings</h2>
-            <form id="signatureForm">
-                <button id="signatureToggle" class="button button-outline" type="button">Select all signatures</button>
-                <fieldset id="signatures">Loading... please wait.</fieldset>
-
-                <button id="submit" type="button">Fetch random record</button>
-            </form>
-        </section>
-
-        <!-- Output -->
-        <section class="container">
-            <h2>Record</h2>
-            <pre><code id="output">No record has been fetched yet</code></pre>
+            <article>
+                <h2>Pick a record</h2>
+                <p>Select the signatures that should be included in the random selection.</p>
+                <hr />
+                <br />
+
+                <form id="signature-form">
+                    <button id="signature-toggle" class="outline" type="button">
+                        Select all signatures
+                    </button>
+                    <div id="signatures" aria-busy="true">Loading... please wait.</div>
+
+                    <hr />
+                    <br />
+                    <button id="submit" type="button">Fetch random record</button>
+                </form>
+
+                <hr />
+                <h2>Record</h2>
+                <pre><code id="output">No record has been fetched yet</code></pre>
+            </article>
         </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/index.js b/src/main/js/index.js
index 7869b19..a6928db 100644
--- a/src/main/js/index.js
+++ b/src/main/js/index.js
@@ -1,9 +1,12 @@
 // noinspection JSUnresolvedVariable
-const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
+const {$, $a, doAfterLoad} = window.fwdekker;
 
 
+/**
+ * The key to store the selected signatures under in local storage.
+ * @type {string}
+ */
 const storageKey = "/tools/random-fo76//selected-signatures";
-const signatureColCount = 8;
 
 
 /**
@@ -34,7 +37,7 @@ const fetchFromApi = (query, callback, handle) => {
 const getSelectedSignatures = () => {
     const signatures = [];
 
-    const selectedCheckboxes = document.querySelectorAll("#signatures input:checked");
+    const selectedCheckboxes = $a("#signatures input:checked");
     for (let i = 0; i < selectedCheckboxes.length; i++) {
         const selectedCheckbox = selectedCheckboxes[i];
         signatures.push(selectedCheckbox.value);
@@ -49,7 +52,7 @@ const getSelectedSignatures = () => {
  * @param signatures the array of signatures to select
  */
 const setSelectedSignatures = signatures => {
-    const checkboxes = document.querySelectorAll("#signatures input");
+    const checkboxes = $a("#signatures input");
     for (let i = 0; i < checkboxes.length; i++)
         checkboxes[i].checked = false;
 
@@ -63,11 +66,11 @@ const setSelectedSignatures = signatures => {
  * Selects all signatures.
  */
 const setAllSignatures = checked => {
-    const checkboxes = document.querySelectorAll("#signatures input");
+    const checkboxes = $a("#signatures input");
     for (let i = 0; i < checkboxes.length; i++)
-        checkboxes[i].checked = checked;
-    saveSelectedSignaturesToStorage();
+        checkboxes[i].checked = checked;  // Does not invoke callback
 
+    saveSelectedSignaturesToStorage();
     updateSignatureToggle();
 };
 
@@ -76,11 +79,7 @@ const setAllSignatures = checked => {
  */
 const loadSelectedSignaturesFromStorage = () => {
     const item = localStorage.getItem(storageKey);
-    let signatures;
-    if (item === null)
-        signatures = [];
-    else
-        signatures = item.split(",");
+    const signatures = (item == null || item.trim() === "") ? [] : item.split(",");
 
     setSelectedSignatures(signatures);
 };
@@ -94,9 +93,9 @@ const saveSelectedSignaturesToStorage = () => localStorage.setItem(storageKey, g
  * Updates the button used to toggle all signatures on or off.
  */
 const updateSignatureToggle = () => {
-    const signatureToggle = $("#signatureToggle");
+    const signatureToggle = $("#signature-toggle");
 
-    if (getSelectedSignatures().length === document.querySelectorAll("#signatures input").length) {
+    if (getSelectedSignatures().length === $a("#signatures input").length) {
         signatureToggle.innerHTML = "Deselect all signatures";
         signatureToggle.addEventListener("click", () => setAllSignatures(false));
     } else {
@@ -115,25 +114,10 @@ const createSignatureButtons = signatures => {
     const form = $("#signatures");
     form.innerHTML = "";
 
-    let row;
     for (let i = 0; i < signatures.length; i++) {
         const signature = signatures[i];
 
-        if (i % signatureColCount === 0) {
-            if (row !== undefined)
-                form.appendChild(row);
-
-            row = document.createElement("div");
-            row.className = "row";
-        }
-
-        const col = document.createElement("div");
-        col.className = "column";
-
-        const label = document.createElement("label");
-        label.htmlFor = `signature-${signature}`;
-        label.innerHTML = signature;
-        col.appendChild(label);
+        const cell = document.createElement("div");
 
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
@@ -144,12 +128,15 @@ const createSignatureButtons = signatures => {
             updateSignatureToggle();
             saveSelectedSignaturesToStorage();
         });
-        col.appendChild(checkbox);
+        cell.appendChild(checkbox);
 
-        row.appendChild(col);
+        const label = document.createElement("label");
+        label.htmlFor = `signature-${signature}`;
+        label.innerHTML = signature;
+        cell.appendChild(label);
+
+        form.appendChild(cell);
     }
-    if (row !== undefined)
-        form.appendChild(row);
 };
 
 /**
@@ -165,37 +152,29 @@ const showRecord = (record) => {
 };
 
 
-// Apply template
-doAfterLoad(() => {
-    $("#nav").appendChild(nav("/Tools/Random FO76/"));
-    $("#header").appendChild(header({
-        title: "Random Fallout 76 record",
-        description: "" +
-            "Retrieve a random record from the <i>Fallout 76</i> game files using " +
-            "<a href=\"https://github.com/FWDekker/fo76-dumps\">&#9099;&nbsp;my data dumps</a>"
-    }));
-    $("#footer").appendChild(footer({
-        vcsURL: "https://git.fwdekker.com/tools/random-fo76/",
-        version: "v%%VERSION_NUMBER%%"
-    }));
-    $("main").classList.remove("hidden");
-});
-
 // Load page from API
 doAfterLoad(() => {
+    const gameVersion = $("#game-version");
+    const dumpsVersion = $("#dumps-version");
+
     fetchFromApi("action=get-meta",
         meta => {
-            $("#gameVersion").innerHTML = meta["game_version"];
-            $("#dumpsVersion").innerHTML = meta["dumps_version"];
+            gameVersion.innerHTML = meta["game_version"];
+            gameVersion.removeAttribute("aria-busy");
+            dumpsVersion.innerHTML = meta["dumps_version"];
+            dumpsVersion.removeAttribute("aria-busy");
         },
         () => {
-            $("#gameVersion").innerHTML = "Error";
-            $("#dumpsVersion").innerHTML = "Error";
+            gameVersion.innerHTML = "Error";
+            gameVersion.removeAttribute("aria-busy");
+            dumpsVersion.innerHTML = "Error";
+            dumpsVersion.removeAttribute("aria-busy");
         }
     );
 
     fetchFromApi("action=list-signatures",
         signatures => {
+            $("#signatures").removeAttribute("aria-busy");
             createSignatureButtons(signatures);
             loadSelectedSignaturesFromStorage();
         },