Added KH3 synth and made the js and css common instead of kh1 specific

public/styles/common/synth.css

@@ -1,6 +1,6 @@
 #mats {
 	position: fixed;
-	width: 20%;
+	width: 18%;
 	height: 100%;
 
 	h1 {
@@ -12,11 +12,11 @@
 	ul {
 		display: flex;
 		flex-direction: column;
-		flex-wrap: wrap;
 		height: 90%;
 		list-style: none;
 		line-height: 2;
 		user-select: none;
+		overflow: scroll;
 
 		li {
 			cursor: pointer;

src/kh3.rs

@@ -5,7 +5,7 @@ use pro_codes::{ProCode, ProCodeFight, ProCodeFights, ProCodes};
 
 use crate::{
 	RuntimeModule,
-	common::{Game, drops::Drops, enemy::Enemy},
+	common::{Game, drops::Drops, enemy::Enemy, synthesis::Synthesis},
 	create_file,
 };
 
@@ -18,6 +18,7 @@ const RECIPES_PATH: &str = "./input/kh3/recipes.toml";
 const INGREDIENTS_PATH: &str = "./input/kh3/ingredients";
 const PRO_CODES_PATH: &str = "./input/kh3/pro-codes/codes.toml";
 const PRO_CODE_FIGHTS_PATH: &str = "./input/kh3/pro-codes/fights.toml";
+const SYNTHESIS_PATH: &str = "./input/kh3/synthesis.toml";
 
 #[derive(Template)]
 #[template(path = "pages/kh3/drops.html")]
@@ -44,6 +45,12 @@ struct ProCodesTemplate {
 	pub fights: Vec<ProCodeFight>,
 }
 
+#[derive(Template)]
+#[template(path = "pages/kh3/synth.html")]
+struct SynthTemplate {
+	pub data: Synthesis,
+}
+
 pub struct Module;
 
 impl RuntimeModule for Module {
@@ -65,6 +72,9 @@ impl RuntimeModule for Module {
 		let pro_code_fights_str = std::fs::read_to_string(PRO_CODE_FIGHTS_PATH).unwrap();
 		let pro_code_fights = toml::from_str::<ProCodeFights>(&pro_code_fights_str).unwrap();
 
+		tracing::info!("Loading KH3 synthesis data from {}", SYNTHESIS_PATH);
+		let synth = Synthesis::new(SYNTHESIS_PATH);
+
 		tracing::info!("Generating KH3 drops template");
 		let drops_template = DropsTemplate { data: drops };
 		create_file("./out/kh3", "drops", drops_template).unwrap();
@@ -83,5 +93,9 @@ impl RuntimeModule for Module {
 			fights: pro_code_fights.fights,
 		};
 		create_file("./out/kh3", "pro-codes-sim", pro_codes_template).unwrap();
+
+		tracing::info!("Generating KH3 synth template");
+		let synth_template = SynthTemplate { data: synth };
+		create_file("./out/kh3", "synth", synth_template).unwrap();
 	}
 }

templates/components/common/synth.html

@@ -0,0 +1,30 @@
+<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>

templates/pages/index.html

@@ -10,6 +10,7 @@
 		<h1>Kingdom Hearts III</h1>
 		<ul>
 			<li><a href="./kh3/drops.html">Material Drops</a></li>
+			<li><a href="./kh3/synth.html">Synthesis</a></li>
 			<li><a href="./kh3/ingredients.html">Ingredients</a></li>
 			<li><a href="./kh3/food-sim.html">Food Simulator</a></li>
 			<li><a href="./kh3/pro-codes-sim.html">Pro Codes Simulator</a></li>

templates/pages/kh1/synth.html

@@ -3,42 +3,13 @@
 {% block title %}KH1FM - Sythensis{% endblock %}
 
 {% block head %}
-	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/kh1/synth.css") }}"></link>
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/common/synth.css") }}"></link>
 	<script
 		type="module"
-		src="{{ crate::find_hash("/public/scripts/kh1/synth.js") }}"
+		src="{{ crate::find_hash("/public/scripts/common/synth.js") }}"
 	></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>
+	{% include "components/common/synth.html" %}
 {% endblock %}

templates/pages/kh3/synth.html

@@ -0,0 +1,15 @@
+{% extends "layouts/base.html" %}
+
+{% block title %}KH1FM - Sythensis{% endblock %}
+
+{% block head %}
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/common/synth.css") }}"></link>
+	<script
+		type="module"
+		src="{{ crate::find_hash("/public/scripts/common/synth.js") }}"
+	></script>
+{% endblock %}
+
+{% block content %}
+	{% include "components/common/synth.html" %}
+{% endblock %}