From d438469e3352d18cf321b8c5360ba6db9f3c393d Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Mon, 16 Jun 2025 22:41:28 -0700 Subject: [PATCH] WIP: sight line and hex count --- index.html | 6 ++-- index.js | 98 ++++++++++++++++++++++++++++++++++++++++++++---------- style.css | 14 ++++---- 3 files changed, 90 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 536940d..9a8e33d 100644 --- a/index.html +++ b/index.html @@ -101,7 +101,7 @@

-
+
hex
@@ -150,8 +150,8 @@ - + + 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'); } }) diff --git a/style.css b/style.css index 8de53aa..7aa10e2 100644 --- a/style.css +++ b/style.css @@ -15,8 +15,8 @@ svg { svg text { user-select: none; font-size: 4px; - fill: white; - stroke: black; + fill: black; + /* stroke: black; */ stroke-width: 0.2px; font-weight: bold; transform: translateY(6px); @@ -99,13 +99,13 @@ div#content { svg > defs > #point { fill: teal; - fill-opacity: 0.5; + fill-opacity: 0.2; stroke: black; stroke-width: 0.5px; } use[href="#point"] { - opacity: 0.2; + opacity: 0; } use[href="#point"].active { @@ -133,7 +133,7 @@ image.map-scans { /* opacity: 0.33; */ } -#panel { +#debug { display: none; position: absolute; right: 0; @@ -142,7 +142,7 @@ image.map-scans { padding: 2px; } -#panel fieldset label { +#debug fieldset label { display: block; text-align: right; } @@ -198,7 +198,7 @@ line.firing-arc { } .sight-line { - stroke: black; + stroke: orangered; stroke-width: 3px; }