Generate the menubar dynamically; update help; indicate when new help is added

6 лет назад · 237e8c9625
--- a/macrovision.css
+++ b/macrovision.css
@@ -391,7 +391,35 @@ body.toggle-bottom-name .bottom-name {
 }
 #menubar button {
    position: relative;
    font-size: 36pt;
    z-index: 1;
 }
 #open-help.highlighted::before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    height: 100%;
    width: 100%;
    background: white;
    filter: drop-shadow(0px 0px 10px white);
    z-index: -1;
    animation: pulsing 5s linear 0s infinite;
 }
@keyframes pulsing {
    0% {
        opacity: 100%;
    }
    50% {
        opacity: 25%;
    }
    100% {
        opacity: 100%;
    }
 }
 #help {
@@ -407,17 +435,17 @@ body.toggle-bottom-name .bottom-name {
    padding-bottom: 20vh;
    padding-left: 20vw;
    padding-right: 20vw;
    transition: 1s;
    text-align: center;
    background: #333;
    opacity: 0;
    z-index: 9999999;
    backdrop-filter: blur(5px);
 }
 #help.visible {
    display: flex;
    opacity: 0.9;
    transition: 1s;
    justify-content: center;
 }
 #help h1 {
@@ -428,8 +456,17 @@ body.toggle-bottom-name .bottom-name {
    font-size: 125%;
 }
 #help ul {
    text-align: left;
    list-style: circle;
    width: 75vw;
 }
 #help li {
    padding: 10px;
 }
 #help button {
    width: 20vw;
    height: 10vh;
    font-size: 9vh;
 }
@@ -608,4 +645,17 @@ body.toggle-bottom-cover .bottom-cover {
 i.fas
 i.far {
    pointer-events: none;
 }
 #help-icons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 50vw;
 }
 #help-icons > div {
    flex-basis: 25%;
    font-size: 150%;
 }
--- a/macrovision.html
+++ b/macrovision.html
@@ -31,16 +31,14 @@
 <body class="toggle-bottom-name toggle-top-name toggle-scale">
  <div id="help">
    <h1>Discord</h1>
    <p>
      <ul>
        <li><a href="https://discord.gg/vqcKVV6">Join the Discord server!</a></li>
      </ul>
    </p>
    <h1>Menu</h1>
    <div id="help-icons">
    </div>
    <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>Scroll to zoom in/out.</li>
        <li>Alt-scroll to zoom in/out and preserve positions on the screen.</li>
@@ -50,69 +48,25 @@
    <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>
        <li>Remove the selected entity with the Delete key</li>
        <li>Alternatively, drag them off the top of the screen</li>
      </ul>
    </p>
    <h1>Adding your own character</h1>
    <p>
      <a href="https://docs.google.com/forms/d/1esagCHSNd1kvCFoTGfCacaHXe2L8dKalqgKEHqHgGuM/edit">Submit your stuff here!</a>
    </p>
    <button id="close-help">Close</button>
  </div>
  <div id="menubar">
    <span class="menubar-group">
      <button id="menu-toggle-sidebar">
        <i class="fas fa-chevron-circle-down rotate-backward transitions"></i>
        <span class="sr-only">Toggle Sidebar</span>
      </button>
      <button id="menu-fullscreen">
        <i class="fas fa-compress" ></i>
        <span class="sr-only">Fullscreen</span>
      </button>
    </span>
    <span class="menubar-group">
      <button id="menu-clear">
        <i class="fas fa-trash-alt"></i>
        <span class="sr-only">Clear</span>
      </button>
    </span>
    <span class="menubar-group">
      <button id="menu-order-height">
        <i class="fas fa-sort-numeric-up"></i>
        <span class="sr-only">Sort</span>
      </button>
    </span>
    <span class="menubar-group">
      <button id="menu-permalink">
        <i class="fas fa-link"></i>
        <span class="sr-only">Permalink</span>
      </button>
      <button id="menu-export">
        <i class="fas fa-share"></i>
        <span class="sr-only">Export</span>
      </button>
      <button id="menu-save">
        <i class="fas fa-download"></i>
        <span class="sr-only">Save</span>
      </button>
      <button id="menu-load">
        <i class="fas fa-upload"></i>
        <span class="sr-only">Load</span>
      </button>
    </span>
    <span class="menubar-group" id="spawners">
    </span>
  </span>
  <span class="menubar-group" id="scenes">
    <button id="load-scene">
      <i class="fas fa-cloud-upload-alt"></i>
        <span class="sr-only">Load Scene</span>
    </button>
    <select id="scene-choices">
    <span class="menubar-group" id="scenes">
      <button id="load-scene">
        <i class="fas fa-cloud-upload-alt"></i>
          <span class="sr-only">Load Scene</span>
      </button>
      <select id="scene-choices">
    </select>
  </span>
      </select>
    </span>
    <span class="menubar-group">
      <button id="open-help">
        <i class="far fa-question-circle"></i>
--- a/macrovision.js
+++ b/macrovision.js
@@ -1016,7 +1016,133 @@ function handleResize() {
    updateSizes();
 }
 function prepareMenu() {
    const menubar = document.querySelector("#menubar");
    const help = document.querySelector("#help-icons");
    const spawners = document.querySelector("#spawners");
    [
        [
            {
                name: "Show/hide sidebar",
                id: "menu-toggle-sidebar",
                icon: "fas fa-chevron-circle-down",
                rotates: true
            },
            {
                name: "Fullscreen",
                id: "menu-fullscreen",
                icon: "fas fa-compress"
            }
        ],
        [
            {
                name: "Clear",
                id: "menu-clear",
                icon: "fas fa-trash-alt"
            }
        ],
        [
            {
                name: "Sort by height",
                id: "menu-order-height",
                icon: "fas fa-sort-numeric-up"
            }
        ],
        [
            {
                name: "Permalink",
                id: "menu-permalink",
                icon: "fas fa-link"
            },
            {
                name: "Export",
                id: "menu-export",
                icon: "fas fa-share"
            },
            {
                name: "Save",
                id: "menu-save",
                icon: "fas fa-download"
            },
            {
                name: "Load",
                id: "menu-load",
                icon: "fas fa-upload"
            }
        ]
    ].forEach(group => {
        const span = document.createElement("span");
        span.classList.add("menubar-group");
        group.forEach(entry => {
            const button = document.createElement("button");
            button.id = entry.id;
            const icon = document.createElement("i");
            icon.classList.add(...entry.icon.split(" "));
            if (entry.rotates) {
                icon.classList.add("rotate-backward", "transitions");
            }
            const srText = document.createElement("span");
            srText.classList.add("sr-only");
            srText.innerText = entry.name;
            button.appendChild(icon);
            button.appendChild(srText);
            span.appendChild(button);
            const helperEntry = document.createElement("div");
            const helperIcon = document.createElement("icon");
            const helperText = document.createElement("span");
            helperIcon.classList.add(...entry.icon.split(" "));
            helperText.innerText = entry.name;
            helperEntry.appendChild(helperIcon);
            helperEntry.appendChild(helperText);
            help.appendChild(helperEntry);
        });
        menubar.insertBefore(span, spawners);
    });
    if (checkHelpDate()) {
        document.querySelector("#open-help").classList.add("highlighted");
    }
 }
 const lastHelpChange = 1585150501917;
 function checkHelpDate() {
    try {
        const old = localStorage.getItem("help-viewed");
        if (old === null || old < lastHelpChange) {
            return true;
        }
        return false;
    } catch {
        console.warn("Could not set the help-viewed date");
        return false;
    }
 }
 function setHelpDate() {
    try {
        localStorage.setItem("help-viewed", Date.now());
    } catch {
        console.warn("Could not set the help-viewed date");
    }
 }
 document.addEventListener("DOMContentLoaded", () => {
    prepareMenu();
    prepareEntities();
    document.querySelector("#menu-toggle-sidebar").addEventListener("click", e => {
@@ -1160,6 +1286,8 @@ document.addEventListener("DOMContentLoaded", () => {
    canvasHeight = document.querySelector("#display").clientHeight - 50;
    document.querySelector("#open-help").addEventListener("click", e => {
        setHelpDate();
        document.querySelector("#open-help").classList.remove("highlighted");
        document.querySelector("#help").classList.add("visible");
    });