From 3a2f9fac72d141f6a5e2e56133a5ae77d6972680 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sun, 20 Feb 2022 20:31:50 +0100
Subject: [PATCH 1/9] initial work on settings page

This only has the actual UI for the settings page in place, no actual
functionality has been implemented yet. I made several changes not
directly related to the settings page, such as changes the CSS color
variables to use RGB, as to easily add an alpha channel to colors. I
also changed the way the Browser is toggled in some respects and many
other changes that makes it easy to re-use the browser code to create
the settings UI
---
 src/app/browser.js         |   4 --
 src/app/icons/apply.png    | Bin 0 -> 2555 bytes
 src/app/icons/settings.png | Bin 0 -> 2496 bytes
 src/app/index.html         |  50 +++++++++++++-
 src/app/main.css           | 134 +++++++++++++++++++++++++++----------
 src/app/main.js            |   7 ++
 src/app/settings.js        |  46 +++++++++++++
 7 files changed, 198 insertions(+), 43 deletions(-)
 create mode 100644 src/app/icons/apply.png
 create mode 100644 src/app/icons/settings.png
 create mode 100644 src/app/settings.js

diff --git a/src/app/browser.js b/src/app/browser.js
index ded12fa4..275e16e5 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -104,10 +104,6 @@ var Browser = {
 	}
 }
 
-document.body.addEventListener("keyup", (e) => {
-	if (e.key == "Escape") {Browser.toggle(false)}
-})
-
 function BrowserElFromObj(obj) {
 	let pkg = {...obj, ...obj.versions[0]};
 
diff --git a/src/app/icons/apply.png b/src/app/icons/apply.png
new file mode 100644
index 0000000000000000000000000000000000000000..915f809f6ee92d3f9cf7919bee624ec7044e3465
GIT binary patch
literal 2555
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
R&$|Es002ovPDHLkV1kI7z4-tD

literal 0
HcmV?d00001

diff --git a/src/app/icons/settings.png b/src/app/icons/settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f7715ab1a2d38a8cca4d47b6961a7b4b5a78238
GIT binary patch
literal 2496
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
KMNUMnLSTY0JDiCC

literal 0
HcmV?d00001

diff --git a/src/app/index.html b/src/app/index.html
index b5fc8cb5..5ca9306e 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -10,6 +10,7 @@
 		<div id="toasts"></div>
 
 		<div id="winbtns">
+			<div id="settings" onclick="Settings.toggle(true)"></div>
 			<div id="minimize" onclick="ipcRenderer.send('minimize')"></div>
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
@@ -21,9 +22,51 @@
 			</div>
 		</div>
 
-		<div id="overlay" onclick="Browser.toggle(false)"></div>
-		<div id="browser">
-			<div id="misc">
+		<div id="overlay" onclick="Browser.toggle(false);Settings.toggle(false)"></div>
+		<div class="popup" id="options">
+			<div class="misc">
+				<div style="width:100%"></div>
+				<button id="apply" onclick="Settings.apply()">
+					<img src="icons/apply.png">
+					Save
+				</button>
+				<button id="close" onclick="Settings.toggle(false)">
+					<img src="icons/close.png">
+					Discard
+				</button>
+			</div>
+			<div class="options">
+				<h2>Northstar</h2>
+				<div class="option">
+					<div class="text">
+						Launch options
+					</div>
+					<div class="actions">
+						<input>
+					</div>
+				</div>
+				<h2>Updates</h2>
+				<div class="option">
+					<div class="text">
+						Northstar Auto-Updates
+					</div>
+					<div class="actions">
+						<button class="switch on"></button>
+					</div>
+				</div>
+				<div class="option">
+					<div class="text">
+						Viper Auto-Updates
+					</div>
+					<div class="actions">
+						<button class="switch on"></button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="popup" id="browser">
+			<div class="misc">
 				<input id="search" placeholder="%%gui.browser.search%%">
 				<button id="close" onclick="Browser.toggle(false)">
 					<img src="icons/close.png">
@@ -126,6 +169,7 @@ <h2>%%viper.menu.info.credits%%</h2>
 		<script src="main.js"></script>
 		<script src="toast.js"></script>
 		<script src="browser.js"></script>
+		<script src="settings.js"></script>
 		<script src="launcher.js"></script>
 	</body>
 </html>
diff --git a/src/app/main.css b/src/app/main.css
index dcc4e8a7..09dc4b38 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -1,17 +1,17 @@
 :root {
-	--red: #C7777F;
-	--blue: #81A1C1;
-	--orange: #D59783;
+	--red: 199, 119, 127;
+	--blue: 129, 161, 193;
+	--orange: 213, 151, 131;
 
 	--padding: 25px;
 
 	--bg: rgba(0, 0, 0, 0.5);
 	--selbg: rgba(80, 80, 80, 0.5);
-	--redbg: linear-gradient(45deg, var(--red), #FA4343);
-	--bluebg: linear-gradient(45deg, var(--blue), #7380ED);
+	--redbg: linear-gradient(45deg, rgb(var(--red)), #FA4343);
+	--bluebg: linear-gradient(45deg, rgb(var(--blue)), #7380ED);
 }
 
-#browser, #modsdiv {
+.popup, #modsdiv {
 	outline: 1px solid #444444;
 	border: 3px solid var(--bg);
 }
@@ -27,12 +27,12 @@
  
 ::-webkit-scrollbar-thumb {
 	border-radius: 10px;
-	background: var(--red);
+	background: rgb(var(--red));
 }
 
 ::selection {
 	color: black;
-	background: var(--red);
+	background: rgb(var(--red));
 }
 
 body {
@@ -66,7 +66,7 @@ button {
 	cursor: pointer;
 }
 
-#browser {
+.popup {
 	--spacing: var(--padding);
 
 	z-index: 2;
@@ -85,7 +85,7 @@ button {
 	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
 }
 
-#browser.shown {
+.popup.shown {
 	opacity: 1.0;
 	pointer-events: all;
 	transform: scale(1.0);
@@ -114,7 +114,7 @@ button {
 	100% {opacity: 1.0}
 }
 
-#browser .el, #browser #misc, #browser .loading {
+.popup .el, .popup .misc, .popup .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3);
 	--mischeight: calc(var(--padding) * 1.5);
@@ -129,7 +129,7 @@ button {
 	transition: 0.15s ease-in-out;
 }
 
-#browser .el, #browser #search, #browser #close {
+.popup .el, .popup #search, .option .actions input, .popup #close, .popup .misc button {
 	color: white;
 	display: flex;
 	align-items: center;
@@ -141,41 +141,48 @@ button {
 	width: calc(100% - var(--spacing) * 4);
 }
 
-#browser #misc, #browser #search {
+.popup .misc, .popup #search, .option .actions input {
 	--height: var(--mischeight);
 }
 
-#browser #misc {
+.popup .misc {
 	display: flex;
 }
 
-#browser #search {
+.popup #search, .option .actions input {
 	border: none;
 	outline: none;
 	transition: filter 0.15s ease-in-out;
 	width: calc(100% - var(--spacing) * 2);
 }
 
-#browser #search:focus {
+.popup #search:focus, .option .actions input:focus, .option .actions button:active {
 	filter: brightness(1.5);
 }
 
-#browser #close {
+.popup .misc button {
 	--height: calc(var(--padding) * 1.5);
 
 	padding: 0px;
 	margin-left: 0px;
-	width: var(--height);
+	padding: 0px !important;
+	width: var(--height) !important;
 }
 
-#browser #close img {
+.popup .misc button img {
 	opacity: 0.6;
 	width: var(--height);
-	height: var(--height);
 	transform: scale(0.6);
+	height: var(--height) !important;
+}
+
+#options.popup .misc button {
+	margin-left: 0px;
+	width: auto !important;
+	padding-right: calc(var(--padding) / 2) !important;
 }
 
-#browser .loading {
+.popup .loading {
 	width: 100%;
 	color: white;
 	display: flex;
@@ -185,38 +192,92 @@ button {
 	height: calc(100% - var(--mischeight) - var(--height));
 }
 
-#browser .message {
+.popup .message {
 	color: white;
 	text-align: center;
 	margin: var(--padding);
 	width: calc(100% - var(--padding));
 }
 
-#browser .el .image, #browser .el .image img {
+.popup .el .image, .popup .el .image img {
 	width: var(--height);
 	height: var(--height);
 	margin-right: var(--spacing);
 	border-radius: var(--spacing);
 }
 
-#browser .el .text {
+.popup .el .text {
 	overflow: hidden;
 }
 
-#browser .el .title, #browser .el .description {
+.popup .el .title, .popup .el .description {
 	height: 1.2em;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
 
-#browser .el .title {font-size: 1.2em}
-#browser .el .description {font-size: 0.8em}
-#browser .el button {
-	background: var(--blue);
+.popup .el .title {font-size: 1.2em}
+.popup .el .description {font-size: 0.8em}
+.popup .el button {
+	background: rgb(var(--blue));
 	margin-top: var(--spacing);
 }
 
+.popup .options {
+	color: white;
+	margin: calc(var(--padding) / 2);
+}
+
+.popup .options .option {
+	width: 100%;
+	display: flex;
+	margin-bottom: var(--padding);
+	justify-content: space-between;
+}
+
+.option .actions text {opacity: 0.8}
+
+.option .actions input {
+	width: 100%;
+	margin: 0px;
+	--spacing: calc(var(--padding) / 3);
+}
+
+.option .actions button {
+	background: var(--selbg);
+}
+
+.switch {
+	width: 50px;
+	height: 25px;
+	border-radius: 50px;
+}
+
+.switch.on {
+	background: rgba(var(--red), 0.2) !important;
+}
+
+.switch::after {
+	left: -5px;
+	width: 15px;
+	height: 15px;
+	content: " ";
+	display: block;
+	background: red;
+	position: relative;
+	border-radius: 50px;
+	background: var(--bg);
+	transition: 0.2s ease-in-out;
+}
+
+.switch.on::after {
+	left: 15px;
+	width: 20px;
+	opacity: 0.5;
+	background: rgb(var(--red));
+}
+
 #winbtns {
 	z-index: 2;
 	display: flex;
@@ -237,9 +298,10 @@ button {
 
 #winbtns #close {background-image: url("icons/close.png")}
 #winbtns #minimize {background-image: url("icons/minimize.png")}
+#winbtns #settings {background-image: url("icons/settings.png")}
 
 #winbtns div:hover {opacity: 1.0}
-#winbtns div:active {transform: scale(0.98)}
+#winbtns div:active {transform: scale(0.95)}
 
 button:hover {filter: brightness(110%)}
 button:active {filter: brightness(90%)}
@@ -388,7 +450,7 @@ img {pointer-events: none}
 	text-align: center;
 	position: relative;
 	border-radius: 50px;
-	background: var(--red);
+	background: rgb(var(--red));
 	left: calc(50% - 15px);
 	transition: 0.2s ease-in-out;
 }
@@ -453,7 +515,7 @@ img {pointer-events: none}
 }
 
 a {
-	color: var(--red);
+	color: rgb(var(--red));
 	text-decoration: none;
 	transition: filter 0.2s ease-in;
 }
@@ -500,12 +562,12 @@ a:hover {
 }
 
 .simplebar-scrollbar:before {
-	background: var(--red) !important;
+	background: rgb(var(--red)) !important;
 }
 
-#installmod {background: var(--blue)}
-#togglemod, #toggleall {background: var(--orange)}
-#northstar, #removeall, #removemod {background: var(--red)}
+#installmod {background: rgb(var(--blue))}
+#togglemod, #toggleall {background: rgb(var(--orange))}
+#northstar, #removeall, #removemod {background: rgb(var(--red))}
 button:disabled {
 	opacity: 0.5;
 	pointer-events: none;
diff --git a/src/app/main.js b/src/app/main.js
index 97937a96..db3514b3 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -275,6 +275,13 @@ document.addEventListener("drop", (e) => {
 	installFromPath(event.dataTransfer.files[0].path)
 });
 
+document.body.addEventListener("keyup", (e) => {
+	if (e.key == "Escape") {
+		Browser.toggle(false);
+		Settings.toggle(false);
+	}
+})
+
 document.body.addEventListener("click", event => {
 	if (event.target.tagName.toLowerCase() === "a" && event.target.protocol != "file:") {
 		event.preventDefault();
diff --git a/src/app/settings.js b/src/app/settings.js
new file mode 100644
index 00000000..c9e43aeb
--- /dev/null
+++ b/src/app/settings.js
@@ -0,0 +1,46 @@
+var Settings = {
+	toggle: (state) => {
+		if (state) {
+			options.scrollTo(0, 0);
+			overlay.classList.add("shown")
+			options.classList.add("shown")
+
+			return
+		} else if (! state) {
+			if (state != undefined) {
+				overlay.classList.remove("shown")
+				options.classList.remove("shown")
+				return
+			}
+		}
+
+		options.scrollTo(0, 0);
+		overlay.classList.toggle("shown")
+		options.classList.toggle("shown")
+	},
+	apply: () => {},
+	reloadSwitches: () => {
+		let switches = document.querySelectorAll(".switch");
+
+		for (let i = 0; i < switches.length; i++) {
+			switches[i].setAttribute("onclick", `Settings.switch(${i})`); 
+		}
+	},
+	switch: (element) => {
+		let switches = document.querySelectorAll(".switch");
+		element = switches[element];
+
+		if (element.classList.contains("on")) {
+			element.classList.add("off");
+			element.classList.remove("on");
+		} else {
+			element.classList.add("on");
+			element.classList.remove("off");
+		}
+
+		Settings.reloadSwitches();
+	}
+}
+
+Settings.reloadSwitches();
+

From 43122069a282f4594653ede9402ba330b7f39e84 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sun, 20 Feb 2022 20:59:58 +0100
Subject: [PATCH 2/9] more UI changes

I added descriptions and options for excluding files.
---
 src/app/index.html | 24 ++++++++++++++++++++++--
 src/app/main.css   |  9 ++++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/app/index.html b/src/app/index.html
index 5ca9306e..7a919b15 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -40,6 +40,9 @@ <h2>Northstar</h2>
 				<div class="option">
 					<div class="text">
 						Launch options
+						<div class="desc">
+							Here you can add launch options for Northstar/Titanfall.
+						</div>
 					</div>
 					<div class="actions">
 						<input>
@@ -48,7 +51,10 @@ <h2>Northstar</h2>
 				<h2>Updates</h2>
 				<div class="option">
 					<div class="text">
-						Northstar Auto-Updates
+						Viper Auto-Updates
+						<div class="desc">
+							Viper will automatically keep itself up-to-date.
+						</div>
 					</div>
 					<div class="actions">
 						<button class="switch on"></button>
@@ -56,12 +62,26 @@ <h2>Updates</h2>
 				</div>
 				<div class="option">
 					<div class="text">
-						Viper Auto-Updates
+						Northstar Auto-Updates
+						<div class="desc">
+							Viper will automatically keep Northstar up-to-date, however it can still manually be updated through the Northstar page.
+						</div>
 					</div>
 					<div class="actions">
 						<button class="switch on"></button>
 					</div>
 				</div>
+				<div class="option">
+					<div class="text">
+						Retain files on update
+						<div class="desc">
+							When Northstar is updated, files specified here will not be overwritten by files from the new Northstar update, unless you know what you're changing, you should probably not change anything here.
+						</div>
+					</div>
+					<div class="actions">
+						<input>
+					</div>
+				</div>
 			</div>
 		</div>
 
diff --git a/src/app/main.css b/src/app/main.css
index 09dc4b38..0d4b9adc 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -236,7 +236,14 @@ button {
 	justify-content: space-between;
 }
 
-.option .actions text {opacity: 0.8}
+.option .text {font-weight: 600}
+.option .text .desc {
+	opacity: 0.8;
+	font-weight: 500;
+	font-size: 0.9em;
+	max-width: 400px;
+	margin-top: calc(var(--padding) / 3);
+}
 
 .option .actions input {
 	width: 100%;

From 132fea11e3599c9c2c9df8a69fd4d093033788ba Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Mon, 21 Feb 2022 19:31:33 +0100
Subject: [PATCH 3/9] some functionality is now present

Albeit only frontend functionality, it doesn't actually save your
settings, it simply loads them, and Settings.get(), allows you to
convert them to a format that can be used to save settings.
---
 src/app/index.html  |  8 +++----
 src/app/main.js     |  2 ++
 src/app/settings.js | 56 ++++++++++++++++++++++++++++++++++++++++++++-
 src/utils.js        |  2 ++
 4 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/src/app/index.html b/src/app/index.html
index 7a919b15..0bd66944 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -37,7 +37,7 @@
 			</div>
 			<div class="options">
 				<h2>Northstar</h2>
-				<div class="option">
+				<div class="option" name="nsargs">
 					<div class="text">
 						Launch options
 						<div class="desc">
@@ -49,7 +49,7 @@ <h2>Northstar</h2>
 					</div>
 				</div>
 				<h2>Updates</h2>
-				<div class="option">
+				<div class="option" name="autoupdate">
 					<div class="text">
 						Viper Auto-Updates
 						<div class="desc">
@@ -60,7 +60,7 @@ <h2>Updates</h2>
 						<button class="switch on"></button>
 					</div>
 				</div>
-				<div class="option">
+				<div class="option" name="nsupdate">
 					<div class="text">
 						Northstar Auto-Updates
 						<div class="desc">
@@ -71,7 +71,7 @@ <h2>Updates</h2>
 						<button class="switch on"></button>
 					</div>
 				</div>
-				<div class="option">
+				<div class="option" name="excludes" type="array">
 					<div class="text">
 						Retain files on update
 						<div class="desc">
diff --git a/src/app/main.js b/src/app/main.js
index db3514b3..a781ef10 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -8,7 +8,9 @@ let shouldInstallNorthstar = false;
 
 // Base settings
 var settings = {
+	nsargs: "",
 	gamepath: "",
+	nsupdate: true,
 	autoupdate: true,
 	zip: "/northstar.zip",
 	lang: navigator.language,
diff --git a/src/app/settings.js b/src/app/settings.js
index c9e43aeb..e558d613 100644
--- a/src/app/settings.js
+++ b/src/app/settings.js
@@ -1,6 +1,7 @@
 var Settings = {
 	toggle: (state) => {
 		if (state) {
+			Settings.load();
 			options.scrollTo(0, 0);
 			overlay.classList.add("shown")
 			options.classList.add("shown")
@@ -14,6 +15,7 @@ var Settings = {
 			}
 		}
 
+		Settings.load();
 		options.scrollTo(0, 0);
 		overlay.classList.toggle("shown")
 		options.classList.toggle("shown")
@@ -39,8 +41,60 @@ var Settings = {
 		}
 
 		Settings.reloadSwitches();
+	},
+	get: () => {
+		let opts = {};
+		let options = document.querySelectorAll(".option");
+
+		for (let i = 0; i < options.length; i++) {
+			let optName = options[i].getAttribute("name");
+			if (options[i].querySelector(".actions input")) {
+				let input = options[i].querySelector(".actions input").value;
+				if (options[i].getAttribute("type")) {
+					opts[optName] = input.split(" ");
+				} else {
+					opts[optName] = input;
+				}
+			} else if (options[i].querySelector(".actions .switch")) {
+				if (options[i].querySelector(".actions .switch.on")) {
+					opts[optName] = true;
+				} else {
+					opts[optName] = false;
+				}
+			}
+		}
+
+		return opts;
+	},
+	load: () => {
+		let options = document.querySelectorAll(".option");
+
+		for (let i = 0; i < options.length; i++) {
+			let optName = options[i].getAttribute("name");
+			if (settings[optName] != undefined) {
+				switch(typeof settings[optName]) {
+					case "string":
+						options[i].querySelector(".actions input").value = settings[optName];
+						break
+					case "object":
+						options[i].querySelector(".actions input").value = settings[optName].join(" ");
+						break
+					case "boolean":
+						let switchDiv = options[i].querySelector(".actions .switch");
+						if (settings[optName]) {
+							switchDiv.classList.add("on");
+							switchDiv.classList.remove("off");
+						} else {
+							switchDiv.classList.add("off");
+							switchDiv.classList.remove("on");
+						}
+						break
+
+				}
+			}
+		}
 	}
 }
 
 Settings.reloadSwitches();
-
+Settings.load();
diff --git a/src/utils.js b/src/utils.js
index 2ea91cd8..b4dd920a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -20,8 +20,10 @@ process.chdir(app.getPath("appData"));
 
 // Base settings
 var settings = {
+	nsargs: "",
 	gamepath: "",
 	lang: "en-US",
+	nsupdate: true,
 	autoupdate: true,
 	zip: "/northstar.zip",
 

From 815106a3e1214196b25a380d83e826473840f948 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Wed, 23 Feb 2022 18:17:56 +0100
Subject: [PATCH 4/9] settings page is now fully functional

It actually saves settings, loads them properly and everything...
---
 src/app/index.html  |  4 ++--
 src/app/settings.js |  5 ++++-
 src/index.js        |  2 ++
 src/utils.js        | 14 ++++++++++----
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app/index.html b/src/app/index.html
index 0bd66944..f6051366 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -26,11 +26,11 @@
 		<div class="popup" id="options">
 			<div class="misc">
 				<div style="width:100%"></div>
-				<button id="apply" onclick="Settings.apply()">
+				<button id="apply" onclick="Settings.toggle(false);Settings.apply()">
 					<img src="icons/apply.png">
 					Save
 				</button>
-				<button id="close" onclick="Settings.toggle(false)">
+				<button id="close" onclick="Settings.toggle(false);Settings.load()">
 					<img src="icons/close.png">
 					Discard
 				</button>
diff --git a/src/app/settings.js b/src/app/settings.js
index e558d613..4921e073 100644
--- a/src/app/settings.js
+++ b/src/app/settings.js
@@ -20,7 +20,10 @@ var Settings = {
 		overlay.classList.toggle("shown")
 		options.classList.toggle("shown")
 	},
-	apply: () => {},
+	apply: () => {
+		settings = {...settings, ...Settings.get()};
+		ipcRenderer.send("savesettings", Settings.get());
+	},
 	reloadSwitches: () => {
 		let switches = document.querySelectorAll(".switch");
 
diff --git a/src/index.js b/src/index.js
index 95115b4b..fa2a35fa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -53,6 +53,8 @@ function start() {
 	ipcMain.on("installedmod", (event, modname) => {win.webContents.send("installedmod", modname)});
 	ipcMain.on("guigetmods", (event, ...args) => {win.webContents.send("mods", utils.mods.list())});
 
+	ipcMain.on("savesettings", (event, obj) => {utils.saveSettings(obj)})
+
 	win.webContents.on("dom-ready", () => {
 		win.webContents.send("mods", utils.mods.list());
 	});
diff --git a/src/utils.js b/src/utils.js
index b4dd920a..5055a2e6 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -20,15 +20,15 @@ process.chdir(app.getPath("appData"));
 
 // Base settings
 var settings = {
-	nsargs: "",
 	gamepath: "",
 	lang: "en-US",
 	nsupdate: true,
 	autoupdate: true,
+	nsargs: "-multiple",
 	zip: "/northstar.zip",
 
 	// These files won't be overwritten when installing/updating
-	// Northstar, useful for config file.
+	// Northstar, useful for config files
 	excludes: [
 		"ns_startup_args.txt",
 		"ns_startup_args_dedi.txt"
@@ -172,8 +172,13 @@ async function setpath(win, forcedialog) {
 // As to not have to do the same one liner a million times, this
 // function exists, as the name suggests, it simply writes the current
 // settings to the disk.
-function saveSettings() {
-	fs.writeFileSync(app.getPath("appData") + "/viper.json", JSON.stringify(settings));
+//
+// You can also pass a settings object to the function and it'll try and
+// merge it together with the already existing settings
+function saveSettings(obj = {}) {
+	settings = {...settings, ...obj};
+	fs.writeFileSync(path.join(settings.gamepath, "ns_startup_args.txt"), settings.nsargs);
+	fs.writeFileSync(app.getPath("appData") + "/viper.json", JSON.stringify({...settings, ...obj}));
 }
 
 // Returns the current Northstar version
@@ -754,6 +759,7 @@ module.exports = {
 	setpath,
 	updatevp,
 	settings,
+	saveSettings,
 	getNSVersion,
 	getTF2Version,
 	isGameRunning,

From 5193485b5c66170330b920d891e3fe1442cc1f3d Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Wed, 23 Feb 2022 18:33:59 +0100
Subject: [PATCH 5/9] implement ability to disable NS auto-updates

Albeit with some caveats, due to the way electron-updater is setup, if
you're not on a version of Viper which supports auto-updates the event
which runs the NS Updater code will never be run, and hence it'll never
auto-update. This was also an issue before, but I only noticed it now.
---
 src/index.js |  8 +++++++-
 src/utils.js | 10 +++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index fa2a35fa..0e8364fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -59,7 +59,13 @@ function start() {
 		win.webContents.send("mods", utils.mods.list());
 	});
 
-	if (utils.settings.autoupdate) {utils.updatevp(false)}
+	if (utils.settings.autoupdate) {
+		utils.updatevp(false)
+	} else {
+		if (utils.settings.nsupdate) {
+			utils.update();
+		}
+	}
 
 	autoUpdater.on("update-downloaded", () => {
 		win.webContents.send("updateavailable")
diff --git a/src/utils.js b/src/utils.js
index 2449a732..655eee05 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -75,7 +75,7 @@ async function isGameRunning() {
 //
 // It uses isGameRunning() to ensure it doesn't run while the game is
 // running, as that may have all kinds of issues.
-function handleNorthstarAutoUpdating() {
+function handleNorthstarUpdating() {
 	if (!settings.autoupdate || !fs.existsSync("viper.json") || settings.gamepath.length === 0) {
 		return;
 	}
@@ -314,8 +314,11 @@ function updatevp(autoinstall) {
 
 	autoUpdater.on("error", (info) => {cli.exit(1)});
 	autoUpdater.on("update-not-available", (info) => {
-		// only check for N* updates if Viper itself has no updates
-		handleNorthstarAutoUpdating();
+		// only check for NS updates if Viper itself has no updates and
+		// if NS auto updates is enabled.
+		if (settings.nsupdate || cli.hasArgs()) {
+			handleNorthstarUpdating();
+		}
 		cli.exit();
 	});
 
@@ -767,6 +770,7 @@ module.exports = {
 	getNSVersion,
 	getTF2Version,
 	isGameRunning,
+	handleNorthstarUpdating,
 	setlang: (lang) => {
 		settings.lang = lang;
 		saveSettings();

From 2c74233c21c27c45c79edb843cd5078a950b9ff6 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Thu, 24 Feb 2022 00:25:15 +0100
Subject: [PATCH 6/9] fixed NS never being auto-updated and more

When #87 was merged an unnoticed problem slipped in where if Viper was
running in a version that did not support auto-updates we would never
auto-update Northstar. Now that's fixed, and the nsupdate option is
completely implemented.

I also took the liberty of removing the auto-update option in the
settings page if Viper can't auto-update anyway, as it's useless if
that's not possible.
---
 src/app/settings.js |  5 +++++
 src/index.js        | 10 +++++++---
 src/utils.js        |  9 ++++++++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/settings.js b/src/app/settings.js
index 4921e073..902e57b3 100644
--- a/src/app/settings.js
+++ b/src/app/settings.js
@@ -96,6 +96,11 @@ var Settings = {
 				}
 			}
 		}
+
+		ipcRenderer.send("can-autoupdate");
+		ipcRenderer.on("cant-autoupdate", () => {
+			document.querySelector(".option[name=autoupdate]").style.display = "none";
+		})
 	}
 }
 
diff --git a/src/index.js b/src/index.js
index 0e8364fc..265e13dd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -55,6 +55,12 @@ function start() {
 
 	ipcMain.on("savesettings", (event, obj) => {utils.saveSettings(obj)})
 
+	ipcMain.on("can-autoupdate", (event) => {
+		if (! require("electron-updater").autoUpdater.isUpdaterActive()) {
+			win.webContents.send("cant-autoupdate")
+		}
+	})
+
 	win.webContents.on("dom-ready", () => {
 		win.webContents.send("mods", utils.mods.list());
 	});
@@ -62,9 +68,7 @@ function start() {
 	if (utils.settings.autoupdate) {
 		utils.updatevp(false)
 	} else {
-		if (utils.settings.nsupdate) {
-			utils.update();
-		}
+		utils.handleNorthstarUpdating();
 	}
 
 	autoUpdater.on("update-downloaded", () => {
diff --git a/src/utils.js b/src/utils.js
index 655eee05..6069a463 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -76,7 +76,7 @@ async function isGameRunning() {
 // It uses isGameRunning() to ensure it doesn't run while the game is
 // running, as that may have all kinds of issues.
 function handleNorthstarUpdating() {
-	if (!settings.autoupdate || !fs.existsSync("viper.json") || settings.gamepath.length === 0) {
+	if (! settings.nsupdate || ! fs.existsSync("viper.json") || settings.gamepath.length === 0) {
 		return;
 	}
 
@@ -306,6 +306,13 @@ async function update() {
 function updatevp(autoinstall) {
 	const { autoUpdater } = require("electron-updater");
 
+	if (! autoUpdater.isUpdaterActive()) {
+		if (settings.nsupdate) {
+			handleNorthstarUpdating();
+		}
+		return cli.exit();
+	}
+
 	if (autoinstall) {
 		autoUpdater.on("update-downloaded", (info) => {
 			autoUpdater.quitAndInstall();

From 68579acd60b284eeeb619595abb44a04e93887e0 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Thu, 24 Feb 2022 00:40:55 +0100
Subject: [PATCH 7/9] localized all strings

I localized all strings for English, then went ahead and made array
options have a wider input and more word spacing, since they're all
space separated.
---
 src/app/index.html | 22 +++++++++++-----------
 src/app/main.css   |  5 +++++
 src/lang/en.json   | 13 +++++++++++++
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/app/index.html b/src/app/index.html
index f6051366..ac1e2768 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -28,20 +28,20 @@
 				<div style="width:100%"></div>
 				<button id="apply" onclick="Settings.toggle(false);Settings.apply()">
 					<img src="icons/apply.png">
-					Save
+					%%gui.settings.save%%
 				</button>
 				<button id="close" onclick="Settings.toggle(false);Settings.load()">
 					<img src="icons/close.png">
-					Discard
+					%%gui.settings.discard%%
 				</button>
 			</div>
 			<div class="options">
 				<h2>Northstar</h2>
 				<div class="option" name="nsargs">
 					<div class="text">
-						Launch options
+						%%gui.settings.nsargs.title%%
 						<div class="desc">
-							Here you can add launch options for Northstar/Titanfall.
+							%%gui.settings.nsargs.desc%%
 						</div>
 					</div>
 					<div class="actions">
@@ -51,9 +51,9 @@ <h2>Northstar</h2>
 				<h2>Updates</h2>
 				<div class="option" name="autoupdate">
 					<div class="text">
-						Viper Auto-Updates
+						%%gui.settings.autoupdate.title%%
 						<div class="desc">
-							Viper will automatically keep itself up-to-date.
+							%%gui.settings.autoupdate.desc%%
 						</div>
 					</div>
 					<div class="actions">
@@ -62,9 +62,9 @@ <h2>Updates</h2>
 				</div>
 				<div class="option" name="nsupdate">
 					<div class="text">
-						Northstar Auto-Updates
+						%%gui.settings.nsupdate.title%%
 						<div class="desc">
-							Viper will automatically keep Northstar up-to-date, however it can still manually be updated through the Northstar page.
+							%%gui.settings.nsupdate.desc%%
 						</div>
 					</div>
 					<div class="actions">
@@ -73,13 +73,13 @@ <h2>Updates</h2>
 				</div>
 				<div class="option" name="excludes" type="array">
 					<div class="text">
-						Retain files on update
+						%%gui.settings.excludes.title%%
 						<div class="desc">
-							When Northstar is updated, files specified here will not be overwritten by files from the new Northstar update, unless you know what you're changing, you should probably not change anything here.
+							%%gui.settings.excludes.desc%%
 						</div>
 					</div>
 					<div class="actions">
-						<input>
+						<input type="text">
 					</div>
 				</div>
 			</div>
diff --git a/src/app/main.css b/src/app/main.css
index 0d4b9adc..734f60ba 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -251,6 +251,11 @@ button {
 	--spacing: calc(var(--padding) / 3);
 }
 
+.option[type=array] .actions input {
+	word-spacing: 15px;
+	margin-right: 15vw;
+}
+
 .option .actions button {
 	background: var(--selbg);
 }
diff --git a/src/lang/en.json b/src/lang/en.json
index 45bf7c0f..47e18c08 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -73,6 +73,19 @@
 	"gui.browser.loading": "Loading mods...",
 	"gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
 
+	"gui.settings.save": "Save",
+	"gui.settings.discard": "Discard",
+	"gui.settings.title.ns": "Northstar",
+	"gui.settings.title.updates": "Updates",
+	"gui.settings.nsargs.title": "Launch options",
+	"gui.settings.nsargs.desc": "Here you can add launch options for Northstar/Titanfall.",
+	"gui.settings.autoupdate.title": "Viper Auto-Updates",
+	"gui.settings.autoupdate.desc": "Viper will automatically keep itself up-to-date.",
+	"gui.settings.nsupdate.title": "Northstar Auto-Updates",
+	"gui.settings.nsupdate.desc": "Viper will automatically keep Northstar up-to-date, however it can still manually be updated through the Northstar page.",
+	"gui.settings.excludes.title": "Retain files on update",
+	"gui.settings.excludes.desc": "When Northstar is updated, files specified here will not be overwritten by files from the new Northstar update, unless you know what you're changing, you should probably not change anything here. Each file is separated with a space.",
+
 	"gui.update.downloading": "Downloading...",
 	"gui.update.extracting": "Extracting update...",
 	"gui.update.finished": "Done! Ready to play!",

From 10379d2f50cd8ae3fcb9ff4b82f9cfacb76f4483 Mon Sep 17 00:00:00 2001
From: Delta <31860825+AA-Delta@users.noreply.github.com>
Date: Thu, 24 Feb 2022 07:50:16 -0500
Subject: [PATCH 8/9] feat: Settings page: add "es" localization

#85
---
 src/lang/es.json | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/lang/es.json b/src/lang/es.json
index 450d559e..b570a8d1 100644
--- a/src/lang/es.json
+++ b/src/lang/es.json
@@ -73,6 +73,19 @@
 	"gui.browser.loading": "Cargando modificaciones...",
 	"gui.browser.endoflist": "Se ha cargado el máximo de paquetes.<br>¡Usa la búsqueda para encontrar otros paquetes!",
 	
+	"gui.settings.save": "Guardar",
+	"gui.settings.discard": "Descartar",
+	"gui.settings.title.ns": "Northstar",
+	"gui.settings.title.updates": "Actualizaciones",
+	"gui.settings.nsargs.title": "Opciones de lanzamiento",
+	"gui.settings.nsargs.desc": "Aqui puedes añadir opciones de lanzamiento para Northstar/Titanfall.",
+	"gui.settings.autoupdate.title": "Actualizaciones automáticas de Viper",
+	"gui.settings.autoupdate.desc": "Viper se mantendrá automáticamente actualizado.",
+	"gui.settings.nsupdate.title": "Actualizaciones automáticas de Northstar",
+	"gui.settings.nsupdate.desc": "Viper mantendrá Northstar actualizado automáticamente, sin embargo, todavía se puede actualizar manualmente a través de la sección de Northstar.",
+	"gui.settings.excludes.title": "Conservar archivos en la actualización",
+	"gui.settings.excludes.desc": "Cuando se actualice Northstar, los archivos especificados aquí no se sobrescribirán con archivos de la nueva actualización de Northstar. A menos que sepa lo que está cambiando, probablemente no debería cambiar nada aquí. Cada archivo se debe separar con un espacio.",
+	
 	"gui.update.downloading": "Descargando...",
 	"gui.update.extracting": "Extrayendo actualización...",
 	"gui.update.finished": "¡Hecho! ¡Está listo para jugar!",

From bf91e60f1934d05310cec3c447cc3804b4a68c40 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Fri, 25 Feb 2022 23:30:14 +0100
Subject: [PATCH 9/9] [feat] french settings translations

---
 src/lang/fr.json | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/lang/fr.json b/src/lang/fr.json
index 14bae378..86ec763a 100644
--- a/src/lang/fr.json
+++ b/src/lang/fr.json
@@ -73,6 +73,19 @@
 	"gui.browser.loading": "Chargement des mods...",
 	"gui.browser.endoflist": "Fin de la liste de mods.<br>Utilisez la barre de recherche pour en trouver davantage !",
 
+	"gui.settings.save": "Sauvegarder",
+	"gui.settings.discard": "Annuler",
+	"gui.settings.title.ns": "Northstar",
+	"gui.settings.title.updates": "Mises à jour",
+	"gui.settings.nsargs.title": "Options de lancement",
+	"gui.settings.nsargs.desc": "Vous pouvez ajouter ici des options de démarrage pour Northstar/Titanfall.",
+	"gui.settings.autoupdate.title": "Mises à jour pour Viper",
+	"gui.settings.autoupdate.desc": "Viper se tient automatiquement à jour.",
+	"gui.settings.nsupdate.title": "Mises à jour pour Northstar",
+	"gui.settings.nsupdate.desc": "Viper tient automatiquement Northstar à jour (n'empêche pas de le mettre à jour manuellement via sa page dédiée).",
+	"gui.settings.excludes.title": "Fichiers à conserver",
+	"gui.settings.excludes.desc": "Lorsque Northstar est mis à jour, ces fichiers ne seront pas écrasés par ceux provenant de la mise à jour; les noms de fichiers sont séparés par un espace.",
+
 	"gui.update.downloading": "Téléchargement de la mise à jour...",
 	"gui.update.extracting": "Extraction des fichiers...",
 	"gui.update.finished": "Terminé, vous pouvez jouer !",