Web Dev Solutions

Catalin Mititiuc

From adc67da606798fa0eaf7c155fe73cfa6d87f1463 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Wed, 3 Apr 2024 14:11:12 -0700 Subject: Toggle allegiance firing arc visibility --- index.html | 6 ++++++ index.js | 6 ++++++ style.css | 12 ++++++++++++ 3 files changed, 24 insertions(+) diff --git a/index.html b/index.html index e0f3b90..b5ef012 100644 --- a/index.html +++ b/index.html @@ -141,6 +141,12 @@
+
+
davion
+ +
liao
+ +
diff --git a/index.js b/index.js index abd9794..38ca8c6 100644 --- a/index.js +++ b/index.js @@ -928,6 +928,12 @@ recordSheetVisibility.addEventListener('input', e => { localStorage.setItem('recordsVisibility', recordSheetVisibility.checked); }); +document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => { + let clipPaths = svg.querySelectorAll(`clipPath[data-troop-allegiance="${el.dataset.allegiance}"]`); + + clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : ''); +})); + (function debug() { function drawLine(x1, y1, x2, y2) { let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`); diff --git a/style.css b/style.css index 7f1946e..0985c2f 100644 --- a/style.css +++ b/style.css @@ -194,6 +194,18 @@ image.map-scans { 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); +} + /* circle.counter { stroke: transparent; stroke-width: 0.5in; -- cgit v1.2.3