Web Dev Solutions

Catalin Mititiuc

From ca9ad3ac2a8a0b5709ae7f55dcff3a7473bb9203 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 8 Aug 2024 16:12:21 -0700 Subject: Add toggle for auto map-centering --- public/assets/css/style.css | 16 ++++++++++------ public/index.html | 14 ++++++++++++-- src/index.js | 2 +- src/modules/gameboard.js | 2 +- 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/public/assets/css/style.css b/public/assets/css/style.css index a708375..aa90dee 100644 --- a/public/assets/css/style.css +++ b/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; } diff --git a/public/index.html b/public/index.html index 4aeaaa0..a4f2858 100644 --- a/public/index.html +++ b/public/index.html @@ -117,8 +117,18 @@ -
- +
+ + +
+ +
+ +
diff --git a/src/index.js b/src/index.js index 89af2a1..ec652b3 100644 --- a/src/index.js +++ b/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'; diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 6359083..4218833 100644 --- a/src/modules/gameboard.js +++ b/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); } -- cgit v1.2.3