Use observable for showing hex distance count

src/index.js

@@ -72,6 +72,11 @@ function clearMoveEndedIndicators(records) {
   records.forEach(el => el.classList.remove('movement-ended'));
 }
 
+function distance(count = '-') {
+  distanceOutput.querySelector('#hex-count').textContent = count;
+  distanceOutput.style.display = count === '-' ? 'none' : 'block';
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
 function getRandomIntInclusive(min, max) {
   const minCeiled = Math.ceil(min);
@@ -151,15 +156,6 @@ document.getElementById('toggle-prone-counter').addEventListener('input', functi
   selected && gameboard.toggleProne();
 });
 
-contentVisToggleEl.addEventListener('input', toggleContentVis);
-
-gameboard.setDistanceCallback((count = '-') => {
-  distanceOutput.querySelector('#hex-count').textContent = count;
-  distanceOutput.style.display = count === '-' ? 'none' : 'block';
-});
-
-Observable.subscribe('proneflag', checked => proneToggle.checked = checked);
-
 document.querySelectorAll('.end-move').forEach(el =>
   el.addEventListener('click', () => Observable.notify('endmove'))
 );
@@ -172,20 +168,6 @@ document.querySelector('#fullscreen').addEventListener('click', () => {
   }
 });
 
-contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
-toggleContentVis();
-
-mapSelectDialog
-  .init()
-  .selectCurrentOptionOnPageLoad()
-  .showOnClick()
-  .updateValueOnSelection()
-  .changeMapOnConfirm(loadScenario);
-
-mapResourceEl.addEventListener('load', load);
-mapResourceEl.data = map;
-mapResourceEl = null;
-
 document.querySelector('#download-save').addEventListener('click', e => {
   const data = document.querySelector('object').contentDocument.documentElement.outerHTML;
   const element = document.createElement('a');
@@ -208,6 +190,28 @@ document.querySelector('input[type="file"]').addEventListener('change', e => {
   loadScenario(URL.createObjectURL(file))
 });
 
+document.querySelector('#roll-dice').addEventListener('click', () => {
+  dice.forEach(el => {
+    el.classList.remove('roll-in');
+    el.classList.add('roll-out');
+  });
+});
+
+contentVisToggleEl.addEventListener('input', toggleContentVis);
+contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
+toggleContentVis();
+
+mapSelectDialog
+  .init()
+  .selectCurrentOptionOnPageLoad()
+  .showOnClick()
+  .updateValueOnSelection()
+  .changeMapOnConfirm(loadScenario);
+
+mapResourceEl.addEventListener('load', load);
+mapResourceEl.data = map;
+mapResourceEl = null;
+
 dice.forEach(el => {
   el.classList.add(roll(d6));
 
@@ -220,9 +224,5 @@ dice.forEach(el => {
   });
 });
 
-document.querySelector('#roll-dice').addEventListener('click', () => {
+Observable.subscribe('distance', distance);
-  dice.forEach(el => {
+Observable.subscribe('proneflag', checked => proneToggle.checked = checked);
-    el.classList.remove('roll-in');
-    el.classList.add('roll-out');
-  });
-});

src/modules/gameboard.js

@@ -3,7 +3,7 @@ import * as sightLine from './game/sight_line.js';
 import * as soldier from './game/soldier.js';
 import { Observable } from "./observable";
 
-let svg, distanceCallback, selected,
+let svg, selected,
   placing = [];
 
 function getCellContents(cell) {
@@ -89,7 +89,7 @@ function deselect() {
 function clearSightLine() {
   sightLine.setHexes([]);
   sightLine.clear();
-  distanceCallback && distanceCallback();
+  Observable.notify('distance');
 }
 
 function updateSightLine(cell) {
@@ -103,7 +103,7 @@ function updateSightLine(cell) {
   const hexes = svg.querySelectorAll(selector);
   sightLine.setHexes(hexes);
   sightLine.update(getCellPosition(cell));
-  distanceCallback && distanceCallback(hexes.length - 1);
+  Observable.notify('distance', hexes.length - 1);
 }
 
 function drawSightLine(sourceCell, targetCell) {
@@ -118,7 +118,7 @@ function drawSightLine(sourceCell, targetCell) {
   sightLine.setHexes(hexes);
   const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
   svg.querySelector('.gameboard').appendChild(line);
-  distanceCallback && distanceCallback(hexes.length - 1);
+  Observable.notify('distance', hexes.length - 1);
 }
 
 function moveBackOneStepInHistory(counter) {
@@ -178,10 +178,6 @@ export function getUnits() {
   return soldier.getAllCounters(svg);
 }
 
-export function setDistanceCallback(callback) {
-  distanceCallback = callback;
-}
-
 export function start(el) {
   svg = el;