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

Use right mouse button for setting sight line

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-04-03 09:40:20 -07:00
parent 202f3ffa6c
commit 616bdf15d9
2 changed files with 53 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
index.js
View File

@ -354,7 +354,7 @@ const Counter = new function() {
}, },
selector = function(troopNumber, allegiance) { selector = function(troopNumber, allegiance) {
return `use${dataSelector(troopNumber, allegiance)}`; return `use.counter${dataSelector(troopNumber, allegiance)}`;
}, },
traceSelector = function(troopNumber, allegiance) { traceSelector = function(troopNumber, allegiance) {
@ -423,7 +423,7 @@ const Counter = new function() {
trace = container.querySelector(traceSelector(troopNumber, troopAllegiance)); trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
if (!trace) { if (!trace) {
Counter.remove(troopNumber, troopAllegiance); Counter.remove(this);
document.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove()); document.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());
} }
} }
@ -440,13 +440,23 @@ const Counter = new function() {
if (queriedCounter) { if (queriedCounter) {
queriedCounter.classList.add(selectedClass); queriedCounter.classList.add(selectedClass);
queriedCounter.style.pointerEvents = 'auto';
} }
}; };
this.unSelect = function() { this.unSelect = function() {
let selected = container.querySelector(`.${selectedClass}`);
if (selected) {
let { troopNumber, troopAllegiance } = selected.dataset;
selected.classList.remove(selectedClass);
selected.removeAttribute('style');
container container
.querySelectorAll(`.${selectedClass}`) .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)
.forEach(el => el.classList.remove(selectedClass)); .forEach(el => el.removeAttribute('style'));
}
}; };
this.isSelected = function(troopNumber, allegiance) { this.isSelected = function(troopNumber, allegiance) {
@ -514,6 +524,7 @@ const Counter = new function() {
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.style.pointerEvents = 'auto';
counter.addEventListener('click', click); counter.addEventListener('click', click);
counter.addEventListener('dblclick', dblClick); counter.addEventListener('dblclick', dblClick);
@ -522,7 +533,7 @@ const Counter = new function() {
container.appendChild(counter); container.appendChild(counter);
}; };
this.remove = function(troopNumber, troopAllegiance) { this.remove = function({ dataset: { troopNumber, troopAllegiance }}) {
container container
.querySelectorAll(dataSelector(troopNumber, troopAllegiance)) .querySelectorAll(dataSelector(troopNumber, troopAllegiance))
.forEach(el => el.remove()); .forEach(el => el.remove());
@ -567,6 +578,28 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
if (selectedSoldier && !existingOccupant) { if (selectedSoldier && !existingOccupant) {
Counter.place(selectedSoldier, point); Counter.place(selectedSoldier, point);
let sl = svg.querySelector('.sight-line');
if (sl) {
sl.classList.add('active');
point.dispatchEvent(new MouseEvent('mouseout'));
point.dispatchEvent(new MouseEvent('mouseover'));
}
}
});
point.addEventListener('contextmenu', e => {
e.preventDefault();
let sl = svg.querySelector('.sight-line');
if (sl) {
sl.classList.toggle('active');
if (sl.classList.contains('active')) {
point.dispatchEvent(new MouseEvent('mouseout'));
point.dispatchEvent(new MouseEvent('mouseover'));
}
} }
}); });
@ -606,7 +639,6 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
sightLine.setAttributeNS(null, 'x2', svgX2); sightLine.setAttributeNS(null, 'x2', svgX2);
sightLine.setAttributeNS(null, 'y2', svgY2); sightLine.setAttributeNS(null, 'y2', svgY2);
// svg.insertBefore(sightLine, ptGrp);
document.getElementById('grid').appendChild(sightLine); document.getElementById('grid').appendChild(sightLine);
let coords = [ let coords = [
@ -628,39 +660,18 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
} }
}); });
// point.addEventListener('mouseout', e => { point.addEventListener('mouseout', e => {
// let sl = svg.querySelector('.sight-line.active'); let sl = svg.querySelector('.sight-line.active');
// if (sl) {
// 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());
// }
// });
point.addEventListener('click', e => {
let sl = svg.querySelector('.sight-line');
if (sl) { if (sl) {
sl.classList.toggle('active'); info.querySelector('#hex-count').textContent = '-';
info.style.display = 'none';
if (sl.classList.contains('active')) { ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class'));
point.dispatchEvent(new MouseEvent('mouseout')); svg.querySelectorAll('.sight-line').forEach(el => el.remove());
point.dispatchEvent(new MouseEvent('mouseover'));
}
} }
}); });
ptGrp.appendChild(point); ptGrp.appendChild(point);
// text = document.createElementNS(svgns, 'text'),
// text.setAttributeNS(null, 'x', cx);
// text.setAttributeNS(null, 'y', cy);
// text.textContent = `${point.dataset.x},${point.dataset.y}`;
// ptGrp.appendChild(text);
})); }));
document.querySelectorAll('.soldier-record').forEach(el => document.querySelectorAll('.soldier-record').forEach(el =>
@ -730,10 +741,12 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
let firingArcPlacementListener = e => { let firingArcPlacementListener = e => {
document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active')); document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
ptGrp.style.pointerEvents = '';
svg.removeEventListener('click', firingArcPlacementListener); svg.removeEventListener('click', firingArcPlacementListener);
svg.removeEventListener('mousemove', positionFiringArc); svg.removeEventListener('mousemove', positionFiringArc);
}; };
ptGrp.style.pointerEvents = 'none';
svg.addEventListener('mousemove', positionFiringArc); svg.addEventListener('mousemove', positionFiringArc);
svg.addEventListener('click', firingArcPlacementListener); svg.addEventListener('click', firingArcPlacementListener);
} }
@ -814,33 +827,6 @@ svg.addEventListener('pointerdown', e => {
svg.addEventListener('pointerup', pointerUp); svg.addEventListener('pointerup', pointerUp);
}); });
// svg.addEventListener('pointermove', e => {
// if (e.target.classList.contains('counter')) {
// let p = svg.querySelector(`use[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`);
// p.classList.add('hover');
// p.dispatchEvent(new MouseEvent('mouseover'));
// let removeHover = e => {
// p.classList.remove('hover');
// e.target.removeEventListener('pointerout', removeHover);
// };
// e.target.addEventListener('pointerout', removeHover);
// }
// });
ptGrp.addEventListener('mouseout', e => {
let sl = svg.querySelector('.sight-line');
if (sl && sl.classList.contains('active')) {
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());
}
});
recordSheetVisibility.addEventListener('input', e => { recordSheetVisibility.addEventListener('input', e => {
localStorage.setItem('recordsVisibility', recordSheetVisibility.checked); localStorage.setItem('recordsVisibility', recordSheetVisibility.checked);
}); });

7
style.css
View File

@ -154,7 +154,8 @@ use[href="#point"].active {
} }
polyline.move-trace { polyline.move-trace {
stroke: lightcoral; stroke: gray;
stroke-dasharray: 2;
fill: none; fill: none;
} }
@ -227,6 +228,10 @@ g.troop-counter text {
stroke: none; stroke: none;
} }
g#counters {
pointer-events: none;
}
g#counters use[data-troop-allegiance="davion"] { g#counters use[data-troop-allegiance="davion"] {
fill: red; fill: red;
} }