From b7c55aeb6a0b958fcfb29260eb06cc005a5ab284 Mon Sep 17 00:00:00 2001 From: ReznoRMichael Date: Thu, 24 Sep 2020 15:49:27 +0200 Subject: [PATCH] health masks, geo, completion --- HKCheckCompletion.js | 95 ++++++++++++++++++-------------------- img/geo.png | Bin 0 -> 6985 bytes img/health-mask-steel.png | Bin 0 -> 1682 bytes img/health-mask.png | Bin 0 -> 1713 bytes index.html | 3 -- loadJson.js | 2 +- style.css | 23 +++++++++ 7 files changed, 70 insertions(+), 53 deletions(-) create mode 100644 img/geo.png create mode 100644 img/health-mask-steel.png create mode 100644 img/health-mask.png 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 0000000000000000000000000000000000000000..7f3e16d3498b92f1391a8e091798793080efc0b0 GIT binary patch literal 6985 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 CUuZ)B literal 0 HcmV?d00001 diff --git a/img/health-mask.png b/img/health-mask.png new file mode 100644 index 0000000000000000000000000000000000000000..3b60cb53e3ff4631ab3d564ba6e9bd226032f4ae GIT binary patch literal 1713 zcmcIkZ8+0w7#|z{mTIN4lXT{#E9(uZycVlzc{#=m$3%;i!Vx9prJ>|qW8Qb#yqwFq zDoUXUNyX}KGpR8zV_B9gBd53+&R^%#`Oww*a_;N*-1l`~&-47A=lb3E^Q5{s6ILTP zBVjPuYWrh&5)^fzfd$}@&p3O}7zR`R%f*RoH`YJKZRfT(wwL6VFw(M8l2VdllPF&P zBxe%-Fy0=26n7A3Wr;(fP=E#s000#g6^P--hEV&LK`BCQWiJANpsb_}5w87a5a*BC zzP|#Zh48(306Ok}wErf>4=$ht$)b)>SBI-ZioxK3+Nu?0R%Af{YH&3OP&&kWJ3Aql zOXc$SGPz`2J}Q-oA&kkyC=3??&|$%0T&RCFVskT z79)k8OiN9sB`3$x;xEO=gvC(YeLUSfJ>AG;k|)WPLMBo?i4?LUg+%lrI+96_Bqw{K z!%-&(I|m1X1L3F>;V^+u>Qw4_*CTv8~OmKGI? z#f7DnIQR9-%(PrKAsv;x|2R1*pP8DQlZ}mthJzTOlMH&^Fl1e}evmD&D%drkK4Hr&3=KwnSiC$!ck z&2>n1KotR3R)Xy@BM0YK)zr0cUh)?k>ub!RmnpKx{x?(#QYyje=xlzWQi?hQQW)GH{sUkW}EY%B7X^j

y^TN~et4hJ(zmOc4<-da;k9 zg_Nek!FTC<8aWBS!0-6TwI@8fb|X`$!d9==;Uw*OeJV`4sx+8;M-Q9RhtLcXM86s>8PVrMV*hu?%1Z(EY#uPFn z>?U^oJwMK4ub0!9466C3>hKtDPKrRg6&G>7s4(NY0h%hY!mMF`kKC7faA+sag$=M9zyl^s$E#4 z%uMlC@})V^7mW3s&BKG%)=jbpT7Im>1Ew<{Hm;pd(H#sw?|QO2M4FYa6B#$ 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;