diff --git a/client/board.js b/client/board.js index beceed7..2abd102 100644 --- a/client/board.js +++ b/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': diff --git a/client/controls.js b/client/controls.js index 8bf99f6..41903a6 100644 --- a/client/controls.js +++ b/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); }; \ No newline at end of file diff --git a/index.css b/index.css index 1f55b88..fff9602 100644 --- a/index.css +++ b/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 { diff --git a/index.html b/index.html index 2c42a51..58f552b 100644 --- a/index.html +++ b/index.html @@ -17,21 +17,18 @@