Add basic Stage component

Update webpack config and vm usage to match updates in scratch-vm

src/components/blocks.js

@@ -7,9 +7,7 @@ class Blocks extends React.Component {
         if (!prevProps.options.toolbox && this.props.options.toolbox) {
             let workspaceConfig = defaultsDeep({}, Blocks.defaultOptions, this.props.options);
             this.workspace = ScratchBlocks.inject(this.refs.scratchBlocks, workspaceConfig);
-            if (this.props.vm) {
-                this.workspace.addChangeListener(this.props.vm.blockListener);
-            }
+            this.props.onReceiveWorkspace(this.workspace);
         }
     }
     render () {
@@ -23,6 +21,7 @@ class Blocks extends React.Component {
 }
 
 Blocks.propTypes = {
+    onReceiveWorkspace: React.PropTypes.func,
     options: React.PropTypes.shape({
         // The toolbox is actually an element, but React doesn't agree :/
         toolbox: React.PropTypes.object,
@@ -65,6 +64,7 @@ Blocks.defaultOptions = {
 };
 
 Blocks.defaultProps = {
+    onReceiveWorkspace: function (workspace) {},
     options: Blocks.defaultOptions
 };
 

src/components/gui.js

 const React = require('react');
-const VM = require('scratch-vm');
+
 const Blocks = require('./blocks');
+const Renderer = require('scratch-render');
+const Stage = require('./stage');
 const Toolbox = require('./toolbox');
+const VM = require('scratch-vm');
+const VMManager = require('../lib/vm-manager');
 
 class GUI extends React.Component {
     constructor (props) {
+        super(props);
+        this.animate = this.animate.bind(this);
+        this.onReceiveWorkspace = this.onReceiveWorkspace.bind(this);
         this.state = {};
     }
     componentDidMount () {
-        this.setState({toolbox: this._toolbox});
+        this.setState({
+            toolbox: this.toolbox
+        });
+    }
+    onReceiveWorkspace (workspace) {
+        this.workspace = workspace;
+        this.workspace.addChangeListener(this.props.vm.blockListener);
+        VMManager.attachWorkspace(this.props.vm, this.workspace);
+        VMManager.attachMouseEvents(this.props.vm, this.stage);
+        VMManager.attachKeyboardEvents(this.props.vm);
+        this.renderer = new Renderer(this.stage);
+        this.props.vm.attachRenderer(this.renderer);
+        this.props.vm.createEmptyProject();
+        this.props.vm.start();
+    }
+    animate () {
+        this.props.vm.animationFrame();
+        requestAnimationFrame(this.animate);
     }
     render () {
         return (
             <div className="scratch-gui">
-                <Toolbox toolboxRef={(toolbox) => this._toolbox = toolbox} />
+                <Stage stageRef={stage => this.stage = stage} />
+                <Toolbox toolboxRef={toolbox => this.toolbox = toolbox} />
                 <Blocks
                     options={{
                         toolbox: this.state.toolbox
                     }}
                     vm={this.props.vm}
+                    onReceiveWorkspace={this.onReceiveWorkspace}
                 />
             </div>
         );

src/components/stage.js

+const React = require('react');
+
+class Stage extends React.Component {
+    render () {
+        return (
+            <canvas
+                className="scratch-stage"
+                ref={this.props.stageRef}
+            />
+        );
+    }
+}
+
+Stage.propTypes = {
+    stageRef: React.PropTypes.func
+};
+
+Stage.defaultProps = {
+    stageRef: function () {}
+};
+
+module.exports = Stage;

src/lib/vm-manager.js

+module.exports = {
+    attachWorkspace: function (vm, workspace) {
+        vm.on('STACK_GLOW_ON', data => workspace.glowStack(data.id, true));
+        vm.on('STACK_GLOW_OFF', data => workspace.glowStack(data.id, false));
+        vm.on('BLOCK_GLOW_ON', data => workspace.glowBlock(data.id, true));
+        vm.on('BLOCK_GLOW_OFF', data => workspace.glowBlock(data.id, false));
+        vm.on('VISUAL_REPORT', data => workspace.reportValue(data.id, data.value));
+    },
+    attachMouseEvents: function (vm, stage) {
+        document.addEventListener('mousemove', function (e) {
+            var rect = stage.getBoundingClientRect();
+            var coordinates = {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+                canvasWidth: rect.width,
+                canvasHeight: rect.height
+            };
+            vm.postIOData('mouse', coordinates);
+        });
+        stage.addEventListener('mousedown', function (e) {
+            var rect = stage.getBoundingClientRect();
+            var data = {
+                isDown: true,
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+                canvasWidth: rect.width,
+                canvasHeight: rect.height
+            };
+            vm.postIOData('mouse', data);
+            e.preventDefault();
+        });
+        stage.addEventListener('mouseup', function (e) {
+            var rect = stage.getBoundingClientRect();
+            var data = {
+                isDown: false,
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+                canvasWidth: rect.width,
+                canvasHeight: rect.height
+            };
+            vm.postIOData('mouse', data);
+            e.preventDefault();
+        });
+    },
+    attachKeyboardEvents: function (vm) {
+        // Feed keyboard events as VM I/O events.
+        document.addEventListener('keydown', function (e) {
+            // Don't capture keys intended for Blockly inputs.
+            if (e.target != document && e.target != document.body) {
+                return;
+            }
+            vm.postIOData('keyboard', {
+                keyCode: e.keyCode,
+                isDown: true
+            });
+            e.preventDefault();
+        });
+        document.addEventListener('keyup', function (e) {
+            // Always capture up events,
+            // even those that have switched to other targets.
+            vm.postIOData('keyboard', {
+                keyCode: e.keyCode,
+                isDown: false
+            });
+            // E.g., prevent scroll.
+            if (e.target != document && e.target != document.body) {
+                e.preventDefault();
+            }
+        });
+    }
+};

webpack.config.js

@@ -22,9 +22,6 @@ module.exports = {
             query: {
                 presets: ['es2015', 'react']
             }
-        }, {
-            test: /\.json$/,
-            loader: 'json-loader'
         }]
     },
     plugins: [