Allow the scale of an entity to be edited

macrovision.html

@@ -25,18 +25,24 @@
   <div id="main-area">
     <div id="options">
       <div class="options-header">World options</div>
-      <div class="options-label">
-        World height
-      </div>
-      <div class="options-row">
-        <input class="options-field-numeric" type="number" id="options-height-value" min="1" value="10">
-        <select class="options-field-unit" id="options-height-unit">
-          <option>meters</option>
-          <option>kilometers</option>
-        </select>
-      </div>
+      <span id="options-world">
+        <div class="options-label">
+          World height
+        </div>
+        <div class="options-row">
+          <input class="options-field-numeric" type="number" id="options-height-value" min="1" value="10">
+          <select class="options-field-unit" id="options-height-unit">
+            <option>meters</option>
+            <option>kilometers</option>
+          </select>
+        </div>
+      </span>
       <div class="options-header">Entity options</div>
+      <span id="options-entity">
+      </span>
       <div class="options-header">View options</div>
+      <span id="options-view">
+      </span>
     </div>
     <div id="world">
       <div id="entities">

macrovision.js

@@ -210,6 +210,8 @@ function deselect() {
         selected.classList.remove("selected");
     }
     selected = null;
+    clearEntityOptions();
+    clearViewOptions();
 }
 
 function select(target) {
@@ -220,6 +222,8 @@ function select(target) {
     selected.classList.add("selected");
 
     entityInfo(selectedEntity, target.dataset.view);
+    configEntityOptions(selectedEntity);
+    configViewOptions(selectedEntity, target.dataset.view);
 }
 
 function entityInfo(entity, view) {
@@ -228,6 +232,49 @@ function entityInfo(entity, view) {
     document.querySelector("#entity-height").innerText = "Height: " + entity.views[view].height.format({ precision: 3 });
 }
 
+function configEntityOptions(entity) {
+    const holder = document.querySelector("#options-entity");
+
+    holder.innerHTML = "";
+
+    const scaleLabel = document.createElement("div");
+    scaleLabel.classList.add("options-label");
+    scaleLabel.innerText = "Scale";
+
+    const scaleRow = document.createElement("div");
+    scaleRow.classList.add("options-row");
+
+    const scaleInput = document.createElement("input");
+    scaleInput.classList.add("options-field-numeric");
+
+    scaleInput.addEventListener("input", e => {
+        entity.scale = e.target.value;
+        updateSizes();
+    });
+    
+    scaleInput.setAttribute("min", 1);
+    scaleInput.setAttribute("type", "number");
+    scaleInput.value = entity.scale;
+
+    scaleRow.appendChild(scaleInput);
+    holder.appendChild(scaleLabel);
+    holder.appendChild(scaleRow);
+}
+
+function clearEntityOptions() {
+    const holder = document.querySelector("#options-entity");
+
+    holder.innerHTML = "";
+}
+
+function configViewOptions(entity, view) {
+
+}
+
+function clearViewOptions(entity, view) {
+
+}
+
 function displayEntity(entity, view, x, y) {
     const location = entity.location;