Local move counting.

client/board.js

@@ -5,13 +5,27 @@ const Board = function({ parent, squares }) {
     this.walls = {};
     this.robots = {};
     this.listeners = {};
+    this.initialRobotState = [];
 
     this.drawSquares();
+
+    document.addEventListener('board-reset', this.onReset.bind(this));
 };
 
 Board.prototype.drawRobots = function(robots) {
+    this.initialRobotState = robots;
     this.robots = {};
 
+    while (this.parent.getElementsByClassName('content-robot').length) {
+        const child = this.parent.getElementsByClassName('content-robot')[0];
+        child.parentNode.removeChild(child);
+    }
+
+    while (this.parent.getElementsByClassName('content-arrows').length) {
+        const child = this.parent.getElementsByClassName('content-arrows')[0];
+        child.parentNode.removeChild(child);
+    }
+
     robots.forEach(({ color, i, j }) => {
         const { x, y } = this.squares.ijToXy({ i, j });
         const s = this.squares.sideLength;
@@ -163,6 +177,9 @@ Board.prototype.moveRobot = function({ id, i, j }) {
     arrows.style.top = (y - s) + 'px';
 
     this.updateArrowVisibilities();
+
+    var event = new Event('move-increment');
+    document.dispatchEvent(event);
 }
 
 Board.prototype.updateArrowVisibilities = function() {
@@ -207,6 +224,10 @@ Board.prototype.onArrowClick = function(evt) {
     this.moveRobot({ id, i: i2, j: j2 })
 };
 
+Board.prototype.onReset = function() {
+    this.drawRobots(this.initialRobotState);
+};
+
 Board.prototype.findNextObstacle = function({ direction, i, j }) {
     switch (direction) {
         case 'right':

client/controls.js

@@ -1,6 +1,9 @@
 const Controls = function(connection) {
     this.connection = connection;
-    console.log(this.connection)
+    this.moves = 0;
+
+    document.addEventListener('move-increment', this.onMoveIncrement.bind(this));
+    document.getElementById('controls-moves-reset').addEventListener('click', this.onMoveReset.bind(this));
 }
 
     // guessBuild: = function() {
@@ -58,4 +61,17 @@ Controls.prototype.playersUpdate = function(names) {
     //         container.removeChild(el);
     //     }
     // })
+};
+
+Controls.prototype.onMoveIncrement = function() {
+    this.moves++;
+    document.getElementById('controls-moves').innerHTML = this.moves;
+};
+
+Controls.prototype.onMoveReset = function() {
+    this.moves = 0;
+    document.getElementById('controls-moves').innerHTML = this.moves;
+
+    var event = new Event('board-reset');
+    document.dispatchEvent(event);
 };

index.css

@@ -40,7 +40,35 @@ body {
     background-color: #4D3243;
     color: #fff;
     padding: 12px;
-    margin: 24px 0;
+    margin: 24px 0 12px 0;
+}
+
+.controls-row {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    padding: 8px;
+}
+
+.controls-row :nth-child(2) {
+    flex: 1;
+    margin: 0 8px;
+    width: 100%;
+}
+
+.controls-button {
+    background: none;
+    border: 1px solid #888;
+    color: #666;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 4px 8px;
+}
+
+.controls-button:hover {
+    background: #ddd;
+    border-color: #444;
+    color: #222;
 }
 
 #controls-room {

index.html

@@ -17,21 +17,18 @@
 
         <div id="controls-room">
             <div class='controls-subtitle'>Room</div>
-            <input type="text" id='game-id'>
-            <button type='button'>&gt;</button>
+
+            <div class="controls-row">
+                <div>Room ID</div>
+                <input type="text" id='game-id'>
+                <div class="controls-button">Go</div>
+            </div>
 
             <div class="controls-room-errors"></div>
 
-            <div>Reset your board</div>
-            <button type='button' id='game-start'>Start New Round</button>
-            <div class="timer">0:42</div>
-            <button type='button'>Skip Timer</button>
+                <button type='button' id='game-start'>Start New Round</button>
         </div>
 
-        <!-- <div class="rounds">
-            
-        </div> -->
-
         <div id="controls-players">
             <div class='controls-subtitle'>Players</div>
 
@@ -41,6 +38,17 @@
 
         <div id="controls-guesses">
             <div class='controls-subtitle'>Guess</div>
+            <div class="controls-row">
+                <div>Moves:</div> 
+                <div id="controls-moves">4</div> 
+                <div class='controls-button' id='controls-moves-reset'>Reset</div>   
+            </div>
+
+            <div class="controls-row">
+                <div>Timer:</div> 
+                <div id="controls-timer">0:42</div> 
+                <div class='controls-button' id='controls-timer-skip'>Skip</div>   
+            </div>
         </div>
 
         <div id="controls-footer">