Add toggle for auto map-centering

public/assets/css/style.css

@@ -5,6 +5,7 @@
   margin: 0;
   box-sizing: border-box;
   pointer-events: none;
+  display: none;
 }
 
 body {
@@ -488,11 +489,11 @@ input#content-visibility-toggle {
   display: none;
 }
 
-#toggle-firing-arc-vis input {
+#toggle-firing-arc-vis input, .opt-toggle input {
   display: none;
 }
 
-#toggle-firing-arc-vis label {
+#toggle-firing-arc-vis label, .opt-toggle label {
   display: block;
   background-color: #DDD;
   border: 1px solid #666;
@@ -503,19 +504,22 @@ input#content-visibility-toggle {
   user-select: none;
 }
 
-#toggle-firing-arc-vis label:hover {
+#toggle-firing-arc-vis label:hover, .opt-toggle label:hover {
   background-color: #CCC;
 }
 
-#toggle-firing-arc-vis input + label .visible {
+#toggle-firing-arc-vis input + label .visible,
+.opt-toggle input + label .on {
   display: none;
 }
 
-#toggle-firing-arc-vis input:checked + label .visible {
+#toggle-firing-arc-vis input:checked + label .visible,
+.opt-toggle input:checked + label .on {
   display: inline;
 }
 
-#toggle-firing-arc-vis input:checked + label .hidden {
+#toggle-firing-arc-vis input:checked + label .hidden,
+.opt-toggle input:checked + label .off {
   display: none;
 }
 

public/index.html

@@ -117,8 +117,18 @@
         </label>
       </div>
 
-      <div id="toggle-grid-vis">
-        <input type="checkbox" checked />
+      <div class="opt-toggle">
+        <input type="checkbox" id="toggle-grid-vis" checked />
+        <label for="toggle-grid-vis">
+          <span class="off">⬡</span><span class="on">⬢</span>
+        </label>
+      </div>
+
+      <div class="opt-toggle">
+        <input type="checkbox" id="auto-center-map" />
+        <label for="auto-center-map">
+          <span class="off">⦾</span><span class="on">⦿</span>
+        </label>
       </div>
 
       <div id="toggle-firing-arc-vis">

src/index.js

@@ -269,7 +269,7 @@ document.querySelectorAll('[name="select-elevation"]').forEach(el => {
   });
 });
 
-document.querySelector('#toggle-grid-vis input').addEventListener('change', function () {
+document.querySelector('#toggle-grid-vis').addEventListener('change', function () {
   const svg = document.querySelector('object').contentDocument.querySelector('svg');
   svg.querySelector('.grid').style.display = this.checked ? 'inline' : 'none';
   svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none';

src/modules/gameboard.js

@@ -192,7 +192,7 @@ function select(data, opts) {
 
   if (isSelected || !data) return;
 
-  if (opts?.revealCounter) {
+  if (opts?.revealCounter && document.querySelector('#auto-center-map').checked) {
     const gb = svg.querySelector('.gameboard');
     if (gb.contains(counter)) manualPan(gb, counter);
   }