Stats diagram for KH3 food

src/kh3.rs

@@ -24,9 +24,9 @@ struct Recipe {
 impl Recipe {
 	fn stats(&self, is_plus: &bool) -> &FoodStats {
 		if *is_plus {
-			&self.normal
-		} else {
 			&self.plus
+		} else {
+			&self.normal
 		}
 	}
 }

templates/pages/kh3-recipes.html

@@ -6,6 +6,8 @@
 	<style>
 		#content > h1 {
 			text-align: center;
+			width: 80%;
+			margin-left: auto;
 		}
 
 		.recipes {
@@ -15,6 +17,9 @@
 			justify-content: center;
 			align-items: baseline;
 			gap: 16px;
+			width: 80%;
+			margin-right: 0;
+			margin-left: auto;
 		}
 
 		.recipe {
@@ -47,13 +52,30 @@
 				}
 			}
 		}
+
+		#stats {
+			position: fixed;
+		}
+
+		svg > text {
+			stroke-width: 0;
+			fill: white;
+		}
+
+		#hearty-meal-wrapper {
+			text-align: center;
+			width: 80%;
+		}
 	</style>
 	<script>
 		let globalStats = { str: 0, mag: 0, def: 0, hp: 0, mp: 0 };
 		const types = ["starters", "soups", "fish", "meat", "deserts"];
 		let typeItem = [];
 		let hasSelection = [false, false, false, false, false];
+
 		document.addEventListener("DOMContentLoaded", (event) => {
+			updateStats();
+
 			types.forEach(function (type, typeIdx) {
 				const recipes = document.querySelectorAll(
 					"div.recipes." + type + " .recipe",
@@ -71,25 +93,62 @@
 							} else {
 								hasSelection[typeIdx] = false;
 								unselectRecipe(typeIdx);
+								updateStats();
 							}
 						}
 					});
 				});
 			});
 
+			document
+				.getElementById("hearty-meal")
+				.addEventListener("click", function () {
+					console.log(this);
+					if (this.checked) {
+						let bonusStr = Math.ceil(globalStats.str * 0.25);
+						let bonusMag = Math.ceil(globalStats.mag * 0.25);
+						let bonusDef = Math.ceil(globalStats.def * 0.25);
+						let bonusHP = Math.ceil(globalStats.hp * 0.25);
+						let bonusMP = Math.ceil(globalStats.mp * 0.25);
+
+						let stats = {
+							str: bonusStr,
+							mag: bonusMag,
+							def: bonusDef,
+							hp: bonusHP,
+							mp: bonusMP,
+						};
+
+						addStats(stats);
+					} else {
+						let bonusStr = Math.ceil(globalStats.str * 0.2);
+						let bonusMag = Math.ceil(globalStats.mag * 0.2);
+						let bonusDef = Math.ceil(globalStats.def * 0.2);
+						let bonusHP = Math.ceil(globalStats.hp * 0.2);
+						let bonusMP = Math.ceil(globalStats.mp * 0.2);
+
+						let stats = {
+							str: bonusStr,
+							mag: bonusMag,
+							def: bonusDef,
+							hp: bonusHP,
+							mp: bonusMP,
+						};
+
+						removeStats(stats);
+						updateStats();
+					}
+				});
+		});
+
 		function unselectRecipe(index) {
 			typeItem[index].style["box-shadow"] =
 				"0px 0px 10px rgba(0, 0, 0, 0.4)";
+			let stats = JSON.parse(typeItem[index].dataset["stats"]);
+			removeStats(stats);
 		}
 
 		function selectRecipe(item, index) {
-				if (typeItem[index] != undefined) {
-					let prevStats = JSON.parse(
-						typeItem[index].dataset["stats"],
-					);
-					removeStats(prevStats);
-				}
-
 			typeItem[index] = item;
 			item.style["box-shadow"] = "0px 0px 10px rgba(0, 255, 0, 0.8)";
 
@@ -114,16 +173,129 @@
 			globalStats.mp -= stats.mp;
 		}
 
+		const STR_MAX = 5;
+		const MAG_MAX = 5;
+		const DEF_MAX = 5;
+		const HP_MAX = 63;
+		const MP_MAX = 50;
+
+		const CENTER_POINT = [150, 120];
+
+		const STR_MAX_POINT = [150, 20];
+		const MAG_MAX_POINT = [50, 100];
+		const DEF_MAX_POINT = [250, 100];
+		const HP_MAX_POINT = [210, 210];
+		const MP_MAX_POINT = [90, 210];
+
 		function updateStats() {
-				const elem = document.getElementById("stats");
+			let strProgress = globalStats.str / STR_MAX;
-				console.log(elem);
+			let magProgress = globalStats.mag / MAG_MAX;
+			let defProgress = globalStats.def / DEF_MAX;
+			let hpProgress = globalStats.hp / HP_MAX;
+			let mpProgress = globalStats.mp / MP_MAX;
+
+			let poly = document.getElementById("stats-mod");
+			updatePoint(
+				poly,
+				0,
+				STR_MAX_POINT,
+				strProgress,
+				globalStats.str,
+				"stat-str",
+			);
+			updatePoint(
+				poly,
+				4,
+				MAG_MAX_POINT,
+				magProgress,
+				globalStats.mag,
+				"stat-mag",
+			);
+			updatePoint(
+				poly,
+				1,
+				DEF_MAX_POINT,
+				defProgress,
+				globalStats.def,
+				"stat-def",
+			);
+			updatePoint(
+				poly,
+				2,
+				HP_MAX_POINT,
+				hpProgress,
+				globalStats.hp,
+				"stat-hp",
+			);
+			updatePoint(
+				poly,
+				3,
+				MP_MAX_POINT,
+				mpProgress,
+				globalStats.mp,
+				"stat-mp",
+			);
+		}
+
+		function updatePoint(poly, statId, max, progress, value, statElem) {
+			poly.points[statId].x =
+				CENTER_POINT[0] + (max[0] - CENTER_POINT[0]) * progress;
+			poly.points[statId].y =
+				CENTER_POINT[1] + (max[1] - CENTER_POINT[1]) * progress;
+
+			document.getElementById(statElem).innerHTML = "+" + value;
 		}
-		});
 	</script>
 {% endblock %}
 
 {% block content %}
-	<div id="stats"></div>
+	<div id="stats">
+		<svg width="360" height="430">
+			{# clockwise points #}
+			<polygon
+				points="150,20 250,100 210,210 90,210 50,100"
+				style="fill:gray;stroke:black;stroke-width:3"
+			/>
+			<polygon
+				id="stats-mod"
+				points="150,20 250,100 210,210 90,210 50,100"
+				style="fill:rgba(152, 255, 224, 0.8)"
+			/>
+			<text x="134" y="15">STR</text>
+			<text x="5" y="100">MAG</text>
+			<text x="255" y="100">DEF</text>
+			<text x="210" y="230">HP</text>
+			<text x="60" y="230">MP</text>
+
+			<text x="100" y="280">Strength</text>
+			<text x="175" y="280" id="stat-str">+0</text>
+
+			<text x="100" y="310">Magic</text>
+			<text x="155" y="310" id="stat-mag">+0</text>
+
+			<text x="100" y="340">Defense</text>
+			<text x="170" y="340" id="stat-def">+0</text>
+
+			<text x="100" y="370">HP</text>
+			<text x="130" y="370" id="stat-hp">+0</text>
+
+			<text x="100" y="400">MP</text>
+			<text x="130" y="400" id="stat-mp">+0</text>
+
+			<line x1="150" y1="120" x2="150" y2="20" stroke="black" />
+			<line x1="150" y1="120" x2="50" y2="100" stroke="black" />
+			<line x1="150" y1="120" x2="250" y2="100" stroke="black" />
+			<line x1="150" y1="120" x2="210" y2="210" stroke="black" />
+			<line x1="150" y1="120" x2="90" y2="210" stroke="black" />
+
+			Sorry, your browser does not support inline SVG.
+		</svg>
+
+		<div id="hearty-meal-wrapper">
+			<input type="checkbox" id="hearty-meal" name="hearty-meal" />
+			<label for="hearty-meal">Hearty Meal</label>
+		</div>
+	</div>
 
 	<h1>Starters</h1>
 	<div class="recipes starters">