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', () => {
-  dice.forEach(el => {
-    el.classList.remove('roll-in');
-    el.classList.add('roll-out');
-  });
-});
+Observable.subscribe('distance', distance);
+Observable.subscribe('proneflag', checked => proneToggle.checked = checked);