Shaderpack settings nearly finalized.

Added saving function, add pack button, drag and drop functionality to the button, ability to
refresh the list of packs.
Added height limit to the dropdown with scrolling. Cleaned up some styles.

app/assets/css/launcher.css

@@ -1578,6 +1578,39 @@ input:checked + .toggleSwitchSlider:before {
     text-shadow: 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f;
 }
 
+/* Shaderpack settings description. */
+#settingsShaderpackDesc {
+    font-size: 10px;
+    margin: 10px 0px;
+    color: lightgrey;
+    font-weight: bold;
+    width: 89%;
+}
+
+/* Wrapper container. */
+#settingsShaderpackWrapper {
+    display: flex;
+}
+
+/* Button to add shaderpacks. */
+#settingsShaderpackButton {
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(126, 126, 126, 0.57);
+    border-radius: 3px;
+    cursor: pointer;
+    outline: none;
+    transition: 0.25s ease;
+    font-size: 14px;
+    padding: 6px 11px;
+    margin-right: 5px;
+}
+#settingsShaderpackButton:hover,
+#settingsShaderpackButton:focus,
+#settingsShaderpackButton[drag] {
+    background: rgba(54, 54, 54, 0.25);
+    text-shadow: 0px 0px 20px white;
+}
+
 /* Main select container. */
 .settingsSelectContainer {
     position: relative;
@@ -1620,11 +1653,26 @@ input:checked + .toggleSwitchSlider:before {
     left: 0;
     right: 0;
     z-index: 99;
+    max-height: 300%;
+    overflow-y: scroll;
+    border: 1px solid rgba(126, 126, 126, 0.57);
+    border-top: none;
+    border-radius: 0px 0px 3px 3px;
 }
 /* Hide the items when the select box is closed. */
 .settingsSelectOptions[hidden] {
     display: none;
 }
+.settingsSelectOptions::-webkit-scrollbar {
+    width: 2px;
+}
+.settingsSelectOptions::-webkit-scrollbar-track {
+    display: none;
+}
+.settingsSelectOptions::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
+}
 
 /* Shared styles between options and selection div. */
 .settingsSelectOptions div,
@@ -1636,12 +1684,12 @@ input:checked + .toggleSwitchSlider:before {
     cursor: pointer;
 }
 .settingsSelectOptions div {
-    border-width: 0px 1px 1px 1px;
+    border-width: 0px 0px 1px 0px;
     font-size: 12px;
     padding: 4px 16px;
 }
-.settingsSelectOptions .settingsSelectOption:last-child {
-    border-radius: 0px 0px 3px 3px;
+.settingsSelectOptions div:last-child {
+    border-bottom: none;
 }
 
 /* Hover + selected styles. */

app/assets/js/dropinmodutil.js

@@ -208,3 +208,23 @@ exports.setEnabledShaderpack = function(instanceDir, pack){
     }
     fs.writeFileSync(optionsShaders, buf, {encoding: 'utf-8'})
 }
+
+/**
+ * Add shaderpacks.
+ * 
+ * @param {FileList} files The files to add.
+ * @param {string} instanceDir The path to the server instance directory.
+ */
+exports.addShaderpacks = function(files, instanceDir) {
+
+    const p = path.join(instanceDir, 'shaderpacks')
+
+    exports.validateDir(p)
+
+    for(let f of files) {
+        if(SHADER_REGEX.exec(f.name) != null) {
+            fs.moveSync(f.path, path.join(p, f.name))
+        }
+    }
+
+}

app/assets/js/scripts/settings.js

@@ -267,6 +267,7 @@ settingsNavDone.onclick = () => {
     saveModConfiguration()
     ConfigManager.save()
     saveDropinModConfiguration()
+    saveShaderpackSettings()
     switchView(getCurrentView(), VIEWS.landing)
 }
 
@@ -728,6 +729,8 @@ document.addEventListener('keydown', (e) => {
     if(getCurrentView() === VIEWS.settings && selectedSettingsTab === 'settingsTabMods'){
         if(e.key === 'F5'){
             reloadDropinMods()
+            saveShaderpackSettings()
+            resolveShaderpacksForUI()
         }
     }
 })
@@ -780,6 +783,44 @@ function setShadersOptions(arr, selected){
     }
 }
 
+function saveShaderpackSettings(){
+    let sel = 'OFF'
+    for(let opt of document.getElementById('settingsShadersOptions').childNodes){
+        if(opt.hasAttribute('selected')){
+            sel = opt.getAttribute('value')
+        }
+    }
+    DropinModUtil.setEnabledShaderpack(CACHE_SETTINGS_INSTANCE_DIR, sel)
+}
+
+function bindShaderpackButton() {
+    const spBtn = document.getElementById('settingsShaderpackButton')
+    spBtn.onclick = () => {
+        const p = path.join(CACHE_SETTINGS_INSTANCE_DIR, 'shaderpacks')
+        DropinModUtil.validateDir(p)
+        shell.openItem(p)
+    }
+    spBtn.ondragenter = e => {
+        e.dataTransfer.dropEffect = 'move'
+        spBtn.setAttribute('drag', '')
+        e.preventDefault()
+    }
+    spBtn.ondragover = e => {
+        e.preventDefault()
+    }
+    spBtn.ondragleave = e => {
+        spBtn.removeAttribute('drag')
+    }
+
+    spBtn.ondrop = e => {
+        spBtn.removeAttribute('drag')
+        e.preventDefault()
+
+        DropinModUtil.addShaderpacks(e.dataTransfer.files, CACHE_SETTINGS_INSTANCE_DIR)
+        resolveShaderpacksForUI()
+    }
+}
+
 // Server status bar functions.
 
 /**
@@ -846,6 +887,7 @@ function prepareModsTab(first){
     resolveShaderpacksForUI()
     bindDropinModsRemoveButton()
     bindDropinModFileSystemButton()
+    bindShaderpackButton()
     bindModsToggleSwitch()
     loadSelectedServerOnModsTab()
 }

app/settings.ejs

@@ -128,10 +128,14 @@
                 </div>
                 <div id="settingsShadersContainer">
                     <div class="settingsModsHeader">Shaderpacks</div>
-                    <div class="settingsSelectContainer">
-                        <div class="settingsSelectSelected" id="settingsShadersSelected">Select Shaderpack</div>
-                        <div class="settingsSelectOptions" id="settingsShadersOptions" hidden>
+                    <div id="settingsShaderpackDesc">Enable or disable shaders. Please note, shaders will only run smoothly on powerful setups. You may add custom packs here.</div>
+                    <div id="settingsShaderpackWrapper">
+                        <button id="settingsShaderpackButton"> + </button>
+                        <div class="settingsSelectContainer">
+                            <div class="settingsSelectSelected" id="settingsShadersSelected">Select Shaderpack</div>
+                            <div class="settingsSelectOptions" id="settingsShadersOptions" hidden>
 
+                            </div>
                         </div>
                     </div>
                 </div>