From b2a68f8d76b30a275912a0ade69c8b89414a2767 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 25 Mar 2024 14:25:59 -0700
Subject: Only remove clicked counter if counter's soldier is currently
selected
---
index.js | 49 ++++++++++++++++++++++++++++++-------------------
1 file changed, 30 insertions(+), 19 deletions(-)
diff --git a/index.js b/index.js
index aabc692..93072c8 100644
--- a/index.js
+++ b/index.js
@@ -64,6 +64,10 @@ function calculateAngle(xDiff, yDiff) {
return angle;
}
+function troopSelector(number, allegiance) {
+ return `[data-troop-number="${number}"][data-troop-allegiance="${allegiance}"]`;
+}
+
function edgePoint(x1, y1, x2, y2, maxX, maxY) {
let pointCoords,
xDiff = x2 - x1,
@@ -132,36 +136,44 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
let selectedSoldier = document.querySelector('.soldier-record.selected');
if (selectedSoldier) {
- let counter = document.createElementNS(svgns, 'circle');
- let text = document.createElementNS(svgns, 'text');
+ let counter = document.createElementNS(svgns, 'circle'),
+ text = document.createElementNS(svgns, 'text'),
+ {troopNumber, troopAllegiance} = selectedSoldier.dataset,
+ selector = troopSelector(troopNumber, troopAllegiance);
counter.setAttributeNS(null, 'cx', `${cx}in`);
counter.setAttributeNS(null, 'cy', `${cy}in`);
counter.setAttributeNS(null, 'r', '0.25in');
- counter.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
- counter.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
+ counter.dataset.troopNumber = troopNumber;
+ counter.dataset.troopAllegiance = troopAllegiance;
counter.classList.add('counter');
text.setAttributeNS(null, 'text-anchor', 'middle');
text.setAttributeNS(null, 'x', `${cx}in`);
text.setAttributeNS(null, 'y', `${cy + 0.25}in`);
- text.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
- text.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
- text.textContent = `${selectedSoldier.dataset.troopNumber}`;
+ text.dataset.troopNumber = troopNumber;
+ text.dataset.troopAllegiance = troopAllegiance;
+ text.textContent = troopNumber;
text.classList.add('counter');
- document.querySelectorAll(
- `.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
- ).forEach(el => el.remove());
+ document.querySelectorAll(`.counter${selector}`).forEach(el => el.remove());
counter.addEventListener('click', e => {
- document.querySelectorAll(
- `.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
- ).forEach(el => el.remove());
+ let selectedSoldier = document.querySelector('.soldier-record.selected');
- document.querySelectorAll(
- `.firing-arc[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
- ).forEach(el => el.remove());
+ if (selectedSoldier) {
+ let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
+ selector = troopSelector(troopNumber, troopAllegiance),
+ targetIsSelectedSoldier = [
+ e.target.dataset.troopNumber == troopNumber,
+ e.target.dataset.troopAllegiance == troopAllegiance
+ ].every(el => el);
+
+ if (targetIsSelectedSoldier) {
+ document.querySelectorAll(`.counter${selector}`).forEach(el => el.remove());
+ document.querySelectorAll(`.firing-arc${selector}`).forEach(el => el.remove());
+ }
+ }
});
counter.addEventListener('mouseenter', e => {
@@ -169,9 +181,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
if (selectedSoldier) {
let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
- source = document.querySelector(
- `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
- ),
+ selector = troopSelector(troopNumber, troopAllegiance),
+ source = document.querySelector(`circle.counter${selector}`),
sourceAndTargetAreNotTheSame = [
troopNumber != e.target.dataset.troopNumber,
troopAllegiance != e.target.dataset.troopAllegiance
--
cgit v1.2.3