Updated the marked materials synth list to save between redraws

master
Wynd 2025-06-30 19:41:12 +03:00
parent bf1a4e1c0e
commit 2ad44b5620
2 changed files with 50 additions and 24 deletions

View File

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

View File

@ -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);
calc_total_ingredients();
updateSynthRecipeState(this);
calcNeededMats();
});
}
const recipes_labels = document.querySelectorAll(".recipe-wrapper > label");
for (const label of recipes_labels) {
const recipesLabels = document.querySelectorAll(".recipe-wrapper > label");
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;
needed.set(name, new_amount);
let newAmount = Number(needed.get(name)) + 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";
this.style.textDecoration = isCrossed ? "none" : "line-through";
this.style.color = isCrossed ? "#fff" : "#f00";
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";
}