From 058476cb29f98cc58d467e0775baf5b6c769600a Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Fri, 3 Nov 2017 12:52:15 -0400
Subject: [PATCH 1/2] Add compatibility testing example page

---
 src/examples/compatibility-testing.jsx | 74 ++++++++++++++++++++++++++
 webpack.config.js                      |  7 +++
 2 files changed, 81 insertions(+)
 create mode 100644 src/examples/compatibility-testing.jsx

diff --git a/src/examples/compatibility-testing.jsx b/src/examples/compatibility-testing.jsx
new file mode 100644
index 000000000..11c9bc4bf
--- /dev/null
+++ b/src/examples/compatibility-testing.jsx
@@ -0,0 +1,74 @@
+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);
+
+class Player extends React.Component {
+    constructor (props) {
+        super(props);
+        this.updateProject = this.updateProject.bind(this);
+        this.state = {
+            projectId: window.location.hash.substring(1) || '10015059'
+        };
+    }
+    componentDidMount () {
+        window.addEventListener('hashchange', this.updateProject);
+    }
+    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);
diff --git a/webpack.config.js b/webpack.config.js
index 9baf4b9d3..e9b97f9ef 100644
--- a/webpack.config.js
+++ b/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',

From affe124db295f2a9013ccd7736d35f152ce27dac Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Fri, 3 Nov 2017 17:03:50 -0400
Subject: [PATCH 2/2] Sync projects in compatibility tester

---
 src/examples/compatibility-testing.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/examples/compatibility-testing.jsx b/src/examples/compatibility-testing.jsx
index 11c9bc4bf..3fa8e71d9 100644
--- a/src/examples/compatibility-testing.jsx
+++ b/src/examples/compatibility-testing.jsx
@@ -14,16 +14,22 @@ 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) || '10015059'
+            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);