Add toggleable height bars for each entity

hace 6 años · 2ce5c535bb
--- a/macrovision.css
+++ b/macrovision.css
@@ -451,4 +451,19 @@ input[type=checkbox] {

 input ~ label {
    user-select: none;
 }

 body.toggle-height-bars .height-bar {
    display: block;
 }

 .height-bar {
    display: none;
    min-width: 120vw;
    min-height: 3px;
    height: 3px;
    position: absolute;
    background: repeating-linear-gradient(90deg, #aaaaaaff, #aaaaaaff 20px, #aaaaaa00 20px, #aaaaaa00 40px);
    top: calc(-100% + var(--extra));
    left: calc(-120vw + 24px);
 }
--- a/macrovision.html
+++ b/macrovision.html
@@ -26,7 +26,7 @@
  <link rel="icon" href="https://crux.sexy/images/macrovision.ico">
 </head>

 <body class="toggle-bottom-name toggle-entity-name">
 <body class="toggle-bottom-name toggle-entity-name toggle-height-bars">
  <div id="help">
    <h1>Discord</h1>
    <p>
@@ -112,6 +112,10 @@
          <input type="checkbox" id="options-world-show-bottom-names" checked=true>
          <label for="options-world-show-bottom-names">Names at bottom</label>
        </div>
        <div class="options-row">
          <input type="checkbox" id="options-world-show-height-bars" checked=true>
          <label for="options-world-show-height-bars">Height bars</label>
        </div>

        <div class="options-label">
          Auto-sizing mode
--- a/macrovision.js
+++ b/macrovision.js
@@ -843,6 +843,7 @@ function displayEntity(entity, view, x, y) {
    img.addEventListener("dragstart", e => {
        e.preventDefault();
    });
    
    const nameTag = document.createElement("div");
    nameTag.classList.add("entity-name");
    nameTag.innerText = entity.name;
@@ -873,6 +874,11 @@ function displayEntity(entity, view, x, y) {
        testClick(fakeEvent);
    });

    const heightBar = document.createElement("div");
    heightBar.classList.add("height-bar");

    box.appendChild(heightBar);

    box.id = "entity-" + entityIndex;
    box.dataset.key = entityIndex;
    entity.view = view;
@@ -938,6 +944,10 @@ document.addEventListener("DOMContentLoaded", () => {
        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-name");
    });

    document.querySelector("#options-world-show-height-bars").addEventListener("input", e => {
        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-height-bars");
    });

    document.querySelector("#options-order-forward").addEventListener("click", e => {
        if (selected) {
            entities[selected.dataset.key].priority += 1;