Allow for views to be switched between. Hello peppers!

macrovision.html

@@ -21,6 +21,7 @@
     <div class="menu-item" id="entity-name"></div>
     <div class="menu-item" id="entity-author"></div>
     <div class="menu-item" id="entity-height"></div>
+    <select class="menu-item" id="entity-view"></select>
   </div>
   <div id="main-area">
     <div id="options">

macrovision.js

@@ -183,7 +183,27 @@ function makeEntity() {
                         type: "mass",
                         base: math.unit(80, "kg")
                     }
-                }
+                },
+                image: "./man.svg",
+                name: "Body"
+            },
+            pepper: {
+                attributes: {
+                    height: {
+                        name: "Height",
+                        power: 1,
+                        type: "length",
+                        base: math.unit(50, "centimeter")
+                    },
+                    weight: {
+                        name: "Weight",
+                        power: 3,
+                        type: "mass",
+                        base: math.unit(1, "kg")
+                    }
+                },
+                image: "./pepper.png",
+                name: "Pepper"
             }
         },
         init: function () {
@@ -243,6 +263,7 @@ function deselect() {
         selected.classList.remove("selected");
     }
     selected = null;
+    clearViewList();
     clearEntityOptions();
     clearViewOptions();
 }
@@ -255,6 +276,7 @@ function select(target) {
     selected.classList.add("selected");
 
     entityInfo(selectedEntity, target.dataset.view);
+    configViewList(selectedEntity, target.dataset.view);
     configEntityOptions(selectedEntity);
     configViewOptions(selectedEntity, target.dataset.view);
 }
@@ -265,6 +287,33 @@ function entityInfo(entity, view) {
     document.querySelector("#entity-height").innerText = "Height: " + entity.views[view].height.format({ precision: 3 });
 }
 
+function configViewList(entity, selectedView) {
+    const list = document.querySelector("#entity-view");
+    
+    list.innerHTML = "";
+
+    list.style.display = "block";
+
+    console.log
+    Object.keys(entity.views).forEach(view => {
+        const option = document.createElement("option");
+        option.innerText = entity.views[view].name;
+        option.value = view;
+
+        if (view === selectedView) {
+            option.selected = true;
+        }
+        list.appendChild(option);
+    });
+}
+
+function clearViewList() {
+    const list = document.querySelector("#entity-view");
+    
+    list.innerHTML = "";
+    list.style.display = "none";
+}
+
 function configEntityOptions(entity) {
     const holder = document.querySelector("#options-entity");
 
@@ -428,7 +477,7 @@ function displayEntity(entity, view, x, y) {
     box.appendChild(img);
     box.appendChild(nameTag);
 
-    img.src = "./man.svg"
+    img.src = entity.views[view].image
 
     box.dataset.x = x;
     box.dataset.y = y;
@@ -471,6 +520,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
     world.addEventListener("mousedown", e => deselect());
     document.addEventListener("mouseup", e => clickUp());
+
+    document.querySelector("#entity-view").addEventListener("input", e => {
+        console.log(e.target.value)
+        selected.dataset.view = e.target.value
+        selected.querySelector(".entity-image").src = entities[selected.dataset.key].views[e.target.value].image;
+        updateSizes();
+    });
+
+    clearViewList();
 });
 
 window.addEventListener("resize", () => {