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.

2 files changed, 67 insertions, 2 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;
 	}