khguide/templates/components/kh3/script.js

let globalStats = { str: 0, mag: 0, def: 0, hp: 0, mp: 0 };
const types = ["starters", "soups", "fish", "meat", "deserts"];
let typeItem = [];
let hasSelection = [false, false, false, false, false];

document.addEventListener("DOMContentLoaded", (event) => {
	updateStats();

	types.forEach(function (type, typeIdx) {
		const recipes = document.querySelectorAll(
			"div.recipes." + type + " .recipe",
		);

		recipes.forEach(function (item, index) {
			item.addEventListener("click", function () {
				if (!hasSelection[typeIdx]) {
					hasSelection[typeIdx] = true;
					selectRecipe(item, typeIdx);
				} else {
					if (typeItem[typeIdx] != item) {
						unselectRecipe(typeIdx);
						selectRecipe(item, typeIdx);
					} else {
						hasSelection[typeIdx] = false;
						unselectRecipe(typeIdx);
						updateStats();
					}
				}
			});
		});
	});

	document
		.getElementById("hearty-meal")
		.addEventListener("click", function () {
			console.log(this);
			if (this.checked) {
				let bonusStr = Math.ceil(globalStats.str * 0.25);
				let bonusMag = Math.ceil(globalStats.mag * 0.25);
				let bonusDef = Math.ceil(globalStats.def * 0.25);
				let bonusHP = Math.ceil(globalStats.hp * 0.25);
				let bonusMP = Math.ceil(globalStats.mp * 0.25);

				let stats = {
					str: bonusStr,
					mag: bonusMag,
					def: bonusDef,
					hp: bonusHP,
					mp: bonusMP,
				};

				addStats(stats);
			} else {
				let bonusStr = Math.ceil(globalStats.str * 0.2);
				let bonusMag = Math.ceil(globalStats.mag * 0.2);
				let bonusDef = Math.ceil(globalStats.def * 0.2);
				let bonusHP = Math.ceil(globalStats.hp * 0.2);
				let bonusMP = Math.ceil(globalStats.mp * 0.2);

				let stats = {
					str: bonusStr,
					mag: bonusMag,
					def: bonusDef,
					hp: bonusHP,
					mp: bonusMP,
				};

				removeStats(stats);
				updateStats();
			}
		});
});

function unselectRecipe(index) {
	typeItem[index].style["box-shadow"] = "0px 0px 10px rgba(0, 0, 0, 0.4)";
	let stats = JSON.parse(typeItem[index].dataset["stats"]);
	removeStats(stats);
}

function selectRecipe(item, index) {
	typeItem[index] = item;
	item.style["box-shadow"] = "0px 0px 10px rgba(0, 255, 0, 0.8)";

	let stats = JSON.parse(item.dataset["stats"]);
	addStats(stats);
}

function addStats(stats) {
	globalStats.str += stats.str;
	globalStats.mag += stats.mag;
	globalStats.def += stats.def;
	globalStats.hp += stats.hp;
	globalStats.mp += stats.mp;
	updateStats();
}

function removeStats(stats) {
	globalStats.str -= stats.str;
	globalStats.mag -= stats.mag;
	globalStats.def -= stats.def;
	globalStats.hp -= stats.hp;
	globalStats.mp -= stats.mp;
}

const STR_MAX = 5;
const MAG_MAX = 5;
const DEF_MAX = 5;
const HP_MAX = 63;
const MP_MAX = 50;

const CENTER_POINT = [150, 120];

const STR_MAX_POINT = [150, 20];
const MAG_MAX_POINT = [50, 100];
const DEF_MAX_POINT = [250, 100];
const HP_MAX_POINT = [210, 210];
const MP_MAX_POINT = [90, 210];

function updateStats() {
	let strProgress = globalStats.str / STR_MAX;
	let magProgress = globalStats.mag / MAG_MAX;
	let defProgress = globalStats.def / DEF_MAX;
	let hpProgress = globalStats.hp / HP_MAX;
	let mpProgress = globalStats.mp / MP_MAX;

	let poly = document.getElementById("stats-mod");
	updatePoint(
		poly,
		0,
		STR_MAX_POINT,
		strProgress,
		globalStats.str,
		"stat-str",
	);
	updatePoint(
		poly,
		4,
		MAG_MAX_POINT,
		magProgress,
		globalStats.mag,
		"stat-mag",
	);
	updatePoint(
		poly,
		1,
		DEF_MAX_POINT,
		defProgress,
		globalStats.def,
		"stat-def",
	);
	updatePoint(poly, 2, HP_MAX_POINT, hpProgress, globalStats.hp, "stat-hp");
	updatePoint(poly, 3, MP_MAX_POINT, mpProgress, globalStats.mp, "stat-mp");
}

function updatePoint(poly, statId, max, progress, value, statElem) {
	poly.points[statId].x =
		CENTER_POINT[0] + (max[0] - CENTER_POINT[0]) * progress;
	poly.points[statId].y =
		CENTER_POINT[1] + (max[1] - CENTER_POINT[1]) * progress;

	document.getElementById(statElem).innerHTML = "+" + value;
}