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; return angle;
} }
function troopSelector(number, allegiance) {
return `[data-troop-number="${number}"][data-troop-allegiance="${allegiance}"]`;
}
function edgePoint(x1, y1, x2, y2, maxX, maxY) { function edgePoint(x1, y1, x2, y2, maxX, maxY) {
let pointCoords, let pointCoords,
xDiff = x2 - x1, xDiff = x2 - x1,
@ -132,36 +136,44 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
let selectedSoldier = document.querySelector('.soldier-record.selected'); let selectedSoldier = document.querySelector('.soldier-record.selected');
if (selectedSoldier) { if (selectedSoldier) {
let counter = document.createElementNS(svgns, 'circle'); let counter = document.createElementNS(svgns, 'circle'),
let text = document.createElementNS(svgns, 'text'); text = document.createElementNS(svgns, 'text'),
{troopNumber, troopAllegiance} = selectedSoldier.dataset,
selector = troopSelector(troopNumber, troopAllegiance);
counter.setAttributeNS(null, 'cx', `${cx}in`); counter.setAttributeNS(null, 'cx', `${cx}in`);
counter.setAttributeNS(null, 'cy', `${cy}in`); counter.setAttributeNS(null, 'cy', `${cy}in`);
counter.setAttributeNS(null, 'r', '0.25in'); counter.setAttributeNS(null, 'r', '0.25in');
counter.dataset.troopNumber = selectedSoldier.dataset.troopNumber; counter.dataset.troopNumber = troopNumber;
counter.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance; counter.dataset.troopAllegiance = troopAllegiance;
counter.classList.add('counter'); counter.classList.add('counter');
text.setAttributeNS(null, 'text-anchor', 'middle'); text.setAttributeNS(null, 'text-anchor', 'middle');
text.setAttributeNS(null, 'x', `${cx}in`); text.setAttributeNS(null, 'x', `${cx}in`);
text.setAttributeNS(null, 'y', `${cy + 0.25}in`); text.setAttributeNS(null, 'y', `${cy + 0.25}in`);
text.dataset.troopNumber = selectedSoldier.dataset.troopNumber; text.dataset.troopNumber = troopNumber;
text.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance; text.dataset.troopAllegiance = troopAllegiance;
text.textContent = `${selectedSoldier.dataset.troopNumber}`; text.textContent = troopNumber;
text.classList.add('counter'); text.classList.add('counter');
document.querySelectorAll( document.querySelectorAll(`.counter${selector}`).forEach(el => el.remove());
`.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
).forEach(el => el.remove());
counter.addEventListener('click', e => { counter.addEventListener('click', e => {
document.querySelectorAll( let selectedSoldier = document.querySelector('.soldier-record.selected');
`.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
).forEach(el => el.remove());
document.querySelectorAll( if (selectedSoldier) {
`.firing-arc[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]` let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
).forEach(el => el.remove()); 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 => { counter.addEventListener('mouseenter', e => {
@ -169,9 +181,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
if (selectedSoldier) { if (selectedSoldier) {
let {troopNumber, troopAllegiance} = selectedSoldier.dataset, let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
source = document.querySelector( selector = troopSelector(troopNumber, troopAllegiance),
`circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]` source = document.querySelector(`circle.counter${selector}`),
),
sourceAndTargetAreNotTheSame = [ sourceAndTargetAreNotTheSame = [
troopNumber != e.target.dataset.troopNumber, troopNumber != e.target.dataset.troopNumber,
troopAllegiance != e.target.dataset.troopAllegiance troopAllegiance != e.target.dataset.troopAllegiance