initial commit on thunderstore support

Only frontend stuff, nothing that queries Thunderstore.

3 files changed, 78 insertions, 0 deletions

diff --git a/src/app/browser.js b/src/app/browser.js
new file mode 100644
index 0000000..1fe6930
--- /dev/null
+++ b/src/app/browser.js
@@ -0,0 +1,29 @@
+function Browser() {
+	browser.classList.toggle("shown")
+};Browser()
+
+function BrowserEl(properties) {
+	properties = {
+		title: "No name",
+		image: "",
+		author: "Unnamed Pilot",
+		description: "No description",
+		...properties
+	}
+
+	browser.innerHTML += `
+		<div class="el">
+			<div class="image">
+				<img src="${properties.image}">
+			</div>
+			<div class="text">
+				<div class="title">${properties.title}</div>
+				<div class="description">${properties.description} - by ${properties.author}</div>
+			</div>
+		</div>
+	`
+}
+
+new BrowserEl()
+new BrowserEl()
+new BrowserEl()
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>
diff --git a/src/app/main.css b/src/app/main.css
index de0db46..a2c144c 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -30,6 +30,52 @@
 	cursor: pointer;
 }
 
+#browser {
+	--spacing: calc(var(--padding) * 3);
+
+	z-index: 1;
+	opacity: 0.0;
+	position: fixed;
+	overflow-y: scroll;
+	top: var(--spacing);
+	pointer-events: none;
+	left: var(--spacing);
+	background: var(--bg);
+	right: var(--spacing);
+	bottom: var(--spacing);
+	backdrop-filter: blur(15px);
+	transition: opacity 0.15s ease-in-out;
+	border-radius: calc(var(--padding) / 2);
+}
+
+#browser.shown {
+	opacity: 1.0;
+	pointer-events: all;
+}
+
+#browser .el {
+	--spacing: calc(var(--padding) / 2);
+	--height: calc(var(--padding) * 2.5);
+
+	color: white;
+	display: flex;
+	align-items: center;
+	height: var(--height);
+	margin: var(--spacing);
+	padding: var(--spacing);
+	background: var(--selbg);
+	border-radius: var(--spacing);
+	width: calc(100% - var(--spacing) * 4);
+}
+
+#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;
 	display: flex;