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