Some quality of life improvements for the synth screen

public/scripts/kh1/synth.js

@@ -13,6 +13,13 @@ document.addEventListener("DOMContentLoaded", (event) => {
 		});
 	}
 
+	const recipes_labels = document.querySelectorAll(".recipe-wrapper > label");
+	for (const label of recipes_labels) {
+		label.addEventListener("mouseenter", function () {
+			highlight_ingredients(this);
+		});
+	}
+
 	calc_total_ingredients();
 });
 
@@ -24,6 +31,30 @@ function update_synth_completions(recipe) {
 	}
 }
 
+function highlight_ingredients(label) {
+	let mats = [];
+	const ingredients = label.querySelectorAll("label ul li");
+
+	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) {
+			continue;
+		}
+		elem.style.color = "#fff";
+		for (const mat of mats) {
+			if (elem.innerHTML.includes(mat)) {
+				elem.style.color = "limegreen";
+			}
+		}
+	}
+}
+
 function calc_total_ingredients() {
 	const needed = new Map();
 	const recipes = document.querySelectorAll(".recipe");
@@ -58,6 +89,12 @@ function calc_total_ingredients() {
 	for (const entry of sortedMap) {
 		const liElem = document.createElement("li");
 		liElem.innerHTML = entry[0] + " x" + entry[1];
+		liElem.addEventListener("click", function () {
+			const isCrossed = this.style.textDecoration === "line-through";
+			this.style.textDecoration = isCrossed ? "none" : "line-through";
+			this.style.color = isCrossed ? "#fff" : "#f00";
+		});
+
 		uiList.appendChild(liElem);
 	}
 	matsList.appendChild(uiList);

public/styles/kh1/synth.css

@@ -16,6 +16,11 @@
 		height: 90%;
 		list-style: none;
 		line-height: 2;
+		user-select: none;
+
+		li {
+			cursor: pointer;
+		}
 	}
 }