| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-31 15:52:29 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-31 15:52:29 -0700 |
| commit | 69b1d8252e3ba2d41e5a6c007fabb3b68b6086b3 (patch) | |
| tree | 004371e6b70ec37edfd4b22642b05b42e2255a19 | |
| parent | 7fa416ee1a173be523eecdeaf2cfa2eb4c0d1531 (diff) | |
Make sight-line stationary on click
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | index.js | 42 | ||||
| -rw-r--r-- | style.css | 5 |
3 files changed, 41 insertions, 8 deletions
@@ -160,7 +160,7 @@ </svg> <div id="status"> - <span id="hex-counter">Hex count: <span id="hex-count">-</span></span> + <span id="hex-counter">Distance: <span id="hex-count">-</span></span> </div> </div> @@ -166,7 +166,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => { point.dataset.x = x; point.dataset.y = y; - point.addEventListener('click', e => { + point.addEventListener('dblclick', e => { let selectedSoldier = document.querySelector('.soldier-record.selected'); let existingOccupant = svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`); @@ -264,12 +264,13 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => { let selectedSoldier = document.querySelector('.soldier-record.selected'); if (selectedSoldier) { - e.target.classList.add('active'); + // e.target.classList.add('active'); let { troopNumber: tn, troopAllegiance: ta } = selectedSoldier.dataset; let counter = svg.querySelector(`circle.counter[data-troop-number="${tn}"][data-troop-allegiance="${ta}"]`); + let sl = svg.querySelector('.sight-line'); - if (counter) { + if (counter && (!sl || sl.classList.contains('active'))) { let source = ptGrp.querySelector(`use[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`); let [x1, y1] = [source.x.baseVal.value, source.y.baseVal.value]; let [x2, y2] = [e.target.x.baseVal.value, e.target.y.baseVal.value]; @@ -281,6 +282,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => { let sightLine = document.createElementNS(svgns, 'line'); sightLine.classList.add('sight-line'); + sightLine.classList.add('active'); sightLine.setAttributeNS(null, 'x1', svgX1); sightLine.setAttributeNS(null, 'y1', svgY1); sightLine.setAttributeNS(null, 'x2', svgX2); @@ -308,10 +310,27 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => { }); point.addEventListener('mouseout', e => { - info.querySelector('#hex-count').textContent = '-'; - info.style.display = 'none'; - ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class')); - svg.querySelectorAll('.sight-line').forEach(el => el.remove()); + let sl = svg.querySelector('.sight-line.active'); + + if (sl) { + info.querySelector('#hex-count').textContent = '-'; + info.style.display = 'none'; + ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class')); + svg.querySelectorAll('.sight-line').forEach(el => el.remove()); + } + }); + + point.addEventListener('click', e => { + let sl = svg.querySelector('.sight-line'); + + if (sl) { + sl.classList.toggle('active'); + + if (sl.classList.contains('active')) { + point.dispatchEvent(new MouseEvent('mouseout')); + point.dispatchEvent(new MouseEvent('mouseover')); + } + } }); ptGrp.appendChild(point); @@ -589,6 +608,15 @@ document.querySelectorAll('.soldier-record').forEach(el => el.classList.add('selected'); } + + let sl = svg.querySelector('.sight-line'); + + if (sl) { + info.querySelector('#hex-count').textContent = '-'; + info.style.display = 'none'; + ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class')); + svg.querySelectorAll('.sight-line').forEach(el => el.remove()); + } }) ); @@ -36,6 +36,7 @@ div#status { right: 0; margin: 3px; display: none; + user-select: none; } #hex-counter { @@ -131,6 +132,10 @@ use[href="#point"] { opacity: 0; } +use[href="#point"]:hover { + opacity: 1; +} + use[href="#point"].active { opacity: 1; } |