khguide/templates/pages/kh2/drops.html

{% extends "layouts/base.html" %}
{% import "macros/kh2/macros.html" as macros %}

{% block title %}KH2 - Drops{% endblock %}

{% block head %}
	<style>
		.category {
			display: flex;
			align-items: center;
		}

		.enemies {
			display: flex;

			.drop {
				display: flex;
				flex-direction: column;
				text-align: center;
				margin-right: 8px;
				line-height: 30px;
				font-size: 18px;
				text-shadow: black 2px 2px;
				transition: all 0.2s ease;

				div {
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					width: 256px;
					height: 256px;
					background-size: 384px;
					transition: all 0.2s ease;
				}

				/* &:hover { */
				/* 	background-color: #333; */
				/* 	box-shadow: 0 0 10px 1px rgba(0, 255, 0, 0.5); */
				/* 	transform: scale(1.5); */
				/**/
				/* 	& > div { */
				/* 		padding: 32px; */
				/* 		margin: -32px; */
				/* 	} */
				/* } */
			}
		}
	</style>
	<script>
		let showOnlyTracked = false;
		let kindFilter = new Set();

		document.addEventListener("DOMContentLoaded", (event) => {
			const onlyTrackedFilter = document.querySelector(
				'input[name="onlyTracked"]',
			);

			onlyTrackedFilter.addEventListener("input", function () {
				showOnlyTracked = this.checked ? true : false;
				filter();
			});

			const kindFilters = document.querySelectorAll(
				'input[type="checkbox"][name="kindFilter"]',
			);

			kindFilters.forEach(function (item, index) {
				item.addEventListener("input", function () {
					if (this.checked) {
						kindFilter.add(this.value);
					} else {
						kindFilter.delete(this.value);
					}
					console.log(kindFilter);
					filter();
				});
			});
		});

		function track(element) {
			let parent = element.parentElement.parentElement;
			let isTracked = parent.dataset["isTracked"] ?? false;
			isTracked = isTracked === "true" ? false : true;
			parent.dataset["isTracked"] = isTracked;
			element.innerHTML = isTracked ? "Stop tracking" : "Start tracking";
			element.style["border-bottom-color"] = isTracked ? "#a00" : "#0a0";
			filter();
		}

		function filter() {
			const categories = document.querySelectorAll(".category-wrapper");

			for (const category of categories) {
				let isTracked = category.dataset["isTracked"] == "true";
				let kind = category.dataset["matKind"];
				let type = category.dataset["matType"];

				category.style.display = "";

				if (showOnlyTracked && !isTracked) {
					category.style.display = "none";
				}

				if (kindFilter.size > 0) {
					if (!kindFilter.has(kind)) {
						category.style.display = "none";
					}
				}
			}
		}
	</script>
{% endblock %}

{% block content %}
	{% include "components/kh2/only-tracked-filter.html" %}
	<br />
	{% include "components/kh2/kind-filters.html" %}
	<br />

	{% for category in drops %}
		{% call macros::drop("shard") %}
		{% call macros::drop("stone") %}
		{% call macros::drop("gem") %}
		{% call macros::drop("crystal") %}
	{% endfor %}
{% endblock %}