Undo, reset.

README.txt

@@ -10,11 +10,9 @@ Any movement, including initial locations, is represented by pushing or popping
 A victory state can be stored by taking a snapshot of the current stack. 
 
 ## TODO
-- be able to undo in a move sequence
 - robot shadow starting spot
 - robot icons with personality add credit to readmee
 - countdown skip 
-- reset
 - restore state on join
 
 - win declare/add/remove

client/controls.js

@@ -1,36 +1,34 @@
 // //===== Constructor
 
 const Controls = function() {
-//     this.moves = [];
+    this.names = {};
-//     this.names = {};
 //     this.starts = [];
 //     this.timers = {};
 
 //     // "Local" and "Global" messages
 //     document.addEventListener('L-connected', this.msgConnected.bind(this));
-//     document.addEventListener('L-move', this.msgMove.bind(this));
+    document.addEventListener('L-stack', this.msgStack.bind(this));
 //     document.addEventListener('L-reset', this.msgReset.bind(this));
 //     document.addEventListener('L-undo', this.msgUndo.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-players', this.msgPlayers.bind(this)); 
-//     document.addEventListener('G-robots', this.msgRobots.bind(this)); 
+    document.addEventListener('G-skip', this.msgSkip.bind(this));
-//     document.addEventListener('G-skip', this.msgSkip.bind(this));
+    document.addEventListener('G-start', this.msgStart.bind(this));
-//     document.addEventListener('G-start', this.msgStart.bind(this));
+    document.addEventListener('G-stop', this.msgStop.bind(this));
-//     document.addEventListener('G-stop', this.msgStop.bind(this));
+ 
- 
+    // Click handlers
-//     // Click handlers
+    document.getElementById('controls-reset').addEventListener('click', this.onClickReset.bind(this));
-//     document.getElementById('controls-reset').addEventListener('click', this.onClickReset.bind(this));
+    document.getElementById('controls-robots').addEventListener('click', this.onClickRobots.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-skip').addEventListener('click', this.onClickSkip.bind(this));
+    document.getElementById('controls-start').addEventListener('click', this.onClickStart.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-stop').addEventListener('click', this.onClickStop.bind(this));
+    document.getElementById('controls-undo').addEventListener('click', this.onClickUndo.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-walls').addEventListener('click', this.onClickWalls.bind(this));
 }
 
-// //===== UI
+//===== Countdown
 
 // Controls.prototype.countdownStart = function(seconds) {
 //     clearTimeout(this.timers.countdown);
@@ -62,6 +60,7 @@ const Controls = function() {
 //     document.getElementById('controls-countdown').dataset.tick = 0;   
 // };
 
+//===== UI
 // Controls.prototype.showWaiting = function() {
 //     document.getElementById('controls-start').parentNode.style.display = '';
 //     document.getElementById('controls-walls').parentNode.style.display = '';
@@ -78,36 +77,12 @@ const Controls = 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.moves.length - this.starts.length;
-
-//     document.getElementById('controls-moves').innerHTML = moves;
-//     document.getElementById('controls-undo').style.display = moves > 0 ? 'block' : 'none';
-// };
-
 // //===== Message handlers
 
 // Controls.prototype.msgAttempt = function() {
 //     alert("Ready for winning attempt!");
 // };
 
-// Controls.prototype.msgGuess = function(evt) { 
-//     const blurbs = [ " has a solution: ", " can do it in ", " says, maybe ", " wagers ", 
-//         " reckons ", " is pretty sure it's ", ", confidently: ", " wants it to be ", 
-//         " says ", " hazards ", " guesses ", " thinks it might be "];
-//     const blurb = blurbs[Math.floor(Math.random() * blurbs.length)];
-
-//     const msg = evt.detail;
-//     const guess = msg.guess;
-
-//     this.currentWinningGuess = guess;
-
-//     document.getElementById('controls-panic').querySelector('.controls-alert-urgent').innerHTML = (`${this.names[msg.id]}${blurb}${guess} moves.`);
-//     this.showPanic();
-//     this.countdownStart(5);
-// }
-
 // Controls.prototype.msgConnected = function() {
 //     this.showWaiting();
 // };
@@ -126,44 +101,46 @@ const Controls = function() {
 //     document.dispatchEvent(evtMove);
 // };
 
-// Controls.prototype.msgMove = function(evt) {
+Controls.prototype.msgStack = function(evt) {
-//     this.moves.push(evt.detail);
+    const moveCount = evt.detail.length;
-//     this.updateMoves();
-// };
 
-// Controls.prototype.msgPlayers = function(evt) {
+    document.getElementById('controls-moves').innerHTML = moveCount;
-//     const container = document.getElementById('controls-players');
+    document.getElementById('controls-undo').style.display = moveCount > 0 ? 'block' : 'none';
-//     const names = evt.detail.body;
+};
-//     const keys = Object.keys(names);
 
-//     if (keys.length > 0) {
+Controls.prototype.msgPlayers = function(evt) {
-//         const nobody = document.getElementById('controls-players-nobody');
+    const container = document.getElementById('controls-players');
-//         nobody && nobody.parentNode.removeChild(nobody);
+    const names = evt.detail.body;
-//     }
+    const keys = Object.keys(names);
 
-//     keys.forEach(connectionId => {
+    if (keys.length > 0) {
-//         const id = `player-${connectionId}`;
+        const nobody = document.getElementById('controls-players-nobody');
+        nobody && nobody.parentNode.removeChild(nobody);
+    }
     
-//         if (document.getElementById(id)) {
+    keys.forEach(connectionId => {
-//             return;
+        const id = `player-${connectionId}`;
-//         }
 
-//         const n = document.createElement('div');
+        if (document.getElementById(id)) {
-//         n.id = id;
+            return;
-//         n.innerHTML = names[connectionId];
+        }
-//         n.className = 'controls-player';
-//         container.appendChild(n)
-//     });
 
-//     this.names = names;
+        const n = document.createElement('div');
+        n.id = id;
+        n.innerHTML = names[connectionId];
+        n.className = 'controls-player';
+        container.appendChild(n)
+    });
 
-//     container.querySelectorAll('.controls-player').forEach(el => {
+    this.names = names;
-//         const id = el.id.split('player-').pop();
+
-//         if (!this.names[id]) {
+    container.querySelectorAll('.controls-player').forEach(el => {
-//             container.removeChild(el);
+        const id = el.id.split('player-').pop();
-//         }
+        if (!this.names[id]) {
-//     });
+            container.removeChild(el);
-// };
+        }
+    });
+};
 
 // Controls.prototype.msgReset = function() {
 //     // Broadcast starting locations.
@@ -174,77 +151,76 @@ const Controls = function() {
 //     });
 // };
 
-// Controls.prototype.msgRobots = function(evt) {
+Controls.prototype.msgSkip = function() {
-//     this.starts = [];
+    // this.coundownComplete();
-//     this.moves = [];
+};
 
-//     evt.detail.body.forEach(({ id, i, j}) => {
+Controls.prototype.msgStart = function() {
-//         this.starts.push({ id, i, j });
+    //
-//         this.moves.push({ id, i, j });
+};
-//     });
-// };
 
-// Controls.prototype.msgSkip = function() {
+Controls.prototype.msgStop = function() {
-//     this.coundownComplete();
+    // 
-// };
+}
 
-// Controls.prototype.msgStart = function() {
+//===== Click handlers
-//     // Trim moves array to last position of each robot.
-//     // Set robots array to these new initial positions.
-//     const mostRecentPositions = {};
 
-//     this.moves.forEach(({ id, i, j }) => {
+Controls.prototype.dispatch = function(evt, data) {
-//         mostRecentPositions[id] = { id, i, j };
+    const e = (data ? new CustomEvent(evt, { detail: data }) : new Event(evt));
-//     });
+    document.dispatchEvent(e);
+};
 
-//     this.starts = [];
+Controls.prototype.onClickReset = function() {
-//     Object.values(mostRecentPositions).forEach(robot => {
+    this.dispatch('L-reset');
-//         this.starts.push(robot);
+};
-//     });
 
-//     // Broadcast starting locations.
+Controls.prototype.onClickRobots = function() {
-//     this.moves = [];
+    this.dispatch('L-robots');
-//     this.starts.forEach(move => {
+};
-//         const evtMove = new CustomEvent('L-move', { detail: move });
-//         document.dispatchEvent(evtMove);
-//     });
-// };
 
-// Controls.prototype.msgStop = function() {
+Controls.prototype.onClickSkip = function() {
-//     // this.showWaiting();
+    this.dispatch('L-skip');
-// }
+};
 
-// //===== Click handlers
+Controls.prototype.onClickStart = function() {
+    this.dispatch('L-start');
+};
 
-// Controls.prototype.dispatch = function(evt, data) {
+Controls.prototype.onClickStop = function() {
-//     const e = (data ? new CustomEvent(evt, { detail: data }) : new Event(evt));
+    this.dispatch('L-stop');
-//     document.dispatchEvent(e);
+};
-// };
 
-// Controls.prototype.onClickReset = function() {
+Controls.prototype.onClickUndo = function() {
-//     this.dispatch('L-reset');
+    this.dispatch('L-undo');
-// };
+};
 
-// Controls.prototype.onClickRobots = function() {
+Controls.prototype.onClickWalls = function() {
-//     this.dispatch('L-robots');
+    this.dispatch('L-walls');
-// };
+};
 
-// Controls.prototype.onClickSkip = function() {
+//===== THE TRASH BIN OF HISTORY
-//     this.dispatch('L-skip');
+// Controls.prototype.msgRobots = function(evt) {
-// };
+//     this.starts = [];
+//     this.moves = [];
 
-// Controls.prototype.onClickStart = function() {
+//     evt.detail.body.forEach(({ id, i, j}) => {
-//     this.dispatch('L-start');
+//         this.starts.push({ id, i, j });
+//         this.moves.push({ id, i, j });
+//     });
 // };
 
-// Controls.prototype.onClickStop = function() {
+// Controls.prototype.msgGuess = function(evt) { 
-//     this.dispatch('L-stop');
+//     const blurbs = [ " has a solution: ", " can do it in ", " says, maybe ", " wagers ", 
-// };
+//         " reckons ", " is pretty sure it's ", ", confidently: ", " wants it to be ", 
+//         " says ", " hazards ", " guesses ", " thinks it might be "];
+//     const blurb = blurbs[Math.floor(Math.random() * blurbs.length)];
 
-// Controls.prototype.onClickUndo = function() {
+//     const msg = evt.detail;
-//     this.dispatch('L-undo');
+//     const guess = msg.guess;
-// };
 
-// Controls.prototype.onClickWalls = function() {
+//     this.currentWinningGuess = guess;
-//     this.dispatch('L-walls');
+
-// };
+//     document.getElementById('controls-panic').querySelector('.controls-alert-urgent').innerHTML = (`${this.names[msg.id]}${blurb}${guess} moves.`);
+//     this.showPanic();
+//     this.countdownStart(5);
+// }

client/stack.js

@@ -5,9 +5,23 @@ const Stack = function() {
     this.moves = [];
 
     document.addEventListener('L-arrow', this.msgArrow.bind(this));
+    document.addEventListener('L-undo', this.msgUndo.bind(this));
+    document.addEventListener('L-reset', this.msgReset.bind(this));
     document.addEventListener('G-robots', this.msgRobots.bind(this));
 };
 
+Stack.prototype.getInitialPositions = function() {
+    const moves = this.moves.reduce((acc, move) => {
+        if (!acc[move.id]) {
+            acc[move.id] = move;
+        }
+
+        return acc;
+    }, {});
+
+    return Object.values(moves);
+};
+
 Stack.prototype.msgRobots = function(evt) {
     this.moves = evt.detail.body.map(({ id, i, j }) => ({ id, i, j }));
 
@@ -22,10 +36,18 @@ Stack.prototype.msgArrow = function(evt) {
     document.dispatchEvent(evtStack);
 };
 
+Stack.prototype.msgReset = function() {
+    this.moves = this.getInitialPositions();
 
-// reset destroys stack
+    console.log(this.moves)
-// undo decrements from stack
+
-// store chops stack
+    const evtStack = new CustomEvent('L-stack', { detail: this.moves });
-// moves is stack length
+    document.dispatchEvent(evtStack);
-// replay shares stack
+};
-// starting spot is present in stack
+
+Stack.prototype.msgUndo = function() {
+    this.moves.pop();
+
+    const evtStack = new CustomEvent('L-stack', { detail: this.moves });
+    document.dispatchEvent(evtStack);
+};