Add an option to show the ratio between two entities

macrovision.css

@@ -75,6 +75,10 @@ body.toggle-entity-name .entity-name,
     filter: brightness(var(--brightness)) drop-shadow(0px 0px 5px gold);
 }
 
+.entity-box.prevSelected > img {
+    filter: brightness(var(--brightness)) drop-shadow(0px 0px 5px darkorange);
+}
+
 body.toggle-entity-glow .entity-box:not(.selected) > img{
     filter: brightness(var(--brightness)) drop-shadow(0px 0px 2px white);
 }
@@ -695,6 +699,14 @@ option.filtered {
     background: #ffffff11;
 }
 
+.ratio-info {
+    position: absolute;
+    top: 5%;
+    right: 5%;
+    z-index: 1002;
+    pointer-events: none;
+}
+
 #zoom-out {
     left: 0%;
     top: 0%;

macrovision.html

@@ -279,6 +279,9 @@
       </div>
     </div>
     <div id="world">
+      <div class="ratio-info">
+        sdfasdofnsdn
+      </div>
       <button class="scroll-button" id="zoom-in">
         <i class="fas fa-search-plus"></i>
       </button>

macrovision.js

@@ -1,5 +1,7 @@
 let selected = null;
+let prevSelected = null;
 let selectedEntity = null;
+let prevSelectedEntity = null;
 
 let entityIndex = 0;
 
@@ -527,8 +529,42 @@ function updateEntityElement(entity, element) {
     }
 }
 
+function updateRatios() {
+    if (config.showRatios) {
+        if (selectedEntity !== null && prevSelectedEntity !== null && selectedEntity !== prevSelectedEntity) {
+            let first = selectedEntity.currentView.height;
+            let second = prevSelectedEntity.currentView.height;
+    
+            let text = ""
+    
+            if (first.toNumber("meters") < second.toNumber("meters")) {
+                text += selectedEntity.name + " is " + math.format(math.divide(second, first), { precision: 5 }) + " times smaller than " + prevSelectedEntity.name;
+            } else {
+                text += selectedEntity.name + " is " + math.format(math.divide(first, second), { precision: 5 })+ " times taller than " + prevSelectedEntity.name;
+            }
+
+            text += "\n";
+
+            let apparentHeight = math.multiply(math.divide(second, first), math.unit(6, "feet"));
+
+            if (config.units === "metric") {
+                apparentHeight = apparentHeight.to("meters");
+            }
+
+            text += prevSelectedEntity.name + " looks " + math.format(apparentHeight, { precision: 3}) + " tall to " + selectedEntity.name;
+    
+            document.querySelector(".ratio-info").innerText = text;
+        } else {
+            document.querySelector(".ratio-info").innerText = "";
+        }
+    }
+    
+}
+
 function updateSizes(dirtyOnly = false) {
 
+    updateRatios();
+
     if (config.lockYAxis) {
         config.y = 0;
     }
@@ -1173,6 +1209,9 @@ function deselect(e) {
     if (selected) {
         selected.classList.remove("selected");
     }
+    if (prevSelected) {
+        prevSelected.classList.remove("prevSelected");
+    }
 
     document.getElementById("options-selected-entity-none").selected = "selected";
 
@@ -1191,12 +1230,24 @@ function deselect(e) {
 }
 
 function select(target) {
+    
+    if (prevSelected !== null) {
+        prevSelected.classList.remove("prevSelected");
+    }
+
+    prevSelected = selected;
+    prevSelectedEntity = selectedEntity;
     deselect();
     selected = target;
     selectedEntity = entities[target.dataset.key];
 
+    updateRatios();
+
     document.getElementById("options-selected-entity-" + target.dataset.key).selected = "selected";
 
+    if (prevSelected !== null && config.showRatios && selected !== prevSelected) {
+        prevSelected.classList.add("prevSelected");
+    }
     selected.classList.add("selected");
 
     displayAttribution(selectedEntity.views[selectedEntity.view].image.source);
@@ -2188,6 +2239,23 @@ const settingsData = {
             config.autoFitSize = param;
         }
     },
+    "show-ratios": {
+        name: "Show Ratios",
+        desc: "Show the proportions between the current selection and the most recent selection.",
+        type: "toggle",
+        default: true,
+        get value() {
+            return config.showRatios;
+        },
+        set value(param) {
+            config.showRatios = param;
+            if (param) {
+                document.body.querySelector(".ratio-info").style.display = "block";
+            } else {
+                document.body.querySelector(".ratio-info").style.display = "none";
+            }
+        }
+    },
     "units": {
         name: "Default Units",
         desc: "Which kind of unit to use by default",
@@ -2204,6 +2272,7 @@ const settingsData = {
         },
         set value(param) {
             config.units = param;
+            updateSizes();
         }
     },
     "names": {