diff --git a/macrovision.css b/macrovision.css index 7e01aae6..f8d013a1 100644 --- a/macrovision.css +++ b/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%; } \ No newline at end of file diff --git a/macrovision.js b/macrovision.js index 2ebd2028..e09fd93e 100644 --- a/macrovision.js +++ b/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", () => {