2 files changed, 29 insertions, 29 deletions
diff --git a/index.js b/index.js
index a36291b..80fdd4f 100644
--- a/index.js
+++ b/index.js
@@ -459,15 +459,11 @@ const Counter = new function() {
   this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
     this.unSelect();
 
-    let counterAndClones = container.querySelectorAll(selector(troopNumber, troopAllegiance));
+    let counter = container.querySelector(`${selector(troopNumber, troopAllegiance)}:not(.clone)`);
 
-    counterAndClones.forEach(el => {
-      el.style.pointerEvents = 'auto';
-
-      if (!el.classList.contains('clone')) {
-        el.classList.add(selectedClass);
-      }
-    });
+    if (counter) {
+      counter.classList.add(selectedClass);
+    }
   };
 
   this.unSelect = function() {
@@ -633,9 +629,8 @@ const RecordSheet = new function() {
     let { troopNumber, troopAllegiance } = el.dataset,
         proneStatus = Counter.hasProne(troopNumber, troopAllegiance);
 
-    this.unSelect();
-
-    el.classList.add('selected');
+    RecordSheet.unSelect();
+    document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');
     document.getElementById('toggle-prone-counter').checked = proneStatus;
     existingArcs = document.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`);
     existingArcs.forEach(el => el.removeAttribute('clip-path'));
@@ -667,15 +662,19 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
 
   group.appendChild(point);
 
-  group.addEventListener('pointerover', e => {
-    // console.log('group pointer over')
-    group.classList.add('hover');
-  });
-
   group.addEventListener('pointerout', e => {
     group.classList.remove('hover');
   });
 
+  group.addEventListener('click', e => {
+    let cl = e.target.classList;
+
+    if (cl.contains('counter') && !cl.contains('clone')) {
+      RecordSheet.select(e.target);
+      Counter.select(e.target);
+    }
+  });
+
   point.addEventListener('click', e => {
     let selectedSoldier = document.querySelector('.soldier-record.selected');
     let existingOccupant =
@@ -694,7 +693,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
     }
   });
 
-  point.addEventListener('contextmenu', e => {
+  group.addEventListener('contextmenu', e => {
     e.preventDefault();
     let sl = svg.querySelector('.sight-line');
 
@@ -708,8 +707,9 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
     }
   });
 
-  point.addEventListener('pointerover', e => {
-    // console.log('pointerover', this);
+  group.addEventListener('pointerover', e => {
+    group.classList.add('hover');
+
     let selected = RecordSheet.getSelected();
 
     if (selected) {
@@ -796,16 +796,16 @@ document.querySelectorAll('.soldier-record').forEach(el =>
   })
 );
 
-document.querySelector('#grid').addEventListener('click', e => {
-  let point = ptGrp.querySelector(`[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`),
-      sl = svg.querySelector('.sight-line');
+// document.querySelector('#grid').addEventListener('click', e => {
+//   let point = ptGrp.querySelector(`[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`),
+//       sl = svg.querySelector('.sight-line');
 
-  if (sl) {
-    sl.classList.add('active');
-    point.dispatchEvent(new MouseEvent('mouseout'));
-    point.dispatchEvent(new MouseEvent('pointerover'));
-  }
-});
+//   if (sl) {
+//     sl.classList.add('active');
+//     point.dispatchEvent(new MouseEvent('mouseout'));
+//     point.dispatchEvent(new MouseEvent('pointerover'));
+//   }
+// });
 
 document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
   let selected = RecordSheet.getSelected();
diff --git a/style.css b/style.css
index 438ad62..4a06a9c 100644
--- a/style.css
+++ b/style.css
@@ -238,12 +238,12 @@ g#points g.hover use[href="#point"] {
 }
 
 g#points g.hover use.counter {
-  stroke-width: 2px;
   r: 7px;
 }
 
 g#points g.hover use.counter:not(.clone) {
   stroke: orange;
+  stroke-width: 2px;
 }
 
 g#points use.counter[data-troop-allegiance="davion"] {