Upgrade template to v3

2022-11-22 00:21:32 +01:00 · 2022-11-22 00:21:32 +01:00 · 5bc5be0564
parent ad8bd1e207
commit 5bc5be0564
6 changed files with 113 additions and 105 deletions
--- 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: {
--- a/package-lock.json
+++ b/package-lock.json
--- 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"
    }
 }
--- 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;
+}
--- 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>
--- 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();
        },