KH2 mats filtering

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "khguide"
-version = "1.1.0"
+version = "1.2.0"
 edition = "2021"
 
 [dependencies]

src/kh2.rs

@@ -5,6 +5,21 @@ use serde::Deserialize;
 
 use crate::create_file;
 
+pub const MATERIAL_KINDS: &[&str] = &[
+	"blazing",
+	"bright",
+	"dark",
+	"dense",
+	"energy",
+	"frost",
+	"lightning",
+	"lucid",
+	"power",
+	"remembrance",
+	"serenity",
+	"twilight",
+];
+
 #[derive(Debug, Deserialize, PartialEq, Eq)]
 pub struct MaterialDrops {
 	kind: String,

templates/components/kh2/kind-filters.html

@@ -0,0 +1,13 @@
+{% for kind in MATERIAL_KINDS %}
+	<input
+		type="checkbox"
+		id="{{ kind }}Filter"
+		name="kindFilter"
+		autocomplete="off"
+		value="{{ kind }}"
+	/>
+	<label for="{{ kind }}Filter">{{ kind|capitalize }}</label>
+	{% if loop.index0 == 6 %}
+		<br />
+	{% endif %}
+{% endfor %}

templates/components/kh2/only-tracked-filter.html

@@ -0,0 +1,8 @@
+<input
+	type="checkbox"
+	id="onlyTracked"
+	name="onlyTracked"
+	autocomplete="off"
+	value=""
+/>
+<label for="onlyTracked">Show only tracked</label>

templates/layouts/base.html

@@ -58,6 +58,32 @@
 					}
 				}
 			}
+
+			button {
+				margin-left: 16px;
+				background: #444;
+				color: #fff;
+				padding: 8px;
+				border-color: #555;
+				border-bottom-color: rgb(85, 85, 85);
+				border-style: groove;
+				border-bottom-color: #0a0;
+				transition-duration: 0.1s;
+
+				&:hover {
+					background: #4f4f4f;
+				}
+
+				&:active {
+					background: #3f3f3f;
+					transform: translateY(1px);
+				}
+
+				&.disabled {
+					opacity: 0.6;
+					cursor: not-allowed;
+				}
+			}
 		</style>
 
 		{% block head %}{% endblock %}

templates/macros/kh2/macros.html

@@ -1,21 +1,28 @@
 {% macro drop(label) %}
-	<div class="category">
-		<img
-			src="../assets/materials/{{ category.kind }}/{{ label }}.webp"
-			width="64"
-			height="64"
-		/>
-		<h1>{{ category.kind|capitalize +}} {{+ label|capitalize }}</h1>
-	</div>
-	<div class="enemies">
-		{% for drop in category.drops(label) %}
-			<div class="drop">
-				<div
-					style="background-image: url('../assets/enemies/{{ drop.texture() }}.webp');"
-				></div>
-				<span>{{ drop.from +}}</span>
-				<span>{{+ drop.chance }}%</span>
-			</div>
-		{% endfor %}
+	<div
+		class="category-wrapper"
+		data-mat-kind="{{ category.kind }}"
+		data-mat-type="{{ label }}"
+	>
+		<div class="category">
+			<img
+				src="../assets/materials/{{ category.kind }}/{{ label }}.webp"
+				width="64"
+				height="64"
+			/>
+			<h1>{{ category.kind|capitalize +}} {{+ label|capitalize }}</h1>
+			<button onclick="track(this)">Start tracking</button>
+		</div>
+		<div class="enemies">
+			{% for drop in category.drops(label) %}
+				<div class="drop">
+					<div
+						style="background-image: url('../assets/enemies/{{ drop.texture() }}.webp');"
+					></div>
+					<span>{{ drop.from +}}</span>
+					<span>{{+ drop.chance }}%</span>
+				</div>
+			{% endfor %}
+		</div>
 	</div>
 {% endmacro %}

templates/pages/index.html

@@ -26,4 +26,11 @@
 			<li><a href="./kh3/food-sim.html">Food Simulator</a></li>
 		</ul>
 	{% endif %}
+
+	{% if cfg!(feature = "kh2") %}
+		<h1>Kingdom Hearts II</h1>
+		<ul>
+			<li><a href="./kh2/drops.html">Material Drops</a></li>
+		</ul>
+	{% endif %}
 {% endblock %}

templates/pages/kh2/drops.html

@@ -46,9 +46,76 @@
 			}
 		}
 	</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") %}