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

Make sight-line stationary on click

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-31 15:52:29 -07:00
parent 7fa416ee1a
commit 69b1d8252e
3 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -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>

34
index.js
View File

@ -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 => {
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());
}
})
);

5
style.css
View File

@ -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;
}