WIP

src/index.js

@@ -144,7 +144,45 @@ const PanZoom = new function () {
 
       pan(svg, e);
     }, { passive: false });
+  };
+};
+
+const Grid = new function () {
+  this.setUp = function (cells) {
+    cells.forEach(cell => cell.addEventListener('click', e => {
+      let { dataset: { x }, parentElement: { dataset: { y }}} = cell;
+
+      console.log(`Cell at index { x: ${x}, y: ${y} } clicked.`);
+    }));
+  };
+};
+
+const Counter = new function () {
+  this.setUp = function (counters) {
+    counters.forEach(counter => counter.addEventListener('click', e => {
+      e.stopPropagation();
+
+      const { allegiance: allegiance, number: n } = counter.dataset,
+        al = allegiance.charAt(0).toUpperCase() + allegiance.slice(1);
+
+      console.log(`${al} troop #${n} clicked.`);
+    }));
+  };
+};
+
+const Board = new function () {
+  function getCells (svg) {
+    return svg.querySelectorAll('g[data-x]');
   }
+
+  function getCounters (svg) {
+    return svg.querySelectorAll('use[href*="#t-"]');
+  }
+
+  this.setUp = function (svg) {
+    Grid.setUp(getCells(svg));
+    Counter.setUp(getCounters(svg));
+  };
 };
 
 window.addEventListener('load', () => {
@@ -159,16 +197,7 @@ window.addEventListener('load', () => {
     recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
 
   PanZoom.start(svg);
-
-  let cells = svg.querySelectorAll('g[data-x]');
-
-  cells.forEach(cell => {
-    cell.addEventListener('click', e => {
-      let { dataset: { x }, parentElement: { dataset: { y }}} = cell;
-
-      console.log(`Cell at index { x: ${x}, y: ${y} } clicked.`);
-    }
-  )});
+  Board.setUp(svg);
 
   const q = s => document.querySelector(s),
     qA = s => document.querySelectorAll(s);