export function init() {
	const enemies = document.querySelectorAll(".enemy");

	for (const enemyWrapper of enemies) {
		toggleWorldDisplay(enemyWrapper);
		enemyWrapper.addEventListener("click", function () {
			toggleWorldDisplay(this);
		});
	}
}

function toggleWorldDisplay(display) {
	const showWorlds = display.dataset["showWorlds"] === "true";

	const enemyWorlds = display.querySelector(".worlds");
	const worldsWrapper = display.querySelectorAll(".worlds > div");
	const worldsIcons = display.querySelectorAll(".worlds > div > .icon");
	const worldsNames = display.querySelectorAll(".worlds > div > .info");

	if (!showWorlds) {
		enemyWorlds.style.width = "32px";
		for (const wrapper of worldsWrapper) {
			wrapper.style.height = "32px";
			wrapper.style["margin-bottom"] = "16px";
		}
		for (const icon of worldsIcons) {
			icon.width = "32";
			icon.height = "32";
		}
		for (const name of worldsNames) {
			name.style.display = "none";
		}
	} else {
		enemyWorlds.style.width = "256px";
		for (const wrapper of worldsWrapper) {
			wrapper.style.height = "auto";
			wrapper.style["margin-bottom"] = "0px";
		}
		for (const icon of worldsIcons) {
			icon.width = "64";
			icon.height = "64";
		}
		for (const name of worldsNames) {
			name.style.display = "block";
		}
	}

	display.dataset["showWorlds"] = !showWorlds;
}
