Add sprite selection skeleton component

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={{

src/components/sprite-selector.js

+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;