ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use matrix transform to calculate counter coordinates

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-29 16:30:43 -07:00
parent 694f2dbb24
commit 45cfef270f
3 changed files with 39 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -153,7 +153,7 @@
<image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" x="2" y="2" />
<image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="4" y="1564" />
<g id="firing-arcs"></g>
<rect id="map" x="0" y="0" width="33in" height="45in" />
<rect id="map" x="-1" y="-1" width="2287" height="3087" />
<g id="points"></g>
<!-- <rect id="debug-view-box" x="-100" y="-100" width="3400" height="4500" /> -->
</svg>

73
index.js
View File

@ -2,10 +2,6 @@ function isEven(n) {
return n % 2 === 0;
}
function toFixed(n) {
return Number.parseFloat(n).toFixed(2);
}
function radToDeg(radians) {
return radians * 180 / Math.PI;
}
@ -63,10 +59,12 @@ let getPointCoords = (x, y) => {
return [point.x.baseVal.value, point.y.baseVal.value]
};
let svgns = "http://www.w3.org/2000/svg",
svg = document.querySelector('svg'),
map = document.querySelector('rect#map'),
hex = document.getElementById('point');
const svgns = "http://www.w3.org/2000/svg",
svg = document.querySelector('svg'),
map = document.querySelector('rect#map'),
hex = document.getElementById('point'),
pointsGroup = document.getElementById('points'),
settingsPanel = document.getElementById('panel');
const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } =
svg.viewBox.baseVal;
@ -78,7 +76,6 @@ const COLUMN_COUNT = 33,
ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2,
CIRCUMRADIUS = Math.max(...[...new Set(Object.values(hex.points).flatMap(({x, y}) => [x, y]))]),
INRADIUS = CIRCUMRADIUS * Math.sqrt(3) / 2,
[X_OFFSET, Y_OFFSET] = [0.25, 0.45],
[COLUMNS, ROWS] = [COLUMN_COUNT, ROW_COUNT].map(n => [...Array(n).keys()]),
POINTS = ROWS.map(y => COLUMNS.map(x => [x, y]));
@ -88,28 +85,28 @@ const FIRING_ARC_SIZE = {
'large': Math.atan((21 * HORZ_POINT_DISTANCE) / (6 * VERT_POINT_DISTANCE))
}
const settingsPanel = document.getElementById('panel');
Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
const target = document.getElementById(fieldset.name);
const transform = window.getComputedStyle(target).transform.match(/-?\d+\.?\d*/g);
const inputs = fieldset.querySelectorAll('input');
if (transform) {
const [scaleX, skewX, skewY, scaleY, translateX, translateY] =
transform.map(n => parseFloat(n));
const [a, b, c, d, e, f] = transform.map(n => parseFloat(n));
const cosScale = Math.sqrt(scaleX**2 + skewY**2);
const sinScale = Math.sqrt(scaleY**2 + skewX**2);
// a c e
// b d f
let values = {
scale: Math.round((sinScale + cosScale) / 2 * 10) / 10,
translateX: translateX,
translateY: translateY,
rotate: Math.round(radToDeg((Math.acos(scaleX / cosScale) + Math.asin(skewX / sinScale)) / 2) * 10) / 10
}
const scaleX = Math.sqrt(a**2 + c**2);
const scaleY = Math.sqrt(b**2 + d**2);
inputs.forEach(input => input.value = values[input.name]);
let values = {
scale: Math.round(scaleX * 10) / 10,
translateX: e,
translateY: f,
rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10
}
inputs.forEach(input => input.value = values[input.name]);
}
inputs.forEach(input => {
@ -129,21 +126,14 @@ Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
});
});
const pointsGroup = document.getElementById('points');
POINTS.forEach((row, index) => row.forEach(([x, y]) => {
// var cx = x * HORZ_POINT_DISTANCE + X_OFFSET + (isEven(index) ? ALTERNATING_OFFSET : 0),
// cy = y * HORZ_POINT_DISTANCE * VERT_POINT_DISTANCE + Y_OFFSET,
// var cx = x * Math.sqrt(3) + X_OFFSET + (isEven(index) ? INRADIUS : 0),
var cx = x * INRADIUS * 2 + (isEven(index) ? INRADIUS : 0),
cy = y * 3 / 2 * CIRCUMRADIUS,
point = document.createElementNS(svgns, 'use');
point.setAttributeNS(null, 'href', `#point`);
point.setAttributeNS(null, 'x', `${toFixed(cx)}`);
point.setAttributeNS(null, 'y', `${toFixed(cy)}`);
// point.setAttributeNS(null, 'x', `${cx}`);
// point.setAttributeNS(null, 'y', `${cy}`);
point.setAttributeNS(null, 'x', `${parseFloat(cx.toFixed(1))}`);
point.setAttributeNS(null, 'y', `${parseFloat(cy.toFixed(1))}`);
point.dataset.x = x;
point.dataset.y = y;
@ -156,16 +146,21 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
{troopNumber, troopAllegiance} = selectedSoldier.dataset,
selector = troopSelector(troopNumber, troopAllegiance);
counter.setAttributeNS(null, 'cx', `${cx}in`);
counter.setAttributeNS(null, 'cy', `${cy}in`);
let matrix = window.getComputedStyle(pointsGroup).transform.match(/-?\d+\.?\d*/g),
svgMatrix = new DOMMatrix(matrix || ''),
pt = new DOMPoint(point.x.baseVal.value, point.y.baseVal.value),
svgP = pt.matrixTransform(svgMatrix);
counter.setAttributeNS(null, 'cx', `${parseFloat(svgP.x.toFixed(1))}`);
counter.setAttributeNS(null, 'cy', `${parseFloat(svgP.y.toFixed(1))}`);
counter.setAttributeNS(null, 'r', '0.25in');
counter.dataset.troopNumber = troopNumber;
counter.dataset.troopAllegiance = troopAllegiance;
counter.classList.add('counter');
text.setAttributeNS(null, 'text-anchor', 'middle');
text.setAttributeNS(null, 'x', `${cx}in`);
text.setAttributeNS(null, 'y', `${cy + 0.25}in`);
text.setAttributeNS(null, 'x', `${svgP.x}`);
text.setAttributeNS(null, 'y', `${svgP.y}`);
text.dataset.troopNumber = troopNumber;
text.dataset.troopAllegiance = troopAllegiance;
text.textContent = troopNumber;
@ -247,8 +242,6 @@ map.addEventListener('mousemove', e => {
let pointerY = e.clientY - boundingRect.top;
let [maxXpx, maxYpx] = [e.target.width, e.target.height].map(v => v.baseVal.value);
// console.log('x', `${toFixed(x / boundingRect.width * maxX)}"`, 'y', `${toFixed(y / boundingRect.height * maxY)}"`);
let activeFiringArc = document.querySelector('polygon.firing-arc.active');
// TODO: handle exactly horizontal and vertical lines
@ -265,8 +258,6 @@ map.addEventListener('mousemove', e => {
let yDiff = y2px - y1px;
let angle = calculateAngle(xDiff, yDiff);
console.log('angle:', `${toFixed(radToDeg(angle))}\u00B0`, `${angle}rad`);
let arcAngle = FIRING_ARC_SIZE[activeFiringArc.dataset.size];
let distance = Math.sqrt((x2px - x1px)**2 + (y2px - y1px)**2);
let yDelta = distance * Math.cos(angle) * Math.tan(arcAngle);
@ -391,7 +382,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.display = '';
document.querySelector('#point').style.display = '';
map.removeEventListener('click', firingArcPlacementListener);
};
@ -408,7 +399,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
arcLayer.prepend(firingArc);
document.querySelector('circle#point').style.display = 'none';
document.querySelector('#point').style.display = 'none';
}
}
}));

8
style.css
View File

@ -74,8 +74,8 @@ div#content {
svg > defs > #point {
fill: transparent;
stroke: red;
stroke-width: 1px;
stroke: black;
stroke-width: 0.5px;
}
use[href="#point"] {
@ -90,6 +90,10 @@ g#points {
transform: translate(19px, 31px) scale(4);
}
g#test {
transform: scale(2);
}
#background {
fill: #bacae3;
}