From ad164ced84f43ce668e923c8f7114be6af56e90a Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Tue, 24 May 2022 09:27:43 -0400 Subject: [PATCH] Organize settings into categories This also fixes the select boxes going way out of bounds --- macrovision.css | 7 ++ macrovision.js | 260 +++++++++++++++++++++++++++++------------------- 2 files changed, 167 insertions(+), 100 deletions(-) diff --git a/macrovision.css b/macrovision.css index 756b7b8e..a921c1c0 100644 --- a/macrovision.css +++ b/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; } \ No newline at end of file diff --git a/macrovision.js b/macrovision.js index f7e83c67..8ab83923 100644 --- a/macrovision.js +++ b/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); + } + }); }); }