Use JS for damage indicator changes instead of CSS

src/index.js

@@ -3,18 +3,23 @@ import Game from './modules/game.js';
 
 const PanZoom = new function () {
   const vb = 'viewBox';
+  let svg;
 
-  function storeLatestViewBoxVal(svg) {
+  function storeViewBoxVal() {
+    localStorage.setItem(vb, svg.getAttribute(vb));
+  }
+
+  function observeViewBoxChanges() {
     const observer = new MutationObserver(mutations => {
       if (mutations.find(m => m.target == svg && m.attributeName == vb)) {
-        localStorage.setItem(vb, svg.getAttribute(vb));
+        storeViewBoxVal(svg);
       }
     });
 
     observer.observe(svg, { attributes: true });
   }
 
-  function restoreViewboxVal(svg) {
+  function restoreViewBoxVal() {
     const storedVbVal = localStorage.getItem(vb);
 
     if (storedVbVal) {
@@ -22,9 +27,7 @@ const PanZoom = new function () {
     }
   }
 
-  this.start = function (svg) {
-    restoreViewboxVal(svg);
-
+  function addEventListeners() {
     svg.addEventListener('wheel', e => {
       e.preventDefault();
 
@@ -36,8 +39,13 @@ const PanZoom = new function () {
 
       pan(svg, e);
     }, { passive: false });
+  }
 
-    storeLatestViewBoxVal(svg);
+  this.start = function (el) {
+    svg = el;
+    restoreViewBoxVal();
+    addEventListeners();
+    observeViewBoxChanges();
   };
 };
 

src/modules/game.js

@@ -142,7 +142,6 @@ export default class Game {
 
     this.setUpSightLine(this);
     this.setUpCounter(this);
-    // this.setUpRecordSheet();
     this.setUpCells();
   }
 
@@ -343,7 +342,6 @@ export default class Game {
 
     if (selected) {
       this.Counter.endMove(selected);
-      // this.RecordSheet.endMove();
     }
   }
 
@@ -557,7 +555,6 @@ export default class Game {
             }
           } else {
             e.stopPropagation();
-            // this.RecordSheet.select(e.target);
             container.Counter.select(e.target);
           }
         },