Add slider & CSS importing

Haseeb-Qureshi · Haseeb-Qureshi · commit 5b3823f9b416 · 2016-02-07T08:15:34.000-08:00
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>N Queens Solver</title>
+    <title>N Queens Visualizer</title>
     <link rel="stylesheet" type="text/css" href="src/css/main.css"/>
   </head>
   <body>
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/haseeb-qureshi/n-queens"
+    "url": "https://github.com/haseeb-qureshi/n-queens-visualizer"
   },
   "keywords": [
     "react",
@@ -35,9 +35,12 @@
     "webpack-dev-server": "^1.12.1"
   },
   "dependencies": {
+    "css-loader": "^0.23.1",
+    "flux": "^2.0.0",
+    "object-assign": "^1.0.0",
+    "rc-slider": "^3.3.2",
     "react": "^0.14.0",
     "react-dom": "^0.14.0",
-    "flux": "^2.0.0",
-    "object-assign": "^1.0.0"
+    "style-loader": "^0.13.0"
   }
 }
diff --git a/src/actions/action-creator.js b/src/actions/action-creator.js
@@ -12,14 +12,14 @@ module.exports = {
   updateBoard: function (board) {
     AppDispatcher.dispatch({
       actionType: "UPDATE_BOARD",
-      data: board
+      newBoard: board
     });
   },
 
   swapQueens: function (indices) {
     AppDispatcher.dispatch({
       actionType: "SWAP_QUEENS",
-      data: indices
+      indices: indices
     });
   },
 
@@ -53,7 +53,7 @@ module.exports = {
   failure: function (iterations) {
     AppDispatcher.dispatch({
       actionType: "FAILURE",
-      data: iterations
+      iterations: iterations
     });
   }
 };
diff --git a/src/components/container.js b/src/components/container.js
@@ -1,6 +1,10 @@
+require('rc-slider/assets/index.css');
+
 var React = require('react');
 var Board = require('./board');
 var AlgoSelector = require('./algo-selector');
+var Slider = require('rc-slider');
+var SliderProps = require('./slider');
 
 var Container = React.createClass({
 
@@ -17,6 +21,9 @@ var Container = React.createClass({
       <div className="container">
         <Board />
         <AlgoSelector algos={algos} />
+        <Slider min={SliderProps.min}
+                onChange={SliderProps.onChange}
+                marks={SliderProps.marks} />
       </div>
     )
   }
diff --git a/src/components/slider.js b/src/components/slider.js
@@ -0,0 +1,21 @@
+var ActionCreator = require('../actions/action-creator');
+
+var marks = {
+  1: "1 ms",
+  25: "25 ms",
+  50: "50 ms",
+  75: "75 ms",
+  100: "100 ms"
+};
+
+var min = 1;
+
+function changeSpeed(newSpeed) {
+  ActionCreator.changeSpeed(newSpeed);
+}
+
+module.exports = {
+  onChange: changeSpeed,
+  marks: marks,
+  min: min
+};
diff --git a/src/stores/board-store.js b/src/stores/board-store.js
@@ -62,14 +62,14 @@ BoardStore.dispatchToken = AppDispatcher.register(function (action) {
       break;
     case "UPDATE_BOARD":
       AppDispatcher.waitFor([ScriptStore.dispatchToken]);
-      BoardStore._updateBoard(action.data);
+      BoardStore._updateBoard(action.newBoard);
       break;
     case "SWAP_QUEENS":
       AppDispatcher.waitFor([ScriptStore.dispatchToken]);
-      BoardStore._swapQueens(action.data);
+      BoardStore._swapQueens(action.indices);
       break;
     case "FAILURE":
-      console.log("failed after " + action.data + " iterations");
+      alert("failed after " + action.iterations + " iterations");
       break;
     case "RUN_SCRIPT":
       BoardStore._resetBoard();
diff --git a/src/stores/script-store.js b/src/stores/script-store.js
@@ -47,6 +47,9 @@ ScriptStore.dispatchToken = AppDispatcher.register(function (action) {
       ScriptStore._runScript(action.scriptName);
       ScriptStore.emitChange();
       break;
+    case "CHANGE_SPEED":
+      console.log(action.newSpeed);
+      break;
     default:
   }
 });
diff --git a/webpack.config.js b/webpack.config.js
@@ -21,6 +21,9 @@ module.exports = {
       test: /\.js$/,
       loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'],
       include: path.join(__dirname, 'src')
+    }, {
+      test: /\.css$/, // Only .css files
+      loader: 'style!css' // Run both loaders
     }]
   }
 };
