WIP: firing arcs

index.html

@@ -23,11 +23,6 @@
         <circle id="point" cx="0" cy="0" r="0.5in" />
         <polygon id="hex" fill="url('#gradient')" points="0,121.32 184.152,15.544 368.312,121.32 368.312,332.864 184.152,438.64 0,332.864 "/>
         <text id="asterisk" x="-0.06in" y="0.22in">*</text>
-
-        <g id="counter">
-          <circle cx="0" cy="0" r="0.25in" />
-          <text x="0" y="0.25in" text-anchor="middle">1</text>
-        </g>
       </defs>
       
       <line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
@@ -37,13 +32,15 @@
       <rect id="map" x="0" y="0" width="34in" height="23in" />
     </svg>
 
+    <button id="set-firing-arc">Set Firing Arc</button>
+
     <div id="record-sheet">
       <div>
-        <img class="logo" src="logo-davion.png" />
+        <!-- <img class="logo" src="logo-davion.png" /> -->
         <p>
           Davion<br>
-          1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
+          <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
-          17th Kestral Mechanized Infantry
+          17th Kestral Mechanized Infantry -->
         </p>
         <div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
           Troop Number: 1<br>
@@ -62,11 +59,11 @@
         </div>
       </div>
       <div>
-        <img class="logo" src="logo-liao.png" />
+        <!-- <img class="logo" src="logo-liao.png" /> -->
         <p>
           Liao<br>
-          2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
+          <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
-          Aldebaran Home Guard
+          Aldebaran Home Guard -->
         </p>
         <div class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
           Troop Number: 1<br>

index.js

@@ -1,6 +1,9 @@
 var rect = document.querySelector('rect#map');
 var toFixed = n => Number.parseFloat(n).toFixed(2);
 
+var svgns = "http://www.w3.org/2000/svg",
+    svg = document.querySelector('svg');
+
 rect.addEventListener('mousemove', e => {
   var rect = e.target.getBoundingClientRect();
   var x = e.clientX - rect.left; // x position within the element
@@ -10,12 +13,17 @@ rect.addEventListener('mousemove', e => {
     'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"',
     'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"'
   );
+
+  let aim = document.querySelector('.firing-arc.active');
+
+  if (aim) {
+    aim.setAttributeNS(null, 'x2', `${x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits}in`);
+    aim.setAttributeNS(null, 'y2', `${y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits}in`);
+  }
 });
 
 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 {
@@ -27,8 +35,42 @@ document.querySelectorAll('.soldier-record').forEach(el =>
   })
 );
 
-var svgns = "http://www.w3.org/2000/svg",
+document.querySelector('#set-firing-arc').addEventListener('click', e => {
-    svg = document.querySelector('svg');
+  let selectedSoldier = document.querySelector('.soldier-record.selected');
+
+  if (selectedSoldier) {
+    let {troopNumber, troopAllegiance} = selectedSoldier.dataset;
+
+    let firingArc = document.querySelector(
+      `.firing-arc[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+    );
+
+    if (firingArc) { firingArc.remove() }
+
+    let counter = document.querySelector(
+      `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+    );
+
+    let aim = document.createElementNS(svgns, 'line');
+
+    aim.classList.add('firing-arc', 'active');
+    aim.dataset.troopNumber = troopNumber;
+    aim.dataset.troopAllegiance = troopAllegiance;
+    aim.setAttributeNS(null, 'x1', counter.cx.baseVal.valueAsString);
+    aim.setAttributeNS(null, 'y1', counter.cy.baseVal.valueAsString);
+    aim.setAttributeNS(null, 'x2', counter.cx.baseVal.valueAsString);
+    aim.setAttributeNS(null, 'y2', counter.cy.baseVal.valueAsString);
+
+    svg.appendChild(aim);
+
+    aim.addEventListener('click', e => {
+      e.target.classList.remove('active');
+      document.querySelector('circle#point').style.display = '';
+    });
+
+    document.querySelector('circle#point').style.display = 'none';
+  }
+});
 
 var columnCount = 33,
     rowCount = 25,
@@ -38,23 +80,23 @@ var isEven = n => n % 2 === 0;
 
 var columns = [...Array(columnCount).keys()],
     rows = [...Array(rowCount).keys()],
-    columnCoords = columns.map(x => x * pointDistanceInInches),
+    points = rows.map(y => columns.map(x => [x, y]));
-    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]) => {
+points.forEach((row, index) => row.forEach(([x, y]) => {
-  var cx = x + xOffset + (isEven(index) ? alternatingOffset : 0),
+  var cx = x * pointDistanceInInches + xOffset + (isEven(index) ? alternatingOffset : 0),
-      cy = calcY * y + yOffset,
+      cy = y * pointDistanceInInches * calcY + yOffset,
       point = document.createElementNS(svgns, 'use');
 
   point.setAttributeNS(null, 'href', `#point`);
   point.setAttributeNS(null, 'x', `${cx}in`);
   point.setAttributeNS(null, 'y', `${cy}in`);
+  point.dataset.x = x;
+  point.dataset.y = y;
 
   point.addEventListener('click', e => {
     let selectedSoldier = document.querySelector('.soldier-record.selected');
@@ -89,3 +131,28 @@ pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
 
   svg.appendChild(point);
 }));
+
+let getPointCoords = (x, y) => {
+  let point = document.querySelector(`[data-x="${x}"][data-y="${y}"]`);
+
+  return [point.x.baseVal.value, point.y.baseVal.value]
+};
+
+
+let smallArc = document.createElementNS(svgns, 'polygon');
+let smallArcPoints = `${getPointCoords(1, 24)} ${getPointCoords(1, 21)} ${getPointCoords(2, 21)}`;
+smallArc.setAttributeNS(null, 'points', smallArcPoints);
+
+svg.appendChild(smallArc);
+
+let medArc = document.createElementNS(svgns, 'polygon');
+let medArcPoints = `${getPointCoords(4, 24)} ${getPointCoords(3, 21)} ${getPointCoords(6, 21)}`;
+medArc.setAttributeNS(null, 'points', medArcPoints);
+
+svg.appendChild(medArc);
+
+let lrgArc = document.createElementNS(svgns, 'polygon');
+let lrgArcPoints = `${getPointCoords(19, 24)} ${getPointCoords(9, 21)} ${getPointCoords(30, 21)}`;
+lrgArc.setAttributeNS(null, 'points', lrgArcPoints);
+
+svg.appendChild(lrgArc);

style.css

@@ -8,7 +8,7 @@ body {
 
 circle#point {
   fill: black;
-  opacity: 0;
+  opacity: 0.1;
 }
 
 circle.counter[data-troop-allegiance="liao"] {
@@ -29,10 +29,18 @@ text.counter {
 }
 
 rect#map {
-  fill: none;
+  fill: black;
+  opacity: 0;
+}
+
+polygon {
   opacity: 0.33;
 }
 
+line.firing-arc {
+  stroke: black;
+}
+
 image#img1 {
   transform: scale(3.41) rotate(-0.15deg);
   /* opacity: 0.33; */
@@ -57,6 +65,10 @@ image#img2 {
   transform: scale(0.26) translate(-2in, -2in);
 }
 
+/* use[href="#point"] {
+  pointer-events: none;
+} */
+
 #asterisk {
   font-size: 30;
 }