diff --git a/macrovision.css b/macrovision.css index 92baebfe..4440b685 100644 --- a/macrovision.css +++ b/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%; diff --git a/macrovision.html b/macrovision.html index b3535615..f5766899 100644 --- a/macrovision.html +++ b/macrovision.html @@ -279,6 +279,9 @@
+
+ sdfasdofnsdn +
diff --git a/macrovision.js b/macrovision.js index 611563d8..9cae7fc5 100644 --- a/macrovision.js +++ b/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": {