From f98df324acc79821c1f57cad9587ad81b1eee06a Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Fri, 25 Jul 2025 15:04:01 -0700
Subject: [PATCH] WIP: toggle grid line vis

---
 public/index.html | 7 +++++++
 src/index.js      | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/public/index.html b/public/index.html
index 49d567a..c3464df 100644
--- a/public/index.html
+++ b/public/index.html
@@ -119,6 +119,13 @@
         </label>
       </div>
 
+      <div class="opt-toggle">
+        <input type="checkbox" id="toggle-grid-line-vis" checked />
+        <label for="toggle-grid-line-vis" title="Toggle grid line visibility">
+          <span class="off">1</span><span class="on">0</span>
+        </label>
+      </div>
+
       <div class="opt-toggle">
         <input type="checkbox" id="toggle-grid-vis" checked />
         <label for="toggle-grid-vis" title="Toggle grid visibility">
diff --git a/src/index.js b/src/index.js
index 384cfea..2117a5f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -277,6 +277,12 @@ document.querySelector('#toggle-grid-vis').addEventListener('change', function (
   svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none';
 });
 
+document.querySelector('#toggle-grid-line-vis').addEventListener('change', function () {
+  const doc = document.querySelector('object').contentDocument;
+  const currentOp = parseFloat(doc.styleSheets[1].cssRules[4].style.opacity);
+  doc.styleSheets[1].cssRules[4].style.opacity = currentOp > 0 ? 0 : 0.5;
+});
+
 document.querySelectorAll('.view-squad').forEach(b => b.addEventListener('click', e => {
   const currentSquad = b.closest('.records-header').querySelector('.squad-number text');
   const currentSquadContainer = b.closest('[id$="-record"]').querySelector(`.records > .squad-${currentSquad.textContent}`);