Update library page

application-main/src/main/java/com/zyneonstudios/application/main/ApplicationConfig.java

@@ -1,8 +1,6 @@
 package com.zyneonstudios.application.main;
 
-import com.zyneonstudios.Main;
 import live.nerotv.shademebaby.file.Config;
-import live.nerotv.shademebaby.utils.FileUtil;
 
 import java.net.URLDecoder;
 import java.nio.charset.StandardCharsets;
@@ -87,7 +85,7 @@ else if(arg.startsWith("--test")) {
             theme = getSettings().getString("settings.theme");
         }
 
-        applicationVersion = new Config(FileUtil.getResourceFile("nexus.json", Main.class)).getString("version");
+        //applicationVersion = new Config(FileUtil.getResourceFile("nexus.json", Main.class)).getString("version");
     }
 
     //Method to get the startup arguments

application-ui/content/assets/application/css/app-library.css

@@ -1,16 +1,29 @@
 body {
     overflow: hidden !important;
+    background: var(--background5);
+}
+
+.cnt {
+    border-top-left-radius: 1.5rem !important;
+    background: var(--background);
+    background-size: cover;
 }
 
 .library {
+    border-top-left-radius: 1.5rem !important;
+    background: linear-gradient(90deg,var(--background),#00000000);
     position: absolute;
     width: calc(100% - 1rem);
-    height: calc(100% - 1rem);
-    padding: 0.5rem;
+    height: 100%;
 }
 
-.library .flex {
-    height: 100%;
+.library .library-flex {
+    border-top-left-radius: 1.5rem !important;
+    background: linear-gradient(var(--background),#00000000);
+    padding: 0.5rem;
+    width: 100%;
+    height: calc(100% - 1rem);
+    backdrop-filter: blur(5px);
 }
 
 .library .library-menu {
@@ -42,7 +55,7 @@ body {
     transition: none !important;
 }
 
-#menu-group-template, #group-actions-entry {
+#menu-group-template, #group-actions-entry, #view-image-container, #overview-button, #library-view {
     display: none;
 }
 
@@ -125,4 +138,65 @@ body {
     opacity: 1;
     z-index: 100;
     overflow-y: auto;
+}
+
+.library .library-content #library-view .flex {
+    position: absolute;
+    top: 5rem; right: 0.1rem; left: 0.3rem;
+    max-height: 40%;
+    overflow: hidden;
+}
+
+.library .library-content #library-view .flex .view-image {
+    position: relative;
+    width: calc(100% - 0.8rem);
+    padding: 0.4rem;
+    overflow: hidden;
+}
+
+.library .library-content #library-view .flex .view-image img {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 1rem;
+}
+
+.library .library-content #library-view .flex .view-image img:hover {
+    transition: all 0.25s ease;
+    background: var(--background6);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 0 0.4rem var(--shadow3);
+}
+
+.library .library-content #library-view .flex .view-description {
+    width: calc(100% - 1.8rem - 4px);
+    min-height: calc(100% - 1.5rem - 4px);
+    max-height: calc(100% - 1.5rem - 4px);
+    margin: 0.4rem;
+    backdrop-filter: blur(1px);
+    right: 0.1rem;
+    padding: 0.4rem 0.6rem 0.4rem 0.6rem;
+    border: 2px solid var(--border);
+    overflow: hidden;
+    overflow-y: auto;
+    opacity: 0.8;
+    box-shadow: 0 0 0.3rem var(--shadow3);
+    border-radius: 1rem;
+}
+
+.library .library-content #library-view .flex .view-description:hover {
+    transition: all 0.25s ease;
+    opacity: 1;
+    background: var(--background2);
+}
+
+.library .library-content #library-view .flex .view-description h4 {
+    font-weight: 1 !important; font-family: OpenSans, sans-serif;
+    padding: 0; margin: 0;
+}
+
+.library .library-content #library-view .flex .view-description:hover h4 {
+    color: var(--highlight);
 }

application-ui/content/assets/application/javascript/app-library.js

@@ -1,19 +1,23 @@
-let lastTitle = "";
-let lastHighlighted;
-let highlighted;
+let lastHighlighted = "";
+let highlighted = "";
+let moduleId = "shared";
 
 function initLibrary() {
     const urlParams = new URLSearchParams(window.location.search);
     if(urlParams.get("moduleId")!==null||localStorage.getItem("settings.lastLibraryModule")!==null) {
-        let moduleId;
         if(urlParams.get("moduleId")!==null) {
             moduleId = urlParams.get('moduleId');
         } else {
             moduleId = localStorage.getItem("settings.lastLibraryModule");
         }
         if(moduleId!=="-1"&&moduleId!==-1) {
             connector("sync.library.module." + moduleId);
-            document.getElementById("select-game-module").value = moduleId;
+            if(optionExists("select-game-module",moduleId)) {
+                document.getElementById("select-game-module").value = moduleId;
+            }
+            if(urlParams.get("viewId")!==null) {
+                showView(urlParams.get("viewId"));
+            }
             return;
         }
     }
@@ -27,6 +31,17 @@ function initLibrary() {
     }
 }
 
+function optionExists(selectId, value) {
+    const selectElement = document.getElementById(selectId);
+    const options = selectElement.options;
+    for (let i = 0; i < options.length; i++) {
+        if (options[i].value === value) {
+            return true;
+        }
+    }
+    return false;
+}
+
 function addModuleToList(title,moduleId,image) {
     const template = document.getElementById('add-module-option');
     const entry = template.cloneNode(true);
@@ -47,38 +62,23 @@ function onModuleChange() {
     }
 }
 
-function toggleLibraryOverview(title_) {
-    const overview = document.getElementById("library-overview");
-    const title = document.getElementById("title-name");
-    overview.classList.toggle("active");
-    if(overview.classList.contains("active")) {
-        lastTitle = title.innerText;
-        if(highlighted) {
-            lastHighlighted = highlighted;
-        }
-        title.innerText = title_;
-        highlight(document.getElementById("overview-button"));
-    } else {
-        title.innerText = lastTitle;
-        if(lastHighlighted) {
-            highlight(lastHighlighted);
-        } else {
-            if(highlighted) {
-                highlighted.classList.remove("active");
-                highlighted = null;
+function highlight(id) {
+    const highlight = document.getElementById(id);
+    if(highlight) {
+        const oldHighlight = document.getElementById(highlighted);
+        if(oldHighlight) {
+            if(oldHighlight.classList.contains("active")) {
+                oldHighlight.classList.remove("active");
             }
         }
+        if(!highlight.classList.contains("active")) {
+            highlight.classList.add("active");
+        }
+        lastHighlighted = highlight;
+        highlighted = id;
     }
 }
 
-function highlight(element) {
-    if(highlighted) {
-        highlighted.classList.remove("active");
-    }
-    element.classList.add("active");
-    highlighted = element;
-}
-
 function addAction(title,iconClass,onclick,id) {
     const actionTemplate = document.getElementById("group-actions-entry");
     const actionEntry = actionTemplate.cloneNode(true);
@@ -114,16 +114,102 @@ function addGroupEntry(groupId,title,id,image) {
         connector("sync.button.library.menu.group."+groupId+"."+id);
     }
 
+    actionEntry.addEventListener("dblclick", function() {
+        connector("java.button.launch."+id);
+        actionEntry.querySelector("p").innerText = "Starting...";
+        let seconds = 5;
+        const countdownInterval = setInterval(() => {
+            seconds--;
+            if (seconds <= 0) {
+                actionEntry.querySelector("p").innerText = title;
+                clearInterval(countdownInterval);
+            }
+        }, 1000);
+    });
+
     if(title) {
         actionEntry.querySelector("p").innerText = title;
     }
 
+    const n = Math.floor(Math.random() * 6) + 1;
+    let i = "";
+    if(Math.random() < 0.5) {
+        i="bx bx-dice-"+n;
+    } else {
+        i="bx bxs-dice-"+n;
+    }
     if(image) {
-        actionEntry.querySelector("i").style.display = "none";
-        actionEntry.querySelector("img").src = image;
+        if(image!=="") {
+            actionEntry.querySelector("i").style.display = "none";
+            actionEntry.querySelector("img").src = image;
+        } else {
+            actionEntry.querySelector("img").style.display = "none";
+            actionEntry.querySelector("i").classList = i;
+        }
     } else {
-        actionEntry.querySelector("i").classList = "bx bx-x";
+        actionEntry.querySelector("img").style.display = "none";
+        actionEntry.querySelector("i").classList = i;
     }
 
     actionTemplate.parentNode.insertBefore(actionEntry,actionTemplate);
+
+    if(id === highlighted) {
+        highlighted = "";
+        highlight(actionEntry);
+    }
+}
+
+function setTitle(img,text,options_) {
+    const title = document.getElementById("title-name");
+    const image = document.getElementById("title-image");
+    const options = document.getElementById("title-options");
+    if(text) {
+        title.innerText = text;
+    } else {
+        title.innerText = ""
+    }
+    if(img) {
+        image.style.display = "inherit";
+        image.src = img;
+    } else {
+        image.style.display = "none";
+        image.src = "";
+    }
+    if(options_) {
+        image.style.display = "inherit";
+        image.innerHTML = options_;
+    } else {
+        options.style.display = "none";
+        options.innerHTML = "";
+    }
+}
+
+function setViewDescription(description) {
+    const desc = document.getElementById("view-description");
+    if(description) {
+        desc.innerText = description;
+    } else {
+        desc.innerHTML = "<i class='bx bx-loader-alt bx-spin'></i> Loading...";
+    }
+}
+
+function setViewImage(image_) {
+    const image = document.getElementById("view-image");
+    const container = document.getElementById("view-image-container");
+    if(image_) {
+        container.style.display = "inherit";
+        image.src = image_;
+    } else {
+        container.style.display = "none";
+        image.src = "";
+    }
+}
+
+function showView(id) {
+    document.getElementById("library-view").style.display = "inherit";
+    document.querySelector(".cnt").style.backgroundImage = "url('')";
+    const button = document.getElementById(id);
+    setTitle(); setViewImage(); setViewDescription();
+    connector("sync.library.module." + moduleId + ".view." + id);
+    highlight(id);
 }

application-ui/content/assets/application/javascript/app-shared.js

@@ -97,4 +97,14 @@ function error(message) {
 
 function debug(message) {
     deb(message);
-}
+}
+
+const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+function handleColorSchemeChange(e) {
+    if(colors==="automatic") {
+        setColors(colors);
+    }
+}
+
+colorSchemeQuery.addListener(handleColorSchemeChange);