From 3a2f9fac72d141f6a5e2e56133a5ae77d6972680 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 20 Feb 2022 20:31:50 +0100 Subject: 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 (limited to 'src') diff --git a/src/app/browser.js b/src/app/browser.js index ded12fa..275e16e 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 0000000..915f809 Binary files /dev/null and b/src/app/icons/apply.png differ diff --git a/src/app/icons/settings.png b/src/app/icons/settings.png new file mode 100644 index 0000000..3f7715a Binary files /dev/null and b/src/app/icons/settings.png differ diff --git a/src/app/index.html b/src/app/index.html index b5fc8cb..5ca9306 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -10,6 +10,7 @@
+
@@ -21,9 +22,51 @@ -
-
-
+
+ + +
diff --git a/src/app/main.css b/src/app/main.css index 09dc4b3..0d4b9ad 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%; -- cgit v1.2.3 From 132fea11e3599c9c2c9df8a69fd4d093033788ba Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 21 Feb 2022 19:31:33 +0100 Subject: 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(-) (limited to 'src') diff --git a/src/app/index.html b/src/app/index.html index 7a919b1..0bd6694 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -37,7 +37,7 @@

Northstar

-
+
Launch options
@@ -49,7 +49,7 @@

Updates

-
+
Viper Auto-Updates
@@ -60,7 +60,7 @@
-
+
Northstar Auto-Updates
@@ -71,7 +71,7 @@
-
+
Retain files on update
diff --git a/src/app/main.js b/src/app/main.js index db3514b..a781ef1 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 c9e43ae..e558d61 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 2ea91cd..b4dd920 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", -- cgit v1.2.3 From 815106a3e1214196b25a380d83e826473840f948 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Wed, 23 Feb 2022 18:17:56 +0100 Subject: 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(-) (limited to 'src') diff --git a/src/app/index.html b/src/app/index.html index 0bd6694..f605136 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -26,11 +26,11 @@