Fix the menubar on mobile; only one category appears at a time

macrovision.css

@@ -132,6 +132,7 @@ body.toggle-entity-name .entity-name {
     flex-direction: row;
     justify-content: space-evenly;
     align-items: center;
+    flex-wrap: wrap;
     min-height: 10vh;
     min-width: 100vw;
     background: #222;
@@ -239,9 +240,24 @@ body.toggle-bottom-name .bottom-name {
 }
 
 #spawners > button {
+    display: none;
     font-size: 200%;
 }
 #spawners > select {
+    display: none;
     font-size: 200%;
     margin-right: 50px;
+}
+
+#spawners > select#category-picker {
+    display: inline;
+}
+
+#spawners > button.category-visible,
+#spawners > select.category-visible {
+    display: inline;
+}
+
+#menubar button {
+    font-size: 300%;
 }

macrovision.js

@@ -748,6 +748,11 @@ function prepareEntities() {
         return x.name < y.name ? -1 : 1
     });
     const holder = document.querySelector("#spawners");
+
+    const categorySelect = document.createElement("select");
+    categorySelect.id = "category-picker";
+
+    holder.appendChild(categorySelect);
     Object.entries(availableEntities).forEach(([category, entityList]) => {
         const select = document.createElement("select");
         select.id = "create-entity-" + category;
@@ -760,6 +765,7 @@ function prepareEntities() {
         };
 
         const button = document.createElement("button");
+        button.id = "create-entity-" + category + "-button";
 
         button.innerText = "Create";
         button.addEventListener("click", e => {
@@ -767,9 +773,32 @@ function prepareEntities() {
             displayEntity(newEntity, newEntity.defaultView, 0.5, 1);
         });
 
+        const categoryOption = document.createElement("option");
+        categoryOption.value = category
+        categoryOption.innerText = category;
+
+        if (category == "characters") {
+            categoryOption.selected = true;
+            select.classList.add("category-visible");
+            button.classList.add("category-visible");
+        }
+
+        categorySelect.appendChild(categoryOption);
         holder.appendChild(button);
         holder.appendChild(select);
     });
+
+    categorySelect.addEventListener("input", e => {
+        const oldSelect = document.querySelector("select.category-visible");
+        oldSelect.classList.remove("category-visible");
+        const oldButton = document.querySelector("button.category-visible");
+        oldButton.classList.remove("category-visible");
+
+        const newSelect = document.querySelector("#create-entity-" + e.target.value);
+        newSelect.classList.add("category-visible");
+        const newButton = document.querySelector("#create-entity-" + e.target.value + "-button");
+        newButton.classList.add("category-visible");
+    });
 }
 
 window.addEventListener("resize", () => {