Use observable for end move and prone flag

src/index.js

@@ -2,6 +2,7 @@ import * as panzoom from './modules/pan-zoom.js';
 import * as gameboard from './modules/gameboard.js';
 import * as recordSheet from './modules/record_sheet.js';
 import * as mapSelectDialog from './modules/map_select_dialog.js';
+import { Observable } from './modules/observable.js';
 
 globalThis.svgns = 'http://www.w3.org/2000/svg';
 
@@ -131,7 +132,7 @@ document.querySelectorAll('.end-turn').forEach(el =>
     clearMoveEndedIndicators(opponentRecords);
 
     gameboard.clearFiringArcs(opponent);
-    gameboard.select(firstOpponentRecord);
+    Observable.notify('select', firstOpponentRecord);
   })
 );
 
@@ -157,12 +158,11 @@ gameboard.setDistanceCallback((count = '-') => {
   distanceOutput.style.display = count === '-' ? 'none' : 'block';
 });
 
-gameboard.setProneFlagCallback(checked => proneToggle.checked = checked);
+Observable.subscribe('proneflag', checked => proneToggle.checked = checked);
 
-document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
+document.querySelectorAll('.end-move').forEach(el =>
-  recordSheet.endMove();
+  el.addEventListener('click', () => Observable.notify('endmove'))
-  gameboard.endMove();
+);
-}));
 
 document.querySelector('#fullscreen').addEventListener('click', () => {
   if (!document.fullscreenElement) {

src/modules/game/soldier.js

@@ -129,7 +129,7 @@ export function endMove(svg, counter) {
 }
 
 export function hasProne(counter) {
-  return !!counter.querySelector('[href="#counter-prone"]');
+  return !!counter.querySelector('[href="#counter-prone"]:not(.removed)');
 }
 
 export function toggleProne(counter) {

src/modules/gameboard.js

@@ -3,8 +3,7 @@ import * as sightLine from './game/sight_line.js';
 import * as soldier from './game/soldier.js';
 import { Observable } from "./observable";
 
-let svg, distanceCallback, proneFlagCallback,
+let svg, distanceCallback, selected,
-  selected,
   placing = [];
 
 function getCellContents(cell) {
@@ -78,6 +77,7 @@ function getSelected() {
 function deselect() {
   const selected = getSelected();
   placing = [];
+  Observable.notify('proneflag', false);
 
   if (selected) {
     selected.classList.remove(soldier.getSelectedClass());
@@ -182,10 +182,6 @@ export function setDistanceCallback(callback) {
   distanceCallback = callback;
 }
 
-export function setProneFlagCallback(callback) {
-  proneFlagCallback = callback;
-}
-
 export function start(el) {
   svg = el;
 
@@ -231,6 +227,9 @@ export function start(el) {
         console.log('removing cell contents');
         getCellContents(cell).forEach(el => el.remove());
       }
+
+      const selected = getSelected();
+      Observable.notify('proneflag', selected && soldier.hasProne(selected));
     });
 
     cell.addEventListener('dblclick', e => {
@@ -280,6 +279,7 @@ export function start(el) {
   });
 
   Observable.subscribe('select', select);
+  Observable.subscribe('endmove', endMove);
   console.log('gameboard.js loaded');
 }
 
@@ -295,6 +295,7 @@ export function select(data) {
 
   counter.classList.add(soldier.getSelectedClass());
   firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
+  Observable.notify('proneflag', soldier.hasProne(counter));
   placing.push(counter);
 }
 

src/modules/observable.js

@@ -2,7 +2,7 @@ const observers = {};
 
 export const Observable = Object.freeze({
   notify: (event, data) => {
-    observers[event].forEach((observer) => observer(data))
+    (observers[event] || []).forEach((observer) => observer(data))
   },
 
   subscribe: (event, func) => {

src/modules/record_sheet.js

@@ -118,8 +118,6 @@ function deselect() {
   if (selected) {
     selected.classList.remove('selected');
   }
-
-  document.getElementById('toggle-prone-counter').checked = false;
 }
 
 function clear() {
@@ -137,7 +135,6 @@ function select(data) {
   if (isSelected || !data) return;
 
   record.classList.add('selected');
-  document.querySelector('#toggle-prone-counter').checked = data.prone;
 }
 
 export function getSelected() {
@@ -170,5 +167,6 @@ export function start(startLoc, units) {
   }
 
   Observable.subscribe('select', select);
+  Observable.subscribe('endmove', endMove);
   addEventListeners();
 }