Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-04-03 09:40:20 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-04-03 09:40:20 -0700
commit616bdf15d916d95235860f0a9b2b738a776584ef (patch)
treeac0ee4e4e27c9fa985795917bc98bf6c9467e3e9
parent202f3ffa6ce9e081ee59fa5d39057f87d8b72c01 (diff)
Use right mouse button for setting sight line
Diffstat
-rw-r--r--index.js108
-rw-r--r--style.css7
2 files changed, 53 insertions, 62 deletions
diff --git a/index.js b/index.js
index 77b81f0..d78d4b2 100644
--- a/index.js
+++ b/index.js
@@ -354,7 +354,7 @@ const Counter = new function() {
},
selector = function(troopNumber, allegiance) {
- return `use${dataSelector(troopNumber, allegiance)}`;
+ return `use.counter${dataSelector(troopNumber, allegiance)}`;
},
traceSelector = function(troopNumber, allegiance) {
@@ -423,7 +423,7 @@ const Counter = new function() {
trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
if (!trace) {
- Counter.remove(troopNumber, troopAllegiance);
+ Counter.remove(this);
document.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());
}
}
@@ -440,13 +440,23 @@ const Counter = new function() {
if (queriedCounter) {
queriedCounter.classList.add(selectedClass);
+ queriedCounter.style.pointerEvents = 'auto';
}
};
this.unSelect = function() {
- container
- .querySelectorAll(`.${selectedClass}`)
- .forEach(el => el.classList.remove(selectedClass));
+ let selected = container.querySelector(`.${selectedClass}`);
+
+ if (selected) {
+ let { troopNumber, troopAllegiance } = selected.dataset;
+
+ selected.classList.remove(selectedClass);
+ selected.removeAttribute('style');
+
+ container
+ .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)
+ .forEach(el => el.removeAttribute('style'));
+ }
};
this.isSelected = function(troopNumber, allegiance) {
@@ -514,6 +524,7 @@ const Counter = new function() {
counter.dataset.troopAllegiance = troopAllegiance;
counter.dataset.x = point.dataset.x;
counter.dataset.y = point.dataset.y;
+ counter.style.pointerEvents = 'auto';
counter.addEventListener('click', click);
counter.addEventListener('dblclick', dblClick);
@@ -522,7 +533,7 @@ const Counter = new function() {
container.appendChild(counter);
};
- this.remove = function(troopNumber, troopAllegiance) {
+ this.remove = function({ dataset: { troopNumber, troopAllegiance }}) {
container
.querySelectorAll(dataSelector(troopNumber, troopAllegiance))
.forEach(el => el.remove());
@@ -567,6 +578,28 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
if (selectedSoldier && !existingOccupant) {
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, 'y2', svgY2);
- // svg.insertBefore(sightLine, ptGrp);
document.getElementById('grid').appendChild(sightLine);
let coords = [
@@ -628,39 +660,18 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
}
});
- // point.addEventListener('mouseout', e => {
- // 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');
+ point.addEventListener('mouseout', e => {
+ let sl = svg.querySelector('.sight-line.active');
if (sl) {
- sl.classList.toggle('active');
-
- if (sl.classList.contains('active')) {
- point.dispatchEvent(new MouseEvent('mouseout'));
- point.dispatchEvent(new MouseEvent('mouseover'));
- }
+ 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());
}
});
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 =>
@@ -730,10 +741,12 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
let firingArcPlacementListener = e => {
document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
+ ptGrp.style.pointerEvents = '';
svg.removeEventListener('click', firingArcPlacementListener);
svg.removeEventListener('mousemove', positionFiringArc);
};
+ ptGrp.style.pointerEvents = 'none';
svg.addEventListener('mousemove', positionFiringArc);
svg.addEventListener('click', firingArcPlacementListener);
}
@@ -814,33 +827,6 @@ svg.addEventListener('pointerdown', e => {
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 => {
localStorage.setItem('recordsVisibility', recordSheetVisibility.checked);
});
diff --git a/style.css b/style.css
index 449405d..7f1946e 100644
--- a/style.css
+++ b/style.css
@@ -154,7 +154,8 @@ use[href="#point"].active {
}
polyline.move-trace {
- stroke: lightcoral;
+ stroke: gray;
+ stroke-dasharray: 2;
fill: none;
}
@@ -227,6 +228,10 @@ g.troop-counter text {
stroke: none;
}
+g#counters {
+ pointer-events: none;
+}
+
g#counters use[data-troop-allegiance="davion"] {
fill: red;
}