diff --git a/HKCheckCompletion.js b/HKCheckCompletion.js index 1337376..cbc2591 100644 --- a/HKCheckCompletion.js +++ b/HKCheckCompletion.js @@ -1,9 +1,10 @@ // ---------------- Constants ----------------- // const DATA_UNKNOWN = "Data unknown"; -const SYMBOL_FALSE = ""; // "❌ "; -const SYMBOL_TRUE = ""; // "✅ "; -const SYMBOL_INFO = ""; // "ℹ "; +const SYMBOL_FALSE = ""; // "❌ " +const SYMBOL_TRUE = ""; // "✅ " +const SYMBOL_INFO = ""; // "ℹ " +const SYMBOL_EMPTY = ""; // ---------------- Variables ----------------- // @@ -340,7 +341,7 @@ const HK_GODMASTER_DOORS = [ const HK_ESSENTIAL = { grubsCollected: ["Grubs Rescued", "out of 46 total", 46], - dreamOrbs: ["Essence Collected", "Enemies, Whispering Roots, Dream Bosses", 2400], + dreamOrbs: ["Essence Collected", "out of 2400", 2400], slyRescued: ["Sly Rescued", "Forgotten Crossroads"], brettaRescued: ["Bretta Rescued", "Fungal Wastes"], hasLantern: ["Lumafly Lantern", "Sly: 1800 Geo"], @@ -428,16 +429,16 @@ function HKCheckCompletion(jsonObject) { // ---------------- Game Completion Status ----------------- // - CheckCompletionPercent(DIV_ID.intro, HKPlayerData); + CheckCompletionPercent(DIV_ID.intro, HKPlayerData.completionPercentage); + + // ---------------- Health Masks ----------------- // + + CheckHealthMasks(DIV_ID.intro, HKPlayerData.maxHealth, HKPlayerData.permadeathMode); // ---------------- Geo Amount ----------------- // CheckGeo(DIV_ID.intro, HKPlayerData.geo); - // ---------------- Steel Soul Mode ----------------- // - - CheckSteelSoul(DIV_ID.intro, HKPlayerData.permadeathMode); - // ---------------- Bosses (Base Game) --------------------- // CheckIfDataTrue(DIV_ID.bosses, HK_BOSSES_temp, HKPlayerData); @@ -678,21 +679,38 @@ function CheckPlayTime(divId, playTime) { /** * Searches for completionPercentage in playerData and fills HTML with the value of the save file * @param {object} divId ID of the HTML element for data appending - * @param {object} playerData Reference/pointer to specific data where to search + * @param {number} completionPercentage Number of completion percentage */ -function CheckCompletionPercent(divId, playerData) { +function CheckCompletionPercent(divId, completionPercentage) { - let textFill = ""; - CurrentDataFalse(); + (completionPercentage >= 112) ? CurrentDataTrue(): CurrentDataFalse(); - for (let i in playerData) { - if (i === "completionPercentage") { - if (playerData[i] >= 112) CurrentDataTrue(); + let textFill = "Game Completion: " + completionPercentage + " % (out of " + divId.maxPercent + " %)"; + document.getElementById(divId.id).innerHTML += divStart + completionSymbol + textFill + divEnd; +} - textFill = "Game Completion: " + playerData[i] + " % (out of " + divId.maxPercent + " %)"; - document.getElementById(divId.id).innerHTML += divStart + completionSymbol + textFill + divEnd; - } +/** + * Fills HTML with appriopriate number of health mask images + * @param {object} divId ID of the HTML element for data appending + * @param {number} masks Number of max health masks from the save + * @param {number} permadeathMode Value of permadeathMode property. 0 = Normal, 1 = Steel Soul + */ +function CheckHealthMasks(divId, masks, permadeathMode) { + + let icon = SYMBOL_EMPTY; + let textFill = "Health:"; + let maskImages = ""; + let maskNormal = ""; + let maskSteel = ""; + let maskImg = ""; + + (permadeathMode === 1) ? maskImg = maskSteel: maskImg = maskNormal; + + for (let i = 0; i < masks; i++) { + maskImages += maskImg; } + + document.getElementById(divId.id).innerHTML += "
" + icon + textFill + maskImages + divEnd; } /** @@ -702,26 +720,10 @@ function CheckCompletionPercent(divId, playerData) { */ function CheckGeo(divId, geoValue) { - let icon = SYMBOL_INFO; - let textFill = "Geo Amount: " + geoValue + ""; + let icon = SYMBOL_EMPTY; + let textFill = "Geo:" + geoValue + ""; - document.getElementById(divId.id).innerHTML += divStart + icon + textFill + divEnd; -} - -/** - * Appends HTML with "Steel Soul" when it's enabled in the save file. When not enabled, don't show anything. - * @param {object} divId ID of the HTML element for data appending - * @param {number} permadeathMode Value of permadeathMode property - */ -function CheckSteelSoul(divId, permadeathMode) { - - // append HTML only when enabled - if (permadeathMode === 1) { - let icon = SYMBOL_INFO; - let textFill = "Steel Soul Mode"; - - document.getElementById(divId.id).innerHTML += divStart + icon + textFill + divEnd; - } + document.getElementById(divId.id).innerHTML += "
" + icon + textFill + divEnd; } /** @@ -989,25 +991,20 @@ function ObjectLength(object) { */ function InitialHTMLPopulate(divIdObj) { - let icon = ""; - let textFill = ""; - PrefillHTML(divIdObj); CurrentDataFalse(); // Play Time - icon = ""; - textFill = "Time Played: 0 h 00 min 00 sec"; - document.getElementById(divIdObj.intro.id).innerHTML += divStart + icon + textFill + divEnd; + CheckPlayTime(divIdObj.intro, 0) // Game Completion - textFill = "Game Completion: 0 % (out of " + divIdObj.intro.maxPercent + " %)"; - document.getElementById(divIdObj.intro.id).innerHTML += divStart + completionSymbol + textFill + divEnd; + CheckCompletionPercent(divIdObj.intro, 0); + + // Health Masks + CheckHealthMasks(divIdObj.intro, 5, 0); // Geo - icon = SYMBOL_INFO; - textFill = "Geo Amount: 0"; - document.getElementById(divIdObj.intro.id).innerHTML += divStart + icon + textFill + divEnd; + CheckGeo(divIdObj.intro, 0); // First Hint Only FillHTML(divIdObj.hints, HK_HINTS.fireballLevel[0], HK_HINTS.fireballLevel[1]); diff --git a/img/geo.png b/img/geo.png new file mode 100644 index 0000000..7f3e16d Binary files /dev/null and b/img/geo.png differ diff --git a/img/health-mask-steel.png b/img/health-mask-steel.png new file mode 100644 index 0000000..ea8a3a3 Binary files /dev/null and b/img/health-mask-steel.png differ diff --git a/img/health-mask.png b/img/health-mask.png new file mode 100644 index 0000000..3b60cb5 Binary files /dev/null and b/img/health-mask.png differ diff --git a/index.html b/index.html index e83c051..974a7e1 100644 --- a/index.html +++ b/index.html @@ -32,9 +32,6 @@ diff --git a/loadJson.js b/loadJson.js index dd70e48..468482c 100644 --- a/loadJson.js +++ b/loadJson.js @@ -44,7 +44,7 @@ function loadJSON(filename, callback) { xobj.send(null); } -loadJSON("save/" + fileName[4], +loadJSON("save/" + fileName[5], function JSONparse(response) { // Parse JSON string into object jsonObj = JSON.parse(response); diff --git a/style.css b/style.css index d160900..abba408 100644 --- a/style.css +++ b/style.css @@ -199,6 +199,29 @@ a:hover { color: #479ae7; } +.flex-container { + display: flex; + align-items: center; + justify-content: left; +} + +.health-mask, +.geo-symbol { + display: flex; + width: auto; + height: 1.48rem; + margin: 0 0 0 0.3rem; +} + +.geo-symbol { + margin-right: 0.15rem; +} + +.padding-left { + display: flex; + padding-left: 1.4rem; +} + .radio, .checkbox { position: relative;