Allow world scale to be changed

macrovision.css

@@ -30,9 +30,22 @@ body {
     filter: drop-shadow(0px 0px 10px gold);
 }
 
+#main-area {
+    display: flex;
+    min-width: 100vw;
+    height: 100%;
+    flex-direction: row;
+}
+
+#options {
+    flex: 1 0 15vw;
+    background: red;
+}
+
 #world {
-    min-width: 90vw;
+    flex: 9 0 85vw;
     min-height: 80vh;
+    overflow: hidden;
 }
 
 #menubar {

macrovision.html

@@ -22,12 +22,22 @@
     <div class="menu-item" id="entity-author"></div>
     <div class="menu-item" id="entity-height"></div>
   </div>
-  <div id="world">
-    <div id="entities">
-
+  <div id="main-area">
+    <div id="options">
+      <input type="number" id="options-height-value" value="10">
+      <select id="options-height-unit">
+        <option>meters</option>
+        <option>kilometers</option>
+      </select>
+    </div>
+    <div id="world">
+      <div id="entities">
+  
+      </div>
+      <canvas id="display">
+      </canvas>
     </div>
-    <canvas id="display">
-    </canvas>
   </div>
+  
 </body>
 </html>

macrovision.js

@@ -170,6 +170,14 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     updateSizes();
+
+    document.querySelector("#options-height-value").addEventListener("input", e => {
+        updateWorldHeight();
+    })
+
+    document.querySelector("#options-height-unit").addEventListener("input", e => {
+        updateWorldHeight();
+    })
 });
 
 window.addEventListener("resize", () => {
@@ -182,3 +190,12 @@ document.addEventListener("mousemove", (e) => {
         clicked.style.top = (e.clientY - dragOffsetY) + "px";
     }
 });
+
+function updateWorldHeight() {
+    const value = document.querySelector("#options-height-value").value;
+    const unit = document.querySelector("#options-height-unit").value;
+
+    config.height = math.unit(value + " " + unit)
+
+    updateSizes();
+}