optimize PrefillHTML

.eslintrc.js

@@ -10,6 +10,6 @@ module.exports = {
         "sourceType": "module",
     },
     "rules": {
-        "no-prototype-builtins": false,
+        "no-prototype-builtins": 0,
     }
 };

src/js/HKCheckCompletion.js

@@ -1,20 +1,21 @@
 /* eslint-disable no-prototype-builtins */
 
-// ---------------- Load main Hollow Knight database files ----------------- //
+/* ---------------- Load main Hollow Knight database files ----------------- */
 
 import HK from "./hk-database.js";
-import MAP from "./hk-dictionary.js";
 
 /* ----------------- Helper functions --------------------------------------- */
 
 import {
+    PrefillHTML,
     CheckboxHintsToggle,
     CheckboxSpoilersToggle,
     StorageAvailable
 } from "./page-functions.js";
 
 import {
-    ObjectLength
+    ObjectLength,
+    TranslateMapName
 } from "./hk-functions.js";
 
 // ---------------- Load image files (necessary for Webpack) ----------------- //
@@ -58,7 +59,7 @@ let pSpan = "<span class='p-left-small'></span>";
 
 let benchHKCCBegin, benchHKCCEnd;
 
-// ---------------- Functions ----------------- //
+/* -------------------------- Functions ----------------------------- */
 
 /**
  * Main Function. Checks Hollow Knight game completion by analyzing the save file
@@ -241,34 +242,6 @@ function HKCheckCompletion(jsonObject) {
     return true;
 }
 
-/**
- * Cleans "generated" and fills all HTML elements of ids from a given list. Creates only div with id, and h2 with title inside it.
- * @param {object} jsObj Object with HTML data to fill
- */
-function PrefillHTML(jsObj) {
-    // Clean "generated" div
-    document.getElementById("generated").innerHTML = "";
-
-    let id = "";
-    let h2 = "";
-    let h2id = "";
-    let mp = ""; // max Percent
-    let cl = ""; // class
-
-    for (let i in jsObj) {
-        id = jsObj[i].id;
-        h2 = jsObj[i].h2;
-        h2id = "h2-" + jsObj[i].id;
-
-        mp = `<div class='percent-box'>${(i === "intro") ? 0: jsObj[i].maxPercent}%</div>`;
-        if (!jsObj[i].hasOwnProperty("maxPercent")) mp = "";
-
-        document.getElementById("generated").innerHTML += "<div id='" + id + "'" + cl + ">" + "</div>";
-        // document.getElementById(id).innerHTML += "<h2 id='" + h2id + "'>" + h2 + mp + "</h2>";
-        document.getElementById(id).innerHTML += `<h2 id='${h2id}'>${h2}${mp}</h2>`;
-    }
-}
-
 /**
  * Replaces the h2 titles with a current percent/max percent values as read from the save file
  * @param {object} jsObj Object with HTML data to fill
@@ -1409,18 +1382,7 @@ function FillInnerHTML(elementId, textFill) {
     element.innerHTML = textFill;
 }
 
-/**
+/* ----------------------- Event Listeners -------------------------- */
- * Returns a translated map location name string.
- * @param {string} mapCode Code of the Hollow Knight map location the game developers use
- * @param {object} dictionary Main data source for translation
- */
-function TranslateMapName(mapCode, dictionary = MAP) {
-
-    let translation = mapCode;
-    if (dictionary.hasOwnProperty(mapCode)) translation = dictionary[mapCode];
-
-    return translation;
-}
 
 // Populate HTML at load (before img and css)
 document.addEventListener("DOMContentLoaded", () => {

src/js/hk-functions.js

@@ -1,3 +1,9 @@
+/* ---------------- Load main Hollow Knight database files ----------------- */
+
+import MAP from "./hk-dictionary.js";
+
+/* -------------------------- Functions ----------------------------- */
+
 /**
  * Checks the length of a JavaScript Object like Array.length
  * @param {object} object JavaScript Object
@@ -13,8 +19,22 @@ function ObjectLength(object) {
     return length;
 }
 
+/**
+ * Returns a translated map location name string.
+ * @param {string} mapCode Code of the Hollow Knight map location the game developers use
+ * @param {object} dictionary Main data source for translation
+ */
+function TranslateMapName(mapCode, dictionary = MAP) {
+
+    let translation = mapCode;
+    if (dictionary.hasOwnProperty(mapCode)) translation = dictionary[mapCode];
+
+    return translation;
+}
+
 /* ------------------------- Exports ------------------------------- */
 
 export {
-    ObjectLength
+    ObjectLength,
+    TranslateMapName
 };

src/js/page-functions.js

@@ -38,6 +38,41 @@ function TogglePageScrollElement(root, element, ratio) {
     }
 }
 
+/**
+ * Cleans "generated" and fills all HTML elements of ids from a given list. Creates only div with id, and h2 with title inside it.
+ * @param {object} jsObj Object with HTML data to fill
+ */
+function PrefillHTML(jsObj, element = "generated") {
+
+    let domElement = document.getElementById(element);
+    let sFillText = "";
+    // Clean "generated" div
+    domElement.innerHTML = "";
+
+    let id = "";
+    let h2 = "";
+    let h2id = "";
+    let mp = ""; // max Percent
+    let cl = ""; // class
+
+    for (let i in jsObj) {
+        id = jsObj[i].id;
+        h2 = jsObj[i].h2;
+        h2id = "h2-" + jsObj[i].id;
+
+        mp = `<div class='percent-box'>${(i === "intro") ? 0: jsObj[i].maxPercent}%</div>`;
+        if (!jsObj[i].hasOwnProperty("maxPercent")) mp = "";
+
+        sFillText += `
+            <div id="${id}" ${cl}>
+                <h2 id='${h2id}'>${h2}${mp}</h2>
+            </div>
+        `;
+    }
+
+    domElement.innerHTML = sFillText;
+}
+
 /**
  * Toggles display of "hk-hints". On click with no parameters or on demand when called with a parameter
  * @param {string} param "hide", "show" or none (optional)
@@ -206,6 +241,7 @@ document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxS
 /* ------------------------- Exports ------------------------------- */
 
 export {
+    PrefillHTML,
     CheckboxHintsToggle,
     CheckboxSpoilersToggle,
     StorageAvailable