initial draft for redesign of the mod list

The current design for the installed mods is not exactly the best. And
it has been due for a redesign for quite a while, I'm finally starting
work on this.

2 files changed, 87 insertions, 1 deletions

diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index dee263b..cfd0c03 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -319,8 +319,13 @@ function BrowserEl(properties) {
 	}
 
 	let installstr = lang("gui.browser.install");
+	let normalized_mods = [];
 
-	if (normalize(modsdiv.innerText.split("\n")).includes(normalize(properties.title))) {
+	for (let i = 0; i < modsobj.all; i++) {
+		normalized_mods.push(normalize(mods_list[i].Name));
+	}
+
+	if (normalized_mods.includes(normalize(properties.title))) {
 		installstr = lang("gui.browser.reinstall");
 
 		for (let i = 0; i < modsobj.all.length; i++) {
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
new file mode 100644
index 0000000..39e904e
--- /dev/null
+++ b/src/app/js/mods.js
@@ -0,0 +1,81 @@
+var mods = {};
+
+mods.load = (mods_obj) => {
+	modcount.innerHTML = `${lang("gui.mods.count")} ${mods_obj.all.length}`;
+
+	let normalized_names = [];
+	
+	let set_mod = (mod) => {
+		let image_url = "";
+		let normalized_name = "mod-list-" + normalize(mod.Name);
+
+		normalized_names.push(normalized_name);
+
+		if (document.getElementById(normalized_name)) {
+			return;
+		}
+
+		let div = document.createElement("div");
+		div.classList.add("el");
+		div.id = normalized_name;
+
+		div.innerHTML += `
+			<div class="image">
+				<img src="${image_url}">
+				<img class="blur" src="${image_url}">
+			</div>
+			<div class="text">
+				<div class="title">${mod.Name}</div>
+				<div class="description">${mod.Description}</div>
+				<button class="red" onclick="mods.remove('${mod.Name}')">Remove</button>
+				<button class="visual">${mod.Version}</button>
+				<button class="visual">by ${mod.Author || "Unknown"}</button>
+			</div>
+		`;
+
+		if (! image_url) {
+			div.querySelector(".image").remove();
+		}
+
+		modsdiv.append(div);
+	}
+
+	for (let i = 0; i < mods_obj.all.length; i++) {
+		set_mod(mods_obj.all[i]);
+	}
+
+	let mod_els = document.querySelectorAll("#modsdiv .el");
+	for (let i = 0; i < mod_els.length; i++) {
+		if (! normalized_names.includes(mod_els[i].id)) {
+			mod_els[i].remove();
+		}
+	}
+}
+
+mods.remove = (mod) => {
+	if (mod.match(/^northstar\./)) {
+		if (! confirm(lang("gui.mods.required.confirm"))) {
+			return;
+		}
+	} else if (mod == "allmods") {
+		if (! confirm(lang("gui.mods.removeall.confirm"))) {
+			return;
+		}
+	}
+
+	ipcRenderer.send("remove-mod", mod);
+}
+
+mods.toggle = (mod) => {
+			if (mod.match(/^Northstar\./)) {
+				if (! confirm(lang("gui.mods.required.confirm"))) {
+					return;
+				}
+			} else if (mod == "allmods") {
+				if (! confirm(lang("gui.mods.toggleall.confirm"))) {
+					return;
+				}
+			}
+
+			ipcRenderer.send("toggle-mod", mod);
+}