Redesign some of the main database

Make the save data readable
handeled main information of the save files
Add and Remove some images

package.json

@@ -36,8 +36,8 @@
     "core-js": "^3.18.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
+    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-env": "^7.28.3",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.4.0",
@@ -49,7 +49,7 @@
     "regenerator-runtime": "^0.13.9",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.59.1",
+    "webpack": "^5.101.3",
-    "webpack-cli": "^4.9.1"
+    "webpack-cli": "^4.10.0"
   }
 }

src/css/style.css

@@ -31,7 +31,7 @@ html {
 body {
   font-family: 'Heebo', sans-serif;
   color: #fff;
-  background-color: #050d19;
+  background-color: #0c120f;
   margin: 0;
   overflow: auto;
 }
@@ -589,31 +589,34 @@ a.wiki {
   align-items: center;
 }
 
-.soul-orb:first-child {
+.silk-bar:first-child {
-  margin-left: 0.3rem;
+  padding-left: 0.3rem;
 }
 
 .health-mask,
-.soul-orb,
+/*.silk-bar,*/
-.geo-symbol,
+.rosaries-symbol,
-.notch {
+.shell-shards-symbol,
+.crest {
   width: auto;
   height: 1.48rem;
   margin: 0 0 0 0.3rem;
 }
 
-.notch {
+.crest {
-  padding-left: 0.3rem;
+  padding-left: 0.1rem;
-  margin-left: -0.6rem;
+  /*margin-left: 0.6rem;*/
 }
 
-.soul-orb {
+
+.silk-bar {
   height: 1.3rem;
-  padding-left: 0.3rem;
+  /*padding-left: 0.3rem;
-  margin-left: -0.15rem;
+  margin-left: -0.15rem;*/
 }
 
-.geo-symbol {
+.shell-shards-symbol,
+.rosaries-symbol {
   margin-right: 0.15rem;
 }
 

src/js/HKCheckCompletion-old.js

@@ -123,7 +123,7 @@ function HKCheckCompletion(jsonObject) {
 
     // ---------------- Soul Orbs ----------------- //
 
-    CheckSoulOrbs(HK.DIV_ID.intro, HKPlayerData.maxMP + HKPlayerData.MPReserveMax);
+    CheckSoulOrbs(HK.DIV_ID.intro, HKPlayerData.MPReserveMax);
 
     // ---------------- Charm Notches (Slots) ----------------- //
 

src/js/HKCheckCompletion.js

@@ -96,8 +96,8 @@ function HKCheckCompletion(jsonObject, benchStart = performance.now()) {
 
   if (jsonObject.hasOwnProperty("sceneData")) {
     HKSceneData = jsonObject.sceneData;
-    if (jsonObject.sceneData.hasOwnProperty("persistentBoolItems")) {
+    if (jsonObject.sceneData.hasOwnProperty("persistentBools")) {
-      HKWorldItems = jsonObject.sceneData.persistentBoolItems;
+      HKWorldItems = jsonObject.sceneData.persistentBools;
     } else {
       HK.saveAnalyzed = false;
       return false;
@@ -137,17 +137,21 @@ function HKCheckCompletion(jsonObject, benchStart = performance.now()) {
 
   CheckHealthMasks(HK.sections.intro, HKPlayerData.maxHealthBase, HKPlayerData.permadeathMode);
 
-  // ---------------- Soul Orbs ------------------------------------------------------------------------------------------------- //
+  // ---------------- Silk Bars ------------------------------------------------------------------------------------------------- //
 
-  CheckSoulOrbs(HK.sections.intro, HKPlayerData.maxMP + HKPlayerData.MPReserveMax);
+  CheckSilkBar(HK.sections.intro, HKPlayerData.silkMax);
 
   // ---------------- Charm Notches (Slots) ------------------------------------------------------------------------------------- //
 
-  CheckNotches(HK.sections.intro, HKPlayerData.charmSlots, HKPlayerData.charmSlotsFilled);
+  CheckCrests(HK.sections.intro, HKPlayerData);
 
-  // ---------------- Geo Amount ------------------------------------------------------------------------------------------------ //
+  // ---------------- Rosary Amount ------------------------------------------------------------------------------------------------ //
 
-  CheckGeo(HK.sections.intro, HKPlayerData.geo, HKPlayerData.geoPool);
+  CheckRosary(HK.sections.intro, HKPlayerData.geo, HKPlayerData.HeroCorpseMoneyPool);
+
+    // ---------------- Shell Shards Amount ------------------------------------------------------------------------------------------------ //
+
+  CheckshellShards(HK.sections.intro, HKPlayerData.ShellShards);
 
   // ---------------- Bosses (Base Game) ---------------------------------------------------------------------------------------- //
 
@@ -215,6 +219,8 @@ function HKCheckCompletion(jsonObject, benchStart = performance.now()) {
   CheckHuntersJournal(HK, "huntersJournal", HKPlayerData);
   CheckHuntersJournal(HK, "huntersJournalOptional", HKPlayerData);
 
+/*
+  
   // ------------------------- Essentials % -> Collectibles --------------------------------------------------------------------- //
 
   CheckAdditionalThings(HK.sections.essentialsCollectibles, jsonObject);
@@ -311,6 +317,8 @@ function HKCheckCompletion(jsonObject, benchStart = performance.now()) {
 
   CheckAdditionalThings(HK.sections.godhomeStatistics, jsonObject);
 
+  */
+
   /* ------------------------- Pantheon Statistics ------------------------------------------------------------------------------ */
 
   CheckPantheon(HK, "pantheonOfTheMaster", HKPlayerData);
@@ -423,7 +431,8 @@ function CheckCompletionPercent(section, playerData) {
   let completionPercentage = Math.round(playerData.completionPercentage);
   let maxPercent = 0;
 
-  /* Normal (current) game version behaviour: 112% */
+/*
+  // Normal (current) game version behaviour: 112%
   section.maxPercent = section.maxPercentDefault;
   maxPercent = section.maxPercentDefault;
   section.entries.gameCompletion.spoilerAfter = section.entries.gameCompletion.spoilerAfterDefault;
@@ -431,7 +440,7 @@ function CheckCompletionPercent(section, playerData) {
   section.percent = completionPercentage;
   section.entries.gameCompletion.spoiler = completionPercentage;
 
-  /* Lifeblood behaviour: 107% */
+  // Lifeblood behaviour: 107%
   if (!playerData.hasOwnProperty("hasGodfinder")) {
 
     section.maxPercent = section.maxPercentLifeblood;
@@ -439,26 +448,25 @@ function CheckCompletionPercent(section, playerData) {
     section.entries.gameCompletion.spoilerAfter = section.entries.gameCompletion.spoilerAfterLifeblood;
   }
 
-  /* Grimm Troupe bahaviour: 106% */
+  // Grimm Troupe bahaviour: 106%
   if (!playerData.hasOwnProperty("killedHiveKnight")) {
 
     section.maxPercent = section.maxPercentGrimmTroupe;
     maxPercent = section.maxPercentGrimmTroupe;
     section.entries.gameCompletion.spoilerAfter = section.entries.gameCompletion.spoilerAfterGrimmTroupe;
   }
+*/
 
   /* Base Game behaviour with no Content Packs: 100% */
-  if (!playerData.hasOwnProperty("gotCharm_37")) {
+  //if (!playerData.hasOwnProperty("gotCharm_37")) {
 
     section.maxPercent = section.maxPercentBaseGame;
     maxPercent = section.maxPercentBaseGame;
     section.entries.gameCompletion.spoilerAfter = section.entries.gameCompletion.spoilerAfterBaseGame;
-  }
+  //}
 
   (completionPercentage >= maxPercent) ? SetIconGreen(section, "gameCompletion"): SetIconRed(section, "gameCompletion");
 
-  /* let textFill = "Game Completion:" + pSpan + "<b>" + completionPercentage + " %</b>" + pSpan + "(out of " + section.maxPercent + " %)"; */
-  // document.getElementById(section.id).innerHTML += divStart + completionSymbol + textFill + divEnd;
 }
 
 /**
@@ -706,7 +714,7 @@ function CheckSaveFileVersion(section, saveVersion = HK.sections.intro.entries.s
 /**
  * Fills HTML with appropriate number of health mask images
  * @param {object} section ID of the HTML element for data appending
- * @param {number} masks Number of max health masks from the save (baseline without charms and lifeblood)
+ * @param {number} masks Number of max health masks from the save (baseline without tools and lifeblood)
  * @param {number} permadeathMode Value of permadeathMode property. 0 = Normal, 1 = Steel Soul, 2 = Steel Soul broken save
  */
 function CheckHealthMasks(section, masks = 5, permadeathMode = 0) {
@@ -738,9 +746,9 @@ function CheckHealthMasks(section, masks = 5, permadeathMode = 0) {
 /**
  * Fills HTML with appropriate number of soul orbs images
  * @param {object} section ID of the HTML element for data appending
- * @param {number} totalSoul Number of max Soul reserve from the save. 99 = full Soul Orb
+ * @param {number} totalSilk Number of max Silk reserve from the save. 18 = full Silk Bar
  */
-function CheckSoulOrbs(section, totalSoul) {
+function CheckSilkBar(section, totalSilk) {
 
   /* let icon = SYMBOL_EMPTY;
   let textFill = "<span>Soul:</span>";
@@ -752,7 +760,7 @@ function CheckSoulOrbs(section, totalSoul) {
       soulImages += soulImg;
   } */
 
-  section.entries.soul.amountTotal = totalSoul;
+  section.entries.silk.amountTotal = totalSilk;
 
   // document.getElementById(section.id).innerHTML += divStartCenter + icon + textFill + soulImages + divEnd;
 }
@@ -760,13 +768,13 @@ function CheckSoulOrbs(section, totalSoul) {
 /**
  * Fills HTML with the Geo value of the save file
  * @param {object} section ID of the HTML element for data appending
- * @param {number} geoValue Number of total Geo value
+ * @param {number} geoValue Number of total rosaries value
  */
-function CheckGeo(section, geoValue = 0, geoPoolValue = 0) {
+function CheckRosary(section, geoValue = 0, geoPoolValue = 0) {
 
-  section.entries.geo.amount = geoValue;
+  section.entries.rosaries.amount = geoValue;
-  section.entries.geo.amountShade = geoPoolValue;
+  section.entries.rosaries.amountShade = geoPoolValue;
-  section.entries.geo.amountTotal = geoValue + geoPoolValue;
+  section.entries.rosaries.amountTotal = geoValue + geoPoolValue;
 
   /* let icon = SYMBOL_EMPTY;
   let textFill = `<span>Geo:</span><img src='${GEO_IMAGE}' class='geo-symbol' alt='geo symbol image' title='Geo'><b>${geoValue}</b>`;
@@ -781,22 +789,43 @@ function CheckGeo(section, geoValue = 0, geoPoolValue = 0) {
   // document.getElementById(section.id).innerHTML += divStartCenter + icon + textFill + divEnd;
 }
 
+/**
+ * Fills HTML with the shell shards value of the save file
+ * @param {object} section ID of the HTML element for data appending
+ * @param {number} geoValue Number of total shellShards value
+ */
+function CheckshellShards(section, shellShardsValue = 0) {
+
+  section.entries.shellShards.amount = shellShardsValue;
+  
+}
+
 /**
  * Fills HTML with appropriate number of notch images
  * @param {object} section ID of the HTML element for data appending
- * @param {number} totalNotches Number of total Charm Notches the player has. 11 = max
+ * @param {object} PlayerData Contain the memory of the cerst.
- * @param {number} filledNotches Number of total used Charm Notches (including overcharmed notches). 15 = max
  */
-function CheckNotches(section, notchesTotal = 3, notchesFilled = 0) {
+function CheckCrests(section, PlayerData) {
 
-  let {
+  let amountTotal = 1
-    notchesOvercharmed,
-    notchesUnused
-  } = 0;
 
-  section.entries.notches.amountTotal = notchesTotal;
+  section.entries.crests.reaper = PlayerData.completedMemory_reaper;
+  section.entries.crests.wanderer = PlayerData.completedMemory_wanderer;
+  section.entries.crests.beast = PlayerData.completedMemory_beast;
+  section.entries.crests.witch = PlayerData.completedMemory_witch;
+  section.entries.crests.toolmaster = PlayerData.completedMemory_toolmaster;
+  section.entries.crests.shaman = PlayerData.completedMemory_shaman;
   
-  // How many overcharmed notches images to show
+  if(PlayerData.completedMemory_reaper) amountTotal++;
+  if(PlayerData.completedMemory_wanderer) amountTotal++;
+  if(PlayerData.completedMemory_beast) amountTotal++;
+  if(PlayerData.completedMemory_witch) amountTotal++;
+  if(PlayerData.completedMemory_toolmaster) amountTotal++;
+  if(PlayerData.completedMemory_shaman) amountTotal++;
+  
+  section.entries.crests.amountTotal = amountTotal;
+
+ /* // How many overcharmed notches images to show
   notchesOvercharmed = notchesFilled - notchesTotal;
   if (notchesOvercharmed < 1) notchesOvercharmed = 0;
 
@@ -811,7 +840,7 @@ function CheckNotches(section, notchesTotal = 3, notchesFilled = 0) {
   // Correct number of filled/used notches images to show when player is overcharmed
   if (notchesFilled > notchesTotal) notchesFilled = notchesTotal;
 
-  section.entries.notches.amountFilled = notchesFilled;
+  section.entries.notches.amountFilled = notchesFilled;*/
 
   /* let icon = SYMBOL_EMPTY;
   let textFill = `<span>Notches:</span>${pSpan}`;

src/js/hk-database.js

@@ -16,11 +16,11 @@ const HK = {
       id: "hk-intro",
 
       percent: 0,
-      maxPercent: 112,
+      /*maxPercent: 112,
-      maxPercentDefault: 112,
+      maxPercentDefault: 112,*/
       maxPercentBaseGame: 100,
-      maxPercentGrimmTroupe: 106,
+      /*maxPercentGrimmTroupe: 106,
-      maxPercentLifeblood: 107,
+      maxPercentLifeblood: 107,*/
 
       extendedCompletionDone: 0,
       extendedCompletionTotal: 0,
@@ -40,11 +40,11 @@ const HK = {
           icon: "red",
           name: "Game Completion:",
           spoiler: 0,
-          spoilerAfter: "(out of 112 %)",
+          //spoilerAfter: "(out of 112 %)",
-          spoilerAfterDefault: "(out of 112 %)",
+          //spoilerAfterDefault: "(out of 112 %)",
           spoilerAfterBaseGame: "(out of 100 %)",
-          spoilerAfterGrimmTroupe: "(out of 106 %)",
+          //spoilerAfterGrimmTroupe: "(out of 106 %)",
-          spoilerAfterLifeblood: "(out of 107 %)",
+          //spoilerAfterLifeblood: "(out of 107 %)",
         },
         gameCompletionExtended: {
           id: "gameCompletionExtended",
@@ -68,31 +68,46 @@ const HK = {
           amountTotal: 5,
           permadeathMode: false,
         },
-        soul: {
+        silk: {
-          id: "soul",
+          id: "silk",
           icon: "none",
-          name: "Soul:",
+          name: "Silk:",
           spoiler: "",
-          amountTotal: 99
+          amountTotal: 5
         },
-        notches: {
+        crests: {
-          id: "notches",
+          id: "crests",
           icon: "none",
-          name: "Notches:",
+          name: "Crests:",
           spoiler: "",
-          amountTotal: 3,
+          amountTotal: 1,
-          amountFilled: 0,
+          hunter:true,
+          reaper:false,
+          wanderer:false,
+          beast:false,
+          witch:false,
+          toolmaster:false,
+          shaman:false,
+
+          /*amountFilled: 0,
           amountUnused: 3,
-          amountOvercharmed: 0
+          amountOvercharmed: 0*/
         },
-        geo: {
+        rosaries: {
-          id: "geo",
+          id: "rosaries",
           icon: "none",
-          name: "Geo:",
+          name: "Rosaries:",
           spoiler: "",
           amount: 0,
           amountShade: 0,
           amountTotal: 0
+        },
+        shellShards: {
+          id: "shellShards",
+          icon: "none",
+          name: "Shell Shards:",
+          spoiler: "",
+          amount: 0
         }
       },
     },

src/js/page-functions.js

@@ -6,12 +6,25 @@ import {
 
 import HEALTH_MASK_IMAGE from "../img/health-mask.png";
 import HEALTH_MASK_STEEL_IMAGE from "../img/health-mask-steel.png";
-import SOUL_ORB_IMAGE from "../img/soul-orb.png";
+import SILKBAR_LEFT_IMAGE from "../img/silkbar-left.png";
-import NOTCH_IMAGE from "../img/notch.png";
+import SILKBAR_MIDDLE_IMAGE from "../img/silkbar-middle.png";
+import SILKBAR_RIGHT_IMAGE from "../img/silkbar-right.png";
+/*import NOTCH_IMAGE from "../img/notch.png";
 import NOTCH_FILLED_IMAGE from "../img/notch-filled.png";
-import NOTCH_OVERCHARMED_IMAGE from "../img/notch-overcharmed.png";
+import NOTCH_OVERCHARMED_IMAGE from "../img/notch-overcharmed.png";*/
-import GEO_IMAGE from "../img/geo.png";
+import ROSARIES_IMAGE from "../img/rosaries.png";
-import GEO_SHADE_IMAGE from "../img/geo-shade.png";
+import ROSARIES_SHADE_IMAGE from "../img/cocoon.png";
+import SHELL_SHARDS_IMAGE from "../img/shell-shards.png";
+
+/* ------------------------ Crest Type ---------------------------------------------------------- */
+
+import ARCHITECT_CREST_IMAGE from "../img/architect-crest.png";
+import BEAST_CREST_IMAGE from "../img/beast-crest.png";
+import HUNTER_CREST_IMAGE from "../img/hunter-crest.png";
+import REAPER_CREST_IMAGE from "../img/reaper-crest.png";
+import SHAMAN_CREST_IMAGE from "../img/shaman-crest.png";
+import WANDERER_CREST_IMAGE from "../img/wanderer-crest.png";
+import WITCH_CREST_IMAGE from "../img/witch-crest.png";
 
 /* ------------------------- Constants ---------------------------------------------------------------------------------------- */
 
@@ -153,18 +166,32 @@ function GenerateInnerHTML(db) {
   let finalHTMLFill = "";
   let textFill = "";
 
-  let Img = "";
+  let Img = "";SILKBAR_LEFT_IMAGE
   let maskNormal = `<img src='${HEALTH_MASK_IMAGE}' class='health-mask' alt='health mask image' title='Health Mask'>`;
   let maskSteel = `<img src='${HEALTH_MASK_STEEL_IMAGE}' class='health-mask' alt='steel health mask image' title='Steel Health Mask'>`;
-  let soulNormal = `<img src='${SOUL_ORB_IMAGE}' class='soul-orb' alt='soul orb image' title='Single Soul Orb (one spell cast)'>`;
+  let silkBarLeft = `<img src='${SILKBAR_LEFT_IMAGE}' class='silk-bar' alt='' title=''>`;
-  let notchNormalImage = `<img src='${NOTCH_IMAGE}' class='notch' alt='notch image' title='Charm Notch (Free)'>`;
+  let silkBarMiddle = `<img src='${SILKBAR_MIDDLE_IMAGE}' class='silk-bar' alt='Silk Bar image' title='Single Silk Bar'>`;
-  let notchFilledImage = `<img src='${NOTCH_FILLED_IMAGE}' class='notch' alt='notch image' title='Charm Notch (Used)'>`;
+  let silkBarRight = `<img src='${SILKBAR_RIGHT_IMAGE}' class='silk-bar' alt='' title=''>`;
-  let notchOvercharmedImage = `<img src='${NOTCH_OVERCHARMED_IMAGE}' class='notch' alt='notch image' title='Charm Notch (Overcharmed)'>`;
+  //let notchNormalImage = `<img src='${NOTCH_IMAGE}' class='notch' alt='notch image' title='Charm Notch (Free)'>`;
-  let geoNormalImage = `<img src='${GEO_IMAGE}' class='geo-symbol' alt='geo symbol image' title='Geo'>`;
+  //let notchFilledImage = `<img src='${NOTCH_FILLED_IMAGE}' class='notch' alt='notch image' title='Charm Notch (Used)'>`;
-  let geoShadeImage = `<img src='${GEO_SHADE_IMAGE}' class='geo-symbol' alt='shade geo symbol image' title='Shade Geo'>`;
+  //let notchOvercharmedImage = `<img src='${NOTCH_OVERCHARMED_IMAGE}' class='notch' alt='notch image' title='Charm Notch (Overcharmed)'>`;
+  let rosariesNormalImage = `<img src='${ROSARIES_IMAGE}' class='rosaries-symbol' alt='Rosaries symbol image' title='Geo'>`;
+  let rosariesShadeImage = `<img src='${ROSARIES_SHADE_IMAGE}' class='rosaries-symbol' alt='shade geo symbol image' title='Shade Geo'>`;
+  let shellShardsImage = `<img src='${SHELL_SHARDS_IMAGE}' class='shell-shards-symbol' alt='shell shard symbol image' title='Shell Shard'>`;
   let div = `<div class='single-entry'>`;
   let divFlex = `<div class='flex-container align-center'>`;
 
+  //Crest
+  let hunterCrestImage = `<img src='${HUNTER_CREST_IMAGE}' class='crest' alt='Hunter image' title='Hunter Crest (Free)'>`;
+  let architectCrestImage = `<img src='${ARCHITECT_CREST_IMAGE}' class='crest' alt='Architect image' title='Architect Crest'>`;
+  let beastCrestImage = `<img src='${BEAST_CREST_IMAGE}' class='crest' alt='Beast image' title='Beast Crest'>`;
+  let reaperCrestImage = `<img src='${REAPER_CREST_IMAGE}' class='crest' alt='Reaper image' title='Reaper Crest'>`;
+  let shamanCrestImage = `<img src='${SHAMAN_CREST_IMAGE}' class='crest' alt='Shaman image' title='Shaman Crest'>`;
+  let wandererCrestImage = `<img src='${WANDERER_CREST_IMAGE}' class='crest' alt='Wanderer image' title='Wanderer Crest'>`;
+  let witchCrestImage = `<img src='${WITCH_CREST_IMAGE}' class='crest' alt='Witch image' title='Witch Crest'>`;
+
+
+  SHELL_SHARDS_IMAGE
 
   /* ############################## create all main entries ########################################################################## */
 
@@ -348,58 +375,75 @@ function GenerateInnerHTML(db) {
               obj.p = "";
               break;
 
-            case "soul":
+            case "silk":
               obj.div = divFlex;
               obj.span = ["", ""];
-              Img = soulNormal;
+              Img = silkBarMiddle;
 
-              for (let i = 0, total = Math.round(entries[entry].amountTotal / 33); i < total; i++) {
+              obj.textSuffix += silkBarLeft;
+
+              for (let i = 0, total = entries[entry].amountTotal; i < total; i++) {
                 obj.textSuffix += Img;
               }
+              obj.textSuffix += silkBarRight
 
-              obj.textSuffix += `${obj.p}<sup>(${Math.round(entries[entry].amountTotal / 33)})</sup>`;
+
+              obj.textSuffix += `${obj.p}<sup>(${entries[entry].amountTotal})</sup>`;
 
               obj.p = "";
               break;
 
-            case "notches":
+            case "crests":
               obj.div = divFlex;
               obj.span = ["", ""];
 
               /* First, check filled (used) notches and fill them (skips if no filled notches) */
-              if (entries[entry].amountFilled > 0) {
+              /*if (entries[entry].amountFilled > 0) {
-                for (let i = 0, total = entries[entry].amountFilled; i < total; i++) {
+                for (let i = 0, total = entries[entry].amountTotal; i < total; i++) {
                   obj.textSuffix += notchFilledImage;
                 }
-              }
+              }*/
 
               /* Second, check overcharmed notches and fill them (skips if player is not overcharmed) */
-              if (entries[entry].amountOvercharmed > 0) {
+              /*if (entries[entry].amountOvercharmed > 0) {
                 for (let i = 0, total = entries[entry].amountOvercharmed; i < total; i++) {
                   obj.textSuffix += notchOvercharmedImage;
                 }
-              }
+              }*/
 
               /* Last, fill all unused notches */
-              if (entries[entry].amountUnused > 0) {
+              /*if (entries[entry].amountUnused > 0) {
                 for (let i = 0, total = entries[entry].amountUnused; i < total; i++) {
                   obj.textSuffix += notchNormalImage;
                 }
-              }
+              }*/
+              
+              /*for (let i = 0, total = entries[entry].amountTotal; i < total; i++) {
+                  obj.textSuffix += notchNormalImage;
+              }*/
+
+              if (entries[entry].hunter) obj.textSuffix += hunterCrestImage;
+              if (entries[entry].toolmaster) obj.textSuffix += architectCrestImage ;
+              if (entries[entry].beast) obj.textSuffix += beastCrestImage ;
+              if (entries[entry].reaper) obj.textSuffix += reaperCrestImage ;
+              if (entries[entry].shaman) obj.textSuffix += shamanCrestImage ;
+              if (entries[entry].wanderer) obj.textSuffix += wandererCrestImage ;
+              if (entries[entry].witch) obj.textSuffix += witchCrestImage ;
+
 
               obj.textSuffix += `${obj.p}<sup>(${entries[entry].amountTotal})</sup>`;
 
               break;
 
-            case "geo":
+            case "rosaries":
               obj.div = divFlex;
               obj.span = ["", ""];
 
-              obj.textSuffix += `${geoNormalImage}<b>${entries[entry].amount}</b>`;
+              obj.textSuffix += `${rosariesNormalImage}<b>${entries[entry].amount}</b>`;
-              // Show Shade Geo value and image only if Shade has at least 1 Geo on it
+              // Show Shade Rosaries value and image only if Shade has at least 1 Rosary on it
-              if (entries[entry].amountShade > 0) obj.textSuffix += `${obj.p}+${geoShadeImage}<b>${entries[entry].amountShade}</b>`;
+              if (entries[entry].amountShade > 0) obj.textSuffix += `${obj.p}+${rosariesShadeImage}<b>${entries[entry].amountShade}</b>`;
 
-              // Show also total Geo (Geo + Shade Geo) if player has at least 1 geo alongside the shade geo
+              // Show also total Rosaries (Rosaries + Shade Rosaries) if player has at least 1 Rosary alongside the shade rosaries
               if (entries[entry].amount > 0 && entries[entry].amountShade > 0) {
                 obj.textSuffix += `${obj.p}=${obj.p}<b>${entries[entry].amountTotal}</b>`;
               }
@@ -407,6 +451,15 @@ function GenerateInnerHTML(db) {
               obj.p = "";
               break;
               
+            case "shellShards":
+              obj.div = divFlex;
+              obj.span = ["", ""];
+
+              obj.textSuffix += `${shellShardsImage}<b>${entries[entry].amount}</b>`;
+
+              obj.p = "";
+              break;
+
             default:
           }