the user can now manually select a language

This allows someone to have their system in any language, and then have
Viper in a separate language. This is also useful for testing.

4 files changed, 51 insertions, 5 deletions

diff --git a/src/app/index.html b/src/app/index.html
index 8ad5ecf..e0718a8 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -36,7 +36,7 @@
 				</button>
 			</div>
 			<div class="options">
-				<h2>Northstar</h2>
+				<h2>%%gui.settings.title.ns%%</h2>
 				<div class="option" name="nsargs">
 					<div class="text">
 						%%gui.settings.nsargs.title%%
@@ -48,7 +48,32 @@
 						<input>
 					</div>
 				</div>
-				<h2>Updates</h2>
+				<h2>%%gui.settings.title.language%%</h2>
+				<div class="option" name="autolang">
+					<div class="text">
+						%%gui.settings.autolang.title%%
+						<div class="desc">
+							%%gui.settings.autolang.desc%%
+						</div>
+					</div>
+					<div class="actions">
+						<button class="switch off"></button>
+					</div>
+				</div>
+				<div class="option" name="forcedlang">
+					<div class="text">
+						%%gui.settings.forcedlang.title%%
+						<div class="desc">
+							%%gui.settings.forcedlang.desc%%
+						</div>
+					</div>
+					<div class="actions">
+						<select>
+							<option value="test">Test</option>
+						</select>
+					</div>
+				</div>
+				<h2>%%gui.settings.title.updates%%</h2>
 				<div class="option" name="autoupdate">
 					<div class="text">
 						%%gui.settings.autoupdate.title%%
diff --git a/src/app/main.css b/src/app/main.css
index 3f542ec..87d89e0 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -129,7 +129,7 @@ button {
 	transition: 0.15s ease-in-out;
 }
 
-.popup .el, .popup #search, .option .actions input, .popup #close, .popup .misc button {
+.popup .el, .popup #search, .option .actions select, .option .actions input, .popup #close, .popup .misc button {
 	color: white;
 	display: flex;
 	align-items: center;
@@ -149,7 +149,7 @@ button {
 	display: flex;
 }
 
-.popup #search, .option .actions input {
+.popup #search, .option .actions input, .option .actions select {
 	border: none;
 	outline: none;
 	transition: filter 0.15s ease-in-out;
@@ -292,7 +292,7 @@ button {
 	margin-top: calc(var(--padding) / 3);
 }
 
-.option .actions input {
+.option .actions input, .option .actions select {
 	width: 100%;
 	margin: 0px;
 	--spacing: calc(var(--padding) / 3);
diff --git a/src/app/main.js b/src/app/main.js
index 1688ab2..9206ae6 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -11,6 +11,8 @@ var settings = {
 	nsargs: "",
 	gamepath: "",
 	nsupdate: true,
+	autolang: true,
+	forcedlang: "en",
 	autoupdate: true,
 	zip: "/northstar.zip",
 	lang: navigator.language,
diff --git a/src/app/settings.js b/src/app/settings.js
index 902e57b..853cd0b 100644
--- a/src/app/settings.js
+++ b/src/app/settings.js
@@ -58,6 +58,8 @@ var Settings = {
 				} else {
 					opts[optName] = input;
 				}
+			} else if (options[i].querySelector(".actions select")) {
+				opts[optName] = options[i].querySelector(".actions select").value;
 			} else if (options[i].querySelector(".actions .switch")) {
 				if (options[i].querySelector(".actions .switch.on")) {
 					opts[optName] = true;
@@ -74,6 +76,23 @@ var Settings = {
 
 		for (let i = 0; i < options.length; i++) {
 			let optName = options[i].getAttribute("name");
+			if (optName == "forcedlang") {
+				let div = options[i].querySelector("select");
+
+				div.innerHTML = "";
+				let langs = fs.readdirSync(__dirname + "/../lang");
+				for (let i in langs) {
+					title = JSON.parse(fs.readFileSync(__dirname + `/../lang/${langs[i]}`, "utf8"))["lang.title"];
+					if (title) {
+						div.innerHTML += `<option value="${langs[i].replace(/\..*$/, '')}">${title}</option>`
+					}
+					
+				}
+
+				div.value = settings.forcedlang;
+				continue;
+			}
+
 			if (settings[optName] != undefined) {
 				switch(typeof settings[optName]) {
 					case "string":