Shuffles array with array-shuffle

decadentjs · Dec 28, 2015 · 9be8beb · 9be8beb
1 parent 3fc04a5
commit 9be8beb
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -21,11 +21,13 @@
       }
 
       .row h1, .sorter {
-        width: 300px;
+        width: 120px;
+        font-size: 14px;
       }
 
       .row h2, .row h1:first-child {
-        width: 200px;
+        font-size: 14px;
+        width: 100px;
       }
 
       .sorter {

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-starter-hmr",
+  "name": "sorting-algorithms",
   "browserify": {
     "transform": [
       [
@@ -20,6 +20,7 @@
     "www": "ecstatic -p 8000 ."
   },
   "dependencies": {
+    "array-shuffle": "^1.0.0",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.1.18",
     "babelify": "^7.2.0",
@@ -34,5 +35,18 @@
     "uglifyjs": "^2.4.10",
     "watchify": "^3.6.1"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "description": "A React-based visualization of different sorting algorithms for educational purposes, based on the bare-bones [react](https://facebook.github.io/react/) starter using [babelify](https://npmjs.com/package/babelify) for es6 and jsx under [browserify](http://browserify.org)/[watchify](https://npmjs.com/package/watchify) with hot module replacement from [browserify-hmr](https://npmjs.com/package/browserify-hmr) and [npm run scripts](http://substack.net/task_automation_with_npm_run)",
+  "version": "1.0.0",
+  "main": "main.js",
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/decadentjs/sorting-algorithms.git"
+  },
+  "author": "Claudio Procida",
+  "bugs": {
+    "url": "https://github.com/decadentjs/sorting-algorithms/issues"
+  },
+  "homepage": "https://github.com/decadentjs/sorting-algorithms#readme"
 }
diff --git a/src/app.js b/src/app.js
@@ -1,6 +1,10 @@
 var React = require('react');
+var arrayShuffle = require('array-shuffle');
+
 import Sorter from './sorter.js';
 
+const WIDTH = 100;
+
 function swap(arr, a, b) {
   var t;
   t = arr[a];
@@ -17,12 +21,13 @@ class App extends React.Component {
   getState () {
     var i, random_buf = [];
     for (i = 0; i < 20; i++) {
-      random_buf.push(250 * Math.random());
+      random_buf.push(WIDTH / 20 * (i + 1));
     }
+    random_buf = arrayShuffle(random_buf);
 
     var partially_ordered_buf = [];
     for (i = 0; i < 20; i++) {
-      partially_ordered_buf.push(250 / 20 * (i + 1));
+      partially_ordered_buf.push(WIDTH / 20 * (i + 1));
     }
     swap(partially_ordered_buf, 2, 4);
     swap(partially_ordered_buf, 2, 3);
@@ -34,12 +39,12 @@ class App extends React.Component {
 
     var reversed_buf = [];
     for (i = 0; i < 20; i++) {
-      reversed_buf.push(250 / 20 * (20 - i));
+      reversed_buf.push(WIDTH / 20 * (20 - i));
     }
 
     var few_unique_buf = [];
     for (i = 0; i < 20; i++) {
-      few_unique_buf.push(250 * Math.ceil(4 * Math.random()) / 4);
+      few_unique_buf.push(WIDTH * Math.ceil(4 * Math.random()) / 4);
     }
 
     return {
@@ -64,32 +69,32 @@ class App extends React.Component {
       <div>
         <div className="row">
           <h1></h1>
-          <h1>Selection Sort</h1>
           <h1>Insertion Sort</h1>
+          <h1>Selection 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="selection-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="selection-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="selection-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="selection-sort" list={this.state.few_unique_buf}/>
           <Sorter type="bubble-sort"    list={this.state.few_unique_buf}/>
         </div>
       </div>