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

Only remove clicked counter if counter's soldier is currently selected

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-25 14:25:59 -07:00
parent 8bdc269609
commit b2a68f8d76
1 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
index.js
View File

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