Organize settings into categories

This also fixes the select boxes going way out of bounds

macrovision.css

@@ -1028,6 +1028,7 @@ button {
     height: 100%;
     background: #555;
     font-size: 16pt;
+    width: 100%;
 }
 
 .settings-holder.enabled > select {
@@ -1159,4 +1160,10 @@ body.screenshot-mode .scroll-button {
 #options-entity {
     display: flex;
     flex-direction: column;
+}
+
+.settings-category-label {
+    font-size: 200%;
+    margin: auto;
+    padding: 5px;
 }

macrovision.js

@@ -3434,13 +3434,6 @@ const backgroundColors = {
     light: "#555",
 };
 
-const settingsCategories = {
-    background: "Background",
-    controls: "Controls",
-    info: "Info",
-    visuals: "Visuals",
-};
-
 const groundPosChoices = [
     "very-high",
     "high",
@@ -3450,10 +3443,34 @@ const groundPosChoices = [
     "bottom",
 ];
 
+const settingsCategories = [
+    {
+        id: "scales",
+        name: "Scales"
+    },
+    {
+        id: "controls",
+        name: "Controls"
+    },
+    {
+        id: "appearance",
+        name: "Appearance"
+    },
+    {
+        id: "info",
+        name: "Info"
+    },
+    {
+        id: "estimates",
+        name: "Estimates"
+    },
+]
+
 const settingsData = {
     "show-vertical-scale": {
         name: "Vertical Scale",
         desc: "Draw vertical scale marks",
+        category: "scales",
         type: "toggle",
         default: true,
         get value() {
@@ -3467,6 +3484,7 @@ const settingsData = {
     "show-horizontal-scale": {
         name: "Horiziontal Scale",
         desc: "Draw horizontal scale marks",
+        category: "scales",
         type: "toggle",
         default: false,
         get value() {
@@ -3480,6 +3498,7 @@ const settingsData = {
     "show-altitudes": {
         name: "Altitudes",
         desc: "Draw interesting altitudes",
+        category: "scales",
         type: "select",
         default: "none",
         disabled: "none",
@@ -3508,6 +3527,7 @@ const settingsData = {
     "lock-y-axis": {
         name: "Lock Y-Axis",
         desc: "Keep the camera at ground-level",
+        category: "controls",
         type: "toggle",
         default: true,
         get value() {
@@ -3524,6 +3544,7 @@ const settingsData = {
     "ground-snap": {
         name: "Snap to Ground",
         desc: "Snap things to the ground",
+        category: "controls",
         type: "toggle",
         default: true,
         get value() {
@@ -3536,6 +3557,7 @@ const settingsData = {
     "axis-spacing": {
         name: "Axis Spacing",
         desc: "How frequent the axis lines are",
+        category: "scales",
         type: "select",
         default: "standard",
         options: ["dense", "standard", "sparse"],
@@ -3557,6 +3579,7 @@ const settingsData = {
     "ground-type": {
         name: "Ground",
         desc: "What kind of ground to show, if any",
+        category: "appearance",
         type: "select",
         default: "black",
         disabled: "none",
@@ -3574,6 +3597,7 @@ const settingsData = {
     "ground-pos": {
         name: "Ground Position",
         desc: "How high the ground is if the y-axis is locked",
+        category: "appearance",
         type: "select",
         default: "very-low",
         options: groundPosChoices,
@@ -3589,6 +3613,7 @@ const settingsData = {
     "background-brightness": {
         name: "Background Color",
         desc: "How bright the background is",
+        category: "appearance",
         type: "select",
         default: "medium",
         options: ["black", "dark", "medium", "light"],
@@ -3603,6 +3628,7 @@ const settingsData = {
     "auto-scale": {
         name: "Auto-Size World",
         desc: "Constantly zoom to fit the largest entity",
+        category: "controls",
         type: "toggle",
         default: false,
         get value() {
@@ -3616,6 +3642,7 @@ const settingsData = {
     "auto-units": {
         name: "Auto-Select Units",
         desc: "Automatically switch units when zooming in and out",
+        category: "controls",
         type: "toggle",
         default: false,
         get value() {
@@ -3628,6 +3655,7 @@ const settingsData = {
     "zoom-when-adding": {
         name: "Zoom On Add",
         desc: "Zoom to fit when you add a new entity",
+        category: "controls",
         type: "toggle",
         default: false,
         get value() {
@@ -3640,6 +3668,7 @@ const settingsData = {
     "zoom-when-sizing": {
         name: "Zoom On Size",
         desc: "Zoom to fit when you select an entity's size",
+        category: "controls",
         type: "toggle",
         default: false,
         get value() {
@@ -3652,6 +3681,7 @@ const settingsData = {
     "show-ratios": {
         name: "Show Ratios",
         desc: "Show the proportions between the current selection and the most recent selection.",
+        category: "info",
         type: "toggle",
         default: false,
         get value() {
@@ -3665,6 +3695,7 @@ const settingsData = {
     "show-horizon": {
         name: "Show Horizon",
         desc: "Show how far the horizon would be for the selected character",
+        category: "info",
         type: "toggle",
         default: false,
         get value() {
@@ -3678,6 +3709,7 @@ const settingsData = {
     "attach-rulers": {
         name: "Attach Rulers",
         desc: "Rulers will attach to the currently-selected entity, moving around with it.",
+        category: "controls",
         type: "toggle",
         default: true,
         get value() {
@@ -3690,6 +3722,7 @@ const settingsData = {
     units: {
         name: "Default Units",
         desc: "Which kind of unit to use by default",
+        category: "info",
         type: "select",
         default: "metric",
         options: ["metric", "customary", "relative", "quirky", "human"],
@@ -3704,6 +3737,7 @@ const settingsData = {
     names: {
         name: "Show Names",
         desc: "Display names over entities",
+        category: "info",
         type: "toggle",
         default: true,
         get value() {
@@ -3716,6 +3750,7 @@ const settingsData = {
     "bottom-names": {
         name: "Bottom Names",
         desc: "Display names at the bottom",
+        category: "info",
         type: "toggle",
         default: false,
         get value() {
@@ -3728,6 +3763,7 @@ const settingsData = {
     "top-names": {
         name: "Show Arrows",
         desc: "Point to entities that are much larger than the current view",
+        category: "info",
         type: "toggle",
         default: false,
         get value() {
@@ -3740,6 +3776,7 @@ const settingsData = {
     "height-bars": {
         name: "Height Bars",
         desc: "Draw dashed lines to the top of each entity",
+        category: "info",
         type: "toggle",
         default: false,
         get value() {
@@ -3752,6 +3789,7 @@ const settingsData = {
     "flag-nsfw": {
         name: "Flag NSFW",
         desc: "Highlight NSFW things in red",
+        category: "info",
         type: "toggle",
         default: false,
         get value() {
@@ -3764,6 +3802,7 @@ const settingsData = {
     "glowing-entities": {
         name: "Glowing Edges",
         desc: "Makes all entities glow",
+        category: "appearance",
         type: "toggle",
         default: false,
         get value() {
@@ -3775,7 +3814,8 @@ const settingsData = {
     },
     "select-style": {
         name: "Selection Style",
-        desc: "How to highlight selected entities (outlines are laggier",
+        desc: "How to highlight selected entities (outlines are laggier)",
+        category: "appearance",
         type: "select",
         default: "color",
         options: ["color", "outline"],
@@ -3794,6 +3834,7 @@ const settingsData = {
     smoothing: {
         name: "Smoothing",
         desc: "Smooth out movements and size changes. Disable for better performance.",
+        category: "appearance",
         type: "toggle",
         default: true,
         get value() {
@@ -3806,6 +3847,7 @@ const settingsData = {
     "auto-mass": {
         name: "Estimate Mass",
         desc: "Guess the mass of things that don't have one specified using the selected body type",
+        category: "estimates",
         type: "select",
         default: "off",
         disabled: "off",
@@ -3820,6 +3862,7 @@ const settingsData = {
     "auto-food-intake": {
         name: "Estimate Food Intake",
         desc: "Guess how much food creatures need, based on their mass -- 2000kcal per 150lbs",
+        category: "estimates",
         type: "toggle",
         default: false,
         get value() {
@@ -3832,6 +3875,7 @@ const settingsData = {
     "auto-caloric-value": {
         name: "Estimate Caloric Value",
         desc: "Guess how much food a creature is worth -- 860kcal per pound",
+        category: "estimates",
         type: "toggle",
         default: false,
         get value() {
@@ -3844,6 +3888,7 @@ const settingsData = {
     "auto-prey-capacity": {
         name: "Estimate Prey Capacity",
         desc: "Guess how much prey creatures can hold, based on their mass",
+        category: "estimates",
         type: "select",
         default: "off",
         disabled: "off",
@@ -3858,6 +3903,7 @@ const settingsData = {
     "auto-swallow-size": {
         name: "Estimate Swallow Size",
         desc: "Guess how much creatures can swallow at once, based on their height",
+        category: "estimates",
         type: "select",
         default: "off",
         disabled: "off",
@@ -3872,6 +3918,7 @@ const settingsData = {
     "edit-default-attributes": {
         name: "Edit Default Attributes",
         desc: "Lets you edit non-custom attributes",
+        category: "info",
         type: "toggle",
         default: false,
         get value() {
@@ -3890,99 +3937,112 @@ const settingsData = {
 function prepareSettings(userSettings) {
     const menubar = document.querySelector("#settings-menu");
 
-    Object.entries(settingsData).forEach(([id, entry]) => {
-        const holder = document.createElement("label");
-        holder.classList.add("settings-holder");
-
-        const input = document.createElement("input");
-        input.id = "setting-" + id;
-
-        const vertical = document.createElement("div");
-        vertical.classList.add("settings-vertical");
-
-        const name = document.createElement("label");
-        name.innerText = entry.name;
-        name.classList.add("settings-name");
-        name.setAttribute("for", input.id);
-
-        const desc = document.createElement("label");
-        desc.innerText = entry.desc;
-        desc.classList.add("settings-desc");
-        desc.setAttribute("for", input.id);
-
-        if (entry.type == "toggle") {
-            input.type = "checkbox";
-
-            input.checked =
-                userSettings[id] === undefined
-                    ? entry.default
-                    : userSettings[id];
-
-            holder.setAttribute("for", input.id);
-
-            vertical.appendChild(name);
-            vertical.appendChild(desc);
-            holder.appendChild(vertical);
-            holder.appendChild(input);
-            menubar.appendChild(holder);
-
-            const update = () => {
-                if (input.checked) {
-                    holder.classList.add("enabled");
-                    holder.classList.remove("disabled");
-                } else {
-                    holder.classList.remove("enabled");
-                    holder.classList.add("disabled");
-                }
-
-                entry.value = input.checked;
-            };
-
-            setTimeout(update);
-
-            input.addEventListener("change", update);
-        } else if (entry.type == "select") {
-            // we don't use the input element we made!
-
-            const select = document.createElement("select");
-            select.id = "setting-" + id;
-
-            entry.options.forEach((choice) => {
-                const option = document.createElement("option");
-                option.innerText = choice;
-                select.appendChild(option);
-            });
-
-            select.value =
-                userSettings[id] === undefined
-                    ? entry.default
-                    : userSettings[id];
-
-            vertical.appendChild(name);
-            vertical.appendChild(desc);
-            holder.appendChild(vertical);
-            holder.appendChild(select);
-            menubar.appendChild(holder);
-
-            const update = () => {
-                entry.value = select.value;
-
-                if (
-                    entry.disabled !== undefined &&
-                    entry.value !== entry.disabled
-                ) {
-                    holder.classList.add("enabled");
-                    holder.classList.remove("disabled");
-                } else {
-                    holder.classList.remove("enabled");
-                    holder.classList.add("disabled");
-                }
-            };
-
-            update();
+    settingsCategories.forEach(category => {
+        const categoryLabel = document.createElement("div");
+        categoryLabel.classList.add("settings-category-label");
+        categoryLabel.innerText = category.name;
+        menubar.appendChild(categoryLabel);
+        Object.entries(settingsData).forEach(([id, entry]) => {
 
-            select.addEventListener("change", update);
-        }
+            if (settingsCategories.every(category => category.id != entry.category)) {
+                console.warn(id + " has a bogus category of " + entry.category);
+            }
+            if (entry.category != category.id) {
+                return;
+            }
+            const holder = document.createElement("label");
+            holder.classList.add("settings-holder");
+    
+            const input = document.createElement("input");
+            input.id = "setting-" + id;
+    
+            const vertical = document.createElement("div");
+            vertical.classList.add("settings-vertical");
+    
+            const name = document.createElement("label");
+            name.innerText = entry.name;
+            name.classList.add("settings-name");
+            name.setAttribute("for", input.id);
+    
+            const desc = document.createElement("label");
+            desc.innerText = entry.desc;
+            desc.classList.add("settings-desc");
+            desc.setAttribute("for", input.id);
+    
+            if (entry.type == "toggle") {
+                input.type = "checkbox";
+    
+                input.checked =
+                    userSettings[id] === undefined
+                        ? entry.default
+                        : userSettings[id];
+    
+                holder.setAttribute("for", input.id);
+    
+                vertical.appendChild(name);
+                vertical.appendChild(desc);
+                holder.appendChild(vertical);
+                holder.appendChild(input);
+                menubar.appendChild(holder);
+    
+                const update = () => {
+                    if (input.checked) {
+                        holder.classList.add("enabled");
+                        holder.classList.remove("disabled");
+                    } else {
+                        holder.classList.remove("enabled");
+                        holder.classList.add("disabled");
+                    }
+    
+                    entry.value = input.checked;
+                };
+    
+                setTimeout(update);
+    
+                input.addEventListener("change", update);
+            } else if (entry.type == "select") {
+                // we don't use the input element we made!
+    
+                const select = document.createElement("select");
+                select.id = "setting-" + id;
+    
+                entry.options.forEach((choice) => {
+                    const option = document.createElement("option");
+                    option.innerText = choice;
+                    select.appendChild(option);
+                });
+    
+                select.value =
+                    userSettings[id] === undefined
+                        ? entry.default
+                        : userSettings[id];
+    
+                vertical.appendChild(name);
+                vertical.appendChild(desc);
+                holder.appendChild(vertical);
+                holder.appendChild(select);
+                menubar.appendChild(holder);
+    
+                const update = () => {
+                    entry.value = select.value;
+    
+                    if (
+                        entry.disabled !== undefined &&
+                        entry.value !== entry.disabled
+                    ) {
+                        holder.classList.add("enabled");
+                        holder.classList.remove("disabled");
+                    } else {
+                        holder.classList.remove("enabled");
+                        holder.classList.add("disabled");
+                    }
+                };
+    
+                update();
+    
+                select.addEventListener("change", update);
+            }
+        });
     });
 }