1 files changed, 91 insertions, 0 deletions
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..4cab6bc
--- /dev/null
+++ b/index.js
@@ -0,0 +1,91 @@
+var rect = document.querySelector('rect#map');
+var toFixed = n => Number.parseFloat(n).toFixed(2);
+
+rect.addEventListener('mousemove', e => {
+  var rect = e.target.getBoundingClientRect();
+  var x = e.clientX - rect.left; // x position within the element
+  var y = e.clientY - rect.top;  // y position within the element
+
+  console.log(
+    'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"',
+    'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"'
+  );
+});
+
+document.querySelectorAll('.soldier-record').forEach(el =>
+  el.addEventListener('click', e => {
+    // console.log(e.target.dataset.troopNumber);
+
+    if (e.target.classList.contains('selected')) {
+      e.target.classList.remove('selected');
+    } else {
+      document.querySelectorAll('.soldier-record.selected').forEach(el =>
+        el.classList.remove('selected')
+      );
+      e.target.classList.add('selected');
+    }
+  })
+);
+
+var svgns = "http://www.w3.org/2000/svg",
+    svg = document.querySelector('svg');
+
+var columnCount = 33,
+    rowCount = 25,
+    pointDistanceInInches = 1.005;
+
+var isEven = n => n % 2 === 0;
+
+var columns = [...Array(columnCount).keys()],
+    rows = [...Array(rowCount).keys()],
+    columnCoords = columns.map(x => x * pointDistanceInInches),
+    rowCoords = rows.map(y => y * pointDistanceInInches),
+    pointCoords = rowCoords.map(y => columnCoords.map(x => [x, y]));
+
+var xOffset = 0.25,
+    yOffset = 0.45;
+    calcY = Math.sqrt(3) * pointDistanceInInches / 2,
+    alternatingOffset = pointDistanceInInches / 2;
+
+pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
+  var cx = x + xOffset + (isEven(index) ? alternatingOffset : 0),
+      cy = calcY * y + yOffset,
+      point = document.createElementNS(svgns, 'use');
+
+  point.setAttributeNS(null, 'href', `#point`);
+  point.setAttributeNS(null, 'x', `${cx}in`);
+  point.setAttributeNS(null, 'y', `${cy}in`);
+
+  point.addEventListener('click', e => {
+    let selectedSoldier = document.querySelector('.soldier-record.selected');
+
+    if (selectedSoldier) {
+      let counter = document.createElementNS(svgns, 'circle');
+      let text = document.createElementNS(svgns, 'text');
+
+      counter.setAttributeNS(null, 'cx', `${cx}in`);
+      counter.setAttributeNS(null, 'cy', `${cy}in`);
+      counter.setAttributeNS(null, 'r', '0.25in');
+      counter.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
+      counter.dataset.troopAllegiance = selectedSoldier.dataset.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.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
+      text.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
+      text.textContent = `${selectedSoldier.dataset.troopNumber}`;
+      text.classList.add('counter');
+
+      document.querySelectorAll(
+        `.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
+      ).forEach(el => el.remove());
+
+      svg.appendChild(counter);
+      svg.appendChild(text);
+    }
+  });
+
+  svg.appendChild(point);
+}));
+\ No newline at end of file