add description paragraph to bosses section

.eslintrc.js

@@ -12,5 +12,6 @@ module.exports = {
     "rules": {
         "no-prototype-builtins": 0,
         "no-unused-vars": 0,
+        "semi": ["error", "always"]
     }
 };

build/app.js

@@ -1646,59 +1646,13 @@ function ResetCompletion(db) {
     }
   }
 }
-/**
- * Focuses, selects and copies to clipboard contents inside a clicked element. Includes optional tooltip update after the copying is done.
- * @param {MouseEvent} mouseEvent from the clicked element (AddEventListener)
- * @param {string} tooltipId Element ID of the tooltip to update
- * @param {string} tooltipFill Updated contents of the tooltip
- */
-
-
-function SelectCopyInputText(mouseEvent) {
-  var tooltipId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  var tooltipFill = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
-  var element = document.getElementById(mouseEvent.target.id); // this prevents the un-selected effect after clicking the second time (clears all selection first)
-
-  if (window.getSelection) {
-    window.getSelection().removeAllRanges();
-  }
-
-  element.focus(); // best to focus the element first before selecting
-
-  element.select();
-  element.setSelectionRange(0, 99999); // for mobile devices
-  // Copy the text inside the text field to clipboard
-
-  document.execCommand("copy"); // optional tooltip showing
-
-  if (tooltipFill.length && tooltipId.length) FillInnerHTML(tooltipId, tooltipFill);
-}
-/**
- * Fills the innerHTML of a given HTML Element with provided contents
- * @param {string} elementId Element ID to update
- * @param {string} textFill Updated contents (innerHTML)
- */
-
-
-function FillInnerHTML(elementId, textFill) {
-  var element = document.getElementById(elementId);
-  element.innerHTML = textFill;
-}
 /* ----------------------- Event Listeners -------------------------- */
 // Populate HTML at load (before img and css)
 
 
 document.addEventListener("DOMContentLoaded", function () {
   InitializeHTMLPopulation(_hk_database_js__WEBPACK_IMPORTED_MODULE_0__.default);
-}); // Does an action when the save file location input text is clicked once (auto select & copy to clipboard)
-
-document.getElementById("save-location-input").addEventListener("click", function (e) {
-  SelectCopyInputText(e, "save-location-input-tooltip", "Copied save file location to clipboard");
-}, false); // Choose File input field
-
-document.getElementById("save-location-input").addEventListener("mouseout", function () {
-  FillInnerHTML("save-location-input-tooltip", "Click once to copy to clipboard");
-}, false); // Analyze Text button
+}); // Analyze Text button
 
 document.getElementById("save-area-read").addEventListener("click", function () {
   HKReadTextArea("save-area");
@@ -2876,6 +2830,7 @@ var HK = {
     bosses: {
       h2: "Bosses",
       id: "hk-bosses",
+      description: "Bosses in this section are part of the Completion Percentage set by the game developers. Each boss from this list equals 1% Completion (to a total of 14%).",
       percent: 0,
       maxPercent: 14,
       entries: {
@@ -5405,7 +5360,13 @@ function GenerateInnerHTML(db) {
       /* ###################### Create all other sections ##################### */
 
       default:
+        /* ###################### Create section descriptions under each H2 title ##################### */
+        if (sections[section].hasOwnProperty("description")) {
+          textFill += SectionDescription(sections[section]);
+        }
         /* ###################### Create each single entry (from all other sections) ##################### */
+
+
         for (var _entry in entries) {
           /* -------- Icons (next to each entry) --------- */
           if (entries[_entry].hasOwnProperty("icon")) {
@@ -5520,6 +5481,10 @@ function GenerateInnerHTML(db) {
   _HKCheckCompletion_js__WEBPACK_IMPORTED_MODULE_0__.benchmarkTimes.GenerateInnerHTML.timeEnd = new Date();
 }
 
+function SectionDescription(section) {
+  return "<p class=\"section-description\">".concat(section.description, "</p>");
+}
+
 function SectionStart(section) {
   return "<div id=\"".concat(section.id, "\">\n");
 }
@@ -6016,6 +5981,44 @@ function StorageAvailable(type) {
     storage && storage.length !== 0;
   }
 }
+/**
+ * Fills the innerHTML of a given HTML Element with provided contents
+ * @param {string} elementId Element ID to update
+ * @param {string} textFill Updated contents (innerHTML)
+ */
+
+
+function FillInnerHTML(elementId, textFill) {
+  var element = document.getElementById(elementId);
+  element.innerHTML = textFill;
+}
+/**
+ * Focuses, selects and copies to clipboard contents inside a clicked element. Includes optional tooltip update after the copying is done.
+ * @param {MouseEvent} mouseEvent from the clicked element (AddEventListener)
+ * @param {string} tooltipId Element ID of the tooltip to update
+ * @param {string} tooltipFill Updated contents of the tooltip
+ */
+
+
+function SelectCopyInputText(mouseEvent) {
+  var tooltipId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  var tooltipFill = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+  var element = document.getElementById(mouseEvent.target.id); // this prevents the un-selected effect after clicking the second time (clears all selection first)
+
+  if (window.getSelection) {
+    window.getSelection().removeAllRanges();
+  }
+
+  element.focus(); // best to focus the element first before selecting
+
+  element.select();
+  element.setSelectionRange(0, 99999); // for mobile devices
+  // Copy the text inside the text field to clipboard
+
+  document.execCommand("copy"); // optional tooltip showing
+
+  if (tooltipFill.length && tooltipId.length) FillInnerHTML(tooltipId, tooltipFill);
+}
 /* ----------------------- Event Listeners -------------------------- */
 
 
@@ -6030,7 +6033,15 @@ document.addEventListener("scroll", function () {
 });
 SCROLL_BUTTON.addEventListener("click", function () {
   ScrollToElement(ROOT);
-}); // Checkboxes functions
+}); // Auto select & copy to clipboard when the save file location input text is clicked once
+
+document.getElementById("save-location-input").addEventListener("click", function (e) {
+  SelectCopyInputText(e, "save-location-input-tooltip", "Copied save file location to clipboard");
+}, false); // Switch text back to the default on mouse out
+
+document.getElementById("save-location-input").addEventListener("mouseout", function () {
+  FillInnerHTML("save-location-input-tooltip", "Click once to copy to clipboard");
+}, false); // Checkboxes functions
 
 document.getElementById("checkbox-hints").addEventListener("click", CheckboxHintsToggle, false);
 document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxSpoilersToggle, false);

build/main.css

@@ -194,6 +194,11 @@ b {
     color: #aac7d4;
 }
 
+p {
+    margin-top: 0.6rem;
+    margin-bottom: 0.6rem;
+}
+
 del {
     text-decoration: none;
     opacity: 0.5;
@@ -243,6 +248,12 @@ h6 {
     text-align: left;
 }
 
+.section-description {
+    font-size: 0.8rem;
+    margin: 1.3rem;
+    color: rgba(231, 251, 255, 1.0);
+}
+
 #save-location-input {
     display: block;
     font-family: 'Consolas', monospace;
@@ -334,6 +345,7 @@ input[type="file"] {
 .blurred {
     filter: blur(5px);
     -webkit-filter: blur(5px);
+    transition: all 0.3s ease;
 }
 
 .blurred:hover {
@@ -436,11 +448,6 @@ input[type="file"] {
     }
 }
 
-p {
-    margin-top: 0.6rem;
-    margin-bottom: 0.6rem;
-}
-
 .horizontal-line {
     margin: 1rem 0;
     height: 1.5rem;

src/css/style.css

@@ -87,6 +87,11 @@ b {
     color: #aac7d4;
 }
 
+p {
+    margin-top: 0.6rem;
+    margin-bottom: 0.6rem;
+}
+
 del {
     text-decoration: none;
     opacity: 0.5;
@@ -136,6 +141,12 @@ h6 {
     text-align: left;
 }
 
+.section-description {
+    font-size: 0.8rem;
+    margin: 1.3rem;
+    color: rgba(231, 251, 255, 1.0);
+}
+
 #save-location-input {
     display: block;
     font-family: 'Consolas', monospace;
@@ -330,11 +341,6 @@ input[type="file"] {
     }
 }
 
-p {
-    margin-top: 0.6rem;
-    margin-bottom: 0.6rem;
-}
-
 .horizontal-line {
     margin: 1rem 0;
     height: 1.5rem;

src/js/HKCheckCompletion.js

@@ -88,7 +88,7 @@ let benchmarkTimes = {
         timeStart: 0,
         timeEnd: 0
     }
-}
+};
 
 /* -------------------------- Functions ----------------------------- */
 
@@ -1324,7 +1324,7 @@ function CheckAdditionalThings(section, dataObject, playerData, worldData, scene
     function CountMaps(mapArray) {
         let totalMaps = 0;
         for (let i = 0, len = mapArray.length; i < len; i++) {
-            if (playerData[mapArray[i]] === true) totalMaps++
+            if (playerData[mapArray[i]] === true) totalMaps++;
         }
         return totalMaps;
     }

src/js/hk-database.js

@@ -157,6 +157,7 @@ const HK = {
         bosses: {
             h2: "Bosses",
             id: "hk-bosses",
+            description: "Bosses in this section are part of the Game Completion Percentage set by the game developers. Each boss from this list equals 1% Completion (to a total of 14%).",
             percent: 0,
             maxPercent: 14,
             entries: {

src/js/page-functions.js

@@ -354,6 +354,12 @@ function GenerateInnerHTML(db) {
 
             default:
 
+                /* ###################### Create section descriptions under each H2 title ##################### */
+
+                if (sections[section].hasOwnProperty("description")) {
+                    textFill += SectionDescription(sections[section]);
+                }
+
                 /* ###################### Create each single entry (from all other sections) ##################### */
 
                 for (let entry in entries) {
@@ -477,6 +483,11 @@ function GenerateInnerHTML(db) {
     benchmarkTimes.GenerateInnerHTML.timeEnd = new Date();
 }
 
+function SectionDescription(section) {
+
+    return `<p class="section-description">${section.description}</p>`;
+}
+
 function SectionStart(section) {
 
     return `<div id="${section.id}">\n`;