red box for not started sections

This commit is contained in:
ReznoRMichael 2021-01-31 16:56:47 +01:00
parent b53fe3ac94
commit 45368c13e6
5 changed files with 24 additions and 3 deletions

View file

@ -96,7 +96,7 @@ If you like the tool and wish it developed further with more functions and easie
**Optimized:** Now smaller, faster and more web- and mobile-friendly than before. At least I hope 😉 **Optimized:** Now smaller, faster and more web- and mobile-friendly than before. At least I hope 😉
**Visual completion percentages** in all sections for better readability (blue = partially completed, green = fully completed) **Visual completion percentages** in all sections for better readability (red = not started yet (0%), blue = partially completed, green = fully completed)
**Game Status** additions: **Game Status** additions:
**Charm Notches** + visuals **Charm Notches** + visuals

File diff suppressed because one or more lines are too long

View file

@ -697,6 +697,12 @@ input[type="radio"] {
border-radius: 4px; border-radius: 4px;
} }
.box-red {
color: #ffe2dd;
background: #c22e14;
border: 2px solid #e24e34;
}
.box-green { .box-green {
color: #ddffd9; color: #ddffd9;
background: #1e6c1e; background: #1e6c1e;

View file

@ -590,6 +590,12 @@ input[type="radio"] {
border-radius: 4px; border-radius: 4px;
} }
.box-red {
color: #ffe2dd;
background: #c22e14;
border: 2px solid #e24e34;
}
.box-green { .box-green {
color: #ddffd9; color: #ddffd9;
background: #1e6c1e; background: #1e6c1e;

View file

@ -294,6 +294,7 @@ function CompletionHTML(jsObj, hkGameCompletion) {
let h2id = ""; let h2id = "";
let cl = ""; let cl = "";
let clGreen = "box-green"; let clGreen = "box-green";
let clRed = "box-red";
let cp = 0; // current Percent let cp = 0; // current Percent
let mp = 0; // max Percent let mp = 0; // max Percent
let fillText = ""; let fillText = "";
@ -322,8 +323,16 @@ function CompletionHTML(jsObj, hkGameCompletion) {
(perc % 3) ? cp = Math.floor(perc / 3): cp = perc / 3; (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 // switches the box to green when a section (h2) is completed
(cp === mp) ? cl = ` ${clGreen}`: cl = ""; 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) // 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 += "/";