| @@ -246,6 +246,12 @@ body.show-extra-options .options-block.options-block-optional { | |||||
| } | } | ||||
| .menubar-group { | .menubar-group { | ||||
| margin: 20px; | |||||
| display: flex; | |||||
| flex-direction: row; | |||||
| } | |||||
| .popout-group { | |||||
| margin: 20px; | margin: 20px; | ||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| @@ -634,23 +640,26 @@ i.far { | |||||
| font-size: 200%; | font-size: 200%; | ||||
| } | } | ||||
| #spawners-entities > select, | |||||
| #spawners-entities > button { | |||||
| #spawners > select, | |||||
| #spawners > button { | |||||
| display: none; | display: none; | ||||
| } | } | ||||
| #spawners-entities > select.category-visible, | |||||
| #spawners-entities > select.category-visible + button { | |||||
| #spawners > select#category-picker { | |||||
| display: block; | |||||
| } | |||||
| #spawners > select.category-visible, | |||||
| #spawners > select.category-visible + button { | |||||
| display: block; | display: block; | ||||
| } | } | ||||
| #spawners-entities > select { | |||||
| #spawners > select { | |||||
| font-size: 24pt; | font-size: 24pt; | ||||
| } | } | ||||
| #spawners-entities > button { | |||||
| #spawners > button { | |||||
| font-size: 40pt; | font-size: 40pt; | ||||
| margin: 10px; | |||||
| } | } | ||||
| #spawners-categories { | #spawners-categories { | ||||
| @@ -67,6 +67,9 @@ | |||||
| <button id="toggle-menu"> | <button id="toggle-menu"> | ||||
| <i class="fas fa-bars"></i> | <i class="fas fa-bars"></i> | ||||
| </button> | </button> | ||||
| <span class="menubar-group" id="spawners"> | |||||
| </span> | |||||
| <span class="menubar-group" id="scenes"> | <span class="menubar-group" id="scenes"> | ||||
| <button id="load-scene"> | <button id="load-scene"> | ||||
| <i class="fas fa-cloud-upload-alt"></i> | <i class="fas fa-cloud-upload-alt"></i> | ||||
| @@ -86,20 +89,6 @@ | |||||
| <div id="main-area"> | <div id="main-area"> | ||||
| <div id="options" class=""> | <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> | <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">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> | <h3 class="options-header">World Info</h3> | ||||
| <span id="options-world"> | <span id="options-world"> | ||||
| <div class="options-label"> | <div class="options-label"> | ||||
| @@ -1230,7 +1230,7 @@ function prepareMenu() { | |||||
| ] | ] | ||||
| ].forEach(group => { | ].forEach(group => { | ||||
| const span = document.createElement("span"); | const span = document.createElement("span"); | ||||
| span.classList.add("menubar-group"); | |||||
| span.classList.add("popout-group"); | |||||
| group.forEach(entry => { | group.forEach(entry => { | ||||
| const buttonHolder = document.createElement("div"); | const buttonHolder = document.createElement("div"); | ||||
| const button = document.createElement("button"); | const button = document.createElement("button"); | ||||
| @@ -1860,14 +1860,15 @@ function prepareEntities() { | |||||
| availableEntities["characters"].sort((x, y) => { | availableEntities["characters"].sort((x, y) => { | ||||
| return x.name.toLowerCase() < y.name.toLowerCase() ? -1 : 1 | return x.name.toLowerCase() < y.name.toLowerCase() ? -1 : 1 | ||||
| }); | }); | ||||
| const holder = document.querySelector("#spawners-entities"); | |||||
| const holder = document.querySelector("#spawners"); | |||||
| const categorySelect = document.createElement("select"); | |||||
| categorySelect.id = "category-picker"; | |||||
| const categorySelect = document.querySelector("#spawners-categories"); | |||||
| holder.appendChild(categorySelect); | |||||
| Object.entries(availableEntities).forEach(([category, entityList]) => { | Object.entries(availableEntities).forEach(([category, entityList]) => { | ||||
| const select = document.createElement("select"); | const select = document.createElement("select"); | ||||
| select.id = "create-entity-" + category; | select.id = "create-entity-" + category; | ||||
| select.classList.add("options-field-picker"); | |||||
| for (let i = 0; i < entityList.length; i++) { | for (let i = 0; i < entityList.length; i++) { | ||||
| const entity = entityList[i]; | const entity = entityList[i]; | ||||
| const option = document.createElement("option"); | const option = document.createElement("option"); | ||||