Correcting some input data

input/kh2/drops/bright.toml

@@ -29,7 +29,7 @@ from = "Cannon Gun"
 chance = 3
 
 [[stone]]
-from = "Drilelr Mole"
+from = "Driller Mole"
 chance = 4
 
 [[stone]]

input/kh2/drops/frost.toml

@@ -5,7 +5,7 @@ from = "Hook Bat"
 chance = 6
 
 [[shard]]
-from = "Lance Solider"
+from = "Lance Soldier"
 chance = 10
 
 [[stone]]

src/kh2.rs

@@ -17,10 +17,10 @@ pub struct MaterialDrops {
 impl MaterialDrops {
 	fn drops(&self, kind: &str) -> &[EnemyDrop] {
 		match kind {
-			x if x == "shard" => &self.shard,
-			x if x == "stone" => &self.stone,
-			x if x == "gem" => &self.gem,
-			x if x == "crystal" => &self.crystal,
+			"shard" => &self.shard,
+			"stone" => &self.stone,
+			"gem" => &self.gem,
+			"crystal" => &self.crystal,
 			_ => &self.shard,
 		}
 	}
@@ -32,6 +32,12 @@ pub struct EnemyDrop {
 	chance: u8,
 }
 
+impl EnemyDrop {
+	fn texture(&self) -> String {
+		self.from.replace(" ", "_").to_lowercase()
+	}
+}
+
 #[derive(Template)]
 #[template(path = "pages/kh2/drops.html")]
 struct DropsTemplate {

templates/macros/kh2/macros.html

@@ -10,12 +10,9 @@
 	<div class="enemies">
 		{% for drop in category.drops(label) %}
 			<div class="drop">
-				<img
-					src="../assets/enemies/{{ drop.from|lower }}.webp"
-					width="256"
-					height="256"
-					onerror="this.src = '../assets/enemies/unknown.webp'"
-				/>
+				<div
+					style="background-image: url('../assets/enemies/{{ drop.texture() }}.webp');"
+				></div>
 				<span>{{ drop.from +}}</span>
 				<span>{{+ drop.chance }}%</span>
 			</div>

templates/pages/kh2/drops.html

@@ -18,10 +18,31 @@
 				flex-direction: column;
 				text-align: center;
 				margin-right: 8px;
-
-				span {
+				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>