3 files changed, 42 insertions, 7 deletions
diff --git a/src/modules/counter.js b/src/modules/counter.js
index 162e56e..21a0238 100644
--- a/src/modules/counter.js
+++ b/src/modules/counter.js
@@ -44,6 +44,9 @@ export default class Counter {
     return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"]`);
   }
 
+  getTrace({ dataset: { allegiance, number } }) {
+    return this.svg.querySelector(this.traceSelector(number, allegiance));
+  }
 
   getCellPosition(cell) {
     let pt = new DOMPoint(0, 0),
@@ -144,9 +147,6 @@ export default class Counter {
         const counter = this.getCounter(troopAllegiance, troopNumber),
           lockedSl = this.svg.querySelector('.sight-line:not(.active)');
 
-        counter.setAttributeNS(null, 'x', 0);
-        counter.setAttributeNS(null, 'y', 0);
-
         if (!lockedSl) {
           this.container.sightLine.clear();
         } else {
diff --git a/src/modules/game.js b/src/modules/game.js
index ca911ed..a81cb5f 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -166,15 +166,36 @@ export default class Game {
         } else if (toPlace && !state.occupant) {
           this.counter.place(point);
           this.placing.push(toPlace);
+          const lockedSl = this.svg.querySelector('.sight-line:not(.active)');
+
+          if (!lockedSl) {
+            this.sightLine.clear();
+          } else {
+            this.sightLine.update(cell, this.getCellPosition(cell));
+          }
         } else if (toPlace && state.occupant) {
           if (toPlace === state.occupant) {
             if ('previous' in toPlace.dataset) {
+              const trace = this.counter.getTrace(toPlace);
               toPlace.remove();
               toPlace = this.getCounterAtGridIndex(...toPlace.dataset.previous.split(','));
               toPlace.classList.remove('clone');
               toPlace.classList.add('selected');
-              console.log(toPlace);
+              if (!('previous' in toPlace.dataset)) {
+                trace.remove();
+              } else {
+                const points = trace.getAttribute('points').split(' ');
+                points.pop();
+                trace.setAttributeNS(null, 'points', points.join(' '));
+              }
               this.placing.push(toPlace);
+              const lockedSl = this.svg.querySelector('.sight-line:not(.active)');
+
+              if (!lockedSl) {
+                this.sightLine.clear();
+              } else {
+                this.sightLine.update(toPlace.parentElement, this.getCellPosition(toPlace.parentElement));
+              }
             } else {
               this.counter.unSelect();
             }
@@ -189,10 +210,24 @@ export default class Game {
                 toPlace.remove();
                 toPlace = state.occupant;
                 this.counter.removeClones(toPlace);
+                this.counter.getTrace(toPlace).remove();
+                const lockedSl = this.svg.querySelector('.sight-line:not(.active)');
+
+                if (!lockedSl) {
+                  this.sightLine.clear();
+                } else {
+                  this.sightLine.update(cell, this.getCellPosition(cell));
+                }
               } else {
-                const index = this.getGridIndex(state.occupant);
+                const index = this.getGridIndex(state.occupant),
+                  trace = this.counter.getTrace(toPlace),
+                  pos = this.getCellPosition(cell),
+                  points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');;
+
                 let current = toPlace;
 
+                trace.setAttributeNS(null, 'points', points);
+
                 while (current.dataset.previous != `${index.x},${index.y}`) {
                   current = this.getCounterAtGridIndex(...current.dataset.previous.split(','));
                 }
diff --git a/src/modules/sightLine.js b/src/modules/sightLine.js
index de88521..4790bd8 100644
--- a/src/modules/sightLine.js
+++ b/src/modules/sightLine.js
@@ -170,8 +170,8 @@ export default class SightLine {
   update(cell, { x, y }) {
     const sl = this.svg.querySelector('.sight-line'),
       target = this.svg.querySelector('.sight-line-target').parentElement,
-      x1 = cell.parentElement.dataset.x,
-      y1 = cell.parentElement.parentElement.dataset.y,
+      x1 = cell.dataset.x,
+      y1 = cell.parentElement.dataset.y,
       x2 = target.dataset.x,
       y2 = target.parentElement.dataset.y;