Merge pull request #232 from smalruby/mesh_extension

Mesh extension

Author: takaokouji

.travis.yml

@@ -19,6 +19,7 @@ before_install:
 - '[[ $(node -v) =~ ^v9.*$ ]] || npm install -g npm@latest' # skipped when using node 9
 install:
 - npm --production=false install
+- (cd node_modules/scratch-vm && npm --production=false install && $(npm bin)/webpack --colors --bail --silent)
 script:
 - npm run test:lint
 - npm run test:unit

package-lock.json

@@ -119,7 +119,6 @@
     "scratch-render": "0.1.0-prerelease.20200228152431",
     "scratch-storage": "1.3.2",
     "scratch-svg-renderer": "0.2.0-prerelease.20200205003400",
-    "scratch-vm": "0.2.0-prerelease.20200227204654",
     "selenium-webdriver": "3.6.0",
     "shelljs": "^0.8.3",
     "startaudiocontext": "1.2.1",
@@ -150,6 +149,7 @@
     }
   },
   "dependencies": {
-    "lodash.camelcase": "^4.3.0"
+    "lodash.camelcase": "^4.3.0",
+    "scratch-vm": "github:smalruby/scratch-vm#mesh_extension"
   }
 }

package.json

@@ -58,7 +58,7 @@ const AlertComponent = ({
                     id="gui.alerts.lostPeripheralConnection"
                     values={{
                         extensionName: (
-                            `${extensionName}`
+                            extensionName
                         )
                     }}
                 />
@@ -120,7 +120,7 @@ const AlertComponent = ({
 AlertComponent.propTypes = {
     closeButton: PropTypes.bool,
     content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-    extensionName: PropTypes.string,
+    extensionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     level: PropTypes.string,

src/components/alerts/alert.jsx

@@ -17,20 +17,24 @@ const ConnectedStep = props => (
                         className={styles.peripheralActivityIcon}
                         src={props.connectionIconURL}
                     />
-                    <img
-                        className={styles.bluetoothConnectedIcon}
-                        src={bluetoothIcon}
-                    />
+                    {props.extensionId !== 'mesh' && (
+                        <img
+                            className={styles.bluetoothConnectedIcon}
+                            src={bluetoothIcon}
+                        />
+                    )}
                 </div>
             </Box>
         </Box>
         <Box className={styles.bottomArea}>
             <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
-                <FormattedMessage
-                    defaultMessage="Connected"
-                    description="Message indicating that a device was connected"
-                    id="gui.connection.connected"
-                />
+                {props.connectedMessage || (
+                    <FormattedMessage
+                        defaultMessage="Connected"
+                        description="Message indicating that a device was connected"
+                        id="gui.connection.connected"
+                    />
+                )}
             </Box>
             <Dots
                 success
@@ -64,7 +68,9 @@ const ConnectedStep = props => (
 );
 
 ConnectedStep.propTypes = {
+    connectedMessage: PropTypes.string,
     connectionIconURL: PropTypes.string.isRequired,
+    extensionId: PropTypes.string.isRequired,
     onCancel: PropTypes.func,
     onDisconnect: PropTypes.func
 };

src/components/connection-modal/connected-step.jsx

@@ -20,10 +20,12 @@ const ConnectingStep = props => (
                         className={styles.peripheralActivityIcon}
                         src={props.connectionIconURL}
                     />
-                    <img
-                        className={styles.bluetoothConnectingIcon}
-                        src={bluetoothIcon}
-                    />
+                    {props.extensionId !== 'mesh' && (
+                        <img
+                            className={styles.bluetoothConnectingIcon}
+                            src={bluetoothIcon}
+                        />
+                    )}
                 </div>
             </Box>
         </Box>
@@ -64,6 +66,7 @@ const ConnectingStep = props => (
 ConnectingStep.propTypes = {
     connectingMessage: PropTypes.node.isRequired,
     connectionIconURL: PropTypes.string.isRequired,
+    extensionId: PropTypes.string.isRequired,
     onDisconnect: PropTypes.func
 };
 

src/components/connection-modal/connecting-step.jsx

@@ -44,9 +44,11 @@ const ConnectionModalComponent = props => (
 );
 
 ConnectionModalComponent.propTypes = {
+    connectedMessage: PropTypes.string,
     connectingMessage: PropTypes.node.isRequired,
     connectionSmallIconURL: PropTypes.string,
     connectionTipIconURL: PropTypes.string,
+    extensionId: PropTypes.string.isRequired,
     name: PropTypes.node,
     onCancel: PropTypes.func.isRequired,
     onHelp: PropTypes.func.isRequired,

src/components/connection-modal/connection-modal.jsx

@@ -19,7 +19,7 @@ const ModalComponent = props => (
         className={classNames(styles.modalContent, props.className, {
             [styles.fullScreen]: props.fullScreen
         })}
-        contentLabel={props.contentLabel}
+        contentLabel={props.contentLabel.toString()}
         overlayClassName={styles.modalOverlay}
         onRequestClose={props.onRequestClose}
     >

src/components/modal/modal.jsx

@@ -77,7 +77,7 @@ Alert.propTypes = {
     closeButton: PropTypes.bool,
     content: PropTypes.element,
     extensionId: PropTypes.string,
-    extensionName: PropTypes.string,
+    extensionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     index: PropTypes.number,

src/containers/alert.jsx

@@ -23,7 +23,8 @@ class ConnectionModal extends React.Component {
         this.state = {
             extension: extensionData.find(ext => ext.extensionId === props.extensionId),
             phase: props.vm.getPeripheralIsConnected(props.extensionId) ?
-                PHASES.connected : PHASES.scanning
+                PHASES.connected : PHASES.scanning,
+            connectedMessage: props.vm.getPeripheralConnectedMessage(props.extensionId)
         };
     }
     componentDidMount () {
@@ -88,7 +89,8 @@ class ConnectionModal extends React.Component {
     }
     handleConnected () {
         this.setState({
-            phase: PHASES.connected
+            phase: PHASES.connected,
+            connectedMessage: this.props.vm.getPeripheralConnectedMessage(this.props.extensionId)
         });
         analytics.event({
             category: 'extensions',
@@ -114,6 +116,7 @@ class ConnectionModal extends React.Component {
                 extensionId={this.props.extensionId}
                 name={this.state.extension && this.state.extension.name}
                 phase={this.state.phase}
+                connectedMessage={this.state.connectedMessage}
                 title={this.props.extensionId}
                 useAutoScan={this.state.extension && this.state.extension.useAutoScan}
                 vm={this.props.vm}