Remove select callbacks and use observable instead

src/modules/record_sheet.js

@@ -1,3 +1,5 @@
+import { Observable } from "./observable";
+
 const weapons = {
   rifle: {
     name: 'Rifle',
@@ -98,27 +100,19 @@ function createRecords(units) {
   return grouped;
 }
 
-function addEventListeners(unSelectCounter, selectCounter) {
+function getRecord({ dataset: { allegiance: al, number: n }}) {
+  const selector = `.soldier-record[data-number="${n}"][data-allegiance="${al}"]`;
+
+  return document.querySelector(selector);
+}
+
+function addEventListeners() {
   document.querySelectorAll('.soldier-record').forEach(el =>
-    el.addEventListener('click', () => {
-      if (el.classList.contains('selected')) {
-        el.classList.remove('selected');
-        unSelectCounter();
-        unSelect();
-      } else {
-        selectCounter(el);
-      }
-    })
+    el.addEventListener('click', () => Observable.notify('select', el))
   );
 }
 
-export function clear() {
-  document.querySelectorAll('#record-sheet .soldier-record').forEach(el => el.remove());
-  document.querySelector('#attacker-record .name').textContent = 'attacker';
-  document.querySelector('#defender-record .name').textContent = 'defender';
-}
-
-export function unSelect() {
+function deselect() {
   const selected = getSelected();
 
   if (selected) {
@@ -128,24 +122,28 @@ export function unSelect() {
   document.getElementById('toggle-prone-counter').checked = false;
 }
 
-export function getSelected() {
-  return document.querySelector('.soldier-record.selected');
+function clear() {
+  document.querySelectorAll('#record-sheet .soldier-record').forEach(el => el.remove());
+  document.querySelector('#attacker-record .name').textContent = 'attacker';
+  document.querySelector('#defender-record .name').textContent = 'defender';
 }
 
-export function select(data) {
-  unSelect();
+function select(data) {
+  const record = data && getRecord(data);
+  const isSelected = record?.classList.contains('selected');
 
-  if (!data) {
-    return;
-  }
+  deselect();
 
-  const { allegiance: al, number: n } = data,
-    selector = `.soldier-record[data-number="${n}"][data-allegiance="${al}"]`;
+  if (isSelected || !data) return;
 
-  document.querySelector(selector).classList.add('selected');
+  record.classList.add('selected');
   document.querySelector('#toggle-prone-counter').checked = data.prone;
 }
 
+export function getSelected() {
+  return document.querySelector('.soldier-record.selected');
+}
+
 export function endMove() {
   const selected = getSelected();
 
@@ -153,10 +151,10 @@ export function endMove() {
     selected.classList.toggle('movement-ended');
   }
 
-  unSelect();
+  deselect();
 }
 
-export function start(startLoc, units, gbUnSelect, gbSelect) {
+export function start(startLoc, units) {
   clear();
   const forces = createRecords(units);
 
@@ -171,5 +169,6 @@ export function start(startLoc, units, gbUnSelect, gbSelect) {
     forces[affiliation].forEach(r => records.appendChild(r));
   }
 
-  addEventListeners(gbUnSelect, gbSelect);
+  Observable.subscribe('select', select);
+  addEventListeners();
 }