| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-31 11:48:43 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-31 11:48:43 -0700 |
| commit | 8332ce9bea0c6977ebd2a13396fb6cf4013167b4 (patch) | |
| tree | e61ac6f98365be7df47960a359fcd1bc137f7d16 /index.js | |
| parent | 798658a826dace5d18107a00b7c01f0ee0e9ab64 (diff) | |
WIP: sight line and hex count
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 98 |
1 files changed, 80 insertions, 18 deletions
@@ -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'); } }) |