diff --git a/macrovision.css b/macrovision.css index 086e2e75..5ea3e262 100644 --- a/macrovision.css +++ b/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; } \ No newline at end of file diff --git a/macrovision.js b/macrovision.js index c00620d8..a6a53f88 100644 --- a/macrovision.js +++ b/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"));