green box completion working

This commit is contained in:
ReznoRMichael 2021-01-31 16:26:52 +01:00
parent aee60e754a
commit 0d91ab11a8
4 changed files with 38 additions and 11 deletions

File diff suppressed because one or more lines are too long

View file

@ -696,3 +696,9 @@ input[type="radio"] {
border: 2px solid #3e6d8c; border: 2px solid #3e6d8c;
border-radius: 4px; border-radius: 4px;
} }
.box-green {
color: #ddffd9;
background: #1e6c1e;
border: 2px solid #2d8a2d;
}

View file

@ -588,4 +588,10 @@ input[type="radio"] {
background: #1e4d6c; background: #1e4d6c;
border: 2px solid #3e6d8c; border: 2px solid #3e6d8c;
border-radius: 4px; border-radius: 4px;
}
.box-green {
color: #ddffd9;
background: #1e6c1e;
border: 2px solid #2d8a2d;
} }

View file

@ -243,7 +243,7 @@ function HKCheckCompletion(jsonObject) {
// ------------------------- Fill completion ----------------------------- // // ------------------------- Fill completion ----------------------------- //
CompletionHTML(HK.DIV_ID); CompletionHTML(HK.DIV_ID, HKPlayerData.completionPercentage);
// Prevents wrong checkbox behaviour (must run after everything is finished) // Prevents wrong checkbox behaviour (must run after everything is finished)
CheckboxHintsToggle(); CheckboxHintsToggle();
@ -288,22 +288,31 @@ function PrefillHTML(jsObj) {
* Replaces the h2 titles with a current percent/max percent values as read from the save file * Replaces the h2 titles with a current percent/max percent values as read from the save file
* @param {object} jsObj Object with HTML data to fill * @param {object} jsObj Object with HTML data to fill
*/ */
function CompletionHTML(jsObj) { function CompletionHTML(jsObj, hkGameCompletion) {
let h2 = ""; let h2 = "";
let h2id = ""; let h2id = "";
let cp = ""; // current Percent let cl = "";
let mp = ""; // max Percent let clGreen = "box-green";
let cp = 0; // current Percent
let mp = 0; // max Percent
let fillText = "";
for (let i in jsObj) { for (let i in jsObj) {
h2 = jsObj[i].h2; h2 = jsObj[i].h2;
h2id = "h2-" + jsObj[i].id; h2id = "h2-" + jsObj[i].id;
(jsObj[i].hasOwnProperty("percent")) ? cp = jsObj[i].percent: cp = ""; (jsObj[i].hasOwnProperty("percent")) ? cp = jsObj[i].percent: cp = 0;
if (i === "intro") cp = hkGameCompletion;
if (!jsObj[i].hasOwnProperty("maxPercent") || i === "intro") { // Don't use percent-box for Essentials, Achievements, Statistics
mp = ""; if (!jsObj[i].hasOwnProperty("maxPercent")) {
} else { fillText = "";
}
// otherwise use percent-box with values cp/mp%
else {
mp = jsObj[i].maxPercent;
if (i === "maskShards") { if (i === "maskShards") {
let perc = jsObj[i].percent; let perc = jsObj[i].percent;
@ -313,11 +322,16 @@ function CompletionHTML(jsObj) {
(perc % 3) ? cp = Math.floor(perc / 3): cp = perc / 3; (perc % 3) ? cp = Math.floor(perc / 3): cp = perc / 3;
} }
// switches the box to green when a section (h2) is completed
(cp === mp) ? cl = ` ${clGreen}`: cl = "";
// needed for Game Status to show percentage properly (adds a slash for all boxes except the Game Status one)
if (jsObj[i].hasOwnProperty("percent")) cp += "/"; if (jsObj[i].hasOwnProperty("percent")) cp += "/";
mp = " " + cp + jsObj[i].maxPercent + "%";
fillText = `<div class='percent-box${cl}'>${(i === "intro") ? cp: cp + jsObj[i].maxPercent}%</div>`;
} }
document.getElementById(h2id).innerHTML = h2 + mp; document.getElementById(h2id).innerHTML = h2 + fillText;
} }
} }
@ -328,6 +342,7 @@ function CompletionHTML(jsObj) {
* @param {string} textSuffix Optional suffix after the main name (spoilers: locations, costs etc.) * @param {string} textSuffix Optional suffix after the main name (spoilers: locations, costs etc.)
*/ */
function FillHTML(divId, textPrefix = "Unknown Completion Element: ", textSuffix = "Unknown Description Element") { function FillHTML(divId, textPrefix = "Unknown Completion Element: ", textSuffix = "Unknown Description Element") {
let icon = completionSymbol; let icon = completionSymbol;
let b = ["<b>", "</b>"]; let b = ["<b>", "</b>"];
if (!textPrefix.length) b = ["", ""]; if (!textPrefix.length) b = ["", ""];