4 files changed, 330 insertions, 345 deletions
diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css
index 9b84d8a..1d3ebc8 100644
--- a/public/assets/css/radial.css
+++ b/public/assets/css/radial.css
@@ -103,98 +103,6 @@ use[href="#hex"] {
   display: inline;
 }
 
-#dots {
-  pointer-events: none;
-}
-
-/*
-[data-view-elevation="-1"] .building > *,
-[data-view-elevation="-1"] .building > .structure > * {
-  display: none;
-} */
-
-/* [data-view-elevation="-1"] .building > .elevation-basement,
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure,
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"],
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor,
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .doors:not(.exits),
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits),
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture {
-  display: inline;
-} */
-
-/* [data-view-elevation="0"] .building .elevation-0,
-[data-view-elevation="0"] .building .elevation-0 ~ .structure {
-  display: inline;
-}
-
-[data-view-elevation="1"] .building .elevation-1,
-[data-view-elevation="1"] .building .elevation-1 ~ .structure {
-  display: inline;
-}
-
-[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'],
-[data-view-elevation="1"] .building .elevation-1 + .structure .doors,
-[data-view-elevation="1"] .building .elevation-1 + .structure .door-edges,
-[data-view-elevation="1"] .building .elevation-1 + .structure .windows,
-[data-view-elevation="1"] .building .elevation-1 + .structure .furniture,
-[data-view-elevation="1"] .building .elevation-1 ~ .structure .exits {
-  display: none;
-}
-
-[data-view-elevation="1"] .building .elevation-1 + .structure .floor {
-  fill: gray;
-}
-
-[data-view-elevation="2"] .building .elevation-2,
-[data-view-elevation="2"] .building .elevation-2 ~ .structure {
-  display: inline;
-}
-
-[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'],
-[data-view-elevation="2"] .building .elevation-2 + .structure .doors,
-[data-view-elevation="2"] .building .elevation-2 + .structure .door-edges,
-[data-view-elevation="2"] .building .elevation-2 + .structure .windows,
-[data-view-elevation="2"] .building .elevation-2 + .structure .furniture,
-[data-view-elevation="2"] .building .elevation-2 ~ .structure .exits {
-  display: none;
-}
-
-[data-view-elevation="2"] .building .elevation-2 + .structure .floor {
-  fill: gray;
-}
-
-[data-view-elevation="3"] .building .elevation-3,
-[data-view-elevation="3"] .building .elevation-3 ~ .structure {
-  display: inline;
-}
-
-[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'],
-[data-view-elevation="3"] .building .elevation-3 + .structure .doors,
-[data-view-elevation="3"] .building .elevation-3 + .structure .door-edges,
-[data-view-elevation="3"] .building .elevation-3 + .structure .windows,
-[data-view-elevation="3"] .building .elevation-3 + .structure .furniture,
-[data-view-elevation="3"] .building .elevation-3 ~ .structure .exits {
-  display: none;
-}
-
-[data-view-elevation="3"] .building .elevation-3 + .structure .floor {
-  fill: gray;
-}
-
-[data-view-elevation="0"] .elevation-0 {
-  display: inline;
-}
-
-[data-view-elevation="1"] > .elevation-0,
-[data-view-elevation="1"] > .elevation-1 {
-  display: inline;
-}
-
-[data-view-elevation="1"] .building .elevation-1 {
-  display: inline;
-} */
-
 #tree .trunk {
   fill: brown;
 }
@@ -210,32 +118,3 @@ use[href="#hex"] {
   stroke-width: 0.5px;
   transform: scale(0.9);
 }
-
-[class^="part"] use {
-  fill-opacity: 0.75;
-}
-
-.part-1 use {
-  fill: lightseagreen;
-}
-
-.part-2 use {
-  fill: lightyellow;
-}
-
-.part-3 use {
-  fill: lightblue;
-}
-
-.part-4 use {
-  fill: lightsteelblue;
-}
-
-.part-5 use {
-  fill: lightsalmon;
-}
-
-.part-6 use {
-  fill: lightgreen;
-}
-
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index e8445c8..88c9da4 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -34,15 +34,6 @@ svg text {
   user-select: none;
 }
 
-div#status {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  margin: 3px;
-  display: none;
-  user-select: none;
-}
-
 #hex-counter {
   padding: 2px;
   background-color: rgba(255, 255, 255, 0.5);
@@ -81,18 +72,6 @@ g#grid {
   text-align: right;
 }
 
-#toggle-firing-arc-vis {
-  position: absolute;
-  right: 0;
-  padding-top: 20px;
-}
-
-#toggle-firing-arc-vis div {
-  margin-top: 10px;
-  writing-mode: vertical-lr;
-  transform: rotate(180deg);
-}
-
 g.troop-counter-template, g.troop-counter-template use {
   r: inherit;
 }
@@ -282,11 +261,6 @@ div#content {
   line-height: 1.5em;
 }
 
-#content input[type="checkbox"].visible {
-  position: absolute;
-  right: 0;
-}
-
 #record-sheet {
   display: flex;
   min-height: 0;
@@ -331,17 +305,6 @@ div#content {
   margin-bottom: 0;
 }
 
-div#dice {
-  position: absolute;
-  right: 0;
-  bottom: 30px;
-  margin: 3px;
-  padding: 2px;
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 4px;
-  border: 1px solid darkgray;
-}
-
 .die {
   width: 31px;
   height: 31px;
@@ -412,11 +375,100 @@ div#dice {
   animation: roll-out 0.125s linear 1;
 }
 
-.select-elevation {
-  position: fixed;
+#edge-inputs {
+  position: absolute;
   right: 0;
-  top: 50%;
-  margin-right: 10px;
+  height: 100%;
+  background-color: rgba(0, 255, 255, 0.418);
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  /* align-content: space-around; */
+  align-items: end;
+  /* justify-content: space-between; */
+}
+
+#edge-inputs > * {
+  pointer-events: initial;
+}
+
+#content-visibility {
+  margin-top: 2px;
+}
+
+label[for="content-visibility-toggle"] {
+  display: inline-block;
+  padding: 0 4px;
+  background-color: #EEE;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top: 1px solid #999;
+  border-bottom: 1px solid #999;
+  border-left: 1px solid #999;
+  font-size: 20px;
+  line-height: 25px;
+  font-family: monospace;
+}
+
+label[for="content-visibility-toggle"]:hover {
+  color: red;
+  background-color: #DDD;
+  cursor: pointer;
+}
+
+input#content-visibility-toggle {
+  display: none;
+}
+
+#content-visibility-toggle + label .close {
+  display: none;
+}
+
+#content-visibility-toggle + label .open {
+  display: inline;
+}
+
+#content-visibility-toggle:checked + label .close {
+  display: inline;
+}
+
+#content-visibility-toggle:checked + label .open {
+  display: none;
+}
+
+#toggle-firing-arc-vis input {
+  display: none;
+}
+
+#toggle-firing-arc-vis label {
+  display: block;
+  background-color: #DDD;
+  border: 1px solid #666;
+  border-radius: 3px;
+  padding: 0 5px;
+  margin: 3px;
+  width: fit-content;
+  user-select: none;
+}
+
+#toggle-firing-arc-vis label:hover {
+  background-color: #CCC;
+}
+
+#toggle-firing-arc-vis input + label .visible {
+  display: none;
+}
+
+#toggle-firing-arc-vis input:checked + label .visible {
+  display: inline;
+}
+
+#toggle-firing-arc-vis input:checked + label .hidden {
+  display: none;
+}
+
+.select-elevation {
+  margin-right: 3px;
   background-color: #FFFFFF99;
   border: 1px solid gray;
   padding: 2px;
@@ -442,6 +494,26 @@ div#dice {
   background-color: #cdd9e9;
 }
 
+div#dice {
+  margin: 3px;
+  padding: 2px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  border: 1px solid darkgray;
+}
+
+div#status {
+  margin: 3px;
+  /* display: none; */
+  /* visibility: hidden; */
+  user-select: none;
+  position: absolute;
+  bottom: 0;
+  /* right: 50px; */
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 @keyframes roll-out {
   0% {
     transform: scaleX(1);
diff --git a/public/index.html b/public/index.html
index 4d32ce6..40d6e1b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,106 +1,139 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Infantry Combat Solo Basic</title>
-    <link rel="stylesheet" href="assets/css/style.css">
-  </head>
-  <body>
-    <template id="damage-block">
-      <link rel="stylesheet" href="assets/css/damage_block.css">
 
-      <slot name="block-number"></slot>
-      <span class="damage-effect-indicator">
-        <slot name="firing-modifier"></slot><br>
-        <slot name="movement-points"></slot>
-      </span>
-    </template>
+<head>
+  <title>Infantry Combat Solo Basic</title>
+  <link rel="stylesheet" href="assets/css/style.css">
+</head>
 
-    <template id="soldier-record-block">
-      <link rel="stylesheet" href="assets/css/soldier_record_block.css">
+<body>
+  <template id="damage-block">
+    <link rel="stylesheet" href="assets/css/damage_block.css">
 
-      <p class="physical-status-track">
-        <damage-block>
-          <span slot="block-number">10</span>
-          <span slot="movement-points">8</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">9</span>
-          <span slot="movement-points">8</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">8</span>
-          <span slot="movement-points">8</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">7</span>
-          <span slot="movement-points">8</span>
-          <span slot="firing-modifier">+1</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">6</span>
-          <span slot="movement-points">7</span>
-          <span slot="firing-modifier">+1</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">5</span>
-          <span slot="movement-points">7</span>
-          <span slot="firing-modifier">+2</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">4</span>
-          <span slot="movement-points">6</span>
-          <span slot="firing-modifier">+2</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">3</span>
-          <span slot="movement-points">6</span>
-          <span slot="firing-modifier">+2</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">2</span>
-          <span slot="movement-points">5</span>
-          <span slot="firing-modifier">+3</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">1</span>
-          <span slot="movement-points">4</span>
-          <span slot="firing-modifier">+3</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">0</span>
-          <span slot="movement-points">None</span>
-          <span slot="firing-modifier">0</span>
-        </damage-block>
-        <damage-block>
-          <span slot="block-number">DEAD</span>
-        </damage-block>
-      </p>
+    <slot name="block-number"></slot>
+    <span class="damage-effect-indicator">
+      <slot name="firing-modifier"></slot><br>
+      <slot name="movement-points"></slot>
+    </span>
+  </template>
 
-      <p>
-        <span>Troop Number</span> <slot name="troop-number">1</slot>
-        <span>Squad Number</span> <slot name="squad-number">1</slot>
-      </p>
-      <p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
-      <ul>
-        <li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>
-        <li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li>
-        <li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li>
-      </ul>
-      <p class="grenades">
-        <span>Hand Grenades</span>
-        <label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
-        <label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
-        <label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
-        <label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
-      </p>
-    </template>
+  <template id="soldier-record-block">
+    <link rel="stylesheet" href="assets/css/soldier_record_block.css">
+
+    <p class="physical-status-track">
+      <damage-block>
+        <span slot="block-number">10</span>
+        <span slot="movement-points">8</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">9</span>
+        <span slot="movement-points">8</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">8</span>
+        <span slot="movement-points">8</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">7</span>
+        <span slot="movement-points">8</span>
+        <span slot="firing-modifier">+1</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">6</span>
+        <span slot="movement-points">7</span>
+        <span slot="firing-modifier">+1</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">5</span>
+        <span slot="movement-points">7</span>
+        <span slot="firing-modifier">+2</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">4</span>
+        <span slot="movement-points">6</span>
+        <span slot="firing-modifier">+2</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">3</span>
+        <span slot="movement-points">6</span>
+        <span slot="firing-modifier">+2</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">2</span>
+        <span slot="movement-points">5</span>
+        <span slot="firing-modifier">+3</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">1</span>
+        <span slot="movement-points">4</span>
+        <span slot="firing-modifier">+3</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">0</span>
+        <span slot="movement-points">None</span>
+        <span slot="firing-modifier">0</span>
+      </damage-block>
+      <damage-block>
+        <span slot="block-number">DEAD</span>
+      </damage-block>
+    </p>
+
+    <p>
+      <span>Troop Number</span>
+      <slot name="troop-number">1</slot>
+      <span>Squad Number</span>
+      <slot name="squad-number">1</slot>
+    </p>
+    <p><span>Primary Weapon Type</span>
+      <slot name="primary-weapon-type">Rifle</slot>
+    </p>
+    <ul>
+      <li><span>Damage</span>
+        <slot name="primary-weapon-damage">4L</slot>
+      </li>
+      <li><span>Short</span>
+        <slot name="primary-weapon-range-short">1-27</slot>
+      </li>
+      <li><span>Long</span>
+        <slot name="primary-weapon-range-long">28-75</slot>
+      </li>
+    </ul>
+    <p class="grenades">
+      <span>Hand Grenades</span>
+      <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="0" cy="0" r="5" />
+        </svg></label>
+      <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="0" cy="0" r="5" />
+        </svg></label>
+      <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="0" cy="0" r="5" />
+        </svg></label>
+      <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="0" cy="0" r="5" />
+        </svg></label>
+    </p>
+  </template>
+
+  <div id="map-container">
+    <div id="edge-inputs">
+      <div id="content-visibility">
+        <input type="checkbox" class="visible" id="content-visibility-toggle" />
+        <label for="content-visibility-toggle">
+          <span class="open">«</span>
+          <span class="close">»</span>
+        </label>
+      </div>
 
-    <div id="map-container">
       <div id="toggle-firing-arc-vis">
-        <div>Defender</div>
-        <input type="checkbox" data-allegiance="defender"/>
-        <div>Attacker</div>
-        <input type="checkbox" data-allegiance="attacker"/>
+        <input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" />
+        <label style="color: red;" for="defender-firing-arc-vis">
+          <span class="hidden">▽</span><span class="visible">▼</span>
+        </label>
+        <input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" />
+        <label for="attacker-firing-arc-vis">
+          <span class="hidden">▽</span><span class="visible">▼</span>
+        </label>
       </div>
 
       <div class="select-elevation">
@@ -155,106 +188,107 @@
           </div>
         </div>
       </div>
+    </div>
 
-      <div class="map-placeholder">
-        Loading...
-      </div>
-
-      <object id="map-resource" type="image/svg+xml" data="assets/images/scenario_template.svg"></object>
+    <div id="status">
+      <span id="hex-counter">Distance: <span id="hex-count">-</span></span>
+    </div>
 
-      <div id="status">
-        <span id="hex-counter">Distance: <span id="hex-count">-</span></span>
-      </div>
+    <div class="map-placeholder">
+      Loading...
     </div>
 
-    <div id="content">
-      <input type="checkbox" class="visible"/>
-      <div>
-        Turn:
-        <span id="turn-count" data-update="0">
-          <span name="count">0</span>
-          <span class="inning-top">◓</span>
-          <span class="inning-bottom">◒</span>
-        </span>
-        <button id="show-dialog" type="button">Scenario</button>
-        <button id="download-save" type="button">Save</button>
-        <button id="upload-save" type="button">Load</button>
-        <button id="fullscreen" type="button">
-          <img src="assets/images/icon_full_screen.png" height="12" />
+    <object id="map-resource" type="image/svg+xml" data="assets/images/scenario_template.svg"></object>
+  </div>
+
+  <div id="content">
+    <div>
+      Turn:
+      <span id="turn-count" data-update="0">
+        <span name="count">0</span>
+        <span class="inning-top">◓</span>
+        <span class="inning-bottom">◒</span>
+      </span>
+      <button id="show-dialog" type="button">Scenario</button>
+      <button id="download-save" type="button">Save</button>
+      <button id="upload-save" type="button">Load</button>
+      <button id="fullscreen" type="button">
+        <img src="assets/images/icon_full_screen.png" height="12" />
+      </button>
+
+      <span style="white-space: nowrap;">
+        Prone: <input type="checkbox" id="toggle-prone-counter" />
+        <button type="button" class="set-firing-arc" data-size="small">
+          <img src="assets/images/firing_arc_small.png" height="12" /> 2 MP
+        </button>
+        <button type="button" class="set-firing-arc" data-size="medium">
+          <img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP
+        </button>
+        <button type="button" class="set-firing-arc" data-size="large">
+          <img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
+        </button>
+        <button type="button" class="set-grenade">
+          <img src="assets/images/icon_grenade.png" height="12" />
         </button>
+      </span>
+    </div>
 
-        <span style="white-space: nowrap;">
-          Prone: <input type="checkbox" id="toggle-prone-counter" />
-          <button type="button" class="set-firing-arc" data-size="small">
-            <img src="assets/images/firing_arc_small.png" height="12" /> 2 MP
+    <div id="record-sheet">
+      <div id="attacker-record">
+        <!-- <img class="logo" src="logo-davion.png" /> -->
+        <p>
+          <strong class="name">Attacker</strong>
+          <button type="button" class="end-move" data-allegiance="attacker">
+            End Movement
           </button>
-          <button type="button" class="set-firing-arc" data-size="medium">
-            <img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP
+          <button type="button" class="end-turn" data-allegiance="defender">
+            End Turn
           </button>
-          <button type="button" class="set-firing-arc" data-size="large">
-            <img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
+          <br>
+          <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
+            17th Kestral Mechanized Infantry -->
+        </p>
+        <div class="records"></div>
+      </div>
+      <div id="defender-record">
+        <!-- <img class="logo" src="logo-liao.png" /> -->
+        <p>
+          <strong class="name">Defender</strong>
+          <button type="button" class="end-move" data-allegiance="defender">
+            End Movement
           </button>
-          <button type="button" class="set-grenade">
-            <img src="assets/images/icon_grenade.png" height="12" />
+          <button type="button" class="end-turn" data-allegiance="attacker">
+            End Turn
           </button>
-        </span>
-      </div>
-
-      <div id="record-sheet">
-        <div id="attacker-record">
-          <!-- <img class="logo" src="logo-davion.png" /> -->
-          <p>
-            <strong class="name">Attacker</strong>
-            <button type="button" class="end-move" data-allegiance="attacker">
-              End Movement
-            </button>
-            <button type="button" class="end-turn" data-allegiance="defender">
-              End Turn
-            </button>
-            <br>
-            <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
-            17th Kestral Mechanized Infantry -->
-          </p>
-          <div class="records"></div>
-        </div>
-        <div id="defender-record">
-          <!-- <img class="logo" src="logo-liao.png" /> -->
-          <p>
-            <strong class="name">Defender</strong>
-            <button type="button" class="end-move" data-allegiance="defender">
-              End Movement
-            </button>
-            <button type="button" class="end-turn" data-allegiance="attacker">
-              End Turn
-            </button>
-            <br>
-            <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
+          <br>
+          <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
             Aldebaran Home Guard -->
-          </p>
-          <div class="records"></div>
-        </div>
+        </p>
+        <div class="records"></div>
       </div>
     </div>
+  </div>
 
-    <dialog id="map-dialog">
-      <form>
-        <p>
-          <label>
-            Load scenario:
-            <select>
-            </select>
-          </label>
-        </p>
-        <div>
-          <button value="cancel" formmethod="dialog">Cancel</button>
-          <button id="confirm-btn" value="default">Confirm</button>
-        </div>
-      </form>
-    </dialog>
+  <dialog id="map-dialog">
+    <form>
+      <p>
+        <label>
+          Load scenario:
+          <select>
+          </select>
+        </label>
+      </p>
+      <div>
+        <button value="cancel" formmethod="dialog">Cancel</button>
+        <button id="confirm-btn" value="default">Confirm</button>
+      </div>
+    </form>
+  </dialog>
+
+  <input type="file" accept="image/svg+xml" />
 
-    <input type="file" accept="image/svg+xml"/>
+  <script src="index.js"></script>
+  <script src="soldier_record_block.js"></script>
+</body>
 
-    <script src="index.js"></script>
-    <script src="soldier_record_block.js"></script>
-  </body>
 </html>
diff --git a/src/index.js b/src/index.js
index bb299be..07dffa0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,7 +17,7 @@ if (window.IS_DEV) {
 const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
   proneToggle = document.getElementById('toggle-prone-counter'),
-  contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
+  contentVisToggleEl = document.querySelector('#edge-inputs input[type="checkbox"].visible'),
   // fileName = localStorage.getItem('map') || 'scenario-side_show',
   fileName = localStorage.getItem('map') || 'radial',
   map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
@@ -92,7 +92,7 @@ function clearMoveEndedIndicators(records) {
 
 function distance(count = '-') {
   distanceOutput.querySelector('#hex-count').textContent = count;
-  distanceOutput.style.display = count === '-' ? 'none' : 'block';
+  distanceOutput.style.visibility = count === '-' ? 'hidden' : 'visible';
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive