From 69b1d8252e3ba2d41e5a6c007fabb3b68b6086b3 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sun, 31 Mar 2024 15:52:29 -0700
Subject: Make sight-line stationary on click
---
index.js | 42 +++++++++++++++++++++++++++++++++++-------
1 file changed, 35 insertions(+), 7 deletions(-)
(limited to 'index.js')
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());
+ }
})
);
--
cgit v1.2.3