add button tp play text output and sketch

client/constants.js

@@ -4,6 +4,9 @@ export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
 
+export const START_TEXT_OUTPUT = 'START_TEXT_OUTPUT';
+export const STOP_TEXT_OUTPUT = 'STOP_TEXT_OUTPUT';
+
 export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
 export const SET_FONT_SIZE = 'SET_FONT_SIZE';

client/modules/IDE/actions/ide.js

@@ -18,6 +18,18 @@ export function stopSketch() {
   };
 }
 
+export function startTextOutput() {
+  return {
+    type: ActionTypes.START_TEXT_OUTPUT
+  };
+}
+
+export function stopTextOutput() {
+  return {
+    type: ActionTypes.STOP_TEXT_OUTPUT
+  };
+}
+
 export function setSelectedFile(fileId) {
   return {
     type: ActionTypes.SET_SELECTED_FILE,

client/modules/IDE/components/PreviewFrame.js

@@ -128,7 +128,7 @@ class PreviewFrame extends React.Component {
       htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);
     });
 
-    if (this.props.textOutput) {
+    if (this.props.textOutput||this.props.isTextOutputPlaying) {
       const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
       const headRegex = new RegExp('head', 'i');
       let htmlHeadContents = htmlHead[0].split(headRegex)[1];
@@ -181,6 +181,7 @@ class PreviewFrame extends React.Component {
 
 PreviewFrame.propTypes = {
   isPlaying: PropTypes.bool.isRequired,
+  isTextOutputPlaying: PropTypes.bool.isRequired,
   textOutput: PropTypes.bool.isRequired,
   head: PropTypes.object.isRequired,
   content: PropTypes.string.isRequired,

client/modules/IDE/components/Toolbar.js

@@ -26,8 +26,18 @@ function Toolbar(props) {
       <button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
         <InlineSVG src={playUrl} alt="Play Sketch" />
       </button>
-
-      <button className={stopButtonClass} onClick={props.stopSketch} aria-label="stop sketch">
+      <button
+        className={playButtonClass}
+        onClick={() => { props.startTextOutput(); props.startSketch(); }}
+        aria-label="play sketch with output text"
+      >
+        <InlineSVG src={playUrl} alt="Play Sketch with output text" />
+      </button>
+      <button
+        className={stopButtonClass}
+        onClick={() => { props.stopTextOutput(); props.stopSketch(); }}
+        aria-label="stop sketch"
+      >
         <InlineSVG src={stopUrl} alt="Stop Sketch" />
       </button>
       <div className="toolbar__project-name-container">
@@ -64,6 +74,8 @@ Toolbar.propTypes = {
   preferencesIsVisible: PropTypes.bool.isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
+  startTextOutput: PropTypes.func.isRequired,
+  stopTextOutput: PropTypes.func.isRequired,
   setProjectName: PropTypes.func.isRequired,
   projectName: PropTypes.string.isRequired,
   openPreferences: PropTypes.func.isRequired,

client/modules/IDE/pages/IDEView.js

@@ -104,10 +104,13 @@ class IDEView extends React.Component {
           isPlaying={this.props.ide.isPlaying}
           startSketch={this.props.startSketch}
           stopSketch={this.props.stopSketch}
+          startTextOutput={this.props.startTextOutput}
+          stopTextOutput={this.props.stopTextOutput}
           projectName={this.props.project.name}
           setProjectName={this.props.setProjectName}
           openPreferences={this.props.openPreferences}
           preferencesIsVisible={this.props.ide.preferencesIsVisible}
+          setTextOutput={this.props.setTextOutput}
           owner={this.props.project.owner}
         />
         <Preferences
@@ -200,6 +203,7 @@ class IDEView extends React.Component {
                     <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
                   }
                   isPlaying={this.props.ide.isPlaying}
+                  isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
                   textOutput={this.props.preferences.textOutput}
                   dispatchConsoleEvent={this.props.dispatchConsoleEvent}
                 />
@@ -237,6 +241,7 @@ IDEView.propTypes = {
   saveProject: PropTypes.func.isRequired,
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
+    isTextOutputPlaying: PropTypes.bool.isRequired,
     consoleEvent: PropTypes.object,
     modalIsVisible: PropTypes.bool.isRequired,
     sidebarIsExpanded: PropTypes.bool.isRequired,
@@ -245,6 +250,8 @@ IDEView.propTypes = {
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
+  startTextOutput: PropTypes.func.isRequired,
+  stopTextOutput: PropTypes.func.isRequired,
   project: PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string.isRequired,

client/modules/IDE/reducers/ide.js

@@ -2,6 +2,7 @@ import * as ActionTypes from '../../../constants';
 
 const initialState = {
   isPlaying: false,
+  isTextOutputPlaying: false,
   selectedFile: '1',
   consoleEvent: {
     method: undefined,
@@ -21,6 +22,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { isPlaying: true });
     case ActionTypes.STOP_SKETCH:
       return Object.assign({}, state, { isPlaying: false });
+    case ActionTypes.START_TEXT_OUTPUT:
+      return Object.assign({}, state, { isTextOutputPlaying: true });
+    case ActionTypes.STOP_TEXT_OUTPUT:
+      return Object.assign({}, state, { isTextOutputPlaying: false });
     case ActionTypes.SET_SELECTED_FILE:
     case ActionTypes.SET_PROJECT:
     case ActionTypes.NEW_PROJECT: