Merge branch 'gh-pages' of https://github.com/parkjs814/AlgorithmVisualizer into gh-pages

ES6.md

-# ES6 Project
-
-## Build System
-
-Our project uses [gulp](http://gulpjs.com/) to:
-
-- combine all individual modules into a single file
-- transpile ES6 code to ES5 with [babel.js](http://babeljs.io/)
-- minimize JS and CSS code
-- generate source maps
-- add vendor prefixer to the css
-- provide a server with live-reload
-
-## Installation
-
-```bash
-# install gulp globally so you can run it from the command line
-npm install -g gulp-cli
-
-# install all dependencies
-npm install
-
-# run gulp to build all the files start the livereload server on http://localhost:8080
-gulp
-```
-
-## Changes Summary
-
-*Note:* Although no linter is added as of yet, the code closely follows the conventions from [Airbnb's Javascript style guide](https://github.com/airbnb/javascript)
-
-### [js/index.js](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js)
-
-The app entry point is [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js). 
-It performs the initial application setup (loads the app when jQuery loads, loads the initial data from the server etc.)
-
-### [js/app/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/app)
-
-The main application object is [`js/app/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/app/index.js), which holds the necessary global application state flags and application level methods.
-It is [extended once the app loads in `index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js#L30) with  the contents of [`app/constructor`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/app/constructor.js) and [`app/cache`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/app/cache.js).
-This means that from here on now, any file that does `require(/* path to js/app */)` is getting that populated object since calls to `require` are cached.
-
-### [js/dom/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/dom)
-
-The `js/dom` folder holds all the code interacting with the DOM (go figure 😜). 
-The code is split into:
-
-- "static" methods that are used everywhere (such as adding algorithm info to the DOM) and,
-- setup code which is called within the `app/constructor`, after the DOM is ready, to initialize all the elements with their contents and listeners.
-
-### [js/editor/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/editor)
-
-The `js/editor` folder holds the code to create and execute code in the ace editor.
-
-### [js/module/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/module)
-
-The `js/module` folder holds all the tracers and their variations and it is essentially the same as [`js/module`](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/module) on the `gh-pages` branch. 
-The only changes are present in `js/tracer.js` where the code is converted to ES6. 
-All the modules are exported together and then "required" inside the entry point [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js) where they are [attached to the global `window` object](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js#L33) so [`eval` can use them](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/editor/executor.js#L7) when executing code in the code editor.
-
-### [js/server/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/server)
-
-The `js/server` folder holds all the code to load data from the server and utilizes promises from [RSVP.js](https://github.com/tildeio/rsvp.js/). 
-In [`js/server/ajax`](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/server/ajax) are some helper methods to make requesting from the server a little easier. 
-The main method is [`js/server/ajax/request.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/server/ajax/request.js) that is used by all other methods to call `$.ajax` with certain options and set/reset the global `isLoading` flag for every request.
-
-### [js/trace_manager/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/server/ajax)
-
-The `js/tracer_manager` folder holds the same logic as the [original `tracer_manager`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/tracer_manager.js) from `gh-pages` branch converted to ES6 and split into modules based on functionality.
-
-### [js/utils/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/utils)
-
-The `utils` folder holds a few helper methods that are used everywhere such as building the strings for algorithm and file directories.

js/module/array2d.js

@@ -136,7 +136,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
   processStep: function (step, options) {
     switch (step.type) {
       case 'notify':
-        if (step.v === 0 || step.v) {
+        if (step.v !== undefined) {
           var $row = this.$table.find('.mtbl-row').eq(step.x);
           var $col = $row.find('.mtbl-col').eq(step.y);
           $col.text(refineByType(step.v));

js/module/chart.js

@@ -75,7 +75,7 @@ ChartTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
   processStep: function (step, options) {
     switch (step.type) {
       case 'notify':
-        if (step.v) {
+        if (step.v !== undefined) {
           this.chart.config.data.datasets[0].data[step.s] = step.v;
           this.chart.config.data.labels[step.s] = step.v.toString();
         }

js/tracer_manager/manager.js

@@ -2,7 +2,7 @@
 
 const stepLimit = 1e6;
 
-const TracerManager = function() {
+const TracerManager = function () {
   this.timer = null;
   this.pause = false;
   this.capsules = [];
@@ -51,12 +51,13 @@ TracerManager.prototype = {
       selectedCapsule = this.add(newTracer);
     }
 
-    console.log(newTracer);
     selectedCapsule.defaultName = `${newTracer.name} ${count}`;
+    selectedCapsule.order = this.order++;
     return selectedCapsule;
   },
 
   deallocateAll() {
+    this.order = 0;
     this.reset();
     $.each(this.capsules, (i, capsule) => {
       capsule.allocated = false;
@@ -92,7 +93,7 @@ TracerManager.prototype = {
     $.each(capsules, (i, capsule) => {
       let width = 100;
       let height = (100 / capsules.length);
-      let top = height * i;
+      let top = height * capsule.order;
 
       capsule.$container.css({
         top: `${top}%`,