129 lines
3.3 KiB
JavaScript
129 lines
3.3 KiB
JavaScript
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;
|
|
updateSynthRecipeState(recipe);
|
|
|
|
recipe.addEventListener("input", function () {
|
|
localStorage.setItem("kh1-synth-" + this.id, this.checked);
|
|
updateSynthRecipeState(this);
|
|
calcNeededMats();
|
|
});
|
|
}
|
|
|
|
const recipesLabels = document.querySelectorAll(".recipe-wrapper > label");
|
|
for (const label of recipesLabels) {
|
|
label.addEventListener("mouseenter", function () {
|
|
highlightNeededMats(this);
|
|
});
|
|
}
|
|
|
|
markedNeededMaterials = Array(
|
|
localStorage.getItem("kh1-synth-needed-mats") ?? [],
|
|
);
|
|
|
|
calcNeededMats();
|
|
});
|
|
|
|
function updateSynthRecipeState(recipe) {
|
|
if (recipe.checked) {
|
|
recipe.parentElement.classList.add("complete");
|
|
} else {
|
|
recipe.parentElement.classList.remove("complete");
|
|
}
|
|
}
|
|
|
|
function highlightNeededMats(label) {
|
|
let mats = [];
|
|
const ingredients = label.querySelectorAll("ul li");
|
|
const checkbox = label.parentElement.querySelectorAll(".recipe")[0];
|
|
|
|
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 calcNeededMats() {
|
|
const needed = new Map();
|
|
const recipes = document.querySelectorAll(".recipe");
|
|
|
|
for (const recipe of recipes) {
|
|
const isComplete = recipe.checked;
|
|
if (isComplete) {
|
|
continue;
|
|
}
|
|
|
|
const ingredients =
|
|
recipe.parentElement.querySelectorAll("label ul li");
|
|
for (const ingredient of ingredients) {
|
|
let name = ingredient.dataset["synthItemName"];
|
|
let amount = Number(ingredient.dataset["synthItemAmount"]);
|
|
|
|
if (needed.has(name)) {
|
|
let newAmount = Number(needed.get(name)) + amount;
|
|
needed.set(name, newAmount);
|
|
} else {
|
|
needed.set(name, amount);
|
|
}
|
|
}
|
|
}
|
|
|
|
const sortedMap = new Map([...needed].sort((a, b) => b[1] - a[1]));
|
|
|
|
// generating the new list with materials needed
|
|
const matsList = document.getElementById("mats");
|
|
matsList.innerHTML = "<h1>Materials Needed</h1>";
|
|
const uiList = document.createElement("ul");
|
|
for (const entry of sortedMap) {
|
|
const liElem = document.createElement("li");
|
|
liElem.innerHTML = entry[0] + " x" + entry[1];
|
|
liElem.addEventListener("click", function () {
|
|
updateMarkedNeededMats(entry[0]);
|
|
markNeededMat(this);
|
|
});
|
|
|
|
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";
|
|
}
|