Add default blocks options and validation

Add skeleton toolbox component

package.json

@@ -24,6 +24,7 @@
     "exports-loader": "0.6.3",
     "imports-loader": "0.6.5",
     "json-loader": "0.5.4",
+    "lodash.defaultsdeep": "4.4.0",
     "react": "15.3.1",
     "react-dom": "15.3.1",
     "scratch-blocks": "github:llk/scratch-blocks#develop",

src/components/blocks.js

+import defaultsDeep from 'lodash.defaultsDeep';
 import React from 'react';
 import ScratchBlocks from 'scratch-blocks/blocks_compressed_vertical';
 
 export default class Blocks extends React.Component {
+    constructor (props) {
+        super(props);
+        this.mountBlocks = this.mountBlocks.bind(this);
+    }
     mountBlocks (component) {
-        ScratchBlocks.inject(component, {});
+        this.workspace = ScratchBlocks.inject(
+            component,
+            defaultsDeep({}, this.props.options, Blocks.defaultOptions)
+        );
     }
     render () {
         return (
@@ -13,3 +21,48 @@ export default class Blocks extends React.Component {
         );
     }
 }
+
+Blocks.propTypes = {
+    options: React.PropTypes.shape({
+        toolbox: React.PropTypes.element,
+        media: React.PropTypes.string,
+        zoom: React.PropTypes.shape({
+            controls: React.PropTypes.boolean,
+            wheel: React.PropTypes.boolean,
+            startScale: React.PropTypes.number
+        }),
+        colours: React.PropTypes.shape({
+            workspace: React.PropTypes.string,
+            flyout: React.PropTypes.string,
+            scrollbar: React.PropTypes.string,
+            scrollbarHover: React.PropTypes.string,
+            insertionMarker: React.PropTypes.string,
+            insertionMarkerOpacity: React.PropTypes.number,
+            fieldShadow: React.PropTypes.string,
+            dragShadowOpacity: React.PropTypes.number
+        })
+    }),
+    vm: React.PropTypes.object
+};
+
+Blocks.defaultOptions = {
+    zoom: {
+        controls: true,
+        wheel: true,
+        startScale: 0.75
+    },
+    colours: {
+        workspace: '#334771',
+        flyout: '#283856',
+        scrollbar: '#24324D',
+        scrollbarHover: '#0C111A',
+        insertionMarker: '#FFFFFF',
+        insertionMarkerOpacity: 0.3,
+        fieldShadow: 'rgba(255, 255, 255, 0.3)',
+        dragShadowOpacity: 0.6
+    }
+};
+
+Blocks.defaultProps = {
+    options: Blocks.defaultOptions
+};

src/components/gui.js

 import React from 'react';
 import VM from 'scratch-vm';
 import Blocks from './blocks';
+import Toolbox from './toolbox';
 
 export default class GUI extends React.Component {
     render () {
         return (
             <div className="scratch-gui">
-                <Blocks />
+                <Toolbox ref={toolbox => this.toolbox = toolbox} />
+                <Blocks
+                    options={{
+                        toolbox: this.toolbox
+                    }}
+                />
             </div>
         );
     }

src/components/toolbox.js

+import React from 'react';
+
+export default class Toolbox extends React.Component {
+    render () {
+        return (
+            <div className="scratch-toolbox" />
+        );
+    }
+}