Work on layout and controls.

css/style.css

@@ -1,20 +1,3 @@
-/* https://color.adobe.com/create/color-wheel/?base=2&rule=Monochromatic&selected=4&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.17972473935894973,0.30406031865629857,0.5,0.6594494787178995,0.7916562131964631,1,0.35944947871789945,0.6081206373125971,1,0.0014128559043085631,0.1949717379336841,0.5,0.28755958297431955,0.48649650985007775,0.8&swatchOrder=0,1,2,3,4 */
-
-/*@font-face {
-    font-family: 'thin';
-    src: url('res/distproth-webfont.eot');
-    src: url('res/distproth-webfont.eot?#iefix') format('embedded-opentype'),
-         url('res/distproth-webfont.woff2') format('woff2'),
-         url('res/distproth-webfont.woff') format('woff'),
-         url('res/distproth-webfont.ttf') format('truetype'),
-         url('res/distproth-webfont.svg#district_prothin') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
-}
-
-*/
-
 .sorter {
     background:#f4f4f4;
     border:1px solid #bbb;
@@ -30,7 +13,7 @@
     position:absolute;
     right:10px;
     top:10px;
-    width:160px;
+    width:170px;
 }
 
 .sorter-svg {
@@ -40,7 +23,7 @@
     left:10px;
     position:absolute;
     top:10px;
-    width:570px;
+    width:559px;
 }
 
 .sorter-svg .marker {
@@ -88,7 +71,7 @@
 }
 
 .controls-container button {
-    border:1px solid #fff;
+    border:1px solid #d4d4d4;
     background:#d4d4d4;
     color:#2E4E7F;
     cursor:pointer;
@@ -107,6 +90,12 @@
     border:1px solid #2E4E7F;
 }
 
+.controls-container button[disabled] {
+    border:1px solid #d4d4d4;
+    cursor:not-allowed;
+    opacity:0.2;
+}
+
 .controls-container button:focus {
     outline:0;
 }

index.html

@@ -70,7 +70,7 @@
     data-worst-memory='0 (in place)'>
     </div>
 
-    <h2>insertion sort discussion</h2>
+    <h2>Insertion sort discussion</h2>
     how is this different from bubble and selection. <br>
     swap. highlight. fade.
     <div class="sorter"
@@ -84,7 +84,7 @@
     ></div>
 
 
-    <h2>bubble sort discussion</h2>
+    <h2>Bubble sort discussion</h2>
     how is this different from insertion and selection sorts. <br>
     talk about turtles and rabbits, because search loops from beginning each time. Every number out of place means a new pass must be done.
     <div class="sorter"

js/itemgroup.js

@@ -9,6 +9,8 @@ var Itemgroup = {
         var g;
         var all = [];
 
+        group.selectAll('g').remove();
+
         // Items start with no background by default.
         for (var i = 0; i < n; i++) {
             g = group.append('g')

js/visualizer-dom.js

@@ -68,8 +68,10 @@ Visualizer.prototype.initRange = function() {
     };
 
     var rangeChange = function(event) {
+        this.paused = true;
         this.actions = this.sorter.generate(event.target.value);
         this.actionIndex = 0;
+        this.updateButtons();
     };
 
     var container = document.createElement('div');
@@ -83,7 +85,7 @@ Visualizer.prototype.initRange = function() {
     range.setAttribute('type', 'range');
     range.setAttribute('value', 10);
     range.setAttribute('min', 10);
-    range.setAttribute('max', 40);
+    range.setAttribute('max', 30);
     range.addEventListener('change', rangeChange.bind(this));
     range.addEventListener('input', rangeInput.bind(null, msg));
 
@@ -91,7 +93,27 @@ Visualizer.prototype.initRange = function() {
     container.appendChild(msg);
 
     return container;
-},
+};
+
+/**
+ *
+ */
+Visualizer.prototype.updateButtons = function() {
+    if (this.paused === true) {
+        this.play.className = 'fa fa-play';
+    }
+    else {
+        this.play.className = 'fa fa-pause';
+    }
+
+    this.play.disabled = false;
+    this.forward.disabled = false;
+
+    if (this.actionIndex >= (this.actions.length - 1)) {
+        this.play.disabled = true;
+        this.forward.disabled = true;
+    }
+};
 
 /**
  *
@@ -99,21 +121,12 @@ Visualizer.prototype.initRange = function() {
 Visualizer.prototype.initControls = function() {
     var _this = this;
 
-    var updatePlayPause = function(paused) {
-        if (paused === true) {
-            play.className = 'fa fa-play';
-        }
-        else {
-            play.className = 'fa fa-pause';
-        }
-    };
-
     var playclick = function() {
         this.paused = !this.paused;
-        updatePlayPause(this.paused);
+        this.updateButtons();
 
         if (this.actionIndex === this.actions.length) {
-            this.reset();
+            this.actionIndex = 0;
             this.paused = false;
             this.go();
         }
@@ -129,20 +142,21 @@ Visualizer.prototype.initControls = function() {
     };
 
     var restartclick = function() {
+        this.actionIndex = 0;
         this.paused = true;
-        updatePlayPause(this.paused);
-        this.reset();
+        this.updateButtons();
+        this.go();
     };
 
-    var play = document.createElement('button');
-    play.className = 'fa fa-play';
-    play.title = 'Play'
-    play.addEventListener('click', playclick.bind(this));
+    this.play = document.createElement('button');
+    this.play.className = 'fa fa-play';
+    this.play.title = 'Play'
+    this.play.addEventListener('click', playclick.bind(this));
 
-    var forward = document.createElement('button');
-    forward.className = 'fa fa-step-forward'
-    forward.title = 'Step Forward';
-    forward.addEventListener('click', forwardclick.bind(this));
+    this.forward = document.createElement('button');
+    this.forward.className = 'fa fa-step-forward'
+    this.forward.title = 'Step Forward';
+    this.forward.addEventListener('click', forwardclick.bind(this));
 
     var reset = document.createElement('button');
     reset.className = 'fa fa-undo';
@@ -153,8 +167,8 @@ Visualizer.prototype.initControls = function() {
     container.className = 'controls-container';
 
     container.appendChild(reset);
-    container.appendChild(play);
-    container.appendChild(forward);
+    container.appendChild(this.play);
+    container.appendChild(this.forward);
 
     return container;
 };

js/visualizer.js

@@ -59,10 +59,11 @@ function Visualizer(parent) {
     }
 
     this.actions = this.sorter.generate(10);
+    this.go();
 };
 
 // Static properties (global, mutable)
-Visualizer.spacerW  = 5;
+Visualizer.spacerW  = 4;
 Visualizer.itemW    = 14;
 Visualizer.itemH    = 50;
 Visualizer.padding  = 10;
@@ -81,6 +82,11 @@ Visualizer.prototype.go = function() {
         return;
     }
 
+    if (this.actionIndex >= (this.actions.length - 1)) {
+        this.paused = true;
+        this.updateButtons();
+    }
+
     var obj = this.actions[this.actionIndex];
     var action = new Array();
 
@@ -96,13 +102,11 @@ Visualizer.prototype.go = function() {
 
     action[0].apply(this, args);
 
-    // TODO add tabs for best/worst cases
     // TODO add links to stats
-    // TODO fix init slider and match to width
     // TODO heap sort
-    // TODO extra memory
     // TODO disable next button if no further actions and during action
-    // TODO source code tab
+    // TODO source code link and add all action management to .foo object in class
+    // TODO change pause/play state on slider change
 
     // NOTE functional programming discussion
     // NOTE interesting (anti?)pattern here.