Allow the up/down buttons to move the ground

Previously, the buttons were only enabled with an unlocked y-axis.
Now, they can be used to adjust the ground position.

This also adjusts the settings-init process to fill in the saved
settings with setTimeout. It was trying to update the settings
dropdown before it was inserted into the document!

macrovision.css

@@ -97,14 +97,14 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
 
 #options {
     position: relative;
-    flex: 1 1 10vw;
+    flex: 1 1 15vw;
     min-width: 100pt;
     display: flex;
     justify-content: start;
     flex-direction: column;
     background: #444;
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: scroll;
     width: 100%;
     height: 100%;
     scrollbar-color: #e1e1e1 #888;
@@ -137,9 +137,8 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     background: #000000;
 }
 #options::-webkit-scrollbar-track {
-    background: #00000000;
+    background: #222222;
     border: 0px none #ffffff;
-    border-radius: 50px;
 }
 #options::-webkit-scrollbar-track:hover {
     background: #666666;

macrovision.js

@@ -2617,6 +2617,15 @@ const settingsCategories = {
     "visuals": "Visuals"
 }
 
+const groundPosChoices = [
+    "very-high",
+    "high",
+    "medium",
+    "low",
+    "very-low",
+    "bottom",
+];
+
 const settingsData = {
     "show-vertical-scale": {
         name: "Vertical Scale",
@@ -2682,14 +2691,9 @@ const settingsData = {
         },
         set value(param) {
             config.lockYAxis = param;
+            updateScrollButtons();
             if (param) {
-                config.y = 0;
                 updateSizes();
-                document.querySelector("#scroll-up").disabled = true;
-                document.querySelector("#scroll-down").disabled = true;
-            } else {
-                document.querySelector("#scroll-up").disabled = false;
-                document.querySelector("#scroll-down").disabled = false;
             }
         }
     },
@@ -2756,19 +2760,13 @@ const settingsData = {
         desc: "How high the ground is if the y-axis is locked",
         type: "select",
         default: "bottom",
-        options: [
-            "very-high",
-            "high",
-            "medium",
-            "low",
-            "very-low",
-            "bottom",
-        ],
+        options: groundPosChoices,
         get value() {
             return config.groundPos;
         },
         set value(param) {
             config.groundPos = param;
+            updateScrollButtons();
             updateSizes();
         }
     },
@@ -3090,7 +3088,7 @@ function prepareSettings(userSettings) {
                 entry.value = input.checked;
             }
             
-            update();
+            setTimeout(update);
 
             input.addEventListener("change", update);
         } else if (entry.type == "select") {
@@ -3763,31 +3761,47 @@ document.addEventListener("DOMContentLoaded", () => {
 
 
     document.querySelector("#scroll-up").addEventListener("mousedown", e => {
-        scrollDirection = 1;
-        clearInterval(scrollHandle);
-        scrollHandle = setInterval(doYScroll, 1000 / 20);
-        e.stopPropagation();
+        if (config.lockYAxis) {
+            moveGround(true);
+        } else {
+            scrollDirection = 1;
+            clearInterval(scrollHandle);
+            scrollHandle = setInterval(doYScroll, 1000 / 20);
+            e.stopPropagation();
+        }
     });
 
     document.querySelector("#scroll-down").addEventListener("mousedown", e => {
-        scrollDirection = -1;
-        clearInterval(scrollHandle);
-        scrollHandle = setInterval(doYScroll, 1000 / 20);
-        e.stopPropagation();
+        if (config.lockYAxis) {
+            moveGround(false);
+        } else {
+            scrollDirection = -1;
+            clearInterval(scrollHandle);
+            scrollHandle = setInterval(doYScroll, 1000 / 20);
+            e.stopPropagation();
+        }
     });
 
     document.querySelector("#scroll-up").addEventListener("touchstart", e => {
-        scrollDirection = 1;
-        clearInterval(scrollHandle);
-        scrollHandle = setInterval(doYScroll, 1000 / 20);
-        e.stopPropagation();
+        if (config.lockYAxis) {
+            moveGround(true);
+        } else {
+            scrollDirection = 1;
+            clearInterval(scrollHandle);
+            scrollHandle = setInterval(doYScroll, 1000 / 20);
+            e.stopPropagation();
+        }
     });
 
     document.querySelector("#scroll-down").addEventListener("touchstart", e => {
-        scrollDirection = -1;
-        clearInterval(scrollHandle);
-        scrollHandle = setInterval(doYScroll, 1000 / 20);
-        e.stopPropagation();
+        if (config.lockYAxis) {
+            moveGround(false);
+        } else {
+            scrollDirection = -1;
+            clearInterval(scrollHandle);
+            scrollHandle = setInterval(doYScroll, 1000 / 20);
+            e.stopPropagation();
+        }
     });
 
     document.addEventListener("mouseup", e => {
@@ -5316,4 +5330,42 @@ function getVerticalOffset() {
     } else {
         return 0;
     }
+}
+
+function moveGround(down) {
+    const index = groundPosChoices.indexOf(config.groundPos);
+
+    if (down) {
+        if (index < groundPosChoices.length - 1) {
+            config.groundPos = groundPosChoices[index + 1]
+        }
+    } else {
+        if (index > 0) {
+            config.groundPos = groundPosChoices[index - 1]
+        }
+    }
+
+    updateScrollButtons();
+    updateSizes();
+}
+
+function updateScrollButtons() {
+    const up = document.querySelector("#scroll-up")
+    const down = document.querySelector("#scroll-down")
+
+    up.disabled = false;
+    down.disabled = false;
+
+    document.querySelector("#setting-ground-pos").value = config.groundPos;
+
+    if (config.lockYAxis) {
+        const index = groundPosChoices.indexOf(config.groundPos);
+
+        if (index == 0) {
+            down.disabled = true;
+        }
+        if (index == groundPosChoices.length - 1) {
+            up.disabled = true;
+        }
+    }
 }