Merge pull request #856 from paulkaplan/compatibility-testing-example

Add compatibility testing example page

src/examples/compatibility-testing.jsx

+import React from 'react';
+import ReactDOM from 'react-dom';
+import {connect} from 'react-redux';
+
+import AppStateHOC from '../lib/app-state-hoc.jsx';
+import Controls from '../containers/controls.jsx';
+import Stage from '../containers/stage.jsx';
+import Box from '../components/box/box.jsx';
+import GUI from '../containers/gui.jsx';
+import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
+
+const mapStateToProps = state => ({vm: state.vm});
+
+const VMStage = connect(mapStateToProps)(Stage);
+const VMControls = connect(mapStateToProps)(Controls);
+
+const DEFAULT_PROJECT_ID = '10015059';
+
+class Player extends React.Component {
+    constructor (props) {
+        super(props);
+        this.updateProject = this.updateProject.bind(this);
+
+        this.state = {
+            projectId: window.location.hash.substring(1) || DEFAULT_PROJECT_ID
+        };
+    }
+    componentDidMount () {
+        window.addEventListener('hashchange', this.updateProject);
+        if (!window.location.hash.substring(1)) {
+            window.location.hash = DEFAULT_PROJECT_ID;
+        }
+    }
+    componentWillUnmount () {
+        window.addEventListener('hashchange', this.updateProject);
+    }
+    updateProject () {
+        this.setState({projectId: window.location.hash.substring(1)});
+    }
+    render () {
+        const width = 480;
+        const height = 360;
+        return (
+            <div style={{display: 'flex'}}>
+                <GUI
+                    {...this.props}
+                    width={width}
+                >
+                    <Box height={40}>
+                        <VMControls
+                            style={{
+                                marginRight: 10,
+                                height: 40
+                            }}
+                        />
+                    </Box>
+                    <VMStage
+                        height={height}
+                        width={width}
+                    />
+                </GUI>
+                <iframe
+                    allowFullScreen
+                    allowTransparency
+                    frameBorder="0"
+                    height="402"
+                    src={`https://scratch.mit.edu/projects/embed/${this.state.projectId}/?autostart=true`}
+                    width="485"
+                />
+            </div>
+        );
+    }
+}
+
+const App = AppStateHOC(ProjectLoaderHOC(Player));
+
+const appTarget = document.createElement('div');
+document.body.appendChild(appTarget);
+
+ReactDOM.render(<App />, appTarget);

webpack.config.js

@@ -21,6 +21,7 @@ module.exports = {
         lib: ['react', 'react-dom'],
         gui: './src/index.jsx',
         blocksonly: './src/examples/blocks-only.jsx',
+        compatibilitytesting: './src/examples/compatibility-testing.jsx',
         player: './src/examples/player.jsx'
     },
     output: {
@@ -90,6 +91,12 @@ module.exports = {
             filename: 'blocks-only.html',
             title: 'Scratch 3.0 GUI: Blocks Only Example'
         }),
+        new HtmlWebpackPlugin({
+            chunks: ['lib', 'compatibilitytesting'],
+            template: 'src/index.ejs',
+            filename: 'compatibility-testing.html',
+            title: 'Scratch 3.0 GUI: Compatibility Testing'
+        }),
         new HtmlWebpackPlugin({
             chunks: ['lib', 'player'],
             template: 'src/index.ejs',