diff --git a/HKCheckCompletion.js b/HKCheckCompletion.js index cbb38d8..717b06b 100644 --- a/HKCheckCompletion.js +++ b/HKCheckCompletion.js @@ -5,6 +5,7 @@ const SYMBOL_FALSE = ""; // "❌ " const SYMBOL_TRUE = ""; // "✅ " const SYMBOL_INFO = ""; // "ℹ " const SYMBOL_EMPTY = ""; +const FLEUR_DIVIDE = "
"; // ---------------- Variables ----------------- // @@ -431,6 +432,10 @@ function HKCheckCompletion(jsonObject) { CheckCompletionPercent(DIV_ID.intro, HKPlayerData.completionPercentage); + // ---------------- Fleur Divide ----------------- // + + AppendHTML(DIV_ID.intro, FLEUR_DIVIDE); + // ---------------- Health Masks ----------------- // CheckHealthMasks(DIV_ID.intro, HKPlayerData.maxHealthBase, HKPlayerData.permadeathMode); @@ -566,7 +571,7 @@ function PrefillHTML(jsObj) { h2id = "h2-" + jsObj[i].id; (i === "hints") ? cl = " class='hidden'": cl = ""; - mp = " = " + jsObj[i].maxPercent + "%"; + mp = " – " + jsObj[i].maxPercent + "%"; if (!jsObj[i].hasOwnProperty("maxPercent") || i === "intro") mp = ""; document.getElementById("generated").innerHTML += "
" + "
"; @@ -604,7 +609,7 @@ function CompletionHTML(jsObj) { } if (jsObj[i].hasOwnProperty("percent")) cp += "/"; - mp = " = " + cp + jsObj[i].maxPercent + "%"; + mp = " – " + cp + jsObj[i].maxPercent + "%"; } 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; } +/** + * 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. */ @@ -1024,6 +1038,9 @@ function InitialHTMLPopulate(divIdObj) { // Game Completion CheckCompletionPercent(divIdObj.intro, 0); + // Fleur Divide + AppendHTML(divIdObj.intro, FLEUR_DIVIDE); + // Health Masks CheckHealthMasks(divIdObj.intro, 5, 0); diff --git a/img/fleur-divide.png b/img/fleur-divide.png new file mode 100644 index 0000000..528492b Binary files /dev/null and b/img/fleur-divide.png differ diff --git a/style.css b/style.css index 16fb348..a0dd9c3 100644 --- a/style.css +++ b/style.css @@ -165,8 +165,13 @@ p { } .horizontal-line { - padding-bottom: 1px; - background: linear-gradient(90deg, #e9e9e9 0%, #FFFFFF 75%); + margin: 1rem 0; + 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 {