- Hex count: -
+ Distance: -
diff --git a/index.js b/index.js
index 33d78c3..b316a24 100644
--- a/index.js
+++ b/index.js
@@ -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());
+ }
})
);
diff --git a/style.css b/style.css
index 08a997a..19c74cf 100644
--- a/style.css
+++ b/style.css
@@ -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;
}
--
cgit v1.2.3