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

WIP: refactor

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:28 -07:00
parent c7abbe9ded
commit 242445c907
1 changed files with 289 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

433
index.js
View File

@ -349,36 +349,87 @@ function ptGrpToSvgPt(x, y) {
return svgP; return svgP;
} }
POINTS.forEach((row, index) => row.forEach(([x, y]) => { const Counter = new function() {
var cx = x * INRADIUS * 2 + (isEven(index) ? INRADIUS : 0), let container = cntrGrp,
cy = y * 3 / 2 * CIRCUMRADIUS, selectedClass = 'selected',
point = document.createElementNS(svgns, 'use');
cx = parseFloat(cx.toFixed(1)); dataSelector = function(troopNumber, allegiance) {
cy = parseFloat(cy.toFixed(1)); return `[data-troop-number="${troopNumber}"][data-troop-allegiance="${allegiance}"]`;
},
point.setAttributeNS(null, 'href', `#point`); selector = function(troopNumber, allegiance) {
point.setAttributeNS(null, 'x', cx); return `use${dataSelector(troopNumber, allegiance)}`;
point.setAttributeNS(null, 'y', cy); },
point.dataset.x = x;
point.dataset.y = y;
point.addEventListener('click', e => { traceSelector = function(troopNumber, allegiance) {
let selectedSoldier = document.querySelector('.soldier-record.selected'); return `polyline.move-trace${dataSelector(troopNumber, allegiance)}`;
let existingOccupant = },
svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
if (selectedSoldier && !existingOccupant) { clickClone = function() {
let { troopNumber, troopAllegiance, x, y } = this.dataset,
xAttr = this.getAttribute('x'),
yAttr = this.getAttribute('y');
if (Counter.isSelected(troopNumber, troopAllegiance)) {
let trace = container.querySelector(traceSelector(troopNumber, troopAllegiance)),
points = trace.getAttribute('points').split(' ');
if (`${xAttr},${yAttr}` == points.at(0)) {
let counter = Counter.get(troopNumber, troopAllegiance);
counter.setAttributeNS(null, 'x', xAttr);
counter.setAttributeNS(null, 'y', yAttr);
counter.dataset.x = x;
counter.dataset.y = y;
container.querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`).forEach(el => el.remove());
trace.remove();
} else {
points = points.filter(p => p != `${xAttr},${yAttr}`).join(' ');
trace.setAttributeNS(null, 'points', points);
}
this.remove();
}
};
this.get = function(troopNumber, allegiance) {
return container.querySelector(`${selector(troopNumber, allegiance)}:not(.clone)`);
};
this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
this.unSelect();
let queriedCounter = container.querySelector(selector(troopNumber, troopAllegiance));
if (queriedCounter) {
queriedCounter.classList.add(selectedClass);
}
};
this.unSelect = function() {
container
.querySelectorAll(`.${selectedClass}`)
.forEach(el => el.classList.remove(selectedClass));
};
this.isSelected = function(troopNumber, allegiance) {
return container.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null;
};
this.place = function({ dataset: { troopNumber, troopAllegiance }}, point) {
let tempSelector = selector(troopNumber, troopAllegiance);
new function() {
let counter, points, let counter, points,
{ troopNumber, troopAllegiance } = selectedSoldier.dataset, selector = tempSelector,
selector = troopSelector(troopNumber, troopAllegiance), counterNodeList = container.querySelectorAll(`${selector}`);
counterNodeList = cntrGrp.querySelectorAll(`use${selector}`);
if (counterNodeList.length > 0) { if (counterNodeList.length > 0) {
let counters = Array.from(counterNodeList), let counters = Array.from(counterNodeList),
original = counters.find(el => !el.classList.contains('clone')), original = counters.find(el => !el.classList.contains('clone')),
count = counters.filter(el => el.classList.contains('clone')).length, count = counters.filter(el => el.classList.contains('clone')).length,
trace = cntrGrp.querySelector(`polyline.move-trace${selector}`); trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
let current = { let current = {
x: point.dataset.x, x: point.dataset.x,
@ -399,6 +450,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
counter.dataset.x = previous.x; counter.dataset.x = previous.x;
counter.dataset.y = previous.y; counter.dataset.y = previous.y;
counter.dataset.cloneOrder = count + 1; counter.dataset.cloneOrder = count + 1;
counter.classList.remove(selectedClass);
counter.classList.add('clone'); counter.classList.add('clone');
original.setAttributeNS(null, 'x', current.xAttr); original.setAttributeNS(null, 'x', current.xAttr);
@ -414,161 +466,259 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
trace.dataset.troopAllegiance = troopAllegiance; trace.dataset.troopAllegiance = troopAllegiance;
trace.classList.add('move-trace'); trace.classList.add('move-trace');
cntrGrp.prepend(trace); container.prepend(trace);
} else { } else {
points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`; points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;
} }
trace.setAttributeNS(null, 'points', points); trace.setAttributeNS(null, 'points', points);
counter.addEventListener('click', clickClone);
counter.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected');
if (selectedSoldier) {
let { troopNumber, troopAllegiance } = selectedSoldier.dataset,
selector = troopSelector(troopNumber, troopAllegiance);
if (counter.dataset.troopAllegiance == troopAllegiance && counter.dataset.troopNumber == troopNumber) {
let [xAttr, yAttr] = [counter.getAttribute('x'), counter.getAttribute('y')];
let points = trace.getAttribute('points').split(' ');
if (`${xAttr},${yAttr}` == points.at(0)) {
original.setAttributeNS(null, 'x', xAttr);
original.setAttributeNS(null, 'y', yAttr);
original.dataset.x = counter.dataset.x;
original.dataset.y = counter.dataset.y;
cntrGrp.querySelectorAll(`use${selector}.clone`).forEach(el => el.remove());
trace.remove();
} else {
let points = trace.getAttribute('points').split(' ').filter(p => p != `${xAttr},${yAttr}`);
trace.setAttributeNS(null, 'points', points.join(' '));
}
counter.remove();
}
}
});
} else { } else {
counter = document.createElementNS(svgns, 'use'), counter = document.createElementNS(svgns, 'use'),
counter.setAttributeNS(null, 'href', `#t-${troopNumber}`); counter.setAttributeNS(null, 'href', `#t-${troopNumber}`);
counter.classList.add('counter'); counter.classList.add('counter', 'selected');
counter.setAttributeNS(null, 'x', cx); counter.setAttributeNS(null, 'x', point.getAttribute('x'));
counter.setAttributeNS(null, 'y', cy); counter.setAttributeNS(null, 'y', point.getAttribute('y'));
counter.dataset.troopNumber = troopNumber; counter.dataset.troopNumber = troopNumber;
counter.dataset.troopAllegiance = troopAllegiance; counter.dataset.troopAllegiance = troopAllegiance;
counter.dataset.x = point.dataset.x; counter.dataset.x = point.dataset.x;
counter.dataset.y = point.dataset.y; counter.dataset.y = point.dataset.y;
counter.addEventListener('dblclick', e => { // counter.addEventListener('dblclick', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected'); // let selectedSoldier = document.querySelector('.soldier-record.selected');
if (selectedSoldier) { // if (selectedSoldier) {
let trace = cntrGrp.querySelector(`polyline.move-trace${selector}`); // let trace = container.querySelector(`polyline.move-trace${selector}`);
if (!trace) { // if (!trace) {
let {troopNumber, troopAllegiance} = selectedSoldier.dataset, // let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
selector = troopSelector(troopNumber, troopAllegiance), // selector = troopSelector(troopNumber, troopAllegiance),
targetIsSelectedSoldier = [ // targetIsSelectedSoldier = [
e.target.dataset.troopNumber == troopNumber, // e.target.dataset.troopNumber == troopNumber,
e.target.dataset.troopAllegiance == troopAllegiance // e.target.dataset.troopAllegiance == troopAllegiance
].every(el => el); // ].every(el => el);
if (targetIsSelectedSoldier) { // if (targetIsSelectedSoldier) {
cntrGrp.querySelectorAll(`${selector}`).forEach(el => el.remove()); // container.querySelectorAll(`${selector}`).forEach(el => el.remove());
document.querySelectorAll(`#firing-arcs ${selector}`).forEach(el => el.remove()); // document.querySelectorAll(`#firing-arcs ${selector}`).forEach(el => el.remove());
} // }
} // }
} // }
}); // });
counter.addEventListener('click', e => { // counter.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected');
if (selectedSoldier) {
let { troopNumber, troopAllegiance } = selectedSoldier.dataset,
selector = troopSelector(troopNumber, troopAllegiance);
if (counter.dataset.troopAllegiance == troopAllegiance && counter.dataset.troopNumber == troopNumber) {
let trace = cntrGrp.querySelector(`polyline.move-trace${selector}`);
if (trace) {
let points = trace.getAttribute('points').split(' ');
let [xAttr, yAttr] = points.at(-2).split(',');
let clone = cntrGrp.querySelector(`${selector}[x="${xAttr}"][y="${yAttr}"].clone`);
points.pop()
if (points.length >= 2) {
trace.setAttributeNS(null, 'points', points.join(' '));
} else {
trace.remove();
}
counter.setAttributeNS(null, 'x', clone.getAttribute('x'));
counter.setAttributeNS(null, 'y', clone.getAttribute('y'));
counter.dataset.x = clone.dataset.x;
counter.dataset.y = clone.dataset.y;
clone.remove();
}
}
}
});
}
// 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());
// document.querySelectorAll(`.counter${selector}`).forEach(el => el.remove());
// counter.addEventListener('mouseenter', e => {
// let selectedSoldier = document.querySelector('.soldier-record.selected'); // let selectedSoldier = document.querySelector('.soldier-record.selected');
// if (selectedSoldier) { // if (selectedSoldier) {
// let { troopNumber, troopAllegiance } = selectedSoldier.dataset, // let { troopNumber, troopAllegiance } = selectedSoldier.dataset,
// selector = troopSelector(troopNumber, troopAllegiance);
// if (counter.dataset.troopAllegiance == troopAllegiance && counter.dataset.troopNumber == troopNumber) {
// let trace = container.querySelector(`polyline.move-trace${selector}`);
// if (trace) {
// let points = trace.getAttribute('points').split(' ');
// let [xAttr, yAttr] = points.at(-2).split(',');
// let clone = container.querySelector(`${selector}[x="${xAttr}"][y="${yAttr}"].clone`);
// points.pop()
// if (points.length >= 2) {
// trace.setAttributeNS(null, 'points', points.join(' '));
// } else {
// trace.remove();
// }
// counter.setAttributeNS(null, 'x', clone.getAttribute('x'));
// counter.setAttributeNS(null, 'y', clone.getAttribute('y'));
// counter.dataset.x = clone.dataset.x;
// counter.dataset.y = clone.dataset.y;
// clone.remove();
// }
// }
// }
// });
}
container.appendChild(counter);
}
}
};
POINTS.forEach((row, index) => row.forEach(([x, y]) => {
var cx = x * INRADIUS * 2 + (isEven(index) ? INRADIUS : 0),
cy = y * 3 / 2 * CIRCUMRADIUS,
point = document.createElementNS(svgns, 'use');
cx = parseFloat(cx.toFixed(1));
cy = parseFloat(cy.toFixed(1));
point.setAttributeNS(null, 'href', `#point`);
point.setAttributeNS(null, 'x', cx);
point.setAttributeNS(null, 'y', cy);
point.dataset.x = x;
point.dataset.y = y;
point.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected');
let existingOccupant =
svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
if (selectedSoldier && !existingOccupant) {
Counter.place(selectedSoldier, point);
// let counter, points,
// { troopNumber, troopAllegiance } = selectedSoldier.dataset,
// selector = troopSelector(troopNumber, troopAllegiance), // selector = troopSelector(troopNumber, troopAllegiance),
// source = document.querySelector(`circle.counter${selector}`), // counterNodeList = cntrGrp.querySelectorAll(`use${selector}`);
// // TODO: use isEqualNode() method instead // if (counterNodeList.length > 0) {
// sourceAndTargetAreNotTheSame = [ // let counters = Array.from(counterNodeList),
// troopNumber != e.target.dataset.troopNumber, // original = counters.find(el => !el.classList.contains('clone')),
// troopAllegiance != e.target.dataset.troopAllegiance // count = counters.filter(el => el.classList.contains('clone')).length,
// ].some(el => el); // trace = cntrGrp.querySelector(`polyline.move-trace${selector}`);
// if (source && sourceAndTargetAreNotTheSame) { // let current = {
// let sightLine = document.createElementNS(svgns, 'line'); // x: point.dataset.x,
// y: point.dataset.y,
// xAttr: point.getAttribute('x'),
// yAttr: point.getAttribute('y')
// },
// previous = {
// x: original.dataset.x,
// y: original.dataset.y,
// xAttr: original.getAttribute('x'),
// yAttr: original.getAttribute('y')
// }
// sightLine.classList.add('sight-line'); // counter = original.cloneNode();
// sightLine.setAttributeNS(null, 'x1', source.getAttribute('cx')); // counter.setAttributeNS(null, 'x', previous.xAttr);
// sightLine.setAttributeNS(null, 'y1', source.getAttribute('cy')); // counter.setAttributeNS(null, 'y', previous.yAttr);
// sightLine.setAttributeNS(null, 'x2', e.target.getAttribute('cx')); // counter.dataset.x = previous.x;
// sightLine.setAttributeNS(null, 'y2', e.target.getAttribute('cy')); // counter.dataset.y = previous.y;
// counter.dataset.cloneOrder = count + 1;
// counter.classList.add('clone');
// svg.appendChild(sightLine); // original.setAttributeNS(null, 'x', current.xAttr);
// original.setAttributeNS(null, 'y', current.yAttr);
// original.dataset.x = current.x;
// original.dataset.y = current.y;
// if (!trace) {
// trace = document.createElementNS(svgns, 'polyline');
// points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`;
// trace.dataset.troopNumber = troopNumber;
// trace.dataset.troopAllegiance = troopAllegiance;
// trace.classList.add('move-trace');
// cntrGrp.prepend(trace);
// } else {
// points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;
// }
// trace.setAttributeNS(null, 'points', points);
// counter.addEventListener('click', e => {
// let selectedSoldier = document.querySelector('.soldier-record.selected');
// if (selectedSoldier) {
// let { troopNumber, troopAllegiance } = selectedSoldier.dataset,
// selector = troopSelector(troopNumber, troopAllegiance);
// if (counter.dataset.troopAllegiance == troopAllegiance && counter.dataset.troopNumber == troopNumber) {
// let [xAttr, yAttr] = [counter.getAttribute('x'), counter.getAttribute('y')];
// let points = trace.getAttribute('points').split(' ');
// if (`${xAttr},${yAttr}` == points.at(0)) {
// original.setAttributeNS(null, 'x', xAttr);
// original.setAttributeNS(null, 'y', yAttr);
// original.dataset.x = counter.dataset.x;
// original.dataset.y = counter.dataset.y;
// cntrGrp.querySelectorAll(`use${selector}.clone`).forEach(el => el.remove());
// trace.remove();
// } else {
// let points = trace.getAttribute('points').split(' ').filter(p => p != `${xAttr},${yAttr}`);
// trace.setAttributeNS(null, 'points', points.join(' '));
// }
// counter.remove();
// } // }
// } // }
// }); // });
// counter.addEventListener('mouseleave', e => { // } else {
// document.querySelectorAll('.sight-line').forEach(el => el.remove()); // counter = document.createElementNS(svgns, 'use'),
// counter.setAttributeNS(null, 'href', `#t-${troopNumber}`);
// counter.classList.add('counter');
// counter.setAttributeNS(null, 'x', cx);
// counter.setAttributeNS(null, 'y', cy);
// counter.dataset.troopNumber = troopNumber;
// counter.dataset.troopAllegiance = troopAllegiance;
// counter.dataset.x = point.dataset.x;
// counter.dataset.y = point.dataset.y;
// counter.addEventListener('dblclick', e => {
// let selectedSoldier = document.querySelector('.soldier-record.selected');
// if (selectedSoldier) {
// let trace = cntrGrp.querySelector(`polyline.move-trace${selector}`);
// if (!trace) {
// 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) {
// cntrGrp.querySelectorAll(`${selector}`).forEach(el => el.remove());
// document.querySelectorAll(`#firing-arcs ${selector}`).forEach(el => el.remove());
// }
// }
// }
// }); // });
// svg.insertBefore(counter, ptGrp); // counter.addEventListener('click', e => {
// let selectedSoldier = document.querySelector('.soldier-record.selected');
// let symbCtr = document.createElementNS(svgns, 'use'); // if (selectedSoldier) {
// let { troopNumber, troopAllegiance } = selectedSoldier.dataset,
// selector = troopSelector(troopNumber, troopAllegiance);
// symbCtr.setAttributeNS(null, 'href', '#troop-counter'); // if (counter.dataset.troopAllegiance == troopAllegiance && counter.dataset.troopNumber == troopNumber) {
// symbCtr.setAttributeNS(null, 'x', cx); // let trace = cntrGrp.querySelector(`polyline.move-trace${selector}`);
// symbCtr.setAttributeNS(null, 'y', cy);
// cntrGrp.appendChild(symbCtr); // if (trace) {
// let points = trace.getAttribute('points').split(' ');
// let [xAttr, yAttr] = points.at(-2).split(',');
// let clone = cntrGrp.querySelector(`${selector}[x="${xAttr}"][y="${yAttr}"].clone`);
cntrGrp.appendChild(counter); // points.pop()
// if (points.length >= 2) {
// trace.setAttributeNS(null, 'points', points.join(' '));
// } else {
// trace.remove();
// }
// counter.setAttributeNS(null, 'x', clone.getAttribute('x'));
// counter.setAttributeNS(null, 'y', clone.getAttribute('y'));
// counter.dataset.x = clone.dataset.x;
// counter.dataset.y = clone.dataset.y;
// clone.remove();
// }
// }
// }
// });
// }
// cntrGrp.appendChild(counter);
} }
}); });
@ -579,7 +729,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
// e.target.classList.add('active'); // e.target.classList.add('active');
let { troopNumber: tn, troopAllegiance: ta } = selectedSoldier.dataset; let { troopNumber: tn, troopAllegiance: ta } = selectedSoldier.dataset;
let counter = svg.querySelector(`circle.counter[data-troop-number="${tn}"][data-troop-allegiance="${ta}"]`); // let counter = svg.querySelector(`circle.counter[data-troop-number="${tn}"][data-troop-allegiance="${ta}"]`);
let counter = Counter.get(tn, ta);
let sl = svg.querySelector('.sight-line'); let sl = svg.querySelector('.sight-line');
if (counter && (!sl || sl.classList.contains('active'))) { if (counter && (!sl || sl.classList.contains('active'))) {
@ -668,12 +819,14 @@ document.querySelectorAll('.soldier-record').forEach(el =>
el.addEventListener('click', e => { el.addEventListener('click', e => {
if (el.classList.contains('selected')) { if (el.classList.contains('selected')) {
el.classList.remove('selected'); el.classList.remove('selected');
Counter.unSelect();
} else { } else {
document.querySelectorAll('.soldier-record.selected').forEach(el => document.querySelectorAll('.soldier-record.selected').forEach(el =>
el.classList.remove('selected') el.classList.remove('selected')
); );
el.classList.add('selected'); el.classList.add('selected');
Counter.select(el);
} }
let sl = svg.querySelector('.sight-line'); let sl = svg.querySelector('.sight-line');