CheckNotches()

src/js/HKCheckCompletion.js

@@ -30,6 +30,7 @@ import {
 import healthMaskImage from "../img/health-mask.png";
 import healthMaskSteelImage from "../img/health-mask-steel.png";
 import soulOrbImage from "../img/soul-orb.png";
+import notchImage from "../img/notch.png";
 import geoImage from "../img/geo.png";
 
 // ---------------- Constants ----------------- //
@@ -140,6 +141,10 @@ function HKCheckCompletion(jsonObject) {
 
     CheckSoulOrbs(DIV_ID.intro, HKPlayerData.maxMP + HKPlayerData.MPReserveMax);
 
+    // ---------------- Charm Notches (Slots) ----------------- //
+
+    CheckNotches(DIV_ID.intro, HKPlayerData.charmSlots);
+
     // ---------------- Geo Amount ----------------- //
 
     CheckGeo(DIV_ID.intro, HKPlayerData.geo);
@@ -492,6 +497,25 @@ function CheckGeo(divId, geoValue) {
     document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + divEnd;
 }
 
+/**
+ * Fills HTML with appriopriate number of notch images
+ * @param {object} divId ID of the HTML element for data appending
+ * @param {number} totalNotches Number of total Charm Notches the player has. 11 = max
+ */
+function CheckNotches(divId, totalNotches = 3) {
+
+    let icon = SYMBOL_EMPTY;
+    let textFill = `<span>Notches:</span>${pSpan}`;
+    let notchImages = "";
+    let notchImg = `<img src='${notchImage}' class='notch' alt='notch image'>`;
+
+    for (let i = 0; i < totalNotches; i++) {
+        notchImages += notchImg;
+    }
+
+    document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + notchImages + divEnd;
+}
+
 /**
  * Verifies if the data in a specific object is true or false, and appends HTML accordingly.
  * @param {object} divId ID of the HTML element for data appending
@@ -871,6 +895,9 @@ function InitialHTMLPopulate(divIdObj) {
     // Soul Orbs
     CheckSoulOrbs(divIdObj.intro, 99);
 
+    // Charm Notches
+    CheckNotches(divIdObj.intro);
+
     // Geo
     CheckGeo(divIdObj.intro, 0);