Add a button to spawn every filtered entity

macrovision.css

@@ -598,7 +598,8 @@ i.far {
 
 #spawners > select,
 #spawners > button,
-#filters > select {
+#filters > select,
+#filters > button {
     display: none;
 }
 
@@ -609,7 +610,8 @@ i.far {
 
 #spawners > select.category-visible,
 #spawners > select.category-visible + button,
-#filters > select.category-visible {
+#filters > select.category-visible,
+#filters > select.category-visible + button {
     display: block;
 }
 
@@ -1000,4 +1002,21 @@ button {
 .settings-name {
     font-size: 200%;
     margin-right: 16pt;
+}
+
+.filter-button > i {
+    color: gray;
+}
+
+.button-counter {
+    position: absolute;
+    color: white;
+    opacity: 0.75;
+    width: 25%;
+    height: 25%;
+    font-size: 16pt;
+    top: 0%;
+    left: 0%;
+    z-index: 1;
+    user-select: none;
 }

macrovision.js

@@ -2435,6 +2435,36 @@ function prepareEntities() {
         filterNameSelect.id = "filter-" + filter.id;
         filterHolder.appendChild(filterNameSelect);
 
+        const button = document.createElement("button");
+        button.classList.add("filter-button");
+        button.id = "create-filtered-" + filter.id + "-button";
+        filterHolder.appendChild(button);
+
+        const counter = document.createElement("div");
+        counter.classList.add("button-counter");
+        counter.innerText = "10";
+        button.appendChild(counter);
+        const i = document.createElement("i");
+        i.classList.add("fas");
+        i.classList.add("fa-plus");
+        button.appendChild(i);
+
+        button.addEventListener("click", e => {
+            const makers = Array.from(document.querySelector(".entity-select.category-visible")).filter(element => !element.classList.contains("filtered"));
+            const count = makers.length;
+            let index = 0;
+
+            makers.map(element => {
+                const category = document.querySelector("#category-picker").value;
+                const maker = availableEntities[category][element.value];
+                console.log(maker)
+                const entity = maker.constructor()
+                displayEntity(entity, entity.view, 0.1 + 0.8 * index / (count - 1), 1);
+                updateSizes(true);
+                index += 1;
+            });
+        });
+
         Array.from(filterSets[filter.id]).map(name => [name, filter.render(name)]).sort((e1, e2) => e1[1].toLowerCase().localeCompare(e2[1].toLowerCase())).forEach(name => {
             const option = document.createElement("option");
             option.innerText = name[1];
@@ -2542,6 +2572,9 @@ function updateFilter() {
     let current = document.querySelector(".entity-select.category-visible").value;
     let replace = false;
     let first = null;
+
+    let count = 0;
+
     document.querySelectorAll(".entity-select.category-visible > option").forEach(element => {
         let keep = type == "none";
 
@@ -2555,11 +2588,20 @@ function updateFilter() {
             if (current == element.value) {
                 replace = true;
             }
-        } else if (!first) {
-            first = element.value;
-        }
+        } else {
+            count += 1;
+            if (!first) {
+                first = element.value;
+            }
+        } 
     });
 
+    const button = document.querySelector(".filter-select.category-visible + button");
+
+    if (button) {
+        button.querySelector(".button-counter").innerText = count;
+    }
+
     if (replace) {
         document.querySelector(".entity-select.category-visible").value = first;
         document.querySelector("#create-entity-" + category).dispatchEvent(new Event("change"));