Added Undo Functionality, Closes #53 and #63

html/css/font.css

@@ -59,3 +59,6 @@
 .icon-cog:before {
 	content: "\e900";
 }
+.icon-undo:before {
+	content: "\f0e2";
+}

html/css/main.css

@@ -304,6 +304,7 @@ a {
     height:100%;
     text-align:center;
     z-index: 1000;
+    overflow: scroll;
 }
 
 #settings > div {

html/index.html

@@ -42,6 +42,9 @@
                     <li><button id="button-merge" class="button button--sacnite button--inverted" alt="Merge isets"><i class="icon-link"></i></button></li>
                     <li><button id="button-dissolve" class="button button--sacnite button--inverted" alt="Dissolve iset"><i class="icon-unlink"></i></button></li>
                 </ul>
+                <ul class="vertical-centered">
+                    <li><button id="button-undo" class="button button--sacnite button--inverted" alt="Undo" title="Undo"><i class="icon-undo"></i></button></li>
+                </ul>
                 <ul class="vertical-centered">
                     <li><button id="button-settings" class="button button--sacnite button--inverted" alt="Settings"><i class="icon-cog"></i></button></li>
                 </ul>
@@ -101,6 +104,7 @@ <h2>Settings</h2>
         <script src="js/tree/Player.js"></script>
         <script src="js/tree/Tree.js"></script>
         <script src="js/tree/Node.js"></script>
+        <script src="js/tree/Change.js"></script>
         <script src="js/main.js"></script>
     </body>
 </html>

html/js/guiutils/MultiAction.js

@@ -52,23 +52,33 @@ GTE.TREE = (function(parentModule) {
     MultiAction.prototype.onClick = function() {
         switch (GTE.MODE) {
             case GTE.MODES.ADD:
+
+                // nodes array to store the nodes being affected by this change
+                var nodes = [];
                 // Find the smallest number S and largest number L of children
                 // for the nodes in the line
                 var smallestAndLargest = this.findSmallestAndLargest();
                 // If S < L, add children to those nodes so that ALL nodes have L children now.
                 if (smallestAndLargest.smallest < smallestAndLargest.largest) {
                     for (var i = 0; i < this.nodesInLine.length; i++) {
                         while (this.nodesInLine[i].children.length < smallestAndLargest.largest) {
-                            this.nodesInLine[i].onClick();
+                            nodes = nodes.concat(this.nodesInLine[i].onClick(true));
                         }
                     }
+                    var change = new GTE.TREE.Change(GTE.MODE);
+                    change.nodes = nodes;
+                    GTE.TREE.CHANGES.push(change);
                 }
                 // If L = 0, add two children to each node on the multiaction line, else
                 // If S = L, add one child to each node on the multiaction line.
                 else if (smallestAndLargest.largest === 0 || smallestAndLargest.smallest === smallestAndLargest.largest) {
                     for (var j = 0; j < this.nodesInLine.length; j++) {
-                        this.nodesInLine[j].onClick();
+                        nodes = nodes.concat(this.nodesInLine[j].onClick(true));
                     }
+
+                    var change = new GTE.TREE.Change(GTE.MODE);
+                    change.nodes = nodes;
+                    GTE.TREE.CHANGES.push(change);
                 }
                 break;
             case GTE.MODES.DELETE:
@@ -77,25 +87,38 @@ GTE.TREE = (function(parentModule) {
                 // of the tree (i.e. even if some nodes are leaves already,
                 // do not delete them). otherwise (that is, ALL nodes in the
                 // multiaction line are leaves), delete all these leaves.
+
                 var allLeaves = true;
+
+                // nodes array to store the nodes being affected by this change
+                var nodes = [];
                 for (var k = 0; k < this.nodesInLine.length; k++) {
                     if (this.nodesInLine[k].children.length > 0) {
                         allLeaves = false;
-                        this.nodesInLine[k].onClick();
+                        nodes = nodes.concat(this.nodesInLine[k].onClick(true));
                     }
                 }
                 if (allLeaves) {
                     for (k = 0; k < this.nodesInLine.length; k++) {
-                        this.nodesInLine[k].onClick();
+                        nodes = nodes.concat(this.nodesInLine[k].onClick(true));
                     }
                 }
+                var change = new GTE.TREE.Change(GTE.MODE);
+                change.nodes = nodes;
+                GTE.TREE.CHANGES.push(change);
                 break;
             case GTE.MODES.PLAYER_ASSIGNMENT:
+
+                // nodes array to store the nodes being affected by this change
+                var nodes = [];
                 // set all nodes on the multiaction line to belong to the
                 // current player (which may be chance)
                 for (var l = 0; l < this.nodesInLine.length; l++) {
-                    this.nodesInLine[l].onClick();
+                    nodes = nodes.concat(this.nodesInLine[l].onClick(true));
                 }
+                var change = new GTE.TREE.Change(GTE.MODE);
+                change.nodes = nodes;
+                GTE.TREE.CHANGES.push(change);
                 break;
             case GTE.MODES.MERGE:
                 // note that this mode button only works if every node belongs

html/js/guiutils/Tools.js

@@ -252,7 +252,15 @@ GTE.UI = (function (parentModule) {
         var playerButton = document.getElementById("button-player-" + playerId);
         playerButton.style.color = colour;
     };
-
+    /**
+    * Undo the previous move
+    */
+    Tools.prototype.undo = function() {
+        if(GTE.TREE.CHANGES.length > 0) {
+            var change = GTE.TREE.CHANGES.pop();
+            change.undo();
+        }
+    };
     // Add class to parent module
     parentModule.Tools = Tools;
 

html/js/main.js

@@ -129,6 +129,11 @@
         return false;
     });
 
+    document.getElementById("button-undo").addEventListener("click", function(){
+        GTE.tools.undo();
+        return false;
+    });
+
     document.getElementById("form-settings").addEventListener("submit", function(e){
         e.preventDefault();
         // Save settings

html/js/structure.js

@@ -7,7 +7,7 @@ var GTE = (function () {
     GTE.UI = {};
     GTE.TREE = {};
     GTE.TREE.UTILS = {};
-
+    GTE.TREE.CHANGES = [];
     GTE.ORIENTATIONS = {
       VERTICAL: 0,
       HORIZONTAL: 1

html/js/tree/Change.js

@@ -0,0 +1,69 @@
+GTE.TREE = (function (parentModule) {
+    "use strict";
+
+    /**
+    * Creates a new instance of change Class.
+    * @class
+    * @param {mode} Represents the mode of the Change.
+    * 0 : Addition of nodes
+    * 1 : Deletion of nodes
+    * 2 : Player Assignment
+    */
+    function Change(mode) {
+        this.mode = mode;
+        this.nodes = [];
+    }
+
+    /**
+    * Calls the corresponding function to revert to previous state
+    * according to the mode of the change.
+    */
+    Change.prototype.undo = function () {
+            if(this.mode === GTE.MODES.ADD)
+                this.deleteNodes();
+            if(this.mode === GTE.MODES.DELETE)
+                this.addNodes();
+            if(this.mode === GTE.MODES.PLAYER_ASSIGNMENT)
+                this.assignPlayer();
+    };
+
+    /**
+    * Deletes the nodes that were added in the previous move
+    */
+    Change.prototype.deleteNodes = function() {
+        for(var i = 0 ; i < this.nodes.length; i++) {
+            this.nodes[i].delete();
+        }
+        GTE.tree.draw();
+    };
+
+    /**
+    * Adds the nodes that were deleted in the previous move
+    */
+    Change.prototype.addNodes = function() {
+        for(var i = 0; i < this.nodes.length; i++) { 
+            this.nodes[i].node.add(this.nodes[i].player,this.nodes[i].parent,this.nodes[i].iset,this.nodes[i].reachedBy);
+        }
+        GTE.tree.draw();
+    };
+
+    /**
+    * Assigns players to their values before the previous move
+    */
+    Change.prototype.assignPlayer = function() {
+        for(var i = 0;i < this.nodes.length; i++) {
+            if(this.nodes[i].oldPlayer != null) {
+                this.nodes[i].node.assignPlayer(this.nodes[i].oldPlayer);
+            }
+            else {
+                this.nodes[i].node.deassignPlayer();
+            }
+        }
+        GTE.tree.draw();
+    };
+
+    // Add class to parent module
+    parentModule.Change = Change;
+
+    return parentModule;
+}(GTE.TREE)); // Add to GTE.TREE sub-module

html/js/tree/Node.js

@@ -132,7 +132,8 @@ GTE.TREE = (function (parentModule) {
     /**
     * Function that defines the behaviour of the node on click
     */
-    Node.prototype.onClick = function () {
+    Node.prototype.onClick = function (multiAction) {
+        multiAction = multiAction || null;
         switch (GTE.MODE) {
             case GTE.MODES.ADD:
                 // As talked in email "the phases of creating a game tree"
@@ -146,29 +147,48 @@ GTE.TREE = (function (parentModule) {
                 //     this.createSingletonISetWithNode();
                 // }
                 if (this.iset === null) {
+                    var nodes = [];
                     if (this.isLeaf()) {
                         // If no children, add two, since one child only doesn't
                         // make sense
-                        GTE.tree.addChildNodeTo(this);
+                        var node = GTE.tree.addChildNodeTo(this);
+                        nodes.push(node);
                     }
-                    GTE.tree.addChildNodeTo(this);
+                    var node = GTE.tree.addChildNodeTo(this);
+                    nodes.push(node);
                     // Tell the tree to redraw itself
                     GTE.tree.draw();
+                    if(multiAction) {
+                        return nodes;
+                    } else {
+                        var change = new GTE.TREE.Change(GTE.MODE);
+                        change.nodes = nodes;
+                        GTE.TREE.CHANGES.push(change);
+                    }
                 } else {
                     this.iset.onClick();
                 }
                 break;
             case GTE.MODES.DELETE:
                 if (this.iset === null) {
+                    var nodes = [];
                     // If it is a leaf, delete itself, if not, delete all children
                     if (this.isLeaf()) {
-                        this.delete();
+                        nodes.push(this.delete());
                     } else {
-                        GTE.tree.deleteChildrenOf(this);
+                        nodes = (GTE.tree.deleteChildrenOf(this));
+                        nodes.push({node : this, player : this.player});
                         this.deassignPlayer();
                     }
                     // Tell the tree to redraw itself
                     GTE.tree.draw();
+                    if (multiAction) {
+                        return nodes;
+                    } else {
+                        var change = new GTE.TREE.Change(GTE.MODE);
+                        change.nodes = nodes;
+                        GTE.TREE.CHANGES.push(change);
+                    }
                 } else {
                     this.iset.onClick();
                 }
@@ -196,9 +216,21 @@ GTE.TREE = (function (parentModule) {
                     if (this.iset !== null) {
                         this.iset.onClick();
                     } else {
-
+                        var nodes = [];
+                        nodes.push({
+                            node : this,
+                            oldPlayer : this.player,
+                            newPlayer: GTE.tree.players[GTE.tools.getActivePlayer()]
+                        });
                         GTE.tree.assignSelectedPlayerToNode(this);
                         GTE.tree.draw();
+                        if (multiAction) {
+                            return nodes;
+                        } else {
+                            var change = new GTE.TREE.Change(GTE.MODE);
+                            change.nodes = nodes;
+                            GTE.TREE.CHANGES.push(change);
+                        }
                     }
                 }
                 break;
@@ -318,13 +350,38 @@ GTE.TREE = (function (parentModule) {
     */
     Node.prototype.delete = function () {
         // Delete all references to current node
+        var node = {node : this, player : this.player, parent : this.parent, iset : this.iset, reachedBy : this.reachedBy};
         this.changeParent(null);
         if (this.iset !== null) {
             this.iset.removeNode(this);
         }
         this.reachedBy = null;
         this.deleted = true;
         GTE.tree.positionsUpdated = false;
+        return node;
+    };
+    Node.prototype.add = function (player,parent,iset,reachedBy) {
+        player = player || null;
+        parent = parent || null;
+        iset = iset || null;
+        reachedBy = reachedBy || null;
+        // Add references to current node
+        if(parent !== null)
+            this.changeParent(parent);
+        if (iset !== null) {
+            this.iset.addNode(this);
+        }
+        if(reachedBy !== null) {
+            this.reachedBy = reachedBy;
+        }
+        if(player==null) {
+            this.deassignPlayer();
+        }
+        else {
+            this.assignPlayer(player);
+        }
+        this.deleted = false;
+        GTE.tree.positionsUpdated = false;
     };
 
     /** Assigns a specific player to current node

html/js/tree/Tree.js

@@ -630,11 +630,13 @@ GTE.TREE = (function (parentModule) {
      * @param {Node} node Node to be deleted
      */
     Tree.prototype.deleteChildrenOf = function (node) {
+        var nodesToDelete = [];
         // Delete everything below every child
-        while(node.children.length !== 0){
-            this.recursiveDeleteChildren(node.children[0]);
+        while(node.children.length !== 0) {
+            nodesToDelete = nodesToDelete.concat(this.recursiveDeleteChildren(node.children[0]));
         }
         this.positionsUpdated = false;
+        return nodesToDelete;
     };
 
     /**
@@ -644,12 +646,14 @@ GTE.TREE = (function (parentModule) {
     * @param {Node} node Starting node
     */
     Tree.prototype.recursiveDeleteChildren = function (node) {
+        var deletedNodes = [];
         if (!node.isLeaf()) {
             for (var i=0; i < node.children.length; i++) {
-                this.recursiveDeleteChildren(node.children[i]);
+                deletedNodes = deletedNodes.concat(this.recursiveDeleteChildren(node.children[i]));
             }
         }
-        node.delete();
+        deletedNodes.push(node.delete());
+        return deletedNodes;
     };
 
     /**
@@ -1317,6 +1321,7 @@ GTE.TREE = (function (parentModule) {
         }
     };
 
+
     // Add class to parent module
     parentModule.Tree = Tree;