Use options object instead of individual props.

There will probably need to be more backpack config options in the future, so just make this a bit more future proof

src/components/gui/gui.jsx

@@ -46,8 +46,7 @@ const GUIComponent = props => {
     const {
         activeTabIndex,
         basePath,
-        backpackHost,
-        backpackVisible,
+        backpackOptions,
         blocksTabVisible,
         cardsVisible,
         children,
@@ -206,8 +205,8 @@ const GUIComponent = props => {
                                 {soundsTabVisible ? <SoundTab vm={vm} /> : null}
                             </TabPanel>
                         </Tabs>
-                        {backpackVisible ? (
-                            <Backpack host={backpackHost} />
+                        {backpackOptions.visible ? (
+                            <Backpack host={backpackOptions.host} />
                         ) : null}
                     </Box>
 
@@ -228,8 +227,10 @@ const GUIComponent = props => {
 };
 GUIComponent.propTypes = {
     activeTabIndex: PropTypes.number,
-    backpackHost: PropTypes.string,
-    backpackVisible: PropTypes.null,
+    backpackOptions: PropTypes.shape({
+        host: PropTypes.string,
+        visible: PropTypes.bool
+    }),
     basePath: PropTypes.string,
     blocksTabVisible: PropTypes.bool,
     cardsVisible: PropTypes.bool,
@@ -252,8 +253,10 @@ GUIComponent.propTypes = {
     vm: PropTypes.instanceOf(VM).isRequired
 };
 GUIComponent.defaultProps = {
-    backpackHost: null,
-    backpackVisible: false,
+    backpackOptions: {
+        host: null,
+        visible: false
+    },
     basePath: './'
 };
 export default injectIntl(GUIComponent);

src/playground/index.jsx

@@ -28,7 +28,9 @@ const WrappedGui = HashParserHOC(AppStateHOC(GUI));
 const backpackHostMatches = window.location.href.match(/[?&]backpack_host=(.*)&?/);
 const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
 
-ReactDOM.render(<WrappedGui
-    backpackVisible
-    backpackHost={backpackHost}
-/>, appTarget);
+const backpackOptions = {
+    visible: true,
+    host: backpackHost
+};
+
+ReactDOM.render(<WrappedGui backpackOptions={backpackOptions} />, appTarget);