add CheckboxLocationsToggle(), hide locations

HKCheckCompletion.js

@@ -110,7 +110,7 @@ const DIV_ID = {
 };
 
 const HK_HINTS = {
-    fireballLevel: ["", "...a powerful spell learned below the town of Dirtmouth"],
+    fireballLevel: ["", "...a mysterious shaman living in a dwelling below the town of Dirtmouth"],
     hornet1Defeated: ["", "...a skilled protector guarding ruins in a lush green forest"],
     hasDash: ["", "...an old cloak lying on a green path by a broken shell"],
     hasWalljump: ["", "...a sharp claw lying forgotten somewhere amidst the insect village"],
@@ -330,8 +330,9 @@ function HKCheckCompletion(jsonObject) {
     // start benchmark
     let countBegin = new Date();
 
-    // Always hide and uncheck the Hints checkbox by default, prevents wrong checkbox behaviour
+    // Prevents wrong checkbox behaviour
     CheckboxHintsToggle("hide");
+    CheckboxLocationsToggle("show");
 
     // Pre-Cleaning and filling initial data
     PrefillHTML(DIV_ID);
@@ -873,13 +874,49 @@ function CheckboxHintsToggle(param) {
             checkboxId.checked = true;
             break;
         default:
-            if (checkboxId.checked !== true) {
+            if (checkboxId.checked === false) {
                 document.getElementById("hk-hints").classList.add("hidden");
                 checkboxId.value = "hints-off";
             } else {
                 document.getElementById("hk-hints").classList.remove("hidden");
                 checkboxId.value = "hints-on";
             }
+    }
+}
+
+function CheckboxLocationsToggle(param) {
+    let checkboxId = document.getElementById("checkbox-locations");
+    let allClassElements = document.querySelectorAll(".location");
+    let length = allClassElements.length;
+
+    switch (param) {
+        case "hide":
+            for (let i = 0; i < length; i++) {
+                allClassElements[i].classList.add("hidden");
+            }
+            checkboxId.value = "locations-off";
+            checkboxId.checked = false;
             break;
+        case "show":
+            for (let i = 0; i < length; i++) {
+                allClassElements[i].classList.remove("hidden");
+            }
+            checkboxId.value = "locations-on";
+            checkboxId.checked = true;
+            break;
+        default:
+            if (checkboxId.checked === false) {
+                for (let i = 0; i < length; i++) {
+                    allClassElements[i].classList.add("hidden");
+                }
+                checkboxId.value = "locations-off";
+            } else {
+                for (let i = 0; i < length; i++) {
+                    allClassElements[i].classList.remove("hidden");
+                }
+                checkboxId.value = "locations-on";
             }
     }
+
+    
+}

index.html

@@ -46,18 +46,27 @@
 
     <div>
         <textarea name="save-area" id="save-area"></textarea>
+
         <div class="buttons">
+
             <button id="save-area-read" class="button" onclick="HKReadTextArea();">Analyze Text</button>
             <!-- <button id="save-area-file" class="button" onclick="">Choose File</button> -->
+
+            <div class="checkboxes">
+                <label for="checkbox-hints" class="checkbox-label">
+                    <input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off" onclick="CheckboxHintsToggle();">
+                    <span class="checkmark"></span>Hints
+                </label>
+                <label for="checkbox-locations" class="checkbox-label">
+                    <input type="checkbox" name="checkboxes" id="checkbox-locations" value="locations-on" onclick="CheckboxLocationsToggle();" checked>
+                    <span class="checkmark"></span>Locations
+                </label>
+            </div>
+
         </div>
     </div>
 
-    <div>
-        <label for="checkbox-hints" class="checkbox-label">
-            <input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off" onclick="CheckboxHintsToggle();">
-            <span class="checkmark"></span>Show Hints
-        </label>
-    </div>
+    
 
     <div style="margin-bottom: 20px;"></div>
 

loadJson.js

@@ -42,7 +42,7 @@ function loadJSON(filename, callback) {
     xobj.send(null);
 }
 
-loadJSON("save/" + fileName[8],
+loadJSON("save/" + fileName[5],
     function JSONparse(response) {
         // Parse JSON string into object
         jsonObj = JSON.parse(response);

style.css

@@ -58,7 +58,7 @@ h1 {
 .buttons {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
 }
 .button {
     display: flex;
@@ -70,7 +70,7 @@ h1 {
     color: #e3ebf7;
     border: 2px solid #122c4e;
     padding: 0.3rem 1rem;
-    margin: 0 .5rem;
+    margin: 0;
 }
 .button:hover {
     background-color: #285188;
@@ -142,9 +142,10 @@ input[type="radio"]
 .radio-label,
 .checkbox-label
 {
-    display: block;
+    display: inline-block;
     position: relative;
-    padding: 0px 0px 0px 35px;
+    padding: 0 0 0 1.8rem;
+    margin: 0 1rem 0 0;
     cursor: pointer;
     font-size: 1rem;
     -webkit-user-select: none;
@@ -153,6 +154,9 @@ input[type="radio"]
     user-select: none;
     width: max-content;
 }
+.checkbox-label:last-child {
+    margin-right: 0;
+}
 .radiomark,
 .checkmark
 {