diff --git a/public/scripts/kh1/synth.js b/public/scripts/kh1/synth.js index c58723a..f743536 100644 --- a/public/scripts/kh1/synth.js +++ b/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); diff --git a/public/styles/kh1/synth.css b/public/styles/kh1/synth.css index 61932ca..f9d46c9 100644 --- a/public/styles/kh1/synth.css +++ b/public/styles/kh1/synth.css @@ -16,6 +16,11 @@ height: 90%; list-style: none; line-height: 2; + user-select: none; + + li { + cursor: pointer; + } } }