Mesh extension

.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.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"
   }
 }

src/components/alerts/alert.jsx

@@ -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/connection-modal/connected-step.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/connecting-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/connection-modal.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/modal/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/containers/alert.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/connection-modal.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}

src/lib/libraries/extensions/index.jsx

@@ -46,6 +46,11 @@ import gdxforInsetIconURL from './gdxfor/gdxfor-small.svg';
 import gdxforConnectionIconURL from './gdxfor/gdxfor-illustration.svg';
 import gdxforConnectionSmallIconURL from './gdxfor/gdxfor-small.svg';
 
+import meshIconURL from './mesh/mesh.png';
+import meshInsetIconURL from './mesh/mesh-small.png';
+import meshConnectionIconURL from './mesh/mesh-illustration.png';
+import meshConnectionSmallIconURL from './mesh/mesh-small.png';
+
 export default [
     {
         name: (
@@ -317,5 +322,39 @@ export default [
             />
         ),
         helpLink: 'https://scratch.mit.edu/vernier'
+    },
+    {
+        name: (
+            <FormattedMessage
+                defaultMessage="Mesh"
+                description="Name for the 'Mesh' extension"
+                id="gui.smalruby3.extension.mesh.name"
+            />
+        ),
+        extensionId: 'mesh',
+        iconURL: meshIconURL,
+        insetIconURL: meshInsetIconURL,
+        description: (
+            <FormattedMessage
+                defaultMessage="Allowing users to interact over a computer network."
+                description="Description for the 'Mesh' extension"
+                id="gui.smalruby3.extension.mesh.description"
+            />
+        ),
+        featured: true,
+        bluetoothRequired: false,
+        internetConnectionRequired: true,
+        launchPeripheralConnectionFlow: true,
+        useAutoScan: false,
+        connectionIconURL: meshConnectionIconURL,
+        connectionSmallIconURL: meshConnectionSmallIconURL,
+        connectingMessage: (
+            <FormattedMessage
+                defaultMessage="Connecting"
+                description="Message to help people connect to Mesh network."
+                id="gui.smalruby3.extension.mesh.connectingMessage"
+            />
+        ),
+        helpLink: 'https://github.com/smalruby/smalruby3-gui/wiki/Mesh'
     }
 ];

src/lib/ruby-generator/index.js

@@ -27,6 +27,7 @@ import BoostBlocks from './boost.js';
 import EV3Blocks from './ev3.js';
 import WeDo2Blocks from './wedo2.js';
 import GdxForBlocks from './gdx_for.js';
+import MeshBlocks from './mesh.js';
 
 const SCALAR_TYPE = '';
 const LIST_TYPE = 'list';
@@ -434,7 +435,6 @@ RubyGenerator.getScripts = function () {
 MathBlocks(RubyGenerator);
 TextBlocks(RubyGenerator);
 ColourBlocks(RubyGenerator);
-
 MotionBlocks(RubyGenerator);
 LooksBlocks(RubyGenerator);
 SoundBlocks(RubyGenerator);
@@ -456,5 +456,6 @@ BoostBlocks(RubyGenerator);
 EV3Blocks(RubyGenerator);
 WeDo2Blocks(RubyGenerator);
 GdxForBlocks(RubyGenerator);
+MeshBlocks(RubyGenerator);
 
 export default RubyGenerator;