Add a very basic help screen

5 年前 · 12fcf9f300
--- a/macrovision.css
+++ b/macrovision.css
@@ -309,3 +309,47 @@ body.toggle-bottom-name .bottom-name {
 #menubar button {
    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;
 }
--- a/macrovision.html
+++ b/macrovision.html
@@ -25,6 +25,31 @@
 </head>

 <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">
    <span class="menubar-group">
      <button id="menu-clear">Clear</button>
@@ -40,6 +65,9 @@
    <span class="menubar-group" id="spawners">

    </span>
    <span class="menubar-group">
      <button id="open-help">Help</button>
    </span>
  </div>
  <div id="main-area">
    <div id="options">
--- a/macrovision.js
+++ b/macrovision.js
@@ -687,6 +687,15 @@ function displayEntity(entity, view, x, y) {
 document.addEventListener("DOMContentLoaded", () => {
    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");

    unitChoices.length.forEach(lengthOption => {