| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-08 16:12:21 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-08 16:12:21 -0700 |
| commit | ca9ad3ac2a8a0b5709ae7f55dcff3a7473bb9203 (patch) | |
| tree | 006e73211ae3559ce8f80bc1cbe656472e4cdc29 | |
| parent | 23188152c91a8e638ab832fa1fa122d59d1fc391 (diff) | |
Add toggle for auto map-centering
| -rw-r--r-- | public/assets/css/style.css | 16 | ||||
| -rw-r--r-- | public/index.html | 14 | ||||
| -rw-r--r-- | src/index.js | 2 | ||||
| -rw-r--r-- | 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 @@ </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"> 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); } |