Implemented item/block highlighting. Fixes #17.

Matriks404 · Feb 24, 2024 · c17d904 · c17d904
1 parent 35996bb
commit c17d904
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git 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
@@ -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);
+		}
 	});
 }