corrected hints, checkbox style

HKCheckCompletion.js

@@ -109,15 +109,15 @@ const DIV_ID = {
 };
 
 const HK_HINTS = {
-    fireballLevel: ["", "...some powerful spell learned below the town of Dirtmouth"],
+    fireballLevel: ["", "...a powerful spell learned below the town of Dirtmouth"],
     hornet1Defeated: ["", "...a skilled protector guarding ruins in a lush green forest"],
-    hasDash: ["", "...some old cloak lying deep in the lush green forest"],
+    hasDash: ["", "...an old cloak lying on a green path by a broken shell"],
-    hasWalljump: ["", "...some sharp claw lying forgotten somewhere amidst the insect village"],
+    hasWalljump: ["", "...a sharp claw lying forgotten somewhere amidst the insect village"],
     Crossroads_04: ["", "...a mother sleeping peacefully below the town of Dirtmouth"],
     slyRescued: ["", "...a fellow town bug who seems to be lost somewhere in the crossroads"],
     hasLantern: ["", "...a precious item able to carry some light to even the darkest places"],
     hasSuperDash: ["", "...some powerful crystal beating somewhere deep inside the mines"],
-    hasDreamNail: ["", "...some weapon not from this world only found where the souls can peacefully rest"],
+    hasDreamNail: ["", "...a weapon from a dream world only found where the souls can peacefully rest"],
     killedInfectedKnight: ["", "...a shattered corpse forgotten in a windy cave in the depths below the city"],
     hasDoubleJump: ["", "...something incredibly light dropped by a monarchfly in the depths below the city"],
     killedBlackKnight: ["", "...discarded shells of black guards lying on the floor of a high spire"],
@@ -639,7 +639,7 @@ function CheckWorldDataTrue(divId, idText, dataObject, worldData) {
 
 function CheckHintsTrue(divId, dataObject, playerData, worldData) {
 
-    let initialSize = document.getElementById(divId.id).innerHTML.length;
+    let hollowKnightDefeated = false;
 
     for (let i in dataObject) {
         CurrentDataFalse();
@@ -647,6 +647,9 @@ function CheckHintsTrue(divId, dataObject, playerData, worldData) {
         for (let j in playerData) {
             if (i === j) {
                 if (playerData[i] === true) {
+                    if (i === "killedHollowKnight") {
+                        hollowKnightDefeated = true;
+                    }
                     CurrentDataTrue();
                     // FillHTML(divId, dataObject[i][0], dataObject[i][1]);
                     delete dataObject[i];
@@ -685,20 +688,18 @@ function CheckHintsTrue(divId, dataObject, playerData, worldData) {
 
         if (i === "dungDefenderOrHornet2") {
             for (let k in playerData) {
-                if (k === "defeatedDungDefender") {
+                if (k === "defeatedDungDefender" && playerData[k] === true) {
-                    if (playerData[k] === true) {
                     CurrentDataTrue();
                     // FillHTML(divId, dataObject[i][0], dataObject[i][1]);
                     delete dataObject[i];
                     break;
-                    }
+                } else if (k === "hornetOutskirtsDefeated" && playerData[k] === true) {
-                } else if (k === "hornetOutskirtsDefeated") {
-                    if (playerData[k] === true) {
                     CurrentDataTrue();
                     // FillHTML(divId, dataObject[i][0], dataObject[i][1]);
                     delete dataObject[i];
                     break;
-                    } else {
+                } else if ((k === "defeatedDungDefender" && playerData[k] === false)
+                    && (k === "hornetOutskirtsDefeated" && playerData[k] === false)) {
                     CurrentDataFalse();
                     FillHTML(divId, dataObject[i][0], dataObject[i][1]);
                     delete dataObject[i];
@@ -706,7 +707,6 @@ function CheckHintsTrue(divId, dataObject, playerData, worldData) {
                 }
             }
         }
-        }
 
         if (i === "ismaTearOrShadeCloak") {
             for (let k in playerData) {
@@ -749,10 +749,8 @@ function CheckHintsTrue(divId, dataObject, playerData, worldData) {
         }
     } // end for (let i in dataObject)
 
-    let afterSize = document.getElementById(divId.id).innerHTML.length;
+    if (hollowKnightDefeated) {
-
+        FillHTML(divId, "", "...a successful Knight who doesn't need hints anymore");
-    if (afterSize === initialSize) {
-        FillHTML(divId, "", "...a successful player who doesn't need these hints anymore");
     }
 }
 

index.html

@@ -53,9 +53,9 @@
     </div>
 
     <div>
-        <label for="checkbox-hints">
+        <label for="checkbox-hints" class="checkbox-label">
             <input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off" onclick="CheckboxHintsToggle();">
-            Show Hints
+            <span class="checkmark"></span>Show Hints
         </label>
     </div>
 

loadJson.js

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

style.css

@@ -1,3 +1,6 @@
+:root {
+    --rt-main: #1e406c;
+}
 html {
     font-size: 17px;
     font-weight: 300;
@@ -100,3 +103,104 @@ a:hover {
 .icon-ok-squared {
     color: #16c60c;
 }
+.radio, .checkbox
+{
+    position: relative;
+    display: block;
+    left: -40px;
+    padding: 4px;
+    margin-left: 10px;
+}
+input[type="checkbox"],
+input[type="radio"]
+{
+    margin-right: 10px;
+}
+.radio-label,
+.checkbox-label
+{
+    display: block;
+    position: relative;
+    padding: 0px 0px 0px 35px;
+    cursor: pointer;
+    font-size: 1rem;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    width: max-content;
+}
+.radiomark,
+.checkmark
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 22px;
+    width: 22px;
+    background-color: #c1c8d1;
+    border: 1px solid #1e406c;
+    border: 1px solid var(--rt-main);
+}
+.radiomark { border-radius: 50%; }
+
+/* Hide the browser's default checkbox */
+.radio-label input,
+.checkbox-label input
+{
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+/* On mouse-over change background color */
+.radio-label:hover input ~ .radiomark,
+.checkbox-label:hover input ~ .checkmark
+{
+    background-color: #e1e6ee;
+}
+/* When the checkbox is checked change background color */
+.radio-label input:checked ~ .radiomark,
+.checkbox-label input:checked ~ .checkmark
+{
+    background-color: #1e406c;
+    background-color: var(--rt-main);
+}
+/* Create the checkmark/indicator (hidden when not checked) */
+.radiomark:after,
+.checkmark:after
+{
+    content: "";
+    position: absolute;
+    display: none;
+}
+/* Show the checkmark when checked */
+.radio-label input:checked ~ .radiomark:after,
+.checkbox-label input:checked ~ .checkmark:after
+{
+    display: block;
+}
+/* Style the checkmark/indicator */
+.checkbox-label .checkmark:after
+{
+    left: 7px;
+    top: 2px;
+    width: 6px;
+    height: 12px;
+    border: solid #e3ebf7;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+/* Style the checkmark/indicator */
+.radio-label .radiomark:after
+{
+    top: 7px;
+    left: 7px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #000;
+}