From c8fcc96cae62a8bb7c4374fc1c5889aa5466b701 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 24 Apr 2022 03:05:53 +0200 Subject: tiny improvements to the look of the mod browser Veeeerrryyy tiny improvements: - titles are now in bold - reduced the padding between version and author text - slight blur to images has been added, which looks nice - the large margin between the close and filter button is now fixed --- src/app/browser.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/app/browser.js') diff --git a/src/app/browser.js b/src/app/browser.js index 40670bc..ba20656 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -53,7 +53,7 @@ var Browser = { let spacing = parseInt(getComputedStyle(filters).getPropertyValue("--spacing")); filters.style.top = filterRect.bottom - spacing; - filters.style.right = filterRect.right - filterRect.left + filterRect.width; + filters.style.right = filterRect.right - filterRect.left + filterRect.width - (spacing / 2); }, }, toggle: (state) => { @@ -235,6 +235,7 @@ function BrowserEl(properties) {
+
${properties.title}
-- cgit v1.2.3 From b045d3f01a9d49b5ad391bcf3f1404900882c141 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 24 Apr 2022 20:59:40 +0200 Subject: more minor improvements to the UI sped up some animations, added a few more colors to different places, overall just a slight spice up to the UI --- src/app/browser.js | 4 ++-- src/app/index.html | 2 +- src/app/main.css | 25 ++++++++++++++++++++----- 3 files changed, 23 insertions(+), 8 deletions(-) (limited to 'src/app/browser.js') diff --git a/src/app/browser.js b/src/app/browser.js index ba20656..e22ab3c 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -240,8 +240,8 @@ function BrowserEl(properties) {
${properties.title}
${properties.description}
- - + +
diff --git a/src/app/index.html b/src/app/index.html index 4b3b79f..02a150f 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -200,7 +200,7 @@ - +
diff --git a/src/app/main.css b/src/app/main.css index 1e051e1..99d806c 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -1,7 +1,13 @@ :root { --red: 199, 119, 127; + --red2: 181 97 105; + --blue: 129, 161, 193; + --blue2: 139, 143, 185; + --orange: 213, 151, 131; + --orange2: 197 129 107; + --padding: 25px; @@ -172,7 +178,7 @@ button { .popup .misc button img { opacity: 0.6; width: var(--height); - transform: scale(0.6); + transform: scale(0.5); height: var(--height) !important; } @@ -239,6 +245,10 @@ button { margin-top: var(--spacing); } +.popup .el button.info { + background: rgb(var(--blue2)); +} + .popup .options { color: white; margin: calc(var(--padding) / 2); @@ -392,7 +402,7 @@ img {pointer-events: none} background-size: cover; background-position: center; background-repeat: no-repeat; - transition: background-image 0.5s ease-in-out; + transition: background-image 0.1s ease-in-out; filter: brightness(0.4) blur(2px) grayscale(0.6); } @@ -570,7 +580,7 @@ img {pointer-events: none} margin-bottom: 10px; border-radius: 10px; background: var(--redbg); - transition: 0.3s ease-in-out; + transition: 0.2s ease-in-out; filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1)); } @@ -640,8 +650,13 @@ a:hover { } #installmod {background: rgb(var(--blue))} -#togglemod, #toggleall {background: rgb(var(--orange))} -#removeall, #removemod {background: rgb(var(--red))} +#findmod {background: rgb(var(--blue2))} + +#togglemod {background: rgb(var(--orange))} +#toggleall {background: rgb(var(--orange2))} + +#removemod {background: rgb(var(--red))} +#removeall {background: rgb(var(--red2))} button:disabled { opacity: 0.5; pointer-events: none; -- cgit v1.2.3 From 72f85aa2297f5c46d029f1e25193aa98ced884c3 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Thu, 12 May 2022 01:34:07 +0200 Subject: initial draft for supporting dependencies This should allow you to install packages that have dependencies, however maybe not with the best UI/UX experience, as currently there's only an English localization, and we also install dependencies even if the dependency is already installed. --- src/app/browser.js | 10 ++++++++-- src/app/main.js | 37 +++++++++++++++++++++++++++++++++++-- src/lang/en.json | 1 + src/utils.js | 8 -------- 4 files changed, 44 insertions(+), 12 deletions(-) (limited to 'src/app/browser.js') diff --git a/src/app/browser.js b/src/app/browser.js index e22ab3c..5c943ba 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -171,7 +171,8 @@ function BrowserElFromObj(obj) { download: pkg.download_url, version: pkg.version_number, categories: pkg.categories, - description: pkg.description + description: pkg.description, + dependencies: pkg.dependencies, }) } @@ -240,7 +241,7 @@ function BrowserEl(properties) {
${properties.title}
${properties.description}
- + @@ -285,6 +286,11 @@ ipcRenderer.on("installedmod", (event, mod) => { title: lang("gui.toast.title.installed"), description: mod.name + " " + lang("gui.toast.desc.installed") }) + + if (installqueue.length != 0) { + installFromURL("https://thunderstore.io/package/download/" + installqueue[0]); + installqueue.shift(); + } }) function normalize(items) { diff --git a/src/app/main.js b/src/app/main.js index 95b6f4c..109ca61 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -190,6 +190,8 @@ function selected(all) { } } +let installqueue = []; + // Tells the main process to install a mod through the file selector function installmod() { setButtons(false); @@ -203,9 +205,40 @@ function installFromPath(path) { } // Tells the main process to install a mod from a URL -function installFromURL(url) { +function installFromURL(url, dependencies, clearqueue) { + if (clearqueue) {installqueue = []}; + console.log(installqueue) + + let prettydepends = []; + + if (dependencies) { + let newdepends = []; + for (let i = 0; i < dependencies.length; i++) { + let depend = dependencies[i].toLowerCase(); + console.log(depend) + if (! depend.match(/northstar-northstar-.*/)) { + newdepends.push(dependencies[i].replaceAll("-", "/")); + let pkg = newdepends[newdepends.length - 1].split("/"); + prettydepends.push(`${pkg[1]} v${pkg[2]} - ${lang("gui.browser.madeby")} ${pkg[0]}`); + } + } + + dependencies = newdepends; + } + + if (dependencies && dependencies.length != 0) { + let confirminstall = confirm(lang("gui.mods.confirmdependencies") + prettydepends.join("\n")); + if (! confirminstall) { + return + } + } + setButtons(false); - ipcRenderer.send("installfromurl", url) + ipcRenderer.send("installfromurl", url, dependencies) + + if (dependencies) { + installqueue = dependencies; + } } // Frontend part of settings a new game path diff --git a/src/lang/en.json b/src/lang/en.json index ee932a2..024b44a 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -68,6 +68,7 @@ "gui.mods.installing": "Installing mod...", "gui.mods.installedmod": "Installed mod!", "gui.mods.dragdrop": "Drag and drop a mod to install", + "gui.mods.confirmdependencies": "This package has dependencies, shown below, clicking \"Ok\" will install the package and the dependencies.\n\n", "gui.browser.info": "Info", "gui.browser.madeby": "by", diff --git a/src/utils.js b/src/utils.js index eb9f195..e63297e 100644 --- a/src/utils.js +++ b/src/utils.js @@ -720,14 +720,6 @@ const mods = { let stream = fs.createWriteStream(modlocation); 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"); - // }) - stream.on("finish", () => { stream.close(); mods.install(modlocation); -- cgit v1.2.3 From 0b893f9f2b01196b583222df072ae51631457649 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 16 May 2022 20:09:43 +0200 Subject: a lot of stuff, but mainly a "Load more..." button In the past when more than 50 packages was loaded it'd simply display a "Maximum packages loaded" message, and it wasn't actually 50, as it just took the first 50 packages loaded, whether or not they were filtered out, so now that's fixed and a "Load more..." button has been added. With that comes some changes to the lang strings for "gui.browser.endoflist" and a new one "gui.browser.loadmore". I also fixed the filtered packages issue also occurring in searches. This will overall allow a user to more easily find the maximum amount of packages without loading literally over a hundred packages at once, not good for performance... --- src/app/browser.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++++----- src/app/main.css | 4 +++ src/lang/en.json | 3 +- 3 files changed, 87 insertions(+), 9 deletions(-) (limited to 'src/app/browser.js') diff --git a/src/app/browser.js b/src/app/browser.js index 5c943ba..0646ad1 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -2,9 +2,21 @@ const Fuse = require("fuse.js"); var fuse; var packages = []; +var packagecount = 0; + var Browser = { maxentries: 50, filters: { + getpkgs: () => { + let pkgs = []; + for (let i in packages) { + if (! Browser.filters.isfiltered(packages[i].categories)) { + pkgs.push(packages[i]); + } + } + + return pkgs; + }, get: () => { let filtered = []; let unfiltered = []; @@ -81,6 +93,8 @@ var Browser = { }, loadfront: async () => { Browser.loading(); + + packagecount = 0; if (packages.length < 1) { packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json(); @@ -90,8 +104,15 @@ var Browser = { }) } - for (let i in packages) { - new BrowserElFromObj(packages[i]); + let pkgs = Browser.filters.getpkgs(); + for (let i in pkgs) { + if (packagecount >= Browser.maxentries) { + Browser.endoflist(); + break + } + + new BrowserElFromObj(pkgs[i]); + packagecount++; } }, loading: (string) => { @@ -107,9 +128,31 @@ var Browser = { browserEntries.innerHTML = `
${lang('gui.browser.loading')}
`; } }, - endoflist: () => { - if (browserEntries.querySelector(".message")) {return} - browserEntries.innerHTML += `
${lang('gui.browser.endoflist')}
` + endoflist: (isEnd) => { + let pkgs = []; + let filtered = Browser.filters.getpkgs(); + for (let i = 0; i < filtered.length; i++) { + if ([packagecount + i]) { + pkgs.push(filtered[packagecount + i]); + } else { + break + } + } + + if (browserEntries.querySelector(".message")) { + browserEntries.querySelector(".message").remove(); + } + + if (pkgs.length == 0 || isEnd) { + browserEntries.innerHTML += `
${lang('gui.browser.endoflist')}
` + return + } + + browserEntries.innerHTML += `
` + loadmore.addEventListener("click", () => { + Browser.loadpkgs(pkgs); + Browser.endoflist(pkgs); + }) }, search: (string) => { Browser.loading(); @@ -120,8 +163,14 @@ var Browser = { return } + packagecount = 0; + + let count = 0; for (let i = 0; i < res.length; i++) { + if (count >= Browser.maxentries) {break} + if (Browser.filters.isfiltered(res[i].item.categories)) {continue} new BrowserElFromObj(res[i].item); + count++; } }, setbutton: (mod, string) => { @@ -157,6 +206,33 @@ var Browser = { } }, 1501) } + }, + loadpkgs: (pkgs, clear) => { + if (clear) {packagecount = 0} + + if (browserEntries.querySelector(".message")) { + browserEntries.querySelector(".message").remove(); + } + + let count = 0; + for (let i in pkgs) { + if (count >= Browser.maxentries) { + if (pkgs[i] === undefined) { + Browser.endoflist(true); + } + + Browser.endoflist(); + console.log(pkgs) + break + } + + try { + new BrowserElFromObj(pkgs[i]) + }catch(e) {} + + count++; + packagecount++; + } } } @@ -179,9 +255,6 @@ function BrowserElFromObj(obj) { function BrowserEl(properties) { if (Browser.filters.isfiltered(properties.categories)) {return} - let entries = browser.querySelectorAll(".el").length; - if (entries == Browser.maxentries) {Browser.endoflist();return} - properties = { title: "No name", version: "1.0.0", diff --git a/src/app/main.css b/src/app/main.css index 7b54ec7..d7f8284 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -245,6 +245,10 @@ button { font-weight: 700; } +.popup .message #loadmore { + background: rgb(var(--blue2)); +} + .popup .el .description {font-size: 0.8em} .popup .el button { background: rgb(var(--blue)); diff --git a/src/lang/en.json b/src/lang/en.json index 024b44a..345a83c 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -77,7 +77,8 @@ "gui.browser.install": "Install", "gui.browser.reinstall": "Re-Install", "gui.browser.loading": "Loading mods...", - "gui.browser.endoflist": "Maximum packages has been loaded.
Use the search for finding other packages!", + "gui.browser.loadmore": "Load more...", + "gui.browser.endoflist": "All packages have been loaded.", "gui.browser.noresults": "No results...", "gui.browser.filter.mods": "Mods", "gui.browser.filter.skins": "Skins", -- cgit v1.2.3 From 716a05ed8673302129aecfc10f680cbf1fa882c7 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 16 May 2022 20:14:42 +0200 Subject: majorly improved performance Instead of setting the innerHTML every single time an element get added it now just appends them like you should be doing, but I was lazy when I wrote the original code I guess. Not only does this improve performance, but it also fixes the CSS fade animation not making every mod element/entry flicker, and instead now it only does it on the new ones, like intended. --- src/app/browser.js | 45 ++++++++++++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 17 deletions(-) (limited to 'src/app/browser.js') diff --git a/src/app/browser.js b/src/app/browser.js index 0646ad1..4d14885 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -144,11 +144,11 @@ var Browser = { } if (pkgs.length == 0 || isEnd) { - browserEntries.innerHTML += `
${lang('gui.browser.endoflist')}
` + Browser.msg(`${lang('gui.browser.endoflist')}`) return } - browserEntries.innerHTML += `
` + Browser.msg(``) loadmore.addEventListener("click", () => { Browser.loadpkgs(pkgs); Browser.endoflist(pkgs); @@ -233,6 +233,13 @@ var Browser = { count++; packagecount++; } + }, + msg: (html) => { + let msg = document.createElement("div"); + msg.classList.add("message"); + msg.innerHTML = html; + + browserEntries.appendChild(msg); } } @@ -304,23 +311,27 @@ function BrowserEl(properties) { } } } - - browserEntries.innerHTML += ` -
-
- - -
-
-
${properties.title}
-
${properties.description}
- - - - -
+ + let entry = document.createElement("div"); + entry.classList.add("el"); + entry.id = `mod-${normalize(properties.title)}`; + + entry.innerHTML = ` +
+ + +
+
+
${properties.title}
+
${properties.description}
+ + + +
` + + browserEntries.appendChild(entry); } ipcRenderer.on("removedmod", (event, mod) => { -- cgit v1.2.3 From 31545f96ac56e0bbc7d0ed59f86015d693d464d9 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 16 May 2022 23:51:26 +0200 Subject: added mod preview browser Instead of opening your normal web browser you can now just open the page inside Viper, many changes aren't finished yet, notably the webview.css file. At some point I'll split the main.css into more files so the folder makes sense even though there's currently only one file in there. --- src/app/browser.js | 29 ++++++++++++++++++++++++++--- src/app/css/webview.css | 1 + src/app/index.html | 8 ++++++++ src/app/main.css | 21 +++++++++++++++++++++ src/index.js | 1 + 5 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 src/app/css/webview.css (limited to 'src/app/browser.js') diff --git a/src/app/browser.js b/src/app/browser.js index 4d14885..b3b1b59 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -83,6 +83,7 @@ var Browser = { Browser.filters.toggle(false); overlay.classList.remove("shown") browser.classList.remove("shown") + preview.classList.remove("shown") return } } @@ -243,6 +244,20 @@ var Browser = { } } +var view = document.querySelector(".popup#preview webview"); +var Preview = { + show: () => { + preview.classList.add("shown") + }, + hide: () => { + preview.classList.remove("shown") + }, + set: (url, autoshow) => { + if (autoshow != false) {Preview.show()} + view.src = url; + } +} + function BrowserElFromObj(obj) { let pkg = {...obj, ...obj.versions[0]}; @@ -325,7 +340,7 @@ function BrowserEl(properties) {
${properties.title}
${properties.description}
- +
@@ -413,8 +428,16 @@ search.addEventListener("keyup", () => { } }) -browser.addEventListener("scroll", () => { - Browser.filters.toggle(false); +let events = ["scroll", "mousedown", "touchdown"]; +events.forEach((event) => { + browser.addEventListener(event, () => { + Preview.hide(); + Browser.filters.toggle(false); + }) +}); + +view.addEventListener("dom-ready", () => { + view.insertCSS(fs.readFileSync(__dirname + "/css/webview.css", "utf8")); }) let checks = document.querySelectorAll(".check"); diff --git a/src/app/css/webview.css b/src/app/css/webview.css new file mode 100644 index 0000000..4a3fd85 --- /dev/null +++ b/src/app/css/webview.css @@ -0,0 +1 @@ +/* this gets imported into the preview */ diff --git a/src/app/index.html b/src/app/index.html index 02a150f..b146ba3 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -133,6 +133,14 @@
%%gui.browser.loading%%
+