green box completion working
This commit is contained in:
parent
aee60e754a
commit
0d91ab11a8
4 changed files with 38 additions and 11 deletions
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
@ -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 = ["", ""];
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue