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

Select soldier by clicking on their counter; allow locking on another counter vs the hex

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-04-05 16:19:30 -07:00
parent 83ba223e01
commit e8f0dde6da
2 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.js
View File

@ -459,15 +459,11 @@ const Counter = new function() {
this.select = function({ dataset: { troopNumber, troopAllegiance }}) { this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
this.unSelect(); this.unSelect();
let counterAndClones = container.querySelectorAll(selector(troopNumber, troopAllegiance)); let counter = container.querySelector(`${selector(troopNumber, troopAllegiance)}:not(.clone)`);
counterAndClones.forEach(el => { if (counter) {
el.style.pointerEvents = 'auto'; counter.classList.add(selectedClass);
}
if (!el.classList.contains('clone')) {
el.classList.add(selectedClass);
}
});
}; };
this.unSelect = function() { this.unSelect = function() {
@ -633,9 +629,8 @@ const RecordSheet = new function() {
let { troopNumber, troopAllegiance } = el.dataset, let { troopNumber, troopAllegiance } = el.dataset,
proneStatus = Counter.hasProne(troopNumber, troopAllegiance); proneStatus = Counter.hasProne(troopNumber, troopAllegiance);
this.unSelect(); RecordSheet.unSelect();
document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');
el.classList.add('selected');
document.getElementById('toggle-prone-counter').checked = proneStatus; document.getElementById('toggle-prone-counter').checked = proneStatus;
existingArcs = document.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`); existingArcs = document.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`);
existingArcs.forEach(el => el.removeAttribute('clip-path')); existingArcs.forEach(el => el.removeAttribute('clip-path'));
@ -667,15 +662,19 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
group.appendChild(point); group.appendChild(point);
group.addEventListener('pointerover', e => {
// console.log('group pointer over')
group.classList.add('hover');
});
group.addEventListener('pointerout', e => { group.addEventListener('pointerout', e => {
group.classList.remove('hover'); group.classList.remove('hover');
}); });
group.addEventListener('click', e => {
let cl = e.target.classList;
if (cl.contains('counter') && !cl.contains('clone')) {
RecordSheet.select(e.target);
Counter.select(e.target);
}
});
point.addEventListener('click', e => { point.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected'); let selectedSoldier = document.querySelector('.soldier-record.selected');
let existingOccupant = let existingOccupant =
@ -694,7 +693,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
} }
}); });
point.addEventListener('contextmenu', e => { group.addEventListener('contextmenu', e => {
e.preventDefault(); e.preventDefault();
let sl = svg.querySelector('.sight-line'); let sl = svg.querySelector('.sight-line');
@ -708,8 +707,9 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
} }
}); });
point.addEventListener('pointerover', e => { group.addEventListener('pointerover', e => {
// console.log('pointerover', this); group.classList.add('hover');
let selected = RecordSheet.getSelected(); let selected = RecordSheet.getSelected();
if (selected) { if (selected) {
@ -796,16 +796,16 @@ document.querySelectorAll('.soldier-record').forEach(el =>
}) })
); );
document.querySelector('#grid').addEventListener('click', e => { // document.querySelector('#grid').addEventListener('click', e => {
let point = ptGrp.querySelector(`[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`), // let point = ptGrp.querySelector(`[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`),
sl = svg.querySelector('.sight-line'); // sl = svg.querySelector('.sight-line');
if (sl) { // if (sl) {
sl.classList.add('active'); // sl.classList.add('active');
point.dispatchEvent(new MouseEvent('mouseout')); // point.dispatchEvent(new MouseEvent('mouseout'));
point.dispatchEvent(new MouseEvent('pointerover')); // point.dispatchEvent(new MouseEvent('pointerover'));
} // }
}); // });
document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => { document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
let selected = RecordSheet.getSelected(); let selected = RecordSheet.getSelected();

2
style.css
View File

@ -238,12 +238,12 @@ g#points g.hover use[href="#point"] {
} }
g#points g.hover use.counter { g#points g.hover use.counter {
stroke-width: 2px;
r: 7px; r: 7px;
} }
g#points g.hover use.counter:not(.clone) { g#points g.hover use.counter:not(.clone) {
stroke: orange; stroke: orange;
stroke-width: 2px;
} }
g#points use.counter[data-troop-allegiance="davion"] { g#points use.counter[data-troop-allegiance="davion"] {