1 files changed, 37 insertions, 2 deletions
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(','));
                 }