Version Selector

static/css/search.css

@@ -1,18 +1,96 @@
-.column {
-    display: flex;
-    flex-direction: column;
-    width: 50%;
+.clear-button {
+    margin: 30px auto 0 40px;
+    height: 33px;
+    width: 175px;
+
+    background-color: white;
+    border-radius: 5px;
+    border: 1px solid darkgrey;
 }
 
-.categories-flex {
-    position: sticky;
+.versions {
+    display: flex;
+    flex-direction: column;
     width: 25%;
 }
 
+.version-type {
+    margin-top: 20px;
+    margin-left: 40px;
+    margin-right: auto;
+}
+
+.version-scroll {
+    height: 400px;
+    overflow-y: scroll;
+}
+
+.version-type-label {
+    width: 165px;
+    height: 25px;
+    margin-bottom: 0;
+    padding: 2px 5px;
+    cursor: pointer;
+
+    font-weight: bold;
+    color: white;
+    background-color: black;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.version {
+    height: 25px;
+    padding: 2px 5px;
+    cursor: pointer;
+    width: 152px;
+    margin: 0;
+
+    font-weight: bold;
+    color: black;
+    background-color: white;
+    border-bottom: 1px solid darkgrey;
+    border-top: 1px solid darkgrey;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.left-flex {
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+}
+
+.filters {
+    margin-top: 30px;
+    margin-right: 25px;
+    margin-left: auto;
+}
+
+.filters select {
+    height: 33px;
+    width: 175px;
+
+    border-radius: 5px;
+    padding: 0 24px;
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid darkgrey;
+}
+
 .categories {
-    position: relative;
-    top: 100px;
+    margin-top: 30px;
     padding: 5px;
+    margin-right: 20px;
+    margin-left: auto;
 }
 
 .categories-label {
@@ -29,8 +107,6 @@
     padding: 2px 5px;
     cursor: pointer;
     width: 165px;
-    margin-left: auto;
-    margin-right: 20px;
 
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -53,6 +129,12 @@
     margin-left: 10px;
 }
 
+.search-main {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+}
+
 .search-bar {
     position: -webkit-sticky !important;
     position: sticky !important;
@@ -82,7 +164,7 @@
 
 .results {
     width: 100%;
-    margin: auto;
+    margin: 0 auto;
 }
 
 .result {

static/images/icon/downarrow.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Solid" height="512px" viewBox="0 0 512 512" width="512px" class=""><g><path d="m400 216a23.928 23.928 0 0 1 -16.971-7.029l-127.029-127.03-127.029 127.03a24 24 0 0 1 -33.942-33.942l144-144a24 24 0 0 1 33.942 0l144 144a24 24 0 0 1 -16.971 40.971zm-127.029 264.971 144-144a24 24 0 0 0 -33.942-33.942l-127.029 127.03-127.029-127.03a24 24 0 0 0 -33.942 33.942l144 144a24 24 0 0 0 33.942 0z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#E3E9ED"/></g> </svg>

static/js/search.js

@@ -13,6 +13,8 @@ let category_inputs = {
     "fabric": false,
 }
 
+let version_inputs = {};
+
 let resultContainer = document.getElementById("results");
 
 window.onload = function () {
@@ -25,6 +27,85 @@ window.onload = function () {
 
         category.appendChild(ghost);
     }
+
+    let releases = document.getElementById("releases");
+    let snapshots = document.getElementById("snapshots");
+    let archaic = document.getElementById("archaic");
+
+    let xmlHttp = new XMLHttpRequest();
+
+    xmlHttp.onreadystatechange = function() {
+        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+            let versions = JSON.parse(xmlHttp.responseText);
+
+            for (let version of versions.versions) {
+                let versionElement = document.createElement('p');
+                versionElement.className = "version";
+                versionElement.innerHTML = version.id;
+                versionElement.id = version.id;
+                versionElement.setAttribute("onclick", "activateVersion(this)");
+
+                version_inputs[version.id] = false;
+
+                if(version.type === "release")
+                    releases.appendChild(versionElement)
+                else if (version.type === "snapshot")
+                    snapshots.appendChild(versionElement)
+                else if (version.type === "old_alpha" || version.type === "old_beta")
+                    archaic.appendChild(versionElement)
+                else
+                    versionElement.outerHTML = "";
+            }
+        }
+    }
+
+    xmlHttp.open("GET", "https://launchermeta.mojang.com/mc/game/version_manifest.json", true);
+    xmlHttp.send(null);
+}
+
+function clearFilters() {
+    for (let key in category_inputs) {
+        if (category_inputs.hasOwnProperty(key)) {
+            if(category_inputs[key]) {
+                let element = document.getElementById(key);
+
+                element.style.width = "165px";
+                element.style.boxShadow = "0 0";
+
+                document.getElementById(key + "-ghost").className = "category-ghost";
+
+                category_inputs[key] = false;
+            }
+        }
+    }
+
+    for (let key in version_inputs) {
+        if (version_inputs.hasOwnProperty(key)) {
+            if(version_inputs[key]) {
+                let element = document.getElementById(key);
+
+                element.style.width = "152px";
+                element.style.boxShadow = "0 0";
+
+                version_inputs[key] = false;
+            }
+        }
+    }
+
+    handleSearch();
+}
+
+function toggleVisibility(e) {
+    let element = e.parentElement.lastElementChild;
+
+    if (element.style.display === "none") {
+        element.style.display = "block";
+        e.innerHTML = e.innerHTML.replace("+", "-")
+    }
+    else {
+        element.style.display = "none"
+        e.innerHTML = e.innerHTML.replace("-", "+")
+    }
 }
 
 function activateCategory(element) {
@@ -45,11 +126,26 @@ function activateCategory(element) {
     handleSearch();
 }
 
+function activateVersion(element) {
+    version_inputs[element.id] = !version_inputs[element.id]
+
+    if (version_inputs[element.id]) {
+        element.style.width = "142px";
+        element.style.boxShadow = "10px 0" + element.style.color;
+    } else {
+        element.style.width = "152px";
+        element.style.boxShadow = "0 0";
+    }
+
+    handleSearch();
+}
+
 function handleSearch() {
     let safeName = encodeURIComponent(input.value).replace(/%20/g,'+');
 
     let queryString = "search?q=" + safeName;
     let filterString = "";
+    let versionString = "";
 
     for (let key in category_inputs) {
         if (category_inputs.hasOwnProperty(key)) {
@@ -59,13 +155,27 @@ function handleSearch() {
         }
     }
 
-    let takeOffLength = " AND keywords=".length;
+    let filterTakeOffLength = " AND keywords=".length;
 
-    if(filterString.length > takeOffLength) {
-        filterString = filterString.substring(0, filterString.length - takeOffLength)
+    if(filterString.length > filterTakeOffLength) {
+        filterString = filterString.substring(0, filterString.length - filterTakeOffLength)
         queryString += "&f=" + encodeURIComponent( "keywords=" + filterString).replace(/%20/g,'+');
     }
 
+    for (let key in version_inputs) {
+        if (version_inputs.hasOwnProperty(key)) {
+            if(version_inputs[key])
+                versionString += key + " OR versions=";
+        }
+    }
+
+    let versionTakeOffLength = " OR versions=".length;
+
+    if(versionString.length > versionTakeOffLength) {
+        versionString = versionString.substring(0, versionString.length - versionTakeOffLength)
+        queryString += "&v=" + encodeURIComponent( "versions=" + versionString).replace(/%20/g,'+');
+    }
+
     let xmlHttp = new XMLHttpRequest();
 
     xmlHttp.onreadystatechange = function() {