From 8bdc2696093db826158076b194284d64c6aa4fc5 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 25 Mar 2024 13:26:03 -0700
Subject: Add line of sight
---
index.js | 31 +++++++++++++++++++++++++++++++
style.css | 10 ++++++++++
2 files changed, 41 insertions(+)
diff --git a/index.js b/index.js
index deef03b..aabc692 100644
--- a/index.js
+++ b/index.js
@@ -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);
}
diff --git a/style.css b/style.css
index 2283b43..46ad1d6 100644
--- a/style.css
+++ b/style.css
@@ -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;
}
--
cgit v1.2.3