From b03ab287e029d66ac3712abd10ba057d238c6a1b Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 1 Apr 2024 14:06:25 -0700
Subject: Overlaying firing arcs don't just keep getting darker and darker
---
index.html | 5 ++++-
index.js | 27 +++++++++++++++++----------
style.css | 23 ++++++++++++++++++-----
3 files changed, 39 insertions(+), 16 deletions(-)
diff --git a/index.html b/index.html
index 20100ea..eb083b4 100644
--- a/index.html
+++ b/index.html
@@ -172,7 +172,10 @@
-
+
+
+
+
diff --git a/index.js b/index.js
index 6332ee5..f33d1e2 100644
--- a/index.js
+++ b/index.js
@@ -216,7 +216,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
if (targetIsSelectedSoldier) {
document.querySelectorAll(`.counter${selector}`).forEach(el => el.remove());
- document.querySelectorAll(`.firing-arc${selector}`).forEach(el => el.remove());
+ document.querySelectorAll(`#firing-arcs ${selector}`).forEach(el => el.remove());
}
}
});
@@ -441,12 +441,13 @@ function linedraw(x1, y1, x2, y2) {
}
function positionFiringArc(e) {
- activeFiringArc = document.querySelector('polygon.firing-arc.active');
+ let activeFiringArc = document.querySelector('polygon.firing-arc.active');
// TODO: handle exactly horizontal and vertical lines
if (activeFiringArc) {
- let board = document.getElementById('image-maps'),
+ let activeFiringArcOutline = document.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`);
+ board = document.getElementById('image-maps'),
{ width, height } = board.getBBox(),
pt = new DOMPoint(e.clientX, e.clientY),
{ x: pointerX, y: pointerY } = pt.matrixTransform(board.getScreenCTM().inverse()),
@@ -548,6 +549,7 @@ function positionFiringArc(e) {
points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
}
+ activeFiringArcOutline.setAttributeNS(null, 'points', points);
activeFiringArc.setAttributeNS(null, 'points', points);
}
}
@@ -582,7 +584,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
let {troopNumber, troopAllegiance} = selectedSoldier.dataset;
let existingArcs = document.querySelectorAll(
- `.firing-arc[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+ `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
);
existingArcs.forEach(el => el.remove());
@@ -592,7 +594,8 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
);
if (counter) {
- let arcLayer = document.getElementById('firing-arcs');
+ let arcLayer = document.getElementById('shapes');
+ let outlineLayer = document.getElementById('lines');
let grid = document.getElementById('grid');
const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g);
@@ -602,6 +605,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
let pivotPoint = [tPt.x, tPt.y];
let firingArc = document.createElementNS(svgns, 'polygon');
+ let firingArcOutline = document.createElementNS(svgns, 'polygon');
firingArc.classList.add('firing-arc', 'active');
firingArc.dataset.troopNumber = troopNumber;
@@ -609,18 +613,21 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
firingArc.dataset.size = e.target.dataset.size;
firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+ firingArcOutline.dataset.troopNumber = troopNumber;
+ firingArcOutline.dataset.troopAllegiance = troopAllegiance;
+ firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
arcLayer.appendChild(firingArc);
+ outlineLayer.appendChild(firingArcOutline);
let firingArcPlacementListener = e => {
document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
- document.querySelector('#point').style.display = '';
- firingArc.removeEventListener('click', firingArcPlacementListener);
+ svg.removeEventListener('click', firingArcPlacementListener);
svg.removeEventListener('mousemove', positionFiringArc);
};
svg.addEventListener('mousemove', positionFiringArc);
- firingArc.addEventListener('click', firingArcPlacementListener);
- document.querySelector('#point').style.display = 'none';
+ svg.addEventListener('click', firingArcPlacementListener);
}
}
}));
@@ -745,7 +752,7 @@ endTurnButtons.forEach(el =>
el.addEventListener('click', ({target: {dataset: {allegiance}}}) => {
let al = allegiance == al1 ? al2 : al1;
- qA(`.firing-arc[data-troop-allegiance="${al}"]`).forEach(el => el.remove());
+ qA(`#firing-arcs [data-troop-allegiance="${al}"]`).forEach(el => el.remove());
qA(`.soldier-record[data-troop-allegiance="${al}"]`).forEach(el =>
el.classList.remove('movement-ended')
diff --git a/style.css b/style.css
index 9e481fc..aba6b7e 100644
--- a/style.css
+++ b/style.css
@@ -224,12 +224,25 @@ rect#map {
stroke-width: 4px; */
}
-polygon.firing-arc {
+polygon.firing-arc[data-troop-allegiance="davion"] {
+ fill: red;
+}
+
+polygon.firing-arc[data-troop-allegiance="liao"] {
+ fill: green;
+}
+
+#shapes {
opacity: 0.1;
- fill: black;
- /* fill: transparent;
- stroke-width: 2px;
- stroke: black; */
+}
+
+#shapes polygon {
+ stroke: none;
+}
+
+#lines polygon {
+ fill: none;
+ stroke: black;
}
button.set-firing-arc img {
--
cgit v1.2.3