diff --git a/src/components/gui.js b/src/components/gui.js index 0b62b994645acd4e58a5369669a63ebb30585a59..77315693712523b2f80465bb76dd97e0ba49ce3c 100644 --- a/src/components/gui.js +++ b/src/components/gui.js @@ -2,6 +2,7 @@ const React = require('react'); const Blocks = require('./blocks'); const Renderer = require('scratch-render'); +const SpriteSelector = require('./sprite-selector'); const Stage = require('./stage'); const Toolbox = require('./toolbox'); const VM = require('scratch-vm'); @@ -38,6 +39,7 @@ class GUI extends React.Component { return ( <div className="scratch-gui"> <Stage stageRef={stage => this.stage = stage} /> + <SpriteSelector vm={this.props.vm} /> <Toolbox toolboxRef={toolbox => this.toolbox = toolbox} /> <Blocks options={{ diff --git a/src/components/sprite-selector.js b/src/components/sprite-selector.js new file mode 100644 index 0000000000000000000000000000000000000000..804f458e7617220b886524e578a2d1fc99e7374e --- /dev/null +++ b/src/components/sprite-selector.js @@ -0,0 +1,42 @@ +const React = require('react'); + +class SpriteSelector extends React.Component { + constructor (props) { + super(props); + this.state = { + targets: { + targetList: [] + } + }; + this.targetsUpdate = this.targetsUpdate.bind(this); + this.onChange = this.onChange.bind(this); + } + componentDidMount () { + this.props.vm.on('targetsUpdate', this.targetsUpdate); + } + onChange (event) { + this.props.vm.setEditingTarget(event.target.value); + } + targetsUpdate (data) { + this.setState({targets: data}); + } + render () { + return ( + <select + multiple + value={[this.state.targets.editingTarget]} + onChange={this.onChange} + > + {this.state.targets.targetList.map( + target => <option value={target[0]} key={target[0]}>{target[1]}</option> + )} + </select> + ); + } +} + +SpriteSelector.propTypes = { + vm: React.PropTypes.object.isRequired +}; + +module.exports = SpriteSelector;