3 files changed, 39 insertions, 44 deletions
diff --git a/index.html b/index.html
index 5fb6303..309e976 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/index.js b/index.js
index 72804fa..4845aea 100644
--- a/index.js
+++ b/index.js
@@ -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);
+
+    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 => 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';
     }
   }
 }));
diff --git a/style.css b/style.css
index 67c99ba..68e5294 100644
--- a/style.css
+++ b/style.css
@@ -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;
 }