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

WIP: fix sight line

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-04-05 13:55:46 -07:00
parent 9dff1c289d
commit 83ba223e01
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.js
View File

@ -513,9 +513,7 @@ const Counter = new function() {
// xAttr: original.getAttribute('x'), // xAttr: original.getAttribute('x'),
// yAttr: original.getAttribute('y'), // yAttr: original.getAttribute('y'),
transform: container.querySelector(position(original.dataset.x, original.dataset.y)).getAttribute('transform') transform: container.querySelector(position(original.dataset.x, original.dataset.y)).getAttribute('transform')
} };
console.log(current.transform, previous.transform);
[current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g); [current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g);
[previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g); [previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g);
@ -670,6 +668,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
group.appendChild(point); group.appendChild(point);
group.addEventListener('pointerover', e => { group.addEventListener('pointerover', e => {
// console.log('group pointer over')
group.classList.add('hover'); group.classList.add('hover');
}); });
@ -710,6 +709,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
}); });
point.addEventListener('pointerover', e => { point.addEventListener('pointerover', e => {
// console.log('pointerover', this);
let selected = RecordSheet.getSelected(); let selected = RecordSheet.getSelected();
if (selected) { if (selected) {
@ -718,24 +718,27 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
sl = document.querySelector('line.sight-line'); sl = document.querySelector('line.sight-line');
if (counter && (!sl || sl.classList.contains('active'))) { if (counter && (!sl || sl.classList.contains('active'))) {
let source = ptGrp.querySelector(`use[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`), let source = ptGrp.querySelector(`g[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`);
[x1, y1] = [source.getAttribute('x'), source.getAttribute('y')], // [x1, y1] = [source.getAttribute('x'), source.getAttribute('y')],
[x2, y2] = [e.target.getAttribute('x'), e.target.getAttribute('y')]; // [x2, y2] = [e.target.getAttribute('x'), e.target.getAttribute('y')];
if (x1 !== x2 || y1 !== y2) { if (counter.dataset.x !== e.target.dataset.x || counter.dataset.y !== e.target.dataset.y) {
let { x: svgX1, y: svgY1 } = ptGrpToSvgPt(x1, y1); // let { x: svgX1, y: svgY1 } = ptGrpToSvgPt(x1, y1);
let { x: svgX2, y: svgY2 } = ptGrpToSvgPt(x2, y2); // let { x: svgX2, y: svgY2 } = ptGrpToSvgPt(x2, y2);
let sightLine = document.createElementNS(svgns, 'line'); let sightLine = document.createElementNS(svgns, 'line');
let [x1, y1] = source.getAttribute('transform').match(/-?\d+\.?\d*/g);
let [x2, y2] = e.target.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
sightLine.classList.add('sight-line'); sightLine.classList.add('sight-line');
sightLine.classList.add('active'); sightLine.classList.add('active');
sightLine.setAttributeNS(null, 'x1', svgX1); sightLine.setAttributeNS(null, 'x1', x1);
sightLine.setAttributeNS(null, 'y1', svgY1); sightLine.setAttributeNS(null, 'y1', y1);
sightLine.setAttributeNS(null, 'x2', svgX2); sightLine.setAttributeNS(null, 'x2', x2);
sightLine.setAttributeNS(null, 'y2', svgY2); sightLine.setAttributeNS(null, 'y2', y2);
document.getElementById('grid').appendChild(sightLine); grid.appendChild(sightLine);
let coords = [ let coords = [
counter.dataset.x, counter.dataset.x,
@ -756,10 +759,11 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
} }
}); });
point.addEventListener('mouseout', e => { point.addEventListener('pointerout', e => {
let sl = svg.querySelector('.sight-line.active'); let sl = svg.querySelector('.sight-line.active');
if (sl) { if (sl) {
// console.log('deleting sight line');
info.querySelector('#hex-count').textContent = '-'; info.querySelector('#hex-count').textContent = '-';
info.style.display = 'none'; info.style.display = 'none';
ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class')); ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class'));