Instruction steeping built.

index.html

@@ -105,6 +105,7 @@
             margin:0 5px 10px 0;
             text-align:center;
             transition:background 0.2s ease, border 0.2s ease;
+            vertical-align: top;
             width:30px;
         }
 

js/quicksort.js

@@ -20,9 +20,9 @@ QuickSort.prototype.instruct = function() {
  */
 QuickSort.prototype.sort = function(arr, start, end) {
     if (end - start <= 0) {
-        // this.instruct('highlight', true, end)
-        //     .instruct('message1', true, 'Start: ' + start)
-        //     .instruct('message2', true, 'End: ' + end)
+        // this.instruct('highlight', 500, end)
+        //     .instruct('message1', 500, 'Start: ' + start)
+        //     .instruct('message2', 500, 'End: ' + end)
         return arr;
     }
 
@@ -34,29 +34,29 @@ QuickSort.prototype.sort = function(arr, start, end) {
     var tmp;
 
     this//.instruct('initSection', left, right)
-        .instruct('marker1', true, left, 'L')
-        .instruct('marker2', true, right, 'R');
+        .instruct('marker1', 500, left, 'L')
+        .instruct('marker2', 500, right, 'R');
     //     .instruct('unhighlight')
-    //     .instruct('highlight', true, pivot)
-    //     .instruct('message3', false, 'Pivot value: ' + pivotval);
+    //     .instruct('highlight', 500, pivot)
+    //     .instruct('message3', 500, 'Pivot value: ' + pivotval);
 
     while (left <= right) {
         while (arr[left].value < pivotval) {
             left++;
 
             this.comparisons++;
-            this.instruct('marker1', true, left)
-                .instruct('message1', false, 'Left: ' + left)
-                .instruct('stats1', false, 'Comparisons: ' + this.comparisons)
+            this.instruct('marker1', 500, left)
+                .instruct('message1', 500, 'Left: ' + left)
+                .instruct('stats1', 500, 'Comparisons: ' + this.comparisons)
         }
 
         while (arr[right].value > pivotval) {
             right--;
 
             this.comparisons++;
-            this.instruct('marker2', true, right)
-                .instruct('message2', false, 'Right: ' + right)
-                .instruct('stats1', false, 'Comparisons: ' + this.comparisons)
+            this.instruct('marker2', 500, right)
+                .instruct('message2', 500, 'Right: ' + right)
+                .instruct('stats1', 500, 'Comparisons: ' + this.comparisons)
         }
 
         if (left <= right) {
@@ -69,11 +69,11 @@ QuickSort.prototype.sort = function(arr, start, end) {
 
             this.swaps++;
             this//.instruct('swap', left, right)
-                .instruct('stats2', false, 'Swaps: ' + this.swaps)
-                .instruct('message1', false, 'Left: ' + left)
-                .instruct('message2', false, 'Right: ' + right)
-                .instruct('marker1', true, left)
-                .instruct('marker2', true, right);
+                .instruct('stats2', 500, 'Swaps: ' + this.swaps)
+                .instruct('message1', 500, 'Left: ' + left)
+                .instruct('message2', 500, 'Right: ' + right)
+                .instruct('marker1', 500, left)
+                .instruct('marker2', 500, right);
         }
     }
 

js/visualizer-inits.js

@@ -14,7 +14,7 @@ Visualizer.prototype.initItems = function(n) {
     }
 
     // Items
-    this.groups = this.svg.selectAll('g').data(shuffled).enter().append('g')
+    this.groups = this.svg.selectAll('g').data(shuffled).enter().insert('g')
         .attr('transform', `translate(0, ${Visualizer.itemY})`);
 
     this.groups.append('rect')
@@ -103,7 +103,7 @@ Visualizer.prototype.initRange = function() {
     };
 
     var rangeChange = function(event) {
-        this.init.items(event.target.value);
+        this.initItems(event.target.value);
     };
 
 
@@ -116,8 +116,8 @@ Visualizer.prototype.initRange = function() {
 
     var range = document.createElement('input');
     range.setAttribute('type', 'range');
-    range.setAttribute('value', 40);
-    range.setAttribute('min', 5);
+    range.setAttribute('value', 10);
+    range.setAttribute('min', 10);
     range.setAttribute('max', 80);
     range.addEventListener('change', rangeChange.bind(this));
     range.addEventListener('input', rangeInput.bind(null, msg));
@@ -132,33 +132,64 @@ Visualizer.prototype.initRange = function() {
  *
  */
 Visualizer.prototype.initControls = function() {
+    var updatePlayPause = function(paused) {
+        if (paused === true) {
+            play.className = 'fa fa-pause';
+        }
+        else {
+            play.className = 'fa fa-play';
+        }
+    };
+
+    var playclick = function() {
+        this.paused = !this.paused;
+        updatePlayPause(this.paused);
+        this.followInstruction(this.instruction + 1);
+    };
+
+    var backclick = function() {
+        this.paused = true;
+        this.followInstruction(this.instruction - 1);
+    };
+
+    var forwardclick = function() {
+        this.paused = true;
+        this.followInstruction(this.instruction + 1);
+    };
+
+    var restartclick = function() {
+        this.paused = false;
+        updatePlayPause(this.paused);
+        this.followInstruction(0);
+    };
+
     var play = document.createElement('button');
     play.className = 'fa fa-play';
     play.title = 'Play'
-    play.addEventListener('click', onclick);
+    play.addEventListener('click', playclick.bind(this));
 
     var back = document.createElement('button');
     back.className = 'fa fa-step-backward';
     back.title = 'Step Backward';
-    back.addEventListener('click', onclick);
+    back.addEventListener('click', backclick.bind(this));
 
     var forward = document.createElement('button');
     forward.className = 'fa fa-step-forward'
     forward.title = 'Step Forward';
-    forward.addEventListener('click', onclick);
+    forward.addEventListener('click', forwardclick.bind(this));
 
     var reset = document.createElement('button');
     reset.className = 'fa fa-fast-backward';
     reset.title = 'Restart'
-    reset.addEventListener('click', onclick);
+    reset.addEventListener('click', restartclick.bind(this));
 
     var stat1 = document.createElement('div');
     stat1.className = 'stat';
-    stat1.innerHTML = 'Swaps: 999';
+    stat1.innerHTML = 'Comparisons: 999';
 
     var stat2 = document.createElement('div');
     stat2.className = 'stat';
-    stat2.innerHTML = 'Comparisons: 999';
+    stat2.innerHTML = 'Swaps: 999';
 
     var container = document.createElement('div');
     container.className = 'controls-container';

js/visualizer.js

@@ -61,6 +61,9 @@ function Visualizer(parent) {
     // this.currentInstruction = 0;
 
     this.initItems(10);
+
+    this.instruction = 0;
+    this.paused = false;
 };
 
 // Public static properties (mutable)
@@ -77,6 +80,8 @@ Visualizer.prototype.followInstruction = function(index) {
         return;
     }
 
+    this.instruction = index;
+
     var i = this.sorter.instructions[index];
     console.log(i);
 
@@ -84,11 +89,9 @@ Visualizer.prototype.followInstruction = function(index) {
     if (typeof this[i[0]] === 'function') {
         this[i[0]](i);
 
-        if (i[1] === true) {
-            setTimeout(this.followInstruction.bind(this, index + 1), 400);
-        }
-        else {
-           this.followInstruction(index + 1);
+        if (this.paused === false) {
+            var delay = i[1];
+            setTimeout(this.followInstruction.bind(this, index + 1), delay);
         }
     }
     // TODO document this