From 416679e95792872b8f1e994aee4ea708ce4a1293 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Tue, 7 Feb 2023 21:44:21 +0100
Subject: added icons to modlist

---
 src/app/css/grid.css  |  4 ++++
 src/app/js/browser.js |  4 +++-
 src/app/js/mods.js    | 27 ++++++++++++++++++++-------
 3 files changed, 27 insertions(+), 8 deletions(-)

(limited to 'src/app')

diff --git a/src/app/css/grid.css b/src/app/css/grid.css
index c4c7c74..2533fea 100644
--- a/src/app/css/grid.css
+++ b/src/app/css/grid.css
@@ -132,6 +132,10 @@
 	padding: var(--padding) 0px;
 }
 
+.grid .el.has-icon .text {
+	width: calc(100% - var(--height));
+}
+
 .grid .el .title, .grid .el .description {
 	height: 1.2em;
 	overflow: hidden;
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index 4f8b68a..c35d31a 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -150,7 +150,9 @@ var Browser = {
 				mod_versions[normalized] = {
 					install: install,
 					has_update: has_update,
-					local_version: local_version
+					local_version: local_version,
+
+					package: packages[i]
 				}
 			}
 		}
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index fd900a2..19c5bda 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -6,7 +6,6 @@ mods.load = (mods_obj) => {
 	let normalized_names = [];
 	
 	let set_mod = (mod) => {
-		let image_url = "";
 		let normalized_name = "mod-list-" + normalize(mod.Name);
 
 		normalized_names.push(normalized_name);
@@ -28,8 +27,8 @@ mods.load = (mods_obj) => {
 
 		div.innerHTML += `
 			<div class="image">
-				<img src="${image_url}">
-				<img class="blur" src="${image_url}">
+				<img src="">
+				<img class="blur" src="">
 			</div>
 			<div class="text">
 				<div class="title">${mod.Name}</div>
@@ -42,7 +41,7 @@ mods.load = (mods_obj) => {
 					${lang("gui.mods.remove")}
 				</button>
 
-				<button class="visual">${mod.Version}</button>
+				<button class="visual">${version.format(mod.Version)}</button>
 				<button class="visual">
 					${lang("gui.browser.madeby")}
 					${mod.Author || lang("gui.mods.unknown_author")}
@@ -58,9 +57,7 @@ mods.load = (mods_obj) => {
 			mods.toggle(mod.Name);
 		})
 
-		if (! image_url) {
-			div.querySelector(".image").remove();
-		}
+		div.querySelector(".image").style.display = "none";
 
 		modsdiv.append(div);
 	}
@@ -90,6 +87,22 @@ mods.load = (mods_obj) => {
 			return;
 		}
 
+		if (mod_versions[mod]) {
+			let image_url = mod_versions[mod].package.versions[0].icon;
+
+			let image_container = mod_els[i].querySelector(".image");
+			let image_el = image_container.querySelector("img")
+			let image_blur_el = image_container.querySelector("img.blur")
+
+			if (image_url && ! image_el.getAttribute("src")) {
+				image_container.style.display = null;
+				image_el.src = image_url;
+				image_blur_el.src = image_url;
+
+				image_container.parentElement.classList.add("has-icon");
+			}
+		}
+
 		if (mod_versions[mod]
 			&& mod_versions[mod].has_update) {
 
-- 
cgit v1.2.3