Move creating the store into playground examples

GUI will export a reducer to be included in the enclosing component’s redux when GUI is used as a library. The app-state-hoc is moved into the playground examples to provide a store when GUI is being used stand-alone.

src/containers/gui.jsx

@@ -5,6 +5,7 @@ import VM from 'scratch-vm';
 import {connect} from 'react-redux';
 import ReactModal from 'react-modal';
 
+import ErrorBoundary from './error-boundary.jsx';
 import {openExtensionLibrary} from '../reducers/modals';
 import {
     activateTab,
@@ -13,7 +14,6 @@ import {
     SOUNDS_TAB_INDEX
 } from '../reducers/editor-tab';
 
-import AppStateHOC from '../lib/app-state-hoc.jsx';
 import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
 import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
 
@@ -73,13 +73,15 @@ class GUI extends React.Component {
             ...componentProps
         } = this.props;
         return (
-            <GUIComponent
-                loading={fetchingProject || this.state.loading || loadingStateVisible}
-                vm={vm}
-                {...componentProps}
-            >
-                {children}
-            </GUIComponent>
+            <ErrorBoundary action="Top Level App">
+                <GUIComponent
+                    loading={fetchingProject || this.state.loading || loadingStateVisible}
+                    vm={vm}
+                    {...componentProps}
+                >
+                    {children}
+                </GUIComponent>
+            </ErrorBoundary>
         );
     }
 }
@@ -102,6 +104,7 @@ const mapStateToProps = state => ({
     cardsVisible: state.cards.visible,
     costumesTabVisible: state.editorTab.activeTabIndex === COSTUMES_TAB_INDEX,
     importInfoVisible: state.modals.importInfo,
+    isPlayerOnly: state.mode.isPlayerOnly,
     loadingStateVisible: state.modals.loadingProject,
     previewInfoVisible: state.modals.previewInfo,
     targetIsStage: state.targets.stage && state.targets.stage.id === state.targets.editingTarget,
@@ -121,7 +124,7 @@ const ConnectedGUI = connect(
     mapDispatchToProps,
 )(GUI);
 
-const WrappedGui = ProjectLoaderHOC(AppStateHOC(vmListenerHOC(ConnectedGUI)));
+const WrappedGui = ProjectLoaderHOC(vmListenerHOC(ConnectedGUI));
 
 WrappedGui.setAppElement = ReactModal.setAppElement;
 export default WrappedGui;

src/lib/app-state-hoc.jsx

@@ -9,7 +9,6 @@ import {IntlProvider, updateIntl} from 'react-intl-redux';
 import {intlInitialState} from '../reducers/intl.js';
 import {initialState as modeInitialState, setPlayer, setFullScreen} from '../reducers/mode.js';
 import reducer from '../reducers/gui';
-import ErrorBoundary from '../containers/error-boundary.jsx';
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const enhancer = composeEnhancers(
@@ -68,12 +67,16 @@ const AppStateHOC = function (WrappedComponent) {
             }
         }
         render () {
+            const {
+                intl, // eslint-disable-line no-unused-vars
+                isFullScreen, // eslint-disable-line no-unused-vars
+                isPlayerOnly, // eslint-disable-line no-unused-vars
+                ...componentProps
+            } = this.props;
             return (
                 <Provider store={this.store}>
                     <IntlProvider>
-                        <ErrorBoundary action="Top Level App">
-                            <WrappedComponent {...this.props} />
-                        </ErrorBoundary>
+                        <WrappedComponent {...componentProps} />
                     </IntlProvider>
                 </Provider>
             );

src/playground/blocks-only.jsx

@@ -6,6 +6,7 @@ import Controls from '../containers/controls.jsx';
 import Blocks from '../containers/blocks.jsx';
 import GUI from '../containers/gui.jsx';
 import HashParserHOC from '../lib/hash-parser-hoc.jsx';
+import AppStateHOC from '../lib/app-state-hoc.jsx';
 
 import styles from './blocks-only.css';
 
@@ -26,7 +27,7 @@ const BlocksOnly = props => (
     </GUI>
 );
 
-const App = HashParserHOC(BlocksOnly);
+const App = HashParserHOC(AppStateHOC(BlocksOnly));
 
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);

src/playground/compatibility-testing.jsx

@@ -7,6 +7,8 @@ import Stage from '../containers/stage.jsx';
 import Box from '../components/box/box.jsx';
 import GUI from '../containers/gui.jsx';
 import HashParserHOC from '../lib/hash-parser-hoc.jsx';
+import AppStateHOC from '../lib/app-state-hoc.jsx';
+const WrappedGui = HashParserHOC(AppStateHOC(GUI));
 
 const mapStateToProps = state => ({vm: state.vm});
 
@@ -37,27 +39,12 @@ class Player extends React.Component {
         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>
+                <WrappedGui
+                    isPlayerOnly
+                    isFullScreen={false}
+                />
                 <iframe
                     allowFullScreen
                     allowTransparency
@@ -71,9 +58,7 @@ class Player extends React.Component {
     }
 }
 
-const App = HashParserHOC(Player);
-
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);
 
-ReactDOM.render(<App />, appTarget);
+ReactDOM.render(<Player />, appTarget);

src/playground/index.jsx

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
 import analytics from '../lib/analytics';
 import GUI from '../containers/gui.jsx';
 import HashParserHOC from '../lib/hash-parser-hoc.jsx';
+import AppStateHOC from '../lib/app-state-hoc.jsx';
 
 import styles from './index.css';
 
@@ -21,6 +22,6 @@ appTarget.className = styles.app;
 document.body.appendChild(appTarget);
 
 GUI.setAppElement(appTarget);
-const WrappedGui = HashParserHOC(GUI);
+const WrappedGui = HashParserHOC(AppStateHOC(GUI));
 
 ReactDOM.render(<WrappedGui />, appTarget);

src/playground/player.jsx

@@ -4,7 +4,8 @@ import ReactDOM from 'react-dom';
 import Box from '../components/box/box.jsx';
 import GUI from '../containers/gui.jsx';
 import HashParserHOC from '../lib/hash-parser-hoc.jsx';
-const WrappedGui = HashParserHOC(GUI);
+import AppStateHOC from '../lib/app-state-hoc.jsx';
+const WrappedGui = HashParserHOC(AppStateHOC(GUI));
 
 if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
     // Warn before navigating away