From b98a4ec21f41076a753372df5c6f432081e9c6b9 Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Fri, 21 Dec 2018 08:02:24 -0500
Subject: [PATCH] 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       | 54 +++++++++++++++++++++++++++++--
 app/assets/js/dropinmodutil.js    | 20 ++++++++++++
 app/assets/js/scripts/settings.js | 42 ++++++++++++++++++++++++
 app/settings.ejs                  | 10 ++++--
 4 files changed, 120 insertions(+), 6 deletions(-)

diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 56a06360..29a12b11 100644
--- a/app/assets/css/launcher.css
+++ b/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. */
diff --git a/app/assets/js/dropinmodutil.js b/app/assets/js/dropinmodutil.js
index 9d4cbaf5..ebc8e88b 100644
--- a/app/assets/js/dropinmodutil.js
+++ b/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))
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js
index f3694e6a..db9f28a7 100644
--- a/app/assets/js/scripts/settings.js
+++ b/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()
 }
diff --git a/app/settings.ejs b/app/settings.ejs
index e5fd6d19..b1ed183b 100644
--- a/app/settings.ejs
+++ b/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>