added update button to modlist

I also made mods with updates be placed in the top of the modlist.

4 files changed, 120 insertions, 44 deletions

diff --git a/src/app/css/grid.css b/src/app/css/grid.css
index 6622762..cf86660 100644
--- a/src/app/css/grid.css
+++ b/src/app/css/grid.css
@@ -15,6 +15,13 @@
 	transition: 0.15s ease-in-out;
 }
 
+.grid .el.no-animation,
+.popup .misc.no-animation,
+.popup .loading.no-animation {
+	opacity: 1.0;
+	animation-name: none;
+}
+
 .grid .el, .popup #search,
 .popup #close, .popup .misc button,
 .option .actions select, .option .actions input {
diff --git a/src/app/index.html b/src/app/index.html
index 30bee9e..52ac532 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -227,17 +227,16 @@
 					</div>
 					<div id="nsMods" class="hidden section">
 						<div id="modsdiv" class="grid">
-						<div class="line">
-							<div class="text" id="modcount">%%gui.mods%%</div>
-							<div class="buttons modbtns">
-								<button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
-								<button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button>
-								<button id="installmod" class="bg-blue" onclick="installmod()">%%gui.mods.install%%</button>
-								<button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+							<div class="line">
+								<div class="text" id="modcount">%%gui.mods%%</div>
+								<div class="buttons modbtns">
+									<button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
+									<button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button>
+									<button id="installmod" class="bg-blue" onclick="installmod()">%%gui.mods.install%%</button>
+									<button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+								</div>
 							</div>
 						</div>
-
-						</div>
 					</div>
 					<div id="nsRelease" class="hidden section"></div>
 				</div>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index c859024..ece28bd 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -4,6 +4,8 @@ var packages = [];
 
 var packagecount = 0;
 
+var mod_versions = {};
+
 var Browser = {
 	maxentries: 50,
 	filters: {
@@ -108,6 +110,51 @@ var Browser = {
 		overlay.classList.toggle("shown");
 		browser.classList.toggle("shown");
 	},
+	install: (package_obj, clear_queue = false) => {
+		console.log(package_obj)
+		return installFromURL(
+			package_obj.download || package_obj.versions[0].download_url,
+			package_obj.dependencies || package_obj.versions[0].dependencies,
+			clear_queue, package_obj.owner
+		)
+	},
+	add_pkg_properties: () => {
+		for (let i = 0; i < packages.length; i++) {
+			let properties = packages[i];
+			let normalized = normalize(packages[i].name);
+
+			let has_update = false;
+			let local_version = false;
+			let remote_version = packages[i].versions[0].version_number;
+			remote_version = version.format(remote_version);
+
+			for (let ii = 0; ii < modsobj.all.length; ii++) {
+				let mod = modsobj.all[ii];
+				if (normalize(mod.Name) === normalized) {
+					local_version = version.format(mod.Version);
+					if (version.is_newer(remote_version, local_version)) {
+						has_update = true;
+					}
+				}
+			}
+
+			let install = () => {
+				return Browser.install({...properties});
+			}
+
+			packages[i].install = install;
+			packages[i].has_update = has_update;
+			packages[i].local_version = local_version;
+
+			if (local_version) {
+				mod_versions[normalized] = {
+					install: install,
+					has_update: has_update,
+					local_version: local_version
+				}
+			}
+		}
+	},
 	loadfront: async () => {
 		Browser.loading();
 
@@ -116,6 +163,8 @@ var Browser = {
 		if (packages.length < 1) {
 			packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
 
+			Browser.add_pkg_properties();
+
 			fuse = new Fuse(packages, {
 				keys: ["full_name"]
 			})
@@ -263,6 +312,8 @@ var Browser = {
 	}
 }
 
+setInterval(Browser.add_pkg_properties, 1500);
+
 if (navigator.onLine) {
 	Browser.loadfront();
 }
@@ -290,6 +341,7 @@ function BrowserElFromObj(obj) {
 	let pkg = {...obj, ...obj.versions[0]};
 
 	new BrowserEl({
+		pkg: pkg,
 		title: pkg.name,
 		image: pkg.icon,
 		author: pkg.owner,
@@ -329,31 +381,14 @@ function BrowserEl(properties) {
 		normalized_mods.push(normalize(mods_list[i].Name));
 	}
 
-	if (normalized_mods.includes(normalize(properties.title))) {
+	if (properties.pkg.local_version) {
 		installstr = lang("gui.browser.reinstall");
 
-		if (version.is_newer(properties.version, modsobj.all[i].Version)) {
+		if (properties.pkg.has_update) {
 			installstr = lang("gui.browser.update");
 		}
-	} else {
-		for (let i = 0; i < modsobj.all.length; i++) {
-			let title = normalize(properties.title);
-			let folder = normalize(modsobj.all[i].FolderName);
-			let manifestname = null;
-			if (modsobj.all[i].ManifestName) {
-				manifestname = normalize(modsobj.all[i].ManifestName);
-			}
-
-			if (title.includes(folder) || title.includes(manifestname)) {
-				installstr = lang("gui.browser.reinstall");
-
-				if (version.is_newer(properties.version, modsobj.all[i].Version)) {
-					installstr = lang("gui.browser.update");
-				}
-			}
-		}
 	}
-	
+
 	let entry = document.createElement("div");
 	entry.classList.add("el");
 	entry.id = `mod-${normalize(properties.title)}`;
@@ -374,11 +409,7 @@ function BrowserEl(properties) {
 	`
 
 	entry.querySelector("button.install").addEventListener("click", () => {
-		installFromURL(
-			properties.download,
-			JSON.stringify(properties.dependencies),
-			true, properties.author
-		)
+		Browser.install(properties);
 	})
 
 	browserEntries.appendChild(entry);
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index a2e4492..c80221b 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -35,6 +35,7 @@ mods.load = (mods_obj) => {
 				<div class="title">${mod.Name}</div>
 				<div class="description">${mod.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}')">Remove</button>
 				<button class="visual">${mod.Version}</button>
 				<button class="visual">by ${mod.Author || "Unknown"}</button>
@@ -61,9 +62,47 @@ mods.load = (mods_obj) => {
 	}
 
 	let mod_els = document.querySelectorAll("#modsdiv .el");
+	let mod_update_els = [];
+
 	for (let i = 0; i < mod_els.length; i++) {
+		let update_btn = mod_els[i].querySelector(".update");
+
+		if (update_btn && update_btn.style.display != "none") {
+			mod_update_els.push(mod_els[i].id);
+		} else {
+			break;
+		}
+	}
+
+	for (let i = 0; i < mod_els.length; i++) {
+		let mod = mod_els[i].id.replace(/^mod-list-/, "");
+
 		if (! normalized_names.includes(mod_els[i].id)) {
 			mod_els[i].remove();
+			return;
+		}
+
+		if (mod_versions[mod]
+			&& mod_versions[mod].has_update) {
+
+			mod_els[i].querySelector(".update").style.display = null;
+
+			mod_els[i].querySelector(".update").setAttribute(
+				"onclick", `mod_versions["${mod}"].install()`
+			)
+
+			if (mod_update_els.includes(mod_els[i].id)) {
+				continue;
+			}
+
+			let mod_el = mod_els[i].cloneNode(true);
+
+			mod_el.classList.add("no-animation");
+			
+			mod_els[i].remove();
+			modsdiv.querySelector(".line").after(mod_el);
+		} else {
+			mod_els[i].querySelector(".update").style.display = "none";
 		}
 	}
 }
@@ -83,15 +122,15 @@ mods.remove = (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;
-				}
-			}
+	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);
+	ipcRenderer.send("toggle-mod", mod);
 }