From 51f2656ad9b4cfcd1661fec3ea4ef4986cdbee8a Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sat, 23 Mar 2024 13:48:10 -0700
Subject: WIP: 3-state css?
---
index.js | 107 ++++++++++++++++++++++++++++-----------------------------------
1 file changed, 48 insertions(+), 59 deletions(-)
(limited to 'index.js')
diff --git a/index.js b/index.js
index 38ddc63..fc3d4d5 100644
--- a/index.js
+++ b/index.js
@@ -10,6 +10,21 @@ function radToDeg(radians) {
return radians * 180 / Math.PI;
}
+function calculateAngle(xDiff, yDiff) {
+ yDiff = -yDiff;
+ let angle = Math.abs(Math.atan(yDiff / xDiff));
+
+ if (xDiff < 0 && yDiff > 0) {
+ angle = Math.PI - angle;
+ } else if (xDiff < 0 && yDiff < 0) {
+ angle = Math.PI + angle;
+ } else if (xDiff > 0 && yDiff < 0) {
+ angle = 2 * Math.PI - angle;
+ }
+
+ return angle;
+}
+
function edgePoint(x1, y1, x2, y2, maxX, maxY) {
let pointCoords,
xDiff = x2 - x1,
@@ -100,11 +115,31 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
`.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
).forEach(el => el.remove());
+ counter.addEventListener('click', e => {
+ document.querySelectorAll(
+ `.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
+ ).forEach(el => el.remove());
+
+ document.querySelectorAll(
+ `.firing-arc[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
+ ).forEach(el => el.remove());
+ });
+
svg.appendChild(counter);
svg.appendChild(text);
}
});
+ point.addEventListener('mouseover', e => {
+ let selectedSoldier = document.querySelector('.soldier-record.selected');
+
+ if (selectedSoldier) {
+ e.target.classList.add('active');
+ }
+ });
+
+ point.addEventListener('mouseout', e => e.target.removeAttribute('class'));
+
svg.appendChild(point);
}));
@@ -129,16 +164,8 @@ map.addEventListener('mousemove', e => {
];
let xDiff = x2px - x1px;
- let yDiff = -(y2px - y1px);
- let angle = Math.abs(Math.atan(yDiff / xDiff));
-
- if (xDiff < 0 && yDiff > 0) {
- angle = Math.PI - angle;
- } else if (xDiff < 0 && yDiff < 0) {
- angle = Math.PI + angle;
- } else if (xDiff > 0 && yDiff < 0) {
- angle = 2 * Math.PI - angle;
- }
+ let yDiff = y2px - y1px;
+ let angle = calculateAngle(xDiff, yDiff);
console.log('angle:', `${toFixed(radToDeg(angle))}\u00B0`, `${angle}rad`);
@@ -167,9 +194,6 @@ map.addEventListener('mousemove', e => {
let points;
- xDiff = x2px - x1px;
- yDiff = y2px - y1px;
-
if (oppositeEdgeConditions.some(e => e)) {
let cornerPoints;
@@ -186,7 +210,6 @@ map.addEventListener('mousemove', e => {
cornerPoints = [[0, 0], [maxXpx, 0]];
}
- // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
} else if (xDiff < 0 && yDiff > 0) {
if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
cornerPoints = [[0, maxYpx], [0, 0]];
@@ -194,7 +217,6 @@ map.addEventListener('mousemove', e => {
cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
}
- // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
} else {
if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
cornerPoints = [[0, maxYpx], [0, 0]];
@@ -202,40 +224,12 @@ map.addEventListener('mousemove', e => {
cornerPoints = [[0, 0], [maxXpx, 0]];
}
- // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
}
points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`;
} else if (orthogonalEdgeConditions.some(e => e)) {
- let cornerPoint;
let cornerPoints = [];
-
- // console.log('x1px', x1px, 'y1px', y1px, 'x2px', x2px, 'y2px', y2px);
- console.log('xDiff', xDiff, 'yDiff', yDiff);
-
- if (newX1 == 0 || newX1 == maxXpx) {
- cornerPoint = [newX1, newY2];
- } else {
- cornerPoint = [newX2, newY1];
- }
-
- if (newX1 == 0 || newX1 == maxXpx) {
- console.log(newX1, newY1, 'nearest corner point', newX1, yDiff > 0 ? maxYpx : 0);
- } else {
- console.log(newX1, newY1, 'nearest corner point', xDiff > 0 ? maxXpx : 0, newY1);
- }
-
- if (newX2 == 0 || newX2 == maxXpx) {
- console.log(newX2, newY2, 'nearest corner point', newX2, yDiff > 0 ? maxYpx : 0);
- } else {
- console.log(newX2, newY2, 'nearest corner point', xDiff > 0 ? maxXpx : 0, newY2);
- }
-
let cp1, cp2;
- console.log('x1px, y1px', x1px, y1px);
- console.log('newX1, newY1', newX1, newY1);
- console.log('newX2, newY2', newX2, newY2);
-
if (newX1 == 0 || newX1 == maxXpx) {
cp1 = [newX1, yDiff > 0 ? maxYpx : 0];
} else {
@@ -248,8 +242,6 @@ map.addEventListener('mousemove', e => {
cp2 = [xDiff > 0 ? maxXpx : 0, newY2];
}
- console.log('cp1', cp1, 'cp2', cp2);
-
if (cp1[0] == cp2[0] && cp1[1] == cp2[1]) {
cornerPoints.push(cp1);
} else {
@@ -258,13 +250,8 @@ map.addEventListener('mousemove', e => {
cornerPoints.push(cp2);
}
- console.log(`${cornerPoints.join(' ')}`);
-
- // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`;
points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`;
- console.log('points', points);
} else {
- points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`;
points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
}
@@ -274,13 +261,15 @@ map.addEventListener('mousemove', e => {
document.querySelectorAll('.soldier-record').forEach(el =>
el.addEventListener('click', e => {
- if (e.target.classList.contains('selected')) {
- e.target.classList.remove('selected');
- } else {
- document.querySelectorAll('.soldier-record.selected').forEach(el =>
- el.classList.remove('selected')
- );
- e.target.classList.add('selected');
+ if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'LABEL') {
+ if (el.classList.contains('selected')) {
+ el.classList.remove('selected');
+ } else {
+ document.querySelectorAll('.soldier-record.selected').forEach(el =>
+ el.classList.remove('selected')
+ );
+ el.classList.add('selected');
+ }
}
})
);
@@ -306,7 +295,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
let firingArcPlacementListener = e => {
document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
- document.querySelector('circle#point').style.pointerEvents = 'auto';
+ document.querySelector('circle#point').style.display = '';
map.removeEventListener('click', firingArcPlacementListener);
};
@@ -323,7 +312,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
arcLayer.prepend(firingArc);
- document.querySelector('circle#point').style.pointerEvents = 'none';
+ document.querySelector('circle#point').style.display = 'none';
}
}
}));
\ No newline at end of file
--
cgit v1.2.3