Adds nearly sorted, reversed and few uniques

decadentjs · Dec 27, 2015 · 3fc04a5 · 3fc04a5
1 parent 852d05a
commit 3fc04a5
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -20,6 +20,18 @@
         margin: 2px 0 2px 8px;
       }
 
+      .row h1, .sorter {
+        width: 300px;
+      }
+
+      .row h2, .row h1:first-child {
+        width: 200px;
+      }
+
+      .sorter {
+        height: 100px;
+      }
+
       .sorted {
         background-color: #000;
       }
@@ -44,6 +56,10 @@
       .target {
         /*background-color: #00f;*/
       }
+
+      .row {
+        display: flex;
+      }
     </style>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "babelify": "^7.2.0",
     "browserify": "^12.0.1",
     "browserify-hmr": "~0.3.1",
+    "classnames": "^2.2.1",
     "ecstatic": "~0.8.0",
     "mkdirp": "^0.5.1",
     "react": "~0.14.3",

diff --git a/src/app.js b/src/app.js
@@ -1,21 +1,97 @@
 var React = require('react');
 import Sorter from './sorter.js';
 
+function swap(arr, a, b) {
+  var t;
+  t = arr[a];
+  arr[a] = arr[b];
+  arr[b] = t;
+}
+
 class App extends React.Component {
   constructor (props) {
     super(props);
+    this.state = this.getState();
   }
 
-  render () {
-    var buf = [];
-    for (var i = 0; i < 20; i++) {
-      buf.push(250 * Math.random());
+  getState () {
+    var i, random_buf = [];
+    for (i = 0; i < 20; i++) {
+      random_buf.push(250 * Math.random());
+    }
+
+    var partially_ordered_buf = [];
+    for (i = 0; i < 20; i++) {
+      partially_ordered_buf.push(250 / 20 * (i + 1));
+    }
+    swap(partially_ordered_buf, 2, 4);
+    swap(partially_ordered_buf, 2, 3);
+    swap(partially_ordered_buf, 7, 8);
+    swap(partially_ordered_buf, 11, 12);
+    swap(partially_ordered_buf, 13, 15);
+    swap(partially_ordered_buf, 13, 14);
+    swap(partially_ordered_buf, 16, 18);
+
+    var reversed_buf = [];
+    for (i = 0; i < 20; i++) {
+      reversed_buf.push(250 / 20 * (20 - i));
+    }
+
+    var few_unique_buf = [];
+    for (i = 0; i < 20; i++) {
+      few_unique_buf.push(250 * Math.ceil(4 * Math.random()) / 4);
     }
+
+    return {
+      random_buf: random_buf,
+      partially_ordered_buf: partially_ordered_buf,
+      reversed_buf: reversed_buf,
+      few_unique_buf: few_unique_buf
+    };
+  }
+
+  componentDidMount () {
+    this.reset();
+  }
+
+  reset () {
+    this.setState(this.getState());
+  }
+
+  render () {
+
     return (
       <div>
-        <Sorter type="selection-sort" list={buf}/>
-        <Sorter type="insertion-sort" list={buf}/>
-        <Sorter type="bubble-sort"    list={buf}/>
+        <div className="row">
+          <h1></h1>
+          <h1>Selection Sort</h1>
+          <h1>Insertion Sort</h1>
+          <h1>Bubble Sort</h1>
+        </div>
+        <div className="row">
+          <h2>Random</h2>
+          <Sorter type="selection-sort" list={this.state.random_buf}/>
+          <Sorter type="insertion-sort" list={this.state.random_buf}/>
+          <Sorter type="bubble-sort"    list={this.state.random_buf}/>
+        </div>
+        <div className="row">
+          <h2>Nearly Sorted</h2>
+          <Sorter type="selection-sort" list={this.state.partially_ordered_buf}/>
+          <Sorter type="insertion-sort" list={this.state.partially_ordered_buf}/>
+          <Sorter type="bubble-sort"    list={this.state.partially_ordered_buf}/>
+        </div>
+        <div className="row">
+          <h2>Reversed</h2>
+          <Sorter type="selection-sort" list={this.state.reversed_buf}/>
+          <Sorter type="insertion-sort" list={this.state.reversed_buf}/>
+          <Sorter type="bubble-sort"    list={this.state.reversed_buf}/>
+        </div>
+        <div className="row">
+          <h2>Few Unique</h2>
+          <Sorter type="selection-sort" list={this.state.few_unique_buf}/>
+          <Sorter type="insertion-sort" list={this.state.few_unique_buf}/>
+          <Sorter type="bubble-sort"    list={this.state.few_unique_buf}/>
+        </div>
       </div>
     );
   }

diff --git a/src/sortable.js b/src/sortable.js
@@ -1,20 +1,14 @@
 var React = require('react');
+var classnames = require('classnames');
 
 class Sortable extends React.Component {
   render () {
-    var c = 'sortable';
-    if (this.props.sorted) {
-      c += ' sorted';
-    }
-    if (this.props.current) {
-      c += ' current';
-    }
-    if (this.props.target) {
-      c += ' target';
-    }
-    if (this.props.selected) {
-      c += ' selected';
-    }
+    var c = classnames('sortable', {
+      'sorted': this.props.sorted,
+      'current': this.props.current,
+      'target': this.props.target,
+      'selected': this.props.selected
+    });
     return (
       <div className={c}
         style={{width: this.props.w + 'px'}}></div>

diff --git a/src/sorter.js b/src/sorter.js
@@ -1,4 +1,5 @@
 var React = require('react');
+var classnames = require('classnames');
 import selection_sort from './selection_sort.js';
 import insertion_sort from './insertion_sort.js';
 import bubble_sort from './bubble_sort.js';
@@ -37,25 +38,12 @@ class Sorter extends React.Component {
     }, TIMEOUT);
   }
 
-  getHeader () {
-    switch (this.props.type) {
-      case 'selection-sort':
-        return <h1>Selection Sort</h1>;
-      case 'insertion-sort':
-        return <h1>Insertion Sort</h1>;
-      case 'bubble-sort':
-        return <h1>Bubble Sort</h1>;
-    }
-  }
-
   render () {
-    var c = '';
-    if (this.state.complete) {
-      c = 'complete';
-    }
+    var c = classnames('sorter', {
+      'complete': this.state.complete
+    });
     return (
       <div className={c}>
-        {this.getHeader()}
         {this.state.list.map((w, i) => <Sortable
           w={w}
           sorted={this.state.resume && i < this.state.resume.i || this.state.complete}