aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'src/app')
-rw-r--r--src/app/browser.js46
-rw-r--r--src/app/icons/no-image.pngbin0 -> 1959 bytes
-rw-r--r--src/app/index.html6
-rw-r--r--src/app/main.css87
4 files changed, 133 insertions, 6 deletions
diff --git a/src/app/browser.js b/src/app/browser.js
new file mode 100644
index 0000000..ae3e453
--- /dev/null
+++ b/src/app/browser.js
@@ -0,0 +1,46 @@
+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: "icons/no-image.png",
+ 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/icons/no-image.png b/src/app/icons/no-image.png
new file mode 100644
index 0000000..43265d1
--- /dev/null
+++ b/src/app/icons/no-image.png
Binary files differ
diff --git a/src/app/index.html b/src/app/index.html
index fe383a0..0866816 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -12,6 +12,11 @@
<div id="minimize" onclick="ipcRenderer.send('minimize')"></div>
<div id="close" onclick="ipcRenderer.send('exit')"></div>
</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>
@@ -102,6 +107,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..d3d3b72 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -30,8 +30,83 @@
cursor: pointer;
}
-#winbtns {
+#browser {
+ --spacing: calc(var(--padding) * 3);
+
+ z-index: 2;
+ 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);
+ transform: scale(0.98);
+ backdrop-filter: blur(15px);
+ 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 #search {
+ --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 #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: 2;
display: flex;
position: fixed;
top: var(--padding);
@@ -58,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}
@@ -85,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;
@@ -395,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;
}