Sprite selector, CSS and Redux overhaul

package.json

@@ -30,15 +30,18 @@
     "react-dom": "15.x.x"
   },
   "devDependencies": {
+    "autoprefixer": "6.5.3",
     "babel-core": "6.14.0",
     "babel-eslint": "7.0.0",
     "babel-loader": "6.2.5",
     "babel-plugin-transform-object-rest-spread": "6.16.0",
     "babel-preset-es2015": "6.14.0",
     "babel-preset-react": "6.11.1",
+    "classnames": "2.2.5",
     "copy-webpack-plugin": "3.0.1",
+    "css-loader": "0.26.1",
     "eslint": "3.8.1",
-    "eslint-config-scratch": "^2.0.0",
+    "eslint-config-scratch": "^3.0.0",
     "eslint-plugin-react": "6.4.1",
     "gh-pages": "0.11.0",
     "html-webpack-plugin": "2.22.0",
@@ -48,17 +51,22 @@
     "lodash.defaultsdeep": "4.4.0",
     "minilog": "3.0.1",
     "opt-cli": "1.5.1",
+    "postcss-loader": "1.2.0",
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "react-modal": "1.5.2",
+    "react-redux": "4.4.6",
     "react-style-proptype": "1.2.0",
+    "redux": "3.6.0",
     "scratch-blocks": "latest",
     "scratch-render": "latest",
     "scratch-vm": "latest",
+    "style-loader": "0.13.1",
     "svg-to-image": "1.1.3",
     "svg-url-loader": "1.1.0",
     "travis-after-all": "1.4.4",
     "webpack": "1.13.2",
+    "webpack-combine-loaders": "2.0.3",
     "webpack-dev-server": "1.15.2",
     "xhr": "2.2.2"
   }

src/.eslintrc.js

@@ -1,9 +1,9 @@
 module.exports = {
+    root: true,
+    extends: ['scratch', 'scratch/es6', 'scratch/react'],
     env: {
-        node: false,
         browser: true
     },
-    extends: ['scratch/es6', 'scratch/react'],
     globals: {
         process: true
     }

src/components/blocks/blocks.css

@@ -0,0 +1,7 @@
+.blocks {
+    position: absolute;
+    top: 40px;
+    right: 500px;
+    bottom: 0;
+    left: 0;
+}

src/components/blocks.jsx → src/components/blocks/blocks.jsx

@@ -1,5 +1,7 @@
 const React = require('react');
 
+const styles = require('./blocks.css');
+
 class BlocksComponent extends React.Component {
     render () {
         const {
@@ -8,15 +10,8 @@ class BlocksComponent extends React.Component {
         } = this.props;
         return (
             <div
-                className="scratch-blocks"
+                className={styles.blocks}
                 ref={componentRef}
-                style={{
-                    position: 'absolute',
-                    top: 0,
-                    right: 500,
-                    bottom: 0,
-                    left: 0
-                }}
                 {...props}
             />
         );

src/components/green-flag/green-flag.css

@@ -0,0 +1,11 @@
+.green-flag {
+    position: absolute;
+    top: 8px;
+    right: calc(480px - 16px);
+    width: 16px;
+    height: 16px;
+}
+
+.active {
+    filter: saturate(200%) brightness(150%);
+}

src/components/green-flag/green-flag.jsx

@@ -1,5 +1,8 @@
+const classNames = require('classnames');
 const React = require('react');
+
 const greenFlagIcon = require('./green-flag.svg');
+const styles = require('./green-flag.css');
 
 const GreenFlagComponent = function (props) {
     const {
@@ -10,16 +13,11 @@ const GreenFlagComponent = function (props) {
     } = props;
     return (
         <img
-            className="scratch-green-flag"
+            className={classNames({
+                [styles.greenFlag]: true,
+                [styles.active]: active
+            })}
             src={greenFlagIcon}
-            style={{
-                position: 'absolute',
-                top: 380,
-                right: 440,
-                width: 50,
-                // @todo Get real design here
-                filter: active ? 'saturate(200%) brightness(150%)' : 'none'
-            }}
             title={title}
             onClick={onClick}
             {...componentProps}

src/components/gui/gui.css

@@ -0,0 +1,7 @@
+.gui {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    bottom: 0;
+    left: 4px;
+}

src/components/gui/gui.jsx

@@ -0,0 +1,90 @@
+const defaultsDeep = require('lodash.defaultsdeep');
+const React = require('react');
+const VM = require('scratch-vm');
+
+const MediaLibrary = require('../../lib/media-library');
+const shapeFromPropTypes = require('../../lib/shape-from-prop-types');
+
+const Blocks = require('../../containers/blocks.jsx');
+const GreenFlag = require('../../containers/green-flag.jsx');
+const TargetPane = require('../../containers/target-pane.jsx');
+const Stage = require('../../containers/stage.jsx');
+const StopAll = require('../../containers/stop-all.jsx');
+
+const styles = require('./gui.css');
+
+const GUIComponent = props => {
+    let {
+        basePath,
+        blocksProps,
+        children,
+        greenFlagProps,
+        mediaLibrary,
+        targetPaneProps,
+        stageProps,
+        stopAllProps,
+        vm
+    } = props;
+    blocksProps = defaultsDeep({}, blocksProps, {
+        options: {
+            media: `${basePath}static/blocks-media/`
+        }
+    });
+    if (children) {
+        return (
+            <div className={styles.gui}>
+                {children}
+            </div>
+        );
+    }
+    return (
+        <div className={styles.gui}>
+            <GreenFlag
+                vm={vm}
+                {...greenFlagProps}
+            />
+            <StopAll
+                vm={vm}
+                {...stopAllProps}
+            />
+            <Stage
+                vm={vm}
+                {...stageProps}
+            />
+            <TargetPane
+                mediaLibrary={mediaLibrary}
+                vm={vm}
+                {...targetPaneProps}
+            />
+            <Blocks
+                vm={vm}
+                {...blocksProps}
+            />
+        </div>
+    );
+};
+
+GUIComponent.propTypes = {
+    basePath: React.PropTypes.string,
+    blocksProps: shapeFromPropTypes(Blocks.propTypes, {omit: ['vm']}),
+    children: React.PropTypes.node,
+    greenFlagProps: shapeFromPropTypes(GreenFlag.propTypes, {omit: ['vm']}),
+    mediaLibrary: React.PropTypes.instanceOf(MediaLibrary),
+    stageProps: shapeFromPropTypes(Stage.propTypes, {omit: ['vm']}),
+    stopAllProps: shapeFromPropTypes(StopAll.propTypes, {omit: ['vm']}),
+    targetPaneProps: shapeFromPropTypes(TargetPane.propTypes, {omit: ['vm']}),
+    vm: React.PropTypes.instanceOf(VM)
+};
+
+GUIComponent.defaultProps = {
+    basePath: '/',
+    blocksProps: {},
+    greenFlagProps: {},
+    mediaLibrary: new MediaLibrary(),
+    targetPaneProps: {},
+    stageProps: {},
+    stopAllProps: {},
+    vm: new VM()
+};
+
+module.exports = GUIComponent;

src/components/library-item/library-item.css

@@ -0,0 +1,12 @@
+.library-item {
+    float: left;
+    width: 140px;
+    margin-left: 5px;
+    margin-right: 5px;
+    text-align: center;
+    cursor: pointer;
+}
+.library-item.is-selected {
+    background: #aaa;
+    border-radius: 6px;
+}

src/components/library-item/library-item.jsx

@@ -0,0 +1,41 @@
+const classNames = require('classnames');
+const bindAll = require('lodash.bindall');
+const React = require('react');
+
+const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
+const styles = require('./library-item.css');
+
+class LibraryItem extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, ['handleClick']);
+    }
+    handleClick (e) {
+        this.props.onSelect(this.props.id);
+        e.preventDefault();
+    }
+    render () {
+        return (
+            <div
+                className={classNames({
+                    [styles.libraryItem]: true,
+                    [styles.isSelected]: this.props.selected
+                })}
+                onClick={this.handleClick}
+            >
+                <CostumeCanvas url={this.props.iconURL} />
+                <p>{this.props.name}</p>
+            </div>
+        );
+    }
+}
+
+LibraryItem.propTypes = {
+    iconURL: React.PropTypes.string,
+    id: React.PropTypes.number,
+    name: React.PropTypes.string,
+    onSelect: React.PropTypes.func,
+    selected: React.PropTypes.bool
+};
+
+module.exports = LibraryItem;

src/components/library/library.css

@@ -0,0 +1,8 @@
+.library-scroll-grid {
+    overflow: scroll;
+    position: absolute;
+    top: 70px;
+    bottom: 20px;
+    left: 30px;
+    right: 30px;
+}