Added a KH1 Synth table

public/scripts/kh1.js

@@ -4,4 +4,69 @@ import {
 	track,
 } from "./modules/common/mat-kind-filter.js";
 
+document.addEventListener("DOMContentLoaded", (event) => {
+	const recipes = document.querySelectorAll(".recipe");
+
+	for (const recipe of recipes) {
+		recipe.checked =
+			localStorage.getItem("kh1-synth-" + recipe.id) === "true" ?? false;
+		update_synth_completions(recipe);
+
+		recipe.addEventListener("input", function () {
+			localStorage.setItem("kh1-synth-" + this.id, this.checked);
+			update_synth_completions(this);
+			calc_total_ingredients();
+		});
+	}
+
+	calc_total_ingredients();
+});
+
+function update_synth_completions(recipe) {
+	if (recipe.checked) {
+		recipe.parentElement.classList.add("complete");
+	} else {
+		recipe.parentElement.classList.remove("complete");
+	}
+}
+
+function calc_total_ingredients() {
+	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 new_amount = Number(needed.get(name)) + amount;
+				needed.set(name, new_amount);
+			} 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];
+		uiList.appendChild(liElem);
+	}
+	matsList.appendChild(uiList);
+}
+
 Object.assign(window, { track });

src/bbs.rs

@@ -71,7 +71,7 @@ impl RuntimeModule for Module {
 		tracing::info!("Generating the BBS melding table template");
 		let melding_template = CommandsTemplate { commands, crystals };
 
-		create_file("./out/bbs", "melding", melding_template.render().unwrap()).unwrap();
+		create_file("./out/bbs", "melding", melding_template).unwrap();
 	}
 
 	fn get_js_hash() -> String {

src/ddd.rs

@@ -55,7 +55,7 @@ impl RuntimeModule for Module {
 		tracing::info!("Generating the DDD ability boards template");
 		let boards_template = AbilitiesTemplate { boards };
 
-		create_file("./out/ddd", "boards", boards_template.render().unwrap()).unwrap();
+		create_file("./out/ddd", "boards", boards_template).unwrap();
 	}
 
 	fn get_js_hash() -> String {

src/kh1.rs

@@ -22,6 +22,12 @@ struct DropsTemplate {
 	pub material_kinds: Vec<String>,
 }
 
+#[derive(Template)]
+#[template(path = "pages/kh1/synth.html")]
+struct SynthTemplate {
+	pub data: SynthesisData,
+}
+
 pub struct Module;
 
 impl RuntimeModule for Module {
@@ -38,7 +44,6 @@ impl RuntimeModule for Module {
 
 		tracing::info!("Loading synthesis data from {}", SYNTHESIS_PATH);
 		let synth = SynthesisData::new(SYNTHESIS_PATH);
-		dbg!(synth.total_amounts());
 
 		tracing::info!("Generating the KH1 drops template");
 		let drops_template = DropsTemplate {
@@ -47,7 +52,12 @@ impl RuntimeModule for Module {
 			material_kinds,
 		};
 
-		create_file("./out/kh1", "drops", drops_template.render().unwrap()).unwrap();
+		create_file("./out/kh1", "drops", drops_template).unwrap();
+
+		tracing::info!("Generating the KH1 synth template");
+		let synth_template = SynthTemplate { data: synth };
+
+		create_file("./out/kh1", "synth", synth_template).unwrap();
 	}
 
 	fn get_js_hash() -> String {

src/kh2.rs

@@ -42,7 +42,7 @@ impl RuntimeModule for Module {
 			material_kinds,
 		};
 
-		create_file("./out/kh2", "drops", drops_template.render().unwrap()).unwrap();
+		create_file("./out/kh2", "drops", drops_template).unwrap();
 	}
 
 	fn get_js_hash() -> String {

src/kh3.rs

@@ -28,7 +28,7 @@ impl RuntimeModule for Module {
 		tracing::info!("Generating the KH3 recipes template");
 		let food_template = RecipesTemplate { recipes };
 
-		create_file("./out/kh3", "food-sim", food_template.render().unwrap()).unwrap();
+		create_file("./out/kh3", "food-sim", food_template).unwrap();
 	}
 
 	fn get_js_hash() -> String {

src/main.rs

@@ -103,8 +103,8 @@ fn hash_file(path: PathBuf, hasher: &mut Hasher) {
 	}
 }
 
-fn create_file(dir: &str, file: &str, buf: String) -> std::io::Result<()> {
+fn create_file(dir: &str, file: &str, buf: impl Template) -> std::io::Result<()> {
 	std::fs::create_dir_all(dir)?;
-	std::fs::write(format!("{}/{}.html", dir, file), buf)?;
+	std::fs::write(format!("{}/{}.html", dir, file), buf.render().unwrap())?;
 	Ok(())
 }

templates/components/kh1/style.css

@@ -0,0 +1,62 @@
+#mats {
+	position: fixed;
+	width: 20%;
+	height: 100%;
+
+	h1 {
+		margin: 0;
+		font-size: 24px;
+		text-align: center;
+	}
+
+	ul {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		height: 90%;
+		list-style: none;
+		line-height: 2;
+	}
+}
+
+#recipes {
+	display: flex;
+	width: calc(80% - 20px);
+	flex-wrap: wrap;
+	margin: 20px 10px;
+	user-select: none;
+	margin-left: auto;
+	margin-right: 0;
+
+	.recipe-wrapper {
+		cursor: pointer;
+		padding: 10px 20px 10px 10px;
+
+		input[type="checkbox"] {
+			display: none;
+		}
+
+		label {
+			display: inline-block;
+			width: 100%;
+			height: 100%;
+			cursor: pointer;
+		}
+
+		img {
+			vertical-align: middle;
+		}
+
+		&:hover {
+			box-shadow: 0px 0px 20px 0px limegreen;
+			scale: 1.1;
+		}
+
+		&.complete {
+			color: limegreen;
+			> * {
+				text-decoration: line-through;
+			}
+		}
+	}
+}

templates/pages/index.html

@@ -38,6 +38,7 @@
 		<h1>Kingdom Hearts I</h1>
 		<ul>
 			<li><a href="./kh1/drops.html">Material Drops</a></li>
+			<li><a href="./kh1/synth.html">Synthesis</a></li>
 		</ul>
 	{% endif %}
 {% endblock %}

templates/pages/kh1/synth.html

@@ -0,0 +1,45 @@
+{% extends "layouts/base.html" %}
+{% import "macros/common/macros.html" as macros %}
+
+{% block title %}KH1 - Sythensis{% endblock %}
+
+{% block head %}
+	<style>{% include "components/kh1/style.css" %}</style>
+	<script
+		type="module"
+		src="/public/scripts/kh1.js?v={{ Module::get_js_hash() }}"
+	></script>
+{% endblock %}
+
+{% block content %}
+	<div id="mats"></div>
+	<div id="recipes">
+		{% for recipe in data.recipes %}
+			<div class="recipe-wrapper">
+				<input
+					type="checkbox"
+					id="recipe-{{ loop.index }}"
+					name="recipe-{{ loop.index }}"
+					class="recipe"
+				/>
+				<label for="recipe-{{ loop.index }}">
+					<img
+						src="../public/assets/materials/generic.webp"
+						width="16"
+						height="16"
+					/>{{ recipe.result }}
+					<ul>
+						{% for item in recipe.items %}
+							<li
+								data-synth-item-name="{{ item.name }}"
+								data-synth-item-amount="{{ item.amount }}"
+							>
+								{{ item.name +}} x{{ item.amount }}
+							</li>
+						{% endfor %}
+					</ul>
+				</label>
+			</div>
+		{% endfor %}
+	</div>
+{% endblock %}