| @@ -309,3 +309,47 @@ body.toggle-bottom-name .bottom-name { | |||||
| #menubar button { | #menubar button { | ||||
| font-size: 24pt; | font-size: 24pt; | ||||
| } | } | ||||
| #help { | |||||
| display: none; | |||||
| flex-direction: column; | |||||
| justify-content: space-evenly; | |||||
| align-items: center; | |||||
| position: absolute; | |||||
| width: 60vw; | |||||
| height: 60vh; | |||||
| margin: 0pt; | |||||
| padding-top: 20vh; | |||||
| padding-bottom: 20vh; | |||||
| padding-left: 20vw; | |||||
| padding-right: 20vw; | |||||
| transition: 1s; | |||||
| text-align: center; | |||||
| background: #333; | |||||
| opacity: 0; | |||||
| z-index: 9999999; | |||||
| } | |||||
| #help.visible { | |||||
| display: flex; | |||||
| opacity: 0.9; | |||||
| transition: 1s; | |||||
| } | |||||
| #help h1 { | |||||
| font-size: 150%; | |||||
| } | |||||
| #help p { | |||||
| font-size: 125%; | |||||
| } | |||||
| #help button { | |||||
| width: 20vw; | |||||
| height: 10vh; | |||||
| font-size: 9vh; | |||||
| } | |||||
| a { | |||||
| color: #999; | |||||
| } | |||||
| @@ -25,6 +25,31 @@ | |||||
| </head> | </head> | ||||
| <body class="toggle-bottom-name toggle-entity-name"> | <body class="toggle-bottom-name toggle-entity-name"> | ||||
| <div id="help"> | |||||
| <h1>Discord</h1> | |||||
| <p> | |||||
| <ul> | |||||
| <li><a href="https://discord.gg/vqcKVV6">Join the Discord server!</a></li> | |||||
| </ul> | |||||
| </p> | |||||
| <h1>Navigation</h1> | |||||
| <p> | |||||
| <ul> | |||||
| <li>Scroll to zoom in/out. Entities will go off the top of the screen if they're in the air and you zoom in!</li> | |||||
| <li>Alt-scroll to zoom in/out and preserve positions on the screen.</li> | |||||
| <li>Shift-scroll with an entity selected to scale it.</li> | |||||
| </ul> | |||||
| </p> | |||||
| <h1>Adding/removing entities</h1> | |||||
| <p> | |||||
| <ul> | |||||
| <li>Drag something to the top of the screen to delete it, or press the delete key</li> | |||||
| </ul> | |||||
| </p> | |||||
| <button id="close-help">Close</button> | |||||
| </div> | |||||
| <div id="menubar"> | <div id="menubar"> | ||||
| <span class="menubar-group"> | <span class="menubar-group"> | ||||
| <button id="menu-clear">Clear</button> | <button id="menu-clear">Clear</button> | ||||
| @@ -40,6 +65,9 @@ | |||||
| <span class="menubar-group" id="spawners"> | <span class="menubar-group" id="spawners"> | ||||
| </span> | </span> | ||||
| <span class="menubar-group"> | |||||
| <button id="open-help">Help</button> | |||||
| </span> | |||||
| </div> | </div> | ||||
| <div id="main-area"> | <div id="main-area"> | ||||
| <div id="options"> | <div id="options"> | ||||
| @@ -687,6 +687,15 @@ function displayEntity(entity, view, x, y) { | |||||
| document.addEventListener("DOMContentLoaded", () => { | document.addEventListener("DOMContentLoaded", () => { | ||||
| prepareEntities(); | prepareEntities(); | ||||
| document.querySelector("#open-help").addEventListener("click", e => { | |||||
| document.querySelector("#help").classList.add("visible"); | |||||
| }); | |||||
| document.querySelector("#close-help").addEventListener("click", e => { | |||||
| document.querySelector("#help").classList.remove("visible"); | |||||
| }); | |||||
| const unitSelector = document.querySelector("#options-height-unit"); | const unitSelector = document.querySelector("#options-height-unit"); | ||||
| unitChoices.length.forEach(lengthOption => { | unitChoices.length.forEach(lengthOption => { | ||||