| 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-25 13:26:03 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-25 14:00:15 -0700 |
| commit | 8bdc2696093db826158076b194284d64c6aa4fc5 (patch) | |
| tree | 1dfa02ace4e1b88c8afef5ceed6665f501bf348b | |
| parent | de5f3c266677590d63fda98f25085b4327710def (diff) | |
Add line of sight
| -rw-r--r-- | index.js | 31 | ||||
| -rw-r--r-- | style.css | 10 |
2 files changed, 41 insertions, 0 deletions
@@ -164,6 +164,37 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => { ).forEach(el => el.remove()); }); + counter.addEventListener('mouseenter', e => { + let selectedSoldier = document.querySelector('.soldier-record.selected'); + + if (selectedSoldier) { + let {troopNumber, troopAllegiance} = selectedSoldier.dataset, + source = document.querySelector( + `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]` + ), + sourceAndTargetAreNotTheSame = [ + troopNumber != e.target.dataset.troopNumber, + troopAllegiance != e.target.dataset.troopAllegiance + ].some(el => el); + + if (source && sourceAndTargetAreNotTheSame) { + let sightLine = document.createElementNS(svgns, 'line'); + + sightLine.classList.add('sight-line'); + sightLine.setAttributeNS(null, 'x1', source.getAttribute('cx')); + sightLine.setAttributeNS(null, 'y1', source.getAttribute('cy')); + sightLine.setAttributeNS(null, 'x2', e.target.getAttribute('cx')); + sightLine.setAttributeNS(null, 'y2', e.target.getAttribute('cy')); + + svg.appendChild(sightLine); + } + } + }); + + counter.addEventListener('mouseleave', e => { + document.querySelectorAll('.sight-line').forEach(el => el.remove()); + }); + svg.appendChild(counter); svg.appendChild(text); } @@ -20,6 +20,11 @@ use[href="#point"].active { opacity: 1; } +circle.counter { + stroke: transparent; + stroke-width: 0.5in; +} + circle.counter[data-troop-allegiance="liao"] { fill: green; } @@ -66,6 +71,11 @@ line.ruler { stroke-width: 0.25in; } +.sight-line { + stroke: black; + stroke-width: 3px; +} + .soldier-record { display: inline-block; } |