Allow for names to be toggled; add some padding to option rows

macrovision.css

@@ -133,6 +133,8 @@ body.toggle-entity-name .entity-name {
     display: flex;
     text-align: center;
     width: 100%;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 .options-block {
@@ -442,3 +444,11 @@ a {
 a.corner-ribbon {
     text-decoration: none;
 }
+
+input[type=checkbox] {
+    transform: scale(2);
+}
+
+input ~ label {
+    user-select: none;
+}

macrovision.html

@@ -104,6 +104,15 @@
             <span class="switch-label">Auto-size world</span>
           </label>          
         </div>
+        <div class="options-row">
+          <input type="checkbox" id="options-world-show-names">
+          <label for="options-world-show-names">Names over entities</label>
+        </div>
+        <div class="options-row">
+          <input type="checkbox" id="options-world-show-bottom-names">
+          <label for="options-world-show-bottom-names">Names at bottom</label>
+        </div>
+
         <div class="options-label">
           Auto-sizing mode
         </div>

macrovision.js

@@ -928,6 +928,14 @@ function doSliderEntityScale() {
 document.addEventListener("DOMContentLoaded", () => {
     prepareEntities();
 
+    document.querySelector("#options-world-show-names").addEventListener("input", e => {
+        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-entity-name");
+    });
+
+    document.querySelector("#options-world-show-bottom-names").addEventListener("input", e => {
+        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-name");
+    });
+
     document.querySelector("#options-order-forward").addEventListener("click", e => {
         if (selected) {
             entities[selected.dataset.key].priority += 1;