CompletionHTML move

This commit is contained in:
ReznoRMichael 2021-02-17 01:28:20 +01:00
parent d903158745
commit 217a041460
2 changed files with 63 additions and 60 deletions

View file

@ -8,6 +8,7 @@ import HK from "./hk-database.js";
import {
PrefillHTML,
CompletionHTML,
CheckboxHintsToggle,
CheckboxSpoilersToggle,
StorageAvailable
@ -242,66 +243,6 @@ function HKCheckCompletion(jsonObject) {
return true;
}
/**
* 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
*/
function CompletionHTML(jsObj, hkGameCompletion) {
let h2 = "";
let h2id = "";
let cl = "";
let clGreen = "box-green";
let clRed = "box-red";
let cp = 0; // current Percent
let mp = 0; // max Percent
let fillText = "";
for (let i in jsObj) {
h2 = jsObj[i].h2;
h2id = "h2-" + jsObj[i].id;
(jsObj[i].hasOwnProperty("percent")) ? cp = jsObj[i].percent: cp = 0;
if (i === "intro") cp = hkGameCompletion;
// Don't use percent-box for Essentials, Achievements, Statistics
if (!jsObj[i].hasOwnProperty("maxPercent")) {
fillText = "";
}
// otherwise use percent-box with values cp/mp%
else {
mp = jsObj[i].maxPercent;
if (i === "maskShards") {
let perc = jsObj[i].percent;
(perc % 4) ? cp = Math.floor(perc / 4): cp = perc / 4;
} else if (i === "vesselFragments") {
let perc = jsObj[i].percent;
(perc % 3) ? cp = Math.floor(perc / 3): cp = perc / 3;
}
// switches the box to red when a section (h2) is 0
if (cp === 0) {
cl = ` ${clRed}`;
}
// switches the box to green when a section (h2) is completed
else if (cp === mp) {
cl = ` ${clGreen}`;
}
// default is blue (partially completed and starting value)
else 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 += "/";
fillText = `<div class='percent-box${cl}'>${(i === "intro") ? cp: cp + jsObj[i].maxPercent}%</div>`;
}
document.getElementById(h2id).innerHTML = h2 + fillText;
}
}
/**
* Generates and appends a new entry inside the HTML of a given ID
* @param {object} divId object containing div ID and h2 title of the HTML element

View file

@ -73,6 +73,67 @@ function PrefillHTML(jsObj, element = "generated") {
domElement.innerHTML = sFillText;
}
/**
* 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 {number} hkGameCompletion Total completion percentage in a save file
*/
function CompletionHTML(jsObj, hkGameCompletion) {
let h2 = "";
let h2id = "";
let cl = "";
let clGreen = "box-green";
let clRed = "box-red";
let cp = 0; // current Percent
let mp = 0; // max Percent
let fillText = "";
for (let i in jsObj) {
h2 = jsObj[i].h2;
h2id = "h2-" + jsObj[i].id;
(jsObj[i].hasOwnProperty("percent")) ? cp = jsObj[i].percent: cp = 0;
if (i === "intro") cp = hkGameCompletion;
// Don't use percent-box for Essentials, Achievements, Statistics
if (!jsObj[i].hasOwnProperty("maxPercent")) {
fillText = "";
}
// otherwise use percent-box with values cp/mp%
else {
mp = jsObj[i].maxPercent;
if (i === "maskShards") {
let perc = jsObj[i].percent;
(perc % 4) ? cp = Math.floor(perc / 4): cp = perc / 4;
} else if (i === "vesselFragments") {
let perc = jsObj[i].percent;
(perc % 3) ? cp = Math.floor(perc / 3): cp = perc / 3;
}
// switches the box to red when a section (h2) is 0
if (cp === 0) {
cl = ` ${clRed}`;
}
// switches the box to green when a section (h2) is completed
else if (cp === mp) {
cl = ` ${clGreen}`;
}
// default is blue (partially completed and starting value)
else 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 += "/";
fillText = `<div class='percent-box${cl}'>${(i === "intro") ? cp: cp + jsObj[i].maxPercent}%</div>`;
}
document.getElementById(h2id).innerHTML = h2 + fillText;
}
}
/**
* Toggles display of "hk-hints". On click with no parameters or on demand when called with a parameter
* @param {string} param "hide", "show" or none (optional)
@ -242,6 +303,7 @@ document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxS
export {
PrefillHTML,
CompletionHTML,
CheckboxHintsToggle,
CheckboxSpoilersToggle,
StorageAvailable