Move animate timer to Stage component

And use instanceOf for the vm prop type

src/containers/blocks.js

@@ -2,6 +2,7 @@ const bindAll = require('lodash.bindall');
 const defaultsDeep = require('lodash.defaultsdeep');
 const React = require('react');
 const ScratchBlocks = require('scratch-blocks');
+const VM = require('scratch-vm');
 
 const BlocksComponent = require('../components/blocks');
 
@@ -96,7 +97,7 @@ Blocks.propTypes = {
             dragShadowOpacity: React.PropTypes.number
         })
     }),
-    vm: React.PropTypes.object
+    vm: React.PropTypes.instanceOf(VM).isRequired
 };
 
 Blocks.defaultOptions = {

src/containers/gui.js

@@ -19,12 +19,10 @@ class GUI extends React.Component {
         this.vmManager.attachKeyboardEvents();
         this.props.vm.loadProject(this.props.projectData);
         this.props.vm.start();
-        this.vmManager.startAnimation();
     }
     componentWillUnmount () {
         this.vmManager.detachKeyboardEvents();
         this.props.vm.stopAll();
-        this.vmManager.stopAnimation();
     }
     componentWillReceiveProps (nextProps) {
         if (this.props.projectData !== nextProps.projectData) {

src/containers/stage.js

 const bindAll = require('lodash.bindall');
 const React = require('react');
 const Renderer = require('scratch-render');
+const VM = require('scratch-vm');
 
 const StageComponent = require('../components/stage');
 
@@ -12,16 +13,21 @@ class Stage extends React.Component {
             'detachMouseEvents',
             'onMouseUp',
             'onMouseMove',
-            'onMouseDown'
+            'onMouseDown',
+            'animate',
+            'startAnimation',
+            'stopAnimation'
         ]);
     }
     componentDidMount () {
         this.renderer = new Renderer(this.canvas);
         this.props.vm.attachRenderer(this.renderer);
         this.attachMouseEvents(this.canvas);
+        this.startAnimation();
     }
     componentWillUnmount () {
         this.detachMouseEvents(this.canvas);
+        this.stopAnimation();
     }
     attachMouseEvents (canvas) {
         document.addEventListener('mousemove', this.onMouseMove);
@@ -67,6 +73,16 @@ class Stage extends React.Component {
         this.props.vm.postIOData('mouse', data);
         e.preventDefault();
     }
+    startAnimation () {
+        this.animationFrame = requestAnimationFrame(this.animate);
+    }
+    stopAnimation () {
+        cancelAnimationFrame(this.animationFrame);
+    }
+    animate () {
+        this.props.vm.animationFrame();
+        this.animationFrame = requestAnimationFrame(this.animate);
+    }
     render () {
         return (
             <StageComponent canvasRef={canvas => this.canvas = canvas} />
@@ -75,10 +91,7 @@ class Stage extends React.Component {
 }
 
 Stage.propTypes = {
-    vm: React.PropTypes.shape({
-        attachRenderer: React.PropTypes.func,
-        postIOData: React.PropTypes.func
-    }).isRequired
+    vm: React.PropTypes.instanceOf(VM).isRequired
 };
 
 module.exports = Stage;

src/lib/vm-manager.js

@@ -6,23 +6,10 @@ class VMManager {
             'attachKeyboardEvents',
             'detachKeyboardEvents',
             'onKeyDown',
-            'onKeyUp',
-            'animate',
-            'startAnimation',
-            'stopAnimation'
+            'onKeyUp'
         ]);
         this.vm = vm;
     }
-    startAnimation () {
-        this.animationFrame = requestAnimationFrame(this.animate);
-    }
-    stopAnimation () {
-        cancelAnimationFrame(this.animationFrame);
-    }
-    animate () {
-        this.vm.animationFrame();
-        this.animationFrame = requestAnimationFrame(this.animate);
-    }
     attachKeyboardEvents () {
         // Feed keyboard events as VM I/O events.
         document.addEventListener('keydown', this.onKeyDown);