From 8332ce9bea0c6977ebd2a13396fb6cf4013167b4 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sun, 31 Mar 2024 11:48:43 -0700
Subject: WIP: sight line and hex count
---
index.js | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++------------
1 file changed, 80 insertions(+), 18 deletions(-)
(limited to 'index.js')
diff --git a/index.js b/index.js
index 6393721..a0f63a3 100644
--- a/index.js
+++ b/index.js
@@ -70,10 +70,10 @@ const svgns = "http://www.w3.org/2000/svg",
const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } =
svg.viewBox.baseVal;
-// const COLUMN_COUNT = 33,
-// ROW_COUNT = 51,
-const COLUMN_COUNT = 20,
- ROW_COUNT = 20,
+const COLUMN_COUNT = 33,
+ ROW_COUNT = 51,
+// const COLUMN_COUNT = 20,
+// ROW_COUNT = 20,
HORZ_POINT_DISTANCE = 1.005,
VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2,
ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2,
@@ -141,6 +141,15 @@ if (recVis == 'false') {
});
});
+function ptGrpToSvgPt(x, y) {
+ let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g),
+ mtx = new DOMMatrix(transProp || ''),
+ pt = new DOMPoint(x, y),
+ svgP = pt.matrixTransform(mtx);
+
+ return svgP;
+}
+
POINTS.forEach((row, index) => row.forEach(([x, y]) => {
var cx = x * INRADIUS * 2 + (isEven(index) ? INRADIUS : 0),
cy = y * 3 / 2 * CIRCUMRADIUS,
@@ -174,6 +183,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
counter.setAttributeNS(null, 'r', '0.25in');
counter.dataset.troopNumber = troopNumber;
counter.dataset.troopAllegiance = troopAllegiance;
+ counter.dataset.x = point.dataset.x;
+ counter.dataset.y = point.dataset.y;
counter.classList.add('counter');
text.setAttributeNS(null, 'x', svgP.x);
@@ -235,8 +246,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
document.querySelectorAll('.sight-line').forEach(el => el.remove());
});
- svg.appendChild(counter);
- svg.appendChild(text);
+ svg.insertBefore(counter, ptGrp);
+ svg.insertBefore(text, ptGrp);
}
});
@@ -245,20 +256,58 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
if (selectedSoldier) {
e.target.classList.add('active');
+ let { troopNumber: tn, troopAllegiance: ta } = selectedSoldier.dataset;
+
+ let counter = svg.querySelector(`circle.counter[data-troop-number="${tn}"][data-troop-allegiance="${ta}"]`);
+
+ if (counter) {
+ let source = ptGrp.querySelector(`use[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`);
+ let [x1, y1] = [source.x.baseVal.value, source.y.baseVal.value];
+ let [x2, y2] = [e.target.x.baseVal.value, e.target.y.baseVal.value];
+ let { x: svgX1, y: svgY1 } = ptGrpToSvgPt(x1, y1);
+ let { x: svgX2, y: svgY2 } = ptGrpToSvgPt(x2, y2);
+
+ let sightLine = document.createElementNS(svgns, 'line');
+
+ sightLine.classList.add('sight-line');
+ sightLine.setAttributeNS(null, 'x1', svgX1);
+ sightLine.setAttributeNS(null, 'y1', svgY1);
+ sightLine.setAttributeNS(null, 'x2', svgX2);
+ sightLine.setAttributeNS(null, 'y2', svgY2);
+
+ svg.appendChild(sightLine);
+
+ let coords = [
+ counter.dataset.x,
+ counter.dataset.y,
+ e.target.dataset.x,
+ e.target.dataset.y
+ ].map(n => parseInt(n));
+
+ console.log(offset_distance(...coords))
+
+ let lineCoords = linedraw(...coords);
+ lineCoords.shift();
+ let s = lineCoords.map(([x, y]) => `use[data-x="${x}"][data-y="${y}"]`).join(', ');
+ ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));
+ }
}
});
- point.addEventListener('mouseout', e => e.target.removeAttribute('class'));
+ point.addEventListener('mouseout', e => {
+ 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 = document.createElementNS(svgns, 'text'),
- text.setAttributeNS(null, 'x', cx);
- text.setAttributeNS(null, 'y', cy);
- text.textContent = `${point.dataset.x},${point.dataset.y}`;
+ // text.setAttributeNS(null, 'x', cx);
+ // text.setAttributeNS(null, 'y', cy);
+ // text.textContent = `${point.dataset.x},${point.dataset.y}`;
- ptGrp.appendChild(text);
+ // ptGrp.appendChild(text);
}));
(function debug() {
@@ -281,8 +330,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
line.setAttributeNS(null, 'y2', tEnd.y);
line.classList.add('debug');
- line.setAttributeNS(null, 'stroke', 'green');
- line.setAttributeNS(null, 'stroke-width', 10);
+ line.setAttributeNS(null, 'stroke', 'gold');
+ line.setAttributeNS(null, 'stroke-width', 2);
svg.appendChild(line);
return line;
@@ -294,8 +343,22 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
// let l1 = drawLine(1, 1, 1, 2);
- drawLine(0, 0, 5, 4);
- // drawLine(1, 1, 1, 3);
+ // drawLine(0, 0, 5, 4);
+ // let coords = [0, 0, 14, 9];
+
+ // drawLine(...coords);
+ // linedraw(0, 0, 14, 9).forEach(([x, y]) => {
+ // document.querySelector(`[data-x="${x}"][data-y="${y}"]`).style.opacity = 1;
+ // });
+
+ // linedraw(0, 4, 14, 13).forEach(([x, y]) => {
+ // linedraw(14, 13, 0, 4).forEach(([x, y]) => {
+ // document.querySelector(`[data-x="${x}"][data-y="${y}"]`).style.opacity = 1;
+ // });
+
+ // linedraw(14, 9, 0, 0).forEach(([x, y]) => {
+ // document.querySelector(`[data-x="${x}"][data-y="${y}"]`).style.opacity = 1;
+ // });
// let pt = l1.getPointAtLength(circR);
@@ -382,8 +445,6 @@ function linedraw(x1, y1, x2, y2) {
round = axial_round(lerp.q, lerp.r),
{ x, y } = axial_to_evenr(round.q, round.r)
- console.log(x, y);
-
results.push([x, y]);
}
@@ -510,6 +571,7 @@ document.querySelectorAll('.soldier-record').forEach(el =>
document.querySelectorAll('.soldier-record.selected').forEach(el =>
el.classList.remove('selected')
);
+
el.classList.add('selected');
}
})
--
cgit v1.2.3