From 20bf62f42f41638733e0b02affe90c04b1cb2938 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Thu, 20 Jan 2022 00:37:52 +0100
Subject: initial commit on thunderstore support

Only frontend stuff, nothing that queries Thunderstore.
---
 src/app/index.html | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/app/index.html')

diff --git a/src/app/index.html b/src/app/index.html
index fe383a0..424265e 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -12,6 +12,8 @@
 			<div id="minimize" onclick="ipcRenderer.send('minimize')"></div>
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
+
+		<div id="browser"></div>
 		
 		<nav class="gamesContainer">
 			<button id="vpBtn" onclick="page(0)"></button>
@@ -102,6 +104,7 @@
 
 		<script src="lang.js"></script>
 		<script src="main.js"></script>
+		<script src="browser.js"></script>
 		<script src="launcher.js"></script>
 	</body>
 </html>
-- 
cgit v1.2.3


From fd967f570985339905c52238ead049555c5efcdc Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Thu, 20 Jan 2022 13:45:57 +0100
Subject: added fallback icon, and ways to close the browser

You can either click "Escape" or simply click on the darkened background
and it'll then close it. Ideally the fallback icon should never be
shown, and it is more for testing.

I also added a search bar that does nothing currently.
---
 src/app/browser.js         |  21 ++++++++++++++++++--
 src/app/icons/no-image.png | Bin 0 -> 1959 bytes
 src/app/index.html         |   5 ++++-
 src/app/main.css           |  47 ++++++++++++++++++++++++++++++++++++---------
 4 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 src/app/icons/no-image.png

(limited to 'src/app/index.html')

diff --git a/src/app/browser.js b/src/app/browser.js
index 1fe6930..ae3e453 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -1,11 +1,28 @@
-function Browser() {
+function Browser(state) {
+	if (state) {
+		overlay.classList.add("shown")
+		browser.classList.add("shown")
+		return
+	} else if (! state) {
+		if (state != undefined) {
+			overlay.classList.remove("shown")
+			browser.classList.remove("shown")
+			return
+		}
+	}
+
+	overlay.classList.toggle("shown")
 	browser.classList.toggle("shown")
 };Browser()
 
+document.body.addEventListener("keyup", (e) => {
+	if (e.key == "Escape") {Browser(false)}
+})
+
 function BrowserEl(properties) {
 	properties = {
 		title: "No name",
-		image: "",
+		image: "icons/no-image.png",
 		author: "Unnamed Pilot",
 		description: "No description",
 		...properties
diff --git a/src/app/icons/no-image.png b/src/app/icons/no-image.png
new file mode 100644
index 0000000..43265d1
Binary files /dev/null and b/src/app/icons/no-image.png differ
diff --git a/src/app/index.html b/src/app/index.html
index 424265e..0866816 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -13,7 +13,10 @@
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
 
-		<div id="browser"></div>
+		<div id="overlay" onclick="Browser()"></div>
+		<div id="browser">
+			<input id="search" placeholder="Search...">
+		</div>
 		
 		<nav class="gamesContainer">
 			<button id="vpBtn" onclick="page(0)"></button>
diff --git a/src/app/main.css b/src/app/main.css
index a2c144c..d3d3b72 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -33,7 +33,7 @@
 #browser {
 	--spacing: calc(var(--padding) * 3);
 
-	z-index: 1;
+	z-index: 2;
 	opacity: 0.0;
 	position: fixed;
 	overflow-y: scroll;
@@ -43,17 +43,37 @@
 	background: var(--bg);
 	right: var(--spacing);
 	bottom: var(--spacing);
+	transform: scale(0.98);
 	backdrop-filter: blur(15px);
-	transition: opacity 0.15s ease-in-out;
 	border-radius: calc(var(--padding) / 2);
+	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
 }
 
 #browser.shown {
 	opacity: 1.0;
 	pointer-events: all;
+	transform: scale(1.0);
+}
+
+#overlay {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+	opacity: 0.0;
+	position: fixed;
+	background: var(--bg);
+	pointer-events: none;
+	transition: opacity 0.15s ease-in-out;
+}
+
+#overlay.shown {
+	opacity: 0.8;
+	pointer-events: all;
 }
 
-#browser .el {
+#browser .el, #browser #search {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 2.5);
 
@@ -68,16 +88,25 @@
 	width: calc(100% - var(--spacing) * 4);
 }
 
+#browser #search {
+	--height: calc(var(--padding) * 1.5);
+
+	border: none;
+	outline: none;
+	width: calc(100% - var(--spacing) * 2);
+}
+
 #browser .el .image, #browser .el .image img {
 	width: var(--height);
 	height: var(--height);
 	margin-right: var(--spacing);
 }
+
 #browser .el .title {font-size: 1.2em}
 #browser .el .description {font-size: 0.8em}
 
 #winbtns {
-	z-index: 1;
+	z-index: 2;
 	display: flex;
 	position: fixed;
 	top: var(--padding);
@@ -104,9 +133,10 @@ body {
 	margin: 0;
 	overflow: hidden;
 	user-select: none;
-	font-family: "Roboto", sans-serif;
 }
 
+body, button, input {font-family: "Roboto", sans-serif}
+
 button {outline: none}
 b, strong {font-weight: 700}
 body, input, button {font-weight: 500}
@@ -131,9 +161,8 @@ img {pointer-events: none}
 	left: 0;
 	right: 0;
 	bottom: 0;
-	pointer-events: none;
-	position: fixed;
-	transform: scale(1.1);
+	z-index: -1;
+	position: absolute;
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
@@ -441,6 +470,6 @@ code {
   	-webkit-app-region: drag;
 }
 
-a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod {
+a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay {
 	-webkit-app-region: no-drag;
 }
-- 
cgit v1.2.3


From 8747588222f1bd434af802262b1479ef5b606097 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Fri, 21 Jan 2022 01:23:50 +0100
Subject: actually loads thunderstore now

---
 src/app/browser.js | 47 +++++++++++++++++++++++++++++++++--------------
 src/app/index.html |  2 +-
 src/app/main.css   |  7 ++++++-
 3 files changed, 40 insertions(+), 16 deletions(-)

(limited to 'src/app/index.html')

diff --git a/src/app/browser.js b/src/app/browser.js
index ae3e453..50cabfe 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -1,22 +1,39 @@
-function Browser(state) {
-	if (state) {
-		overlay.classList.add("shown")
-		browser.classList.add("shown")
-		return
-	} else if (! state) {
-		if (state != undefined) {
-			overlay.classList.remove("shown")
-			browser.classList.remove("shown")
+var Browser = {
+	toggle: (state) => {
+		if (state) {
+			overlay.classList.add("shown")
+			browser.classList.add("shown")
 			return
+		} else if (! state) {
+			if (state != undefined) {
+				overlay.classList.remove("shown")
+				browser.classList.remove("shown")
+				return
+			}
 		}
-	}
 
-	overlay.classList.toggle("shown")
-	browser.classList.toggle("shown")
-};Browser()
+		overlay.classList.toggle("shown")
+		browser.classList.toggle("shown")
+	},
+	loadfront: async () => {
+		let packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
+		
+		for (let i in packages) {
+			let pkg = {...packages[i], ...packages[i].versions[0]};
+
+			new BrowserEl({
+				title: pkg.name,
+				image: pkg.icon,
+				author: pkg.owner,
+				description: pkg.description
+			})
+		}
+	}
+}; Browser.toggle()
+Browser.loadfront()
 
 document.body.addEventListener("keyup", (e) => {
-	if (e.key == "Escape") {Browser(false)}
+	if (e.key == "Escape") {Browser.toggle(false)}
 })
 
 function BrowserEl(properties) {
@@ -36,6 +53,8 @@ function BrowserEl(properties) {
 			<div class="text">
 				<div class="title">${properties.title}</div>
 				<div class="description">${properties.description} - by ${properties.author}</div>
+				<button>Install</button>
+				<button>Info</button>
 			</div>
 		</div>
 	`
diff --git a/src/app/index.html b/src/app/index.html
index 0866816..131ec38 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -13,7 +13,7 @@
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
 
-		<div id="overlay" onclick="Browser()"></div>
+		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
 			<input id="search" placeholder="Search...">
 		</div>
diff --git a/src/app/main.css b/src/app/main.css
index d3d3b72..3c406ee 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -75,7 +75,7 @@
 
 #browser .el, #browser #search {
 	--spacing: calc(var(--padding) / 2);
-	--height: calc(var(--padding) * 2.5);
+	--height: calc(var(--padding) * 3);
 
 	color: white;
 	display: flex;
@@ -100,10 +100,15 @@
 	width: var(--height);
 	height: var(--height);
 	margin-right: var(--spacing);
+	border-radius: var(--spacing);
 }
 
 #browser .el .title {font-size: 1.2em}
 #browser .el .description {font-size: 0.8em}
+#browser .el button {
+	background: var(--blue);
+	margin-top: var(--spacing);
+}
 
 #winbtns {
 	z-index: 2;
-- 
cgit v1.2.3


From f474005ea330198caa066a50c5f71ff087d4158f Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sun, 23 Jan 2022 21:58:56 +0100
Subject: added loading, close button, element fadein etc

To show the loading simply do Browser.loading(), when a BrowserEl() is
made it auto removes it. The loading and BrowserEl's will fade into
view instead of popping in instantly.

And then now there's a tiny close button, as it may not be obvious you
can click the dark overlay or click Escape.
---
 src/app/browser.js | 15 ++++++++++-----
 src/app/index.html | 10 +++++++++-
 src/app/main.css   | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/lang/en.json   |  2 ++
 4 files changed, 72 insertions(+), 9 deletions(-)

(limited to 'src/app/index.html')

diff --git a/src/app/browser.js b/src/app/browser.js
index 50cabfe..8af6afe 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -28,6 +28,11 @@ var Browser = {
 				description: pkg.description
 			})
 		}
+	},
+	loading: () => {
+		if (! browserEntries.querySelector(".loading")) {
+			browserEntries.innerHTML = `<div class="loading">${lang("gui.browser.loading")}</div>`;
+		}
 	}
 }; Browser.toggle()
 Browser.loadfront()
@@ -45,7 +50,11 @@ function BrowserEl(properties) {
 		...properties
 	}
 
-	browser.innerHTML += `
+	if (browserEntries.querySelector(".loading")) {
+		browserEntries.innerHTML = "";
+	}
+
+	browserEntries.innerHTML += `
 		<div class="el">
 			<div class="image">
 				<img src="${properties.image}">
@@ -59,7 +68,3 @@ function BrowserEl(properties) {
 		</div>
 	`
 }
-
-new BrowserEl()
-new BrowserEl()
-new BrowserEl()
diff --git a/src/app/index.html b/src/app/index.html
index 131ec38..e03936d 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -15,7 +15,15 @@
 
 		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
-			<input id="search" placeholder="Search...">
+			<div id="misc">
+				<input id="search" placeholder="Search...">
+				<button id="close" onclick="Browser.toggle(false)">
+					<img src="icons/close.png">
+				</button>
+			</div>
+			<div id="browserEntries">
+				<div class="loading">%%gui.browser.loading%%</div>
+			</div>
 		</div>
 		
 		<nav class="gamesContainer">
diff --git a/src/app/main.css b/src/app/main.css
index 3c406ee..e13979a 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -73,10 +73,27 @@
 	pointer-events: all;
 }
 
-#browser .el, #browser #search {
+@keyframes fadein {
+	0% {opacity: 0.0}
+	100% {opacity: 1.0}
+}
+
+#browser .el, #browser #misc, #browser .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3);
+	--mischeight: calc(var(--padding) * 1.5);
+
+	animation-duration: 0.15s;
+	animation-iteration-count: 1;
+	animation-name: fadein;
+	animation-fill-mode: forwards;
+	animation-timing-function: ease-in-out;
+
+	opacity: 0.0;
+	transition: 0.15s ease-in-out;
+}
 
+#browser .el, #browser #search, #browser #close {
 	color: white;
 	display: flex;
 	align-items: center;
@@ -88,14 +105,45 @@
 	width: calc(100% - var(--spacing) * 4);
 }
 
-#browser #search {
-	--height: calc(var(--padding) * 1.5);
+#browser #misc, #browser #search {
+	--height: var(--mischeight);
+}
+
+#browser #misc {
+	display: flex;
+}
 
+#browser #search {
 	border: none;
 	outline: none;
 	width: calc(100% - var(--spacing) * 2);
 }
 
+#browser #close {
+	--height: calc(var(--padding) * 1.5);
+
+	padding: 0px;
+	margin-left: 0px;
+	width: var(--height);
+}
+
+#browser #close img {
+	opacity: 0.6;
+	width: var(--height);
+	height: var(--height);
+	transform: scale(0.6);
+}
+
+#browser .loading {
+	width: 100%;
+	color: white;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	height: calc(100% - var(--mischeight) - var(--height));
+}
+
 #browser .el .image, #browser .el .image img {
 	width: var(--height);
 	height: var(--height);
diff --git a/src/lang/en.json b/src/lang/en.json
index c2b6f98..ecc2cc5 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -62,6 +62,8 @@
 	"gui.mods.installing": "Installing mod...",
 	"gui.mods.installedmod": "Installed mod!",
 
+	"gui.browser.loading": "Loading mods...",
+
 	"gui.update.downloading": "Downloading...",
 	"gui.update.extracting": "Extracting update...",
 	"gui.update.finished": "Done! Ready to play!",
-- 
cgit v1.2.3


From 89bd545b938fb05980393a3f2ae3f0aa2cbee220 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sun, 23 Jan 2022 22:17:59 +0100
Subject: added "Find Mods" button

---
 src/app/index.html | 1 +
 src/app/main.css   | 5 ++++-
 src/lang/en.json   | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/app/index.html')

diff --git a/src/app/index.html b/src/app/index.html
index e03936d..c2978bd 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -92,6 +92,7 @@
 								<button id="togglemod" onclick="selected().toggle()">%%gui.mods.toggle%%</button>
 								<button id="toggleall" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button>
 								<button id="installmod" onclick="installmod()">%%gui.mods.install%%</button>
+								<button id="installmod" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
 							</div>
 						</div>
 					</div>
diff --git a/src/app/main.css b/src/app/main.css
index e13979a..acec007 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -513,7 +513,10 @@ code {
 }
 
 .modbtns button {
-	margin-left: calc(var(--padding) / 3);
+	--spacing: calc(var(--padding) / 3);
+	margin-left: var(--spacing);
+	margin-top: calc(var(--spacing) / 2);
+	margin-bottom: calc(var(--spacing) / 2);
 }
 
 /* drag control */
diff --git a/src/lang/en.json b/src/lang/en.json
index ecc2cc5..5377ca2 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -49,6 +49,7 @@
 	"gui.mods.count": "Mods Installed:",
 	"gui.mods.disabledtag": "Disabled",
 	"gui.mods.install": "Install Mod",
+	"gui.mods.find": "Find Mods",
 	"gui.mods.toggle": "Toggle Mod",
 	"gui.mods.toggleall": "Toggle All",
 	"gui.mods.remove": "Remove Mod",
-- 
cgit v1.2.3


From 8b97390a9e35117bd4bc2f9ceb26f090d6a67ee9 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sat, 5 Feb 2022 19:51:20 +0100
Subject: various changes, aesthetic and functionality

This should fix the window drag not working, however I cannot test that.
As my WM doesn't support it, a Windows contributor will have to test it.

I also added an info button that opens the mod's page in your web
browser, this button is of course localized, along with that I localized
the placeholder in the search input.

There's also a few general aesthetic changes, like adding a tiny border
around #modsdiv and #browser.
---
 src/app/browser.js |  2 ++
 src/app/index.html |  2 +-
 src/app/main.css   | 10 ++++++++--
 src/lang/en.json   |  4 +++-
 4 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'src/app/index.html')

diff --git a/src/app/browser.js b/src/app/browser.js
index 5695661..7b67822 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -100,6 +100,7 @@ function BrowserElFromObj(obj) {
 		title: pkg.name,
 		image: pkg.icon,
 		author: pkg.owner,
+		url: pkg.package_url,
 		download: pkg.download_url,
 		version: pkg.version_number,
 		description: pkg.description
@@ -147,6 +148,7 @@ function BrowserEl(properties) {
 				<div class="title">${properties.title}</div>
 				<div class="description">${properties.description}</div>
 				<button onclick="installFromURL('${properties.download}')">${installstr}</button>
+				<button onclick="require('electron').shell.openExternal('${properties.url}')">${lang('gui.browser.info')}</button>
 				<button class="visual">${properties.version}</button>
 				<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
 			</div>
diff --git a/src/app/index.html b/src/app/index.html
index c2978bd..b861736 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -16,7 +16,7 @@
 		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
 			<div id="misc">
-				<input id="search" placeholder="Search...">
+				<input id="search" placeholder="%%gui.browser.search%%">
 				<button id="close" onclick="Browser.toggle(false)">
 					<img src="icons/close.png">
 				</button>
diff --git a/src/app/main.css b/src/app/main.css
index 4f1ddc2..2791488 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -9,7 +9,11 @@
 	--selbg: rgba(80, 80, 80, 0.5);
 	--redbg: linear-gradient(45deg, var(--red), #FA4343);
 	--bluebg: linear-gradient(45deg, var(--blue), #7380ED);
+}
 
+#browser, #modsdiv {
+	outline: 1px solid #444444;
+	border: 3px solid var(--bg);
 }
 
 ::-webkit-scrollbar {
@@ -73,7 +77,7 @@ button {
 	bottom: var(--spacing);
 	transform: scale(0.98);
 	backdrop-filter: blur(15px);
-	border-radius: calc(var(--padding) / 2);
+	border-radius: calc(var(--padding) / 3);
 	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
 }
 
@@ -556,7 +560,9 @@ code {
 
 /* drag control */
 
-#bgHolder {
+#bgHolder, 
+#overlay.shown + .mainContainer, 
+#overlay.shown + .gamesContainer {
 	user-select: none;
   	-webkit-app-region: drag;
 }
diff --git a/src/lang/en.json b/src/lang/en.json
index 6bef99f..c51c843 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -63,12 +63,14 @@
 	"gui.mods.installing": "Installing mod...",
 	"gui.mods.installedmod": "Installed mod!",
 
+	"gui.browser.info": "Info",
 	"gui.browser.madeby": "by",
+	"gui.browser.search": "Search...",
 	"gui.browser.update": "Update",
-	"gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
 	"gui.browser.install": "Install",
 	"gui.browser.reinstall": "Re-Install",
 	"gui.browser.loading": "Loading mods...",
+	"gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
 
 	"gui.update.downloading": "Downloading...",
 	"gui.update.extracting": "Extracting update...",
-- 
cgit v1.2.3