diff --git a/.gitignore b/.gitignore index b5dec787d9c..e9d76713780 100644 --- a/.gitignore +++ b/.gitignore @@ -23,6 +23,7 @@ npm-* # Downloaded during "npm install" /static/microbit +/static/microbitMore # for act .secrets diff --git a/scripts/prepublish.mjs b/scripts/prepublish.mjs index a2afb4da16a..4db790eece6 100644 --- a/scripts/prepublish.mjs +++ b/scripts/prepublish.mjs @@ -110,8 +110,44 @@ const downloadMicrobitHex = async () => { console.info(`Wrote ${relativeGeneratedFile}`); }; +const downloadMicrobitMoreHex = async () => { + const url = 'https://github.com/microbit-more/pxt-mbit-more-v2/releases/download/0.2.5/microbit-mbit-more-v2-0_2_5.hex'; + console.info(`Downloading ${url}`); + const response = await crossFetch(url); + const hexBuffer = Buffer.from(await response.arrayBuffer()); + const relativeHexDir = path.join('static', 'microbitMore'); + const hexFileName = 'microbit-mbit-more-v2-0_2_5.hex'; + const relativeHexFile = path.join(relativeHexDir, hexFileName); + const absoluteDestDir = path.join(basePath, relativeHexDir); + fs.mkdirSync(absoluteDestDir, {recursive: true}); + const absoluteDestFile = path.join(basePath, relativeHexFile); + fs.writeFileSync(absoluteDestFile, hexBuffer); + + const relativeGeneratedDir = path.join('src', 'generated'); + const relativeGeneratedFile = path.join(relativeGeneratedDir, 'microbit-more-hex-url.cjs'); + const absoluteGeneratedDir = path.join(basePath, relativeGeneratedDir); + fs.mkdirSync(absoluteGeneratedDir, {recursive: true}); + const absoluteGeneratedFile = path.join(basePath, relativeGeneratedFile); + const requirePath = `./${path + .relative(relativeGeneratedDir, relativeHexFile) + .split(path.win32.sep) + .join(path.posix.sep)}`; + fs.writeFileSync( + absoluteGeneratedFile, + [ + '// This file is generated by scripts/prepublish.mjs', + '// Do not edit this file directly', + '// This file relies on a loader to turn this `require` into a URL', + `module.exports = require('${requirePath}');`, + '' // final newline + ].join('\n') + ); + console.info(`Wrote ${relativeGeneratedFile}`); +}; + const prepublish = async () => { await downloadMicrobitHex(); + await downloadMicrobitMoreHex(); }; prepublish().then( diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css index 891ce07741c..c45b83ed688 100644 --- a/src/components/connection-modal/connection-modal.css +++ b/src/components/connection-modal/connection-modal.css @@ -446,3 +446,8 @@ height: 60%; width: inherit; } + +.important-instruction { + font-weight: bold; + color: $ui-red; +} diff --git a/src/components/connection-modal/connection-modal.jsx b/src/components/connection-modal/connection-modal.jsx index 3a7f09b259d..8ddc7366a9b 100644 --- a/src/components/connection-modal/connection-modal.jsx +++ b/src/components/connection-modal/connection-modal.jsx @@ -39,8 +39,20 @@ const ConnectionModalComponent = props => ( {props.phase === PHASES.scanning && props.useAutoScan && } {props.phase === PHASES.connecting && } {props.phase === PHASES.connected && } - {props.phase === PHASES.error && } - {props.phase === PHASES.unavailable && } + {props.phase === PHASES.error && ( + + )} + {props.phase === PHASES.unavailable && ( + + )} {props.phase === PHASES.updatePeripheral && } @@ -55,6 +67,8 @@ ConnectionModalComponent.propTypes = { name: PropTypes.node, onCancel: PropTypes.func.isRequired, onHelp: PropTypes.func.isRequired, + onScanning: PropTypes.func, + onUpdatePeripheral: PropTypes.func, phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired, title: PropTypes.string.isRequired, useAutoScan: PropTypes.bool.isRequired diff --git a/src/components/connection-modal/error-step.jsx b/src/components/connection-modal/error-step.jsx index f91cb537e53..ec3f6d1a57e 100644 --- a/src/components/connection-modal/error-step.jsx +++ b/src/components/connection-modal/error-step.jsx @@ -7,6 +7,7 @@ import Box from '../box/box.jsx'; import Dots from './dots.jsx'; import helpIcon from './icons/help.svg'; import backIcon from './icons/back.svg'; +import enterUpdateIcon from './icons/enter-update.svg'; import styles from './connection-modal.css'; @@ -30,6 +31,15 @@ const ErrorStep = props => ( id="gui.connection.error.errorMessage" /> + {props.onUpdatePeripheral && ( +
+ +
+ )} ( id="gui.connection.error.tryagainbutton" /> + {props.onUpdatePeripheral && ( + + )} + {props.onUpdatePeripheral && ( + + )}