unify all mods of a package into one

This means instead of showing the invididual mods inside a package, we
simply show 1 mod/package, we then use the name, description, version
and so forth from the `manifest.json` inside the package folder. Further
we now also support a local `icon.png` file, instead of relying on
remotely stored icons and trying to match names against each other.

2 files changed, 81 insertions, 17 deletions

diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index af430e5..2df7205 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -6,7 +6,12 @@ mods.load = (mods_obj) => {
 	let normalized_names = [];
 	
 	let set_mod = (mod) => {
-		let normalized_name = "mod-list-" + normalize(mod.name);
+		let name = mod.name;
+		if (mod.package) {
+			name = mod.package.package_name;
+		}
+
+		let normalized_name = "mod-list-" + normalize(name);
 
 		normalized_names.push(normalized_name);
 
@@ -25,23 +30,38 @@ mods.load = (mods_obj) => {
 		div.classList.add("el");
 		div.id = normalized_name;
 
+		let mod_details = {
+			name: mod.name,
+			version: mod.version,
+			description: mod.description
+		}
+
+		if (mod.package) {
+			mod_details = {
+				image: mod.package.icon,
+				name: mod.package.manifest.name,
+				version: mod.package.manifest.version_number,
+				description: mod.package.manifest.description
+			}
+		}
+
 		div.innerHTML += `
 			<div class="image">
-				<img src="">
+				<img src="${mod_details.image || ""}">
 				<img class="blur" src="">
 			</div>
 			<div class="text">
-				<div class="title">${mod.name}</div>
-				<div class="description">${mod.description}</div>
+				<div class="title">${mod_details.name}</div>
+				<div class="description">${mod_details.description}</div>
 				<button class="switch on orange"></button>
 				<button class="update bg-blue">
 					${lang("gui.browser.update")}
 				</button>
-				<button class="bg-red" onclick="mods.remove('${mod.name}')">
+				<button class="bg-red remove">
 					${lang("gui.mods.remove")}
 				</button>
 
-				<button class="visual">${version.format(mod.version)}</button>
+				<button class="visual">${version.format(mod_details.version)}</button>
 				<button class="visual">
 					${lang("gui.browser.madeby")}
 					${mod.author || lang("gui.mods.unknown_author")}
@@ -49,12 +69,28 @@ mods.load = (mods_obj) => {
 			</div>
 		`;
 
+		div.querySelector(".remove").addEventListener("click", () => {
+			if (! mod.package) {
+				return mods.remove(mod.name);
+			}
+
+			for (let i = 0; i < mod.packaged_mods.length; i++) {
+				mods.remove(mod.packaged_mods[i]);
+			}
+		})
+
 		if (mod.disabled) {
 			div.querySelector(".switch").classList.remove("on");
 		}
 
 		div.querySelector(".switch").addEventListener("click", () => {
-			mods.toggle(mod.name);
+			if (! mod.package) {
+				return mods.toggle(mod.name);
+			}
+
+			for (let i = 0; i < mod.packaged_mods.length; i++) {
+				mods.toggle(mod.packaged_mods[i]);
+			}
 		})
 
 		div.querySelector(".image").style.display = "none";
@@ -87,20 +123,24 @@ mods.load = (mods_obj) => {
 			return;
 		}
 
+
+		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 (mod_versions[mod]) {
-			let image_url = mod_versions[mod].package.versions[0].icon;
+			image_el.src = 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_el.getAttribute("src") &&
+			! image_container.parentElement.classList.contains("has-icon")) {
 
-			if (image_url && ! image_el.getAttribute("src")) {
-				image_container.style.display = null;
-				image_el.src = image_url;
-				image_blur_el.src = image_url;
+			let image_src = image_el.getAttribute("src");
 
-				image_container.parentElement.classList.add("has-icon");
-			}
+			image_blur_el.src = image_src;
+			image_container.style.display = null;
+
+			image_container.parentElement.classList.add("has-icon");
 		}
 
 		if (mod_versions[mod]
diff --git a/src/modules/mods.js b/src/modules/mods.js
index e3ff990..86c78f1 100644
--- a/src/modules/mods.js
+++ b/src/modules/mods.js
@@ -54,7 +54,9 @@ mods.list = () => {
 	}
 
 	let get_in_dir = (dir, package_obj) => {
+		let packaged_mods = [];
 		let files = fs.readdirSync(dir);
+
 		files.forEach((file) => {
 			// return early if `file` isn't a folder
 			if (! fs.statSync(path.join(dir, file)).isDirectory()) {
@@ -84,6 +86,7 @@ mods.list = () => {
 			}
 
 			if (obj.package) {
+				packaged_mods.push(obj.name);
 				obj.author = obj.package.author;
 			}
 
@@ -114,6 +117,27 @@ mods.list = () => {
 				enabled.push(obj);
 			}
 		})
+
+		if (packaged_mods.length == 0) {
+			return;
+		}
+
+		let add_packaged_mods = (mods_array) => {
+			for (let i = 0; i < mods_array.length; i++) {
+				if (mods_array[i].package.package_name !==
+					package_obj.package_name) {
+
+					continue;
+				}
+
+				mods_array[i].packaged_mods = packaged_mods;
+			}
+
+			return mods_array;
+		}
+
+		enabled = add_packaged_mods(enabled);
+		disbled = add_packaged_mods(disabled);
 	}
 
 	// get mods in `mods` folder