From 8b04d04bb35c88b5dbe876cbfe898c88e1570474 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Thu, 12 May 2016 17:40:49 -0400
Subject: [PATCH] make start and stop buttons work

---
 package.json                          |  1 +
 shared/components/Toolbar/Toolbar.jsx | 10 ++++++++--
 shared/containers/App/App.jsx         |  3 ++-
 shared/redux/actions/index.js         | 12 ++++++++++++
 shared/redux/constants/constants.js   |  5 ++++-
 shared/redux/reducers/ide.js          |  8 ++++++++
 6 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index dc2122fb..fdd17705 100644
--- a/package.json
+++ b/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",
diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx
index b6b5ff38..6c6ca618 100644
--- a/shared/components/Toolbar/Toolbar.jsx
+++ b/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 }
diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx
index fab150de..7183921e 100644
--- a/shared/containers/App/App.jsx
+++ b/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} />
diff --git a/shared/redux/actions/index.js b/shared/redux/actions/index.js
index ff780292..a12f43bb 100644
--- a/shared/redux/actions/index.js
+++ b/shared/redux/actions/index.js
@@ -12,4 +12,16 @@ export function toggleSketch() {
 	return {
 		type: ActionTypes.TOGGLE_SKETCH
 	}
+}
+
+export function startSketch() {
+	return {
+		type: ActionTypes.START_SKETCH
+	}
+}
+
+export function stopSketch() {
+	return {
+		type: ActionTypes.STOP_SKETCH
+	}
 }
\ No newline at end of file
diff --git a/shared/redux/constants/constants.js b/shared/redux/constants/constants.js
index 4670f1ff..da4adc22 100644
--- a/shared/redux/constants/constants.js
+++ b/shared/redux/constants/constants.js
@@ -1,2 +1,5 @@
 export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE';
-export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
\ No newline at end of file
+export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
+
+export const START_SKETCH = 'START_SKETCH';
+export const STOP_SKETCH = 'STOP_SKETCH';
\ No newline at end of file
diff --git a/shared/redux/reducers/ide.js b/shared/redux/reducers/ide.js
index 6d95efc1..60e30701 100644
--- a/shared/redux/reducers/ide.js
+++ b/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
 	}