ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add toggle for auto map-centering

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-08-08 16:12:21 -07:00
parent 23188152c9
commit ca9ad3ac2a
4 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/assets/css/style.css
View File

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

14
public/index.html
View File

@ -117,8 +117,18 @@
</label> </label>
</div> </div>
<div id="toggle-grid-vis"> <div class="opt-toggle">
<input type="checkbox" checked /> <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>
<div id="toggle-firing-arc-vis"> <div id="toggle-firing-arc-vis">

2
src/index.js
View File

@ -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'); const svg = document.querySelector('object').contentDocument.querySelector('svg');
svg.querySelector('.grid').style.display = this.checked ? 'inline' : 'none'; svg.querySelector('.grid').style.display = this.checked ? 'inline' : 'none';
svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none'; svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none';

2
src/modules/gameboard.js
View File

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