khguide/public/scripts/kh1/synth.js

import "../common/prototypes.js";
import * as storage from "../common/storage.js";

const RECIPE_STORAGE_NAME = "/synth/";
const LIST_STORAGE_NAME = "/synth/finished-mats";

let markedNeededMaterials = [];

document.addEventListener("DOMContentLoaded", (event) => {
	const recipes = document.querySelectorAll(".recipe");

	for (const recipe of recipes) {
		recipe.checked =
			storage.get(RECIPE_STORAGE_NAME + recipe.id) === "true" ?? false;
		updateSynthRecipeState(recipe);

		recipe.addEventListener("input", function () {
			// Change the recipe's state and update and needed materials list based on the remaining recipes
			storage.set(RECIPE_STORAGE_NAME + 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);
		});
	}

	// Turn the single saved string into an array with each material
	if (storage.get(LIST_STORAGE_NAME) != null) {
		let saved = storage.get(LIST_STORAGE_NAME);
		saved = saved.split(",");
		markedNeededMaterials = saved;
		markedNeededMaterials = markedNeededMaterials.filter(
			(n) => n && n !== "",
		);
	} else {
		markedNeededMaterials = new Array();
	}

	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);
	}
	markedNeededMaterials = markedNeededMaterials.filter((n) => n && n !== "");
	storage.set(LIST_STORAGE_NAME, markedNeededMaterials);
}

function markNeededMat(mat) {
	const isCrossed = mat.style.textDecoration === "line-through";
	mat.style.textDecoration = isCrossed ? "none" : "line-through";
	mat.style.color = isCrossed ? "#fff" : "#f00";
}