mikl/hollow-knight-completion-check
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AppendHTML() and Fleur Divide

Browse source
This commit is contained in:
ReznoRMichael 2020-09-24 18:52:26 +02:00
parent 3f61ba71ae
commit a37e120272
3 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
HKCheckCompletion.js
View file

@ -5,6 +5,7 @@ const SYMBOL_FALSE = "<i class='icon-cancel'></i>"; // "❌ "
const SYMBOL_TRUE = "<i class='icon-ok-squared'></i>"; // "✅ " const SYMBOL_TRUE = "<i class='icon-ok-squared'></i>"; // "✅ "
const SYMBOL_INFO = "<i class='icon-info-circled'></i>"; // "ℹ " const SYMBOL_INFO = "<i class='icon-info-circled'></i>"; // "ℹ "
const SYMBOL_EMPTY = "<span class='padding-left'></span>"; const SYMBOL_EMPTY = "<span class='padding-left'></span>";
const FLEUR_DIVIDE = "<div class='horizontal-line'></div>";
// ---------------- Variables ----------------- // // ---------------- Variables ----------------- //
@ -431,6 +432,10 @@ function HKCheckCompletion(jsonObject) {
CheckCompletionPercent(DIV_ID.intro, HKPlayerData.completionPercentage); CheckCompletionPercent(DIV_ID.intro, HKPlayerData.completionPercentage);
// ---------------- Fleur Divide ----------------- //
AppendHTML(DIV_ID.intro, FLEUR_DIVIDE);
// ---------------- Health Masks ----------------- // // ---------------- Health Masks ----------------- //
CheckHealthMasks(DIV_ID.intro, HKPlayerData.maxHealthBase, HKPlayerData.permadeathMode); CheckHealthMasks(DIV_ID.intro, HKPlayerData.maxHealthBase, HKPlayerData.permadeathMode);
@ -566,7 +571,7 @@ function PrefillHTML(jsObj) {
h2id = "h2-" + jsObj[i].id; h2id = "h2-" + jsObj[i].id;
(i === "hints") ? cl = " class='hidden'": cl = ""; (i === "hints") ? cl = " class='hidden'": cl = "";
mp = " = " + jsObj[i].maxPercent + "%"; mp = " – " + jsObj[i].maxPercent + "%";
if (!jsObj[i].hasOwnProperty("maxPercent") || i === "intro") mp = ""; if (!jsObj[i].hasOwnProperty("maxPercent") || i === "intro") mp = "";
document.getElementById("generated").innerHTML += "<div id='" + id + "'" + cl + ">" + "</div>"; document.getElementById("generated").innerHTML += "<div id='" + id + "'" + cl + ">" + "</div>";
@ -604,7 +609,7 @@ function CompletionHTML(jsObj) {
} }
if (jsObj[i].hasOwnProperty("percent")) cp += "/"; if (jsObj[i].hasOwnProperty("percent")) cp += "/";
mp = " = " + cp + jsObj[i].maxPercent + "%"; mp = " – " + cp + jsObj[i].maxPercent + "%";
} }
document.getElementById(h2id).innerHTML = h2 + mp; document.getElementById(h2id).innerHTML = h2 + mp;
@ -634,6 +639,15 @@ function FillHTML(divId, textPrefix = "Unknown Completion Element: ", textSuffix
document.getElementById(divId.id).innerHTML += divStart + icon + b[0] + textPrefix + b[1] + span[0] + dash + textSuffix + span[1] + divEnd; document.getElementById(divId.id).innerHTML += divStart + icon + b[0] + textPrefix + b[1] + span[0] + dash + textSuffix + span[1] + divEnd;
} }
/**
* Adds HTML string to an element with a given ID.
* @param {object} divId object containing div ID of the HTML element to append to
* @param {string} content HTML contents to append
*/
function AppendHTML(divId, content) {
document.getElementById(divId.id).innerHTML += "\n" + content;
}
/** /**
* Switches global variable to a "completed" symbol. Adds +1 or +2 to percent property. * Switches global variable to a "completed" symbol. Adds +1 or +2 to percent property.
*/ */
@ -1024,6 +1038,9 @@ function InitialHTMLPopulate(divIdObj) {
// Game Completion // Game Completion
CheckCompletionPercent(divIdObj.intro, 0); CheckCompletionPercent(divIdObj.intro, 0);
// Fleur Divide
AppendHTML(divIdObj.intro, FLEUR_DIVIDE);
// Health Masks // Health Masks
CheckHealthMasks(divIdObj.intro, 5, 0); CheckHealthMasks(divIdObj.intro, 5, 0);

BIN
img/fleur-divide.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

9
style.css
View file

@ -165,8 +165,13 @@ p {
} }
.horizontal-line { .horizontal-line {
padding-bottom: 1px; margin: 1rem 0;
background: linear-gradient(90deg, #e9e9e9 0%, #FFFFFF 75%); height: 1.5rem;
width: 100%;
background-image: url("img/fleur-divide.png");
background-size: auto 100%;
background-position: center top;
background-repeat: no-repeat;
} }
.smalltext { .smalltext {