Move the spawner interface into the sidebar

macrovision.css

@@ -158,6 +158,10 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     max-width: 90%;
 }
 
+.options-row.full {
+    min-width: 90%;
+}
+
 .options-block {
     display: flex;
     text-align: center;
@@ -284,7 +288,7 @@ body.toggle-scale #display {
 }
 
 .options-row .options-field-text {
-    flex: 1 1 100%;
+    flex: 1 0 90%;
     max-width: 90%;
     font-size: 150%;
 }
@@ -295,6 +299,18 @@ body.toggle-scale #display {
     font-size: 150%;
 }
 
+.options-row .options-field-picker {
+    flex: 1;
+    width: 100%;
+    min-width: 90%;
+    max-width: 90%;
+    font-size: 150%;
+    overflow: hidden;
+    white-space: pre-wrap;
+    word-break: normal;
+    text-overflow: ellipsis;
+}
+
 .options-row .symbol-button {
     height: 75px;
     width: 75px;
@@ -382,23 +398,6 @@ body.toggle-bottom-name .bottom-name {
     text-overflow: ellipsis;
 }
 
-#spawners > button {
-    display: none;
-    font-size: 24pt;
-}
-#spawners > select {
-    display: none;
-}
-
-#spawners > select#category-picker {
-    display: inline;
-}
-
-#spawners > button.category-visible,
-#spawners > select.category-visible {
-    display: inline;
-}
-
 #menubar button {
     position: relative;
     font-size: 32pt;
@@ -674,4 +673,27 @@ i.far {
     text-align: center;
     font-weight: bold;
     font-size: 200%;
+}
+
+#spawners-entities > select,
+#spawners-entities > button {
+    display: none;
+}
+
+#spawners-entities > select.category-visible,
+#spawners-entities > select.category-visible + button {
+    display: block;
+}
+
+#spawners-entities > select {
+    font-size: 24pt;
+}
+
+#spawners-entities > button {
+    font-size: 40pt;
+    margin: 10px;
+}
+
+#spawners-categories {
+    font-size: 24pt;
 }

macrovision.html

@@ -61,9 +61,6 @@
     <button id="close-help">Close</button>
   </div>
   <div id="menubar">
-    <span class="menubar-group" id="spawners">
-
-    </span>
     <span class="menubar-group" id="scenes">
       <button id="load-scene">
         <i class="fas fa-cloud-upload-alt"></i>
@@ -83,7 +80,21 @@
   <div id="main-area">
     <div id="options" class="">
       <a href="https://docs.google.com/forms/d/e/1FAIpQLScRC-okDZ3FtzDTkbqSrpj5_OGD-1Vl-VYizOK3QM6quus11g/viewform?usp=sf_link" class="options-banner">Submit your<br>character!</a>
-      <h3 class="options-header">World options</h3>
+      <h3 class="options-header">Create</h3>
+      <div class="options-label">
+        Category
+      </div>
+      <div class="options-row full">
+        <select class="options-field-picker" id="spawners-categories">
+
+        </select>
+      </div>
+      <div class="options-label">
+        Entity
+      </div>
+      <div class="options-row full" id="spawners-entities">
+      </div>
+      <h3 class="options-header">World Info</h3>
       <span id="options-world">
         <div class="options-label">
           World height
@@ -159,7 +170,7 @@
             <span class="sr-only">Delete Entity</span>
         </button>
       </div>
-      <h3 class="options-header" id="entity-category-header">Entity options</h3>
+      <h3 class="options-header" id="entity-category-header">Selected Entity</h3>
       <div class="options-category" id="entity-category">
         <div class="options-label">
           View
@@ -181,7 +192,7 @@
         <span id="options-entity">
         </span>
       </div>
-      <h3 class="options-header" id="view-category-header">View options</h3>
+      <h3 class="options-header" id="view-category-header">View Options</h3>
       <div class="options-category" id="view-category">
         <span id="options-view">
         </span>

macrovision.js

@@ -1178,7 +1178,7 @@ function prepareMenu() {
 
     const menubar = document.querySelector("#menubar");
     const help = document.querySelector("#help-icons");
-    const spawners = document.querySelector("#spawners");
+    const before = document.querySelector("#scenes");
 
     [
         [
@@ -1271,7 +1271,7 @@ function prepareMenu() {
             help.appendChild(helperEntry);
         });
 
-        menubar.insertBefore(span, spawners);
+        menubar.insertBefore(span, before);
     });
 
     if (checkHelpDate()) {
@@ -1733,15 +1733,14 @@ function prepareEntities() {
     availableEntities["characters"].sort((x, y) => {
         return x.name.toLowerCase() < y.name.toLowerCase() ? -1 : 1
     });
-    const holder = document.querySelector("#spawners");
+    const holder = document.querySelector("#spawners-entities");
 
-    const categorySelect = document.createElement("select");
-    categorySelect.id = "category-picker";
+    const categorySelect = document.querySelector("#spawners-categories");
 
-    holder.appendChild(categorySelect);
     Object.entries(availableEntities).forEach(([category, entityList]) => {
         const select = document.createElement("select");
         select.id = "create-entity-" + category;
+        select.classList.add("options-field-picker");
         for (let i = 0; i < entityList.length; i++) {
             const entity = entityList[i];
             const option = document.createElement("option");