Add "stop" skeleton component

src/components/green-flag.js

@@ -12,14 +12,19 @@ class GreenFlag extends React.Component {
     render () {
         return (
             <div className="scratch-green-flag">
-                <button onClick={this.onClick}></button>
+                <button onClick={this.onClick}>{this.props.title}</button>
             </div>
         );
     }
 }
 
 GreenFlag.propTypes = {
+    title: React.PropTypes.string,
     vm: React.PropTypes.object
 };
 
+GreenFlag.defaultProps = {
+    title: 'Go'
+};
+
 module.exports = GreenFlag;

src/components/gui.js

@@ -5,6 +5,7 @@ const GreenFlag = require('./green-flag');
 const Renderer = require('scratch-render');
 const SpriteSelector = require('./sprite-selector');
 const Stage = require('./stage');
+const StopAll = require('./stop-all');
 const Toolbox = require('./toolbox');
 const VM = require('scratch-vm');
 const VMManager = require('../lib/vm-manager');
@@ -40,6 +41,7 @@ class GUI extends React.Component {
         return (
             <div className="scratch-gui">
                 <GreenFlag vm={this.props.vm} />
+                <StopAll vm={this.props.vm} />
                 <Stage stageRef={stage => this.stage = stage} />
                 <SpriteSelector vm={this.props.vm} />
                 <Toolbox toolboxRef={toolbox => this.toolbox = toolbox} />

src/components/stop-all.js

+const React = require('react');
+
+class StopAll extends React.Component {
+    constructor (props) {
+        super(props);
+        this.onClick = this.onClick.bind(this);
+    }
+    onClick (e) {
+        e.preventDefault();
+        this.props.vm.stopAll();
+    }
+    render () {
+        return (
+            <div className="scratch-stop-all">
+                <button onClick={this.onClick}>{this.props.title}</button>
+            </div>
+        );
+    }
+}
+
+StopAll.propTypes = {
+    title: React.PropTypes.string,
+    vm: React.PropTypes.object
+};
+
+StopAll.defaultProps = {
+    title: 'Stop'
+};
+
+module.exports = StopAll;