diff --git a/src/components/green-flag.js b/src/components/green-flag.js index 0d30a3c3b3ab5dcd42a1439633759d7d67f24e83..c7f9e6d1491bf616df3fda8424bf2a5e780c8690 100644 --- a/src/components/green-flag.js +++ b/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; diff --git a/src/components/gui.js b/src/components/gui.js index fab66e2cb49260c7b8cfa0fd2a67f630e984468d..b29aa7d50434d1b9d4978d2e7b0af2fa794dcd2e 100644 --- a/src/components/gui.js +++ b/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} /> diff --git a/src/components/stop-all.js b/src/components/stop-all.js new file mode 100644 index 0000000000000000000000000000000000000000..8f9f73f43ab89ae99e24197786412eda0cc7ffc5 --- /dev/null +++ b/src/components/stop-all.js @@ -0,0 +1,30 @@ +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;