From c17d9045c2d29383bbbba2b3bfd56e666c2db526 Mon Sep 17 00:00:00 2001
From: Marcin Kralka <marcink96@gmail.com>
Date: Sat, 24 Feb 2024 18:15:30 +0100
Subject: [PATCH] Implemented item/block highlighting. Fixes #17.

---
 scss/main.scss | 19 ++++++++++++++++++-
 site/script.js | 20 +++++++++++---------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/scss/main.scss b/scss/main.scss
index 60eb941..528e0be 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -24,6 +24,10 @@ img {
 	image-rendering: pixelated;
 }
 
+//img:hover {
+//	filter: contrast(0.5) brightness(1.5);
+//}
+
 main > fieldset {
 	width: 324px;
 }
@@ -248,12 +252,25 @@ p {
 }
 
 .entry {
-	margin: 0 2px 3px 2px;
+	margin: 0 1px 3px 1px;
+	padding: 0 1px 0 1px;
 
 	width: 32px;
 	height: 48px;
 }
 
+.entry:hover {
+	background-color: #c5c5c5;
+
+	outline: 1px solid #4b4b4b;
+}
+
+.field {
+	width: 32px;
+	height: 32px;
+}
+
+
 .fieldset-content {
 	display: flex;
 
diff --git a/site/script.js b/site/script.js
index 7f616b3..9b1ae48 100644
--- a/site/script.js
+++ b/site/script.js
@@ -205,9 +205,9 @@ function loadEntries(entries, el, entriesName, hasUnknownIds) {
 			damageElement.innerHTML = damageValue;
 		}
 
-		var elementWithTooltip = document.createElement('div');
-		elementWithTooltip.className = 'with-tooltip';
-		entryElement.appendChild(elementWithTooltip);
+		var fieldElement = document.createElement('div');
+		fieldElement.className = 'field';
+		entryElement.appendChild(fieldElement);
 
 		var img = document.createElement('img');
 
@@ -217,16 +217,18 @@ function loadEntries(entries, el, entriesName, hasUnknownIds) {
 			img.src = 'images/unknown.png';
 		}
 
-		elementWithTooltip.appendChild(img);
+		fieldElement.appendChild(img);
 
-		var tooltip = document.createElement('div');
-		tooltip.className = 'tooltip';
+		if (entry.name) {
+			entryElement.className += ' with-tooltip'
 
-		var name = entry.name ? entry.name : "[NO NAME]";
+			var tooltip = document.createElement('div');
+			tooltip.className = 'tooltip';
 
-		tooltip.innerHTML = name;
+			tooltip.innerHTML = entry.name;
 
-		elementWithTooltip.appendChild(tooltip);
+			entryElement.appendChild(tooltip);
+		}
 	});
 }