Add a dropdown box to select an entity

macrovision.html

@@ -134,6 +134,14 @@
           </div>
         </div>
       </span>
+      <div class="options-label">
+        Selected Entity
+      </div>
+      <div class="options-row">
+        <select id="options-selected-entity" class="options-selector">
+          <option id="options-selected-entity-none">None</option>
+        </select>
+      </div>
       <h3 class="options-header" id="entity-category-header">Entity options</h3>
       <div class="options-category" id="entity-category">
         <div class="options-label">

macrovision.js

@@ -408,6 +408,8 @@ function deselect() {
         selected.classList.remove("selected");
     }
 
+    document.getElementById("options-selected-entity-none").selected = "selected";
+
     clearAttribution();
 
     selected = null;
@@ -421,6 +423,8 @@ function select(target) {
     selected = target;
     selectedEntity = entities[target.dataset.key];
 
+    document.getElementById("options-selected-entity-" + target.dataset.key).selected = "selected";
+
     selected.classList.add("selected");
     
     displayAttribution(selectedEntity.views[selectedEntity.view].image.source);
@@ -869,6 +873,10 @@ function removeEntity(element) {
     if (selected == element) {
         deselect();
     }
+
+    const option = document.querySelector("#options-selected-entity-" + element.dataset.key);
+    option.parentElement.removeChild(option);
+
     delete entities[element.dataset.key];
     const bottomName = document.querySelector("#bottom-name-" + element.dataset.key);
     bottomName.parentElement.removeChild(bottomName);
@@ -959,6 +967,13 @@ function displayEntity(entity, view, x, y, selectEntity=false) {
     topName.addEventListener("click", () => select(box));
 
     world.appendChild(topName);
+    
+    const entityOption = document.createElement("option");
+    entityOption.id = "options-selected-entity-" + entityIndex;
+    entityOption.value = entityIndex;
+    entityOption.innerText = entity.name;
+
+    document.getElementById("options-selected-entity").appendChild(entityOption);
     entityIndex += 1;
     if (config.autoFit) {
         fitWorld();
@@ -1156,6 +1171,15 @@ document.addEventListener("DOMContentLoaded", () => {
     prepareMenu();
     prepareEntities();
 
+    document.querySelector("#options-selected-entity").addEventListener("input", e => {
+        if (e.target.value == "none") {
+            deselect()
+        } else {
+            select(document.querySelector("#entity-" + e.target.value));
+        }
+        
+    });
+
     document.querySelector("#menu-toggle-sidebar").addEventListener("click", e => {
         const sidebar = document.querySelector("#options");
         if (sidebar.classList.contains("hidden")) {