Updated the marked materials synth list to save between redraws

public/scripts/common/prototypes.js

@@ -0,0 +1,8 @@
+Array.prototype.remove = function (element) {
+	this.forEach((item, index) => {
+		if (item === element) {
+			this.splice(index, 1);
+		}
+	});
+	return this;
+};

public/scripts/kh1/synth.js

@@ -1,29 +1,37 @@
+import "../common/prototypes.js";
+
+let markedNeededMaterials = [];
+
 document.addEventListener("DOMContentLoaded", (event) => {
 	const recipes = document.querySelectorAll(".recipe");
 
 	for (const recipe of recipes) {
 		recipe.checked =
 			localStorage.getItem("kh1-synth-" + recipe.id) === "true" ?? false;
-		update_synth_completions(recipe);
+		updateSynthRecipeState(recipe);
 
 		recipe.addEventListener("input", function () {
 			localStorage.setItem("kh1-synth-" + this.id, this.checked);
-			update_synth_completions(this);
+			updateSynthRecipeState(this);
-			calc_total_ingredients();
+			calcNeededMats();
 		});
 	}
 
-	const recipes_labels = document.querySelectorAll(".recipe-wrapper > label");
+	const recipesLabels = document.querySelectorAll(".recipe-wrapper > label");
-	for (const label of recipes_labels) {
+	for (const label of recipesLabels) {
 		label.addEventListener("mouseenter", function () {
-			highlight_ingredients(this);
+			highlightNeededMats(this);
 		});
 	}
 
-	calc_total_ingredients();
+	markedNeededMaterials = Array(
+		localStorage.getItem("kh1-synth-needed-mats") ?? [],
+	);
+
+	calcNeededMats();
 });
 
-function update_synth_completions(recipe) {
+function updateSynthRecipeState(recipe) {
 	if (recipe.checked) {
 		recipe.parentElement.classList.add("complete");
 	} else {
@@ -31,25 +39,17 @@ function update_synth_completions(recipe) {
 	}
 }
 
-function highlight_ingredients(label) {
+function highlightNeededMats(label) {
 	let mats = [];
 	const ingredients = label.querySelectorAll("ul li");
 	const checkbox = label.parentElement.querySelectorAll(".recipe")[0];
 
-	const elems = document.querySelectorAll("#mats ul li");
-
-	if (checkbox.checked) {
-		for (const elem of elems) {
-			elem.style.color = "#fff";
-		}
-		return;
-	}
-
 	for (const ingredient of ingredients) {
 		const name = ingredient.dataset["synthItemName"];
 		mats.push(name);
 	}
 
+	const elems = document.querySelectorAll("#mats ul li");
 	for (const elem of elems) {
 		const isCrossed = elem.style.textDecoration === "line-through";
 		if (isCrossed) {
@@ -64,7 +64,7 @@ function highlight_ingredients(label) {
 	}
 }
 
-function calc_total_ingredients() {
+function calcNeededMats() {
 	const needed = new Map();
 	const recipes = document.querySelectorAll(".recipe");
 
@@ -81,8 +81,8 @@ function calc_total_ingredients() {
 			let amount = Number(ingredient.dataset["synthItemAmount"]);
 
 			if (needed.has(name)) {
-				let new_amount = Number(needed.get(name)) + amount;
+				let newAmount = Number(needed.get(name)) + amount;
-				needed.set(name, new_amount);
+				needed.set(name, newAmount);
 			} else {
 				needed.set(name, amount);
 			}
@@ -99,12 +99,30 @@ function calc_total_ingredients() {
 		const liElem = document.createElement("li");
 		liElem.innerHTML = entry[0] + " x" + entry[1];
 		liElem.addEventListener("click", function () {
-			const isCrossed = this.style.textDecoration === "line-through";
+			updateMarkedNeededMats(entry[0]);
-			this.style.textDecoration = isCrossed ? "none" : "line-through";
+			markNeededMat(this);
-			this.style.color = isCrossed ? "#fff" : "#f00";
 		});
 
+		if (markedNeededMaterials.includes(entry[0])) {
+			markNeededMat(liElem);
+		}
+
 		uiList.appendChild(liElem);
 	}
 	matsList.appendChild(uiList);
 }
+
+function updateMarkedNeededMats(ingredient) {
+	if (markedNeededMaterials.includes(ingredient)) {
+		markedNeededMaterials.remove(ingredient);
+	} else {
+		markedNeededMaterials.push(ingredient);
+	}
+	localStorage.setItem("kh1-synth-needed-mats", markedNeededMaterials);
+}
+
+function markNeededMat(mat) {
+	const isCrossed = mat.style.textDecoration === "line-through";
+	mat.style.textDecoration = isCrossed ? "none" : "line-through";
+	mat.style.color = isCrossed ? "#fff" : "#f00";
+}