make start and stop buttons work

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "babel-core": "^6.8.0",
+    "classnames": "^2.2.5",
     "codemirror": "^5.14.2",
     "express": "^4.13.4",
     "react": "^15.0.2",

shared/components/Toolbar/Toolbar.jsx

@@ -4,17 +4,23 @@ var Isvg = require('react-inlinesvg');
 var playUrl = require('../../../images/play.svg');
 var logoUrl = require('../../../images/p5js-logo.svg');
 var stopUrl = require('../../../images/stop.svg');
+var classNames = require('classnames');
 
 class Toolbar extends React.Component {
 	render() {
+		let playButtonClass = classNames({
+			"toolbar__play-button": true,
+			"playing": this.props.isPlaying
+		});
+
 		return (
 			<div className="toolbar">
 				<img className="toolbar__logo" src={logoUrl}/>
-				<div className="toolbar__play-button" onClick={this.props.toggleSketch}>
+				<div className={playButtonClass} onClick={this.props.startSketch}>
 					<Isvg src={playUrl} alt="Play Sketch" />
 				</div>
 				{ this.props.isPlaying ? 
-					<div className="toolbar__stop-button">
+					<div className="toolbar__stop-button" onClick={this.props.stopSketch}>
 						<Isvg src={stopUrl} alt="Stop Sketch" />
 					</div> 
 				: null }

shared/containers/App/App.jsx

@@ -14,7 +14,8 @@ class App extends React.Component {
 				<Toolbar 
 					className="toolbar"
 					isPlaying={this.props.ide.isPlaying}
-					toggleSketch={this.props.toggleSketch} />
+					startSketch={this.props.startSketch} 
+					stopSketch={this.props.stopSketch}/>
 				<Editor 
 					content={this.props.file.content}
 					updateFile={this.props.updateFile} />

shared/redux/actions/index.js

@@ -13,3 +13,15 @@ export function toggleSketch() {
 		type: ActionTypes.TOGGLE_SKETCH
 	}
 }
+
+export function startSketch() {
+	return {
+		type: ActionTypes.START_SKETCH
+	}
+}
+
+export function stopSketch() {
+	return {
+		type: ActionTypes.STOP_SKETCH
+	}
+}

shared/redux/constants/constants.js

@@ -1,2 +1,5 @@
 export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE';
 export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
+
+export const START_SKETCH = 'START_SKETCH';
+export const STOP_SKETCH = 'STOP_SKETCH';

shared/redux/reducers/ide.js

@@ -10,6 +10,14 @@ const ide = (state = initialState, action) => {
 			return {
 				isPlaying: !state.isPlaying
 			}
+		case ActionTypes.START_SKETCH:
+			return {
+				isPlaying: true
+			}
+		case ActionTypes.STOP_SKETCH: 
+			return {
+				isPlaying: false
+			}
 		default:
 			return state
 	}