From 303dbd939b632946e7688607b836a19577a5e986 Mon Sep 17 00:00:00 2001 From: Ben Burlingham Date: Sat, 20 Jun 2020 15:38:38 -0700 Subject: [PATCH] Starting movement stack implementation. --- README.txt | 7 ++--- client/content.js | 20 ++++---------- client/controls.js | 65 ++++++++++++++++++++++++++++++++-------------- index.html | 1 + 4 files changed, 56 insertions(+), 37 deletions(-) diff --git a/README.txt b/README.txt index fbb9e34..140820b 100644 --- a/README.txt +++ b/README.txt @@ -3,17 +3,18 @@ - Incoming global messages are broadcast as custom events prefixed with `G` ## TODO +- be able to "back up" in a move sequence +- move guess and move logic out of server (clean up server file) +- restore state on join + - robot icons with personality - robot GUIDs -- move guess and move logic out of server (clean up server file) - countdown skip - no cancel from name prompt - window resize update board - walls algorigthm - win declare/add/remove -- be able to "back up" in a move sequence -- restore state on join - limit concurrent players, make sure connections are closed, clean up empty rooms - cookie room link, add to all messages, namespace them diff --git a/client/content.js b/client/content.js index 7d34719..802b9cd 100644 --- a/client/content.js +++ b/client/content.js @@ -7,7 +7,6 @@ const Content = function({ parent, squares }) { this.walls = {}; this.robots = {}; this.listeners = {}; - this.initialRobotState = []; this.playerId = null; this.isSolving = false; @@ -15,6 +14,7 @@ const Content = function({ parent, squares }) { this.drawSquares(); + // Message handlers: "Local message" and "Global message" document.addEventListener('L-reset', this.msgReset.bind(this)); document.addEventListener('G-connected', this.msgConnected.bind(this)); @@ -26,13 +26,13 @@ const Content = function({ parent, squares }) { //===== UI -Content.prototype.drawRobots = function() { +Content.prototype.drawRobots = function(robotPositions) { this.robots = {}; this.parent.querySelectorAll('.content-robot').forEach(el => el.parentNode.removeChild(el)); this.parent.querySelectorAll('.content-arrows').forEach(el => el.parentNode.removeChild(el)); - this.initialRobotState.forEach(({ color, i, j }) => { + robotPositions.forEach(({ color, i, j }) => { const { x, y } = this.squares.ijToXy({ i, j }); const s = this.squares.sideLength; const id = color.replace('#', '').toUpperCase(); @@ -46,20 +46,11 @@ Content.prototype.drawRobots = function() { robot.style.borderRadius = (s / 2) + 'px'; robot.style.height = s + 'px'; robot.style.width = s + 'px'; - robot.style.left = x + 'px'; - robot.style.top = y + 'px'; - robot.dataset.i = i; - robot.dataset.j = j; - - // Get robot from ij: document.querySelector('[data-robot=i-j]') - // robot.dataset.robot = ij; const arrows = document.createElement('div'); arrows.className = 'content-arrows'; arrows.id = `arrows-${id}`; arrows.style.position = 'absolute'; - arrows.style.left = (x - s) + 'px'; - arrows.style.top = (y - s) + 'px'; const up = this.drawArrow({ direction: 'up', label: '▲', i, j, left: (s * 1.25), top: (s * 0.5), parentId: id @@ -282,15 +273,14 @@ Content.prototype.onArrowClick = function(evt) { const detail = { id, i: i2, j: j2, emitIf: this.isSolving }; const evtMove = new CustomEvent('L-move', { detail }); - document.dispatchEvent(evtMove); }; //===== Message handlers Content.prototype.msgRobots = function(evt) { - this.initialRobotState = evt.detail.body; - this.drawRobots() + const robotPositions = evt.detail.body; + this.drawRobots(robotPositions); }; Content.prototype.msgWalls = function(evt) { diff --git a/client/controls.js b/client/controls.js index 29d6b7d..f1a023e 100644 --- a/client/controls.js +++ b/client/controls.js @@ -1,34 +1,38 @@ //===== Constructor const Controls = function() { - this.moves = 0; this.names = {}; + this.positions = []; this.timers = {}; this.currentWinningGuess = Infinity; - this.drawGuesses(); + // this.drawGuesses(); + // Message handlers: "Local message" and "Global message" document.addEventListener('L-connected', this.msgConnected.bind(this)); document.addEventListener('L-move', this.msgMove.bind(this)); + document.addEventListener('L-reset', this.msgReset.bind(this)); + document.addEventListener('L-undo', this.msgUndo.bind(this)); - // Message handlers: "Local message" and "Global message" // document.addEventListener('G-move', this.msgMove.bind(this)); // document.addEventListener('G-win', this.msgWin.bind(this)); document.addEventListener('G-attempt', this.msgAttempt.bind(this)); document.addEventListener('G-guess', this.msgGuess.bind(this)); + document.addEventListener('G-players', this.msgPlayers.bind(this)); + document.addEventListener('G-robots', this.msgPlayers.bind(this)); document.addEventListener('G-skip', this.msgSkip.bind(this)); document.addEventListener('G-start', this.msgStart.bind(this)); document.addEventListener('G-stop', this.msgStop.bind(this)); - document.addEventListener('G-players', this.msgPlayers.bind(this)); // Click handlers + document.getElementById('controls-reset').addEventListener('click', this.onClickReset.bind(this)); + document.getElementById('controls-robots').addEventListener('click', this.onClickRobots.bind(this)); + document.getElementById('controls-skip').addEventListener('click', this.onClickSkip.bind(this)); document.getElementById('controls-start').addEventListener('click', this.onClickStart.bind(this)); document.getElementById('controls-stop').addEventListener('click', this.onClickStop.bind(this)); + document.getElementById('controls-undo').addEventListener('click', this.onClickUndo.bind(this)); document.getElementById('controls-walls').addEventListener('click', this.onClickWalls.bind(this)); - document.getElementById('controls-robots').addEventListener('click', this.onClickRobots.bind(this)); - document.getElementById('controls-reset').addEventListener('click', this.onClickReset.bind(this)); - document.getElementById('controls-skip').addEventListener('click', this.onClickSkip.bind(this)); } //===== UI @@ -104,6 +108,14 @@ Controls.prototype.showPanic = function() { document.getElementById('controls-panic').style.display = ''; }; +Controls.prototype.updateMoves = function() { + // Initial robot placement is first move, to allow undo, but doesn't count as a move. + const moves = this.positions.length - 1; + + document.getElementById('controls-moves').innerHTML = moves; + document.getElementById('controls-undo').style.display = moves > 0 ? 'auto' : 'none'; +}; + //===== Message handlers Controls.prototype.msgAttempt = function() { @@ -130,9 +142,18 @@ Controls.prototype.msgConnected = function() { this.showWaiting(); }; -Controls.prototype.msgMove = function() { - this.moves++; - document.getElementById('controls-moves').innerHTML = this.moves; +Controls.prototype.msgUndo = function(evt) { + // Remove most recent move and return to the one before that. + this.moves.pop(); + const secondToLast = this.moves.pop(); + + const evtMove = new CustomEvent('L-move', { detail: secondToLast }); + document.dispatchEvent(evtMove); +}; + +Controls.prototype.msgMove = function(evt) { + this.moves.push(evt.detail); + this.updateMoves(); }; Controls.prototype.msgPlayers = function(evt) { @@ -169,6 +190,11 @@ Controls.prototype.msgPlayers = function(evt) { }); }; +Controls.prototype.msgReset = function() { + this.moves = []; + this.updateMoves(); +}; + Controls.prototype.msgSkip = function() { this.coundownComplete(); }; @@ -200,31 +226,32 @@ Controls.prototype.onClickGuess = function(evt) { } else { alert(`That doesn't beat ${this.currentWinningGuess} - try again!`) } -} +}; Controls.prototype.onClickRobots = function() { this.dispatch('L-robots'); -} +}; Controls.prototype.onClickSkip = function() { this.dispatch('L-skip'); -} +}; Controls.prototype.onClickStart = function() { this.dispatch('L-start'); -} +}; Controls.prototype.onClickStop = function() { this.dispatch('L-stop'); -} +}; + +Controls.prototype.onClickUndo = function() { + this.dispatch('L-undo'); +}; Controls.prototype.onClickWalls = function() { this.dispatch('L-walls'); -} +}; Controls.prototype.onClickReset = function() { - this.moves = 0; - document.getElementById('controls-moves').innerHTML = this.moves; - this.dispatch('L-reset'); }; diff --git a/index.html b/index.html index 6f97323..ba17b8c 100644 --- a/index.html +++ b/index.html @@ -76,6 +76,7 @@
Moves:
0
+
Undo
Reset