Use observable for showing hex distance count

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;