aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-01-20 00:37:52 +0100
committer0neGal <mail@0negal.com>2022-01-20 00:37:52 +0100
commit20bf62f42f41638733e0b02affe90c04b1cb2938 (patch)
tree0f30e6069e622b46743d15cbeb2a9be66e246e06 /src
parentae7de46f4748c800097f0f3c700e6525d7d7cc4f (diff)
downloadViper-20bf62f42f41638733e0b02affe90c04b1cb2938.tar.gz
Viper-20bf62f42f41638733e0b02affe90c04b1cb2938.zip
initial commit on thunderstore support
Only frontend stuff, nothing that queries Thunderstore.
Diffstat (limited to 'src')
-rw-r--r--src/app/browser.js29
-rw-r--r--src/app/index.html3
-rw-r--r--src/app/main.css46
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;