added progress bar to download and extraction

This takes a bit of code from #220 to implement percentage progress on
the download, then with the new pseudo element on the Launch button, we
can have a slight progress bar inside the button, along with
percentages, and it all works handy dandy.

This may not be finished, but it's definitely far there.

3 files changed, 128 insertions, 12 deletions

diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index 58b0c18..2b35dc2 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -178,6 +178,7 @@
 	color: white;
 	padding: 20px;
 	font-size: 24px;
+	overflow: hidden;
 	font-weight: bold;
 	margin-top: 100px;
 	margin-bottom: 10px;
@@ -185,6 +186,8 @@
 	background: var(--redbg);
 	transition: 0.2s ease-in-out;
 	filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1));
+
+	--progress: 100%;
 }
 
 .contentContainer .playBtn:hover {
@@ -197,6 +200,19 @@
 	filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.4));
 }
 
+.contentContainer .playBtn:before {
+	top: 0;
+	left: 0;
+	bottom: 0;
+	content: " ";
+	opacity: 0.5;
+	position: absolute;
+	right: var(--progress);
+	filter: brightness(1.5);
+	background: var(--bluebg);
+	transition: 0.2s ease-in-out;
+}
+
 .contentContainer #nsMain .playBtn {
 	background: var(--bluebg);
 }
diff --git a/src/app/main.js b/src/app/main.js
index 44e15ce..3ee95ce 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -198,6 +198,41 @@ function setButtons(state, enable_gamepath_btns) {
 	}
 }
 
+// `percent` should be a number between 0 to 100, if it's `false` it'll
+// reset it back to nothing instantly, with no animatino
+function set_ns_progress(percent) {
+	// reset button progress
+	if (percent === false) {
+		document.querySelector(".contentContainer #nsMain .playBtn")
+			.style.setProperty("--progress", "unset");
+
+		return;
+	}
+
+	percent = parseInt(percent);
+
+	// make sure we're dealing with a number
+	if (isNaN(percent) || typeof percent !== "number") {
+		return false;
+	}
+
+	// limit percent, while this barely has a difference, if you were to
+	// set a very high number, the CSS would then use a very high
+	// number, not great.
+	if (percent > 100) {
+		percent = 100;
+	} else if (percent < 0) {
+		percent = 0;
+	}
+
+	// invert number to it works in the CSS
+	percent = 100 - percent;
+
+	// set the CSS progress variable
+	document.querySelector(".contentContainer #nsMain .playBtn")
+		.style.setProperty("--progress", percent + "%");
+}
+
 ipcRenderer.on("set-buttons", (event, state) => {
 	setButtons(state);
 })
@@ -209,16 +244,30 @@ ipcRenderer.on("gamepath-lost", (event, state) => {
 })
 
 // Frontend part of updating Northstar
-ipcRenderer.on("ns-update-event", (event, key) => {
+ipcRenderer.on("ns-update-event", (event, options) => {
+	let key = options.key;
+	if (typeof options == "string") {
+		key = options;
+	}
+
 	document.getElementById("update").innerText = `(${lang(key)})`;
-	console.log(lang(key));
+
 	switch(key) {
 		case "cli.update.uptodate_short":
 		case "cli.update.no_internet":
 			setButtons(true);
+			set_ns_progress(false);
 			playNsBtn.innerText = lang("gui.launch");
 			break;
 		default:
+			if (options.progress) {
+				set_ns_progress(options.progress);
+			}
+
+			if (options.btn_text) {
+				playNsBtn.innerText = options.btn_text;
+			}
+
 			setButtons(false);
 			break;
 	}
diff --git a/src/modules/update.js b/src/modules/update.js
index c2d10d3..881e02d 100644
--- a/src/modules/update.js
+++ b/src/modules/update.js
@@ -197,8 +197,30 @@ update.northstar = async (force_install) => {
 			return false;
 		}
 
+		let unknown_size = false;
+		let content_length_mb = 0.0;
+		let content_length = res.headers["content-length"];
+
+		// if content_length is `undefined`, we can't get the complete
+		// size (not all servers send the content-length)
+		if (content_length == undefined) {
+			unknown_size = true;
+		} else {
+			content_length = parseInt(content_length);
+
+			if (isNaN(content_length)) {
+				unknown_size = true;
+			} else {
+				content_length_mb = (content_length / 1024 / 1024).toFixed(1);
+			}
+		}
+
 		console.info(lang("cli.update.downloading") + ":", latest_version);
-		ipcMain.emit("ns-update-event", "cli.update.downloading");
+		ipcMain.emit("ns-update-event", {
+			progress: 0,
+			btn_text: "1/2",
+			key: "cli.update.downloading",
+		});
 
 		let tmp = path.dirname(settings.zip);
 
@@ -217,11 +239,26 @@ update.northstar = async (force_install) => {
 		res.pipe(stream);
 
 		let received = 0;
-		// progress messages, we should probably switch this to
-		// percentage instead of how much is downloaded.
 		res.on("data", (chunk) => {
 			received += chunk.length;
-			ipcMain.emit("ns-update-event", lang("gui.update.downloading") + " " + (received / 1024 / 1024).toFixed(1) + "mb");
+			let received_mb = (received / 1024 / 1024).toFixed(1);
+
+			let percentage_str = "";
+			let current_percentage = 0;
+
+			let key = lang("gui.update.downloading") + " " + received_mb + "mb";
+
+			if (unknown_size === false) {
+				key += " / " + content_length_mb + "mb";
+				current_percentage = Math.floor(received_mb / content_length_mb * 100);
+				percentage_str = " - " + current_percentage + "%";
+			}
+
+			ipcMain.emit("ns-update-event", {
+				key: key,
+				progress: current_percentage,
+				btn_text: "1/2" + percentage_str
+			});
 		})
 
 		stream.on("finish", () => {
@@ -229,19 +266,33 @@ update.northstar = async (force_install) => {
 			let extract = fs.createReadStream(settings.zip);
 
 			win.log(lang("gui.update.extracting"));
-			ipcMain.emit("ns-update-event", "gui.update.extracting");
+			ipcMain.emit("ns-update-event", {
+				progress: 0,
+				btn_text: "2/2 - 0%",
+				key: lang("gui.update.extracting")
+			});
+
 			console.ok(lang("cli.update.download_done"));
+
 			// extracts the zip, this is the part where we're actually
 			// installing Northstar.
 			extract.pipe(unzip.Extract({path: settings.gamepath}))
 
-			let max = received;
-			received = 0;
+			let extracted = 0;
+			let size = received;
+			let size_mb = (size / 1024 / 1024).toFixed(1);
 
 			extract.on("data", (chunk) => {
-				received += chunk.length;
-				let percent = Math.floor(received / max * 100);
-				ipcMain.emit("ns-update-event", lang("gui.update.extracting") + " " + percent + "%");
+				extracted += chunk.length;
+				let percent = Math.floor(extracted / size * 100);
+				let extracted_mb = (extracted / 1024 / 1024).toFixed(1);
+
+				ipcMain.emit("ns-update-event", {
+					progress: percent,
+					btn_text: "2/2 - " + percent + "%",
+					key: lang("gui.update.extracting") +
+						" " + extracted_mb + "mb / " + size_mb + "mb"
+				});
 			})
 
 			extract.on("end", () => {