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 {