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
diff --git a/style.css b/style.css
index 14e831b..80bd232 100644
--- a/style.css
+++ b/style.css
@@ -8,6 +8,16 @@ body {
circle#point {
fill: transparent;
+ stroke: black;
+ stroke-width: 2px;
+}
+
+use[href="#point"] {
+ opacity: 0;
+}
+
+use[href="#point"].active {
+ opacity: 1;
}
circle.counter[data-troop-allegiance="liao"] {
@@ -25,6 +35,8 @@ text.counter {
fill: white;
stroke-width: 2px;
font-family: sans-serif;
+ cursor: default;
+ pointer-events: none;
}
rect#map {
@@ -46,6 +58,61 @@ line.firing-arc {
opacity: 0.1;
}
+line.ruler {
+ stroke-width: 0.25in;
+}
+
+.soldier-record span {
+ font-size: smaller;
+ font-family: monospace;
+ margin-right: 1em;
+}
+
+.soldier-record ul {
+ margin: 0;
+ padding: 0;
+}
+
+.soldier-record ul li {
+ display: inline;
+ margin-left: 1em;
+}
+
+.soldier-record p {
+ margin: 0;
+}
+
+.soldier-record p.damage span {
+ display: inline-block;
+}
+
+.soldier-record p.damage span input {
+ display: block;
+}
+
+input {
+ border: none;
+ outline: 2px solid deeppink;
+}
+
+input:first-of-type {
+ outline: none;
+}
+
+input:checked {
+ border: none;
+ outline: 2px solid deeppink;
+}
+
+input:has(+ input:checked) {
+ border: none;
+ outline: 2px solid deeppink;
+}
+
+input[type="radio"]:checked + input {
+ outline: none;
+}
+
image#img1 {
transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */
@@ -84,7 +151,7 @@ image#img2 {
padding: 0 2px;
}
-#record-sheet > div div {
+#record-sheet > div > div {
border: 1px solid black;
margin: 2px 0;
padding: 2px;
--
cgit v1.2.3