diff --git a/src/views/boost/boost.jsx b/src/views/boost/boost.jsx new file mode 100644 index 000000000..2d9e4b956 --- /dev/null +++ b/src/views/boost/boost.jsx @@ -0,0 +1,256 @@ +const injectIntl = require('react-intl').injectIntl; +const intlShape = require('react-intl').intlShape; +const FormattedMessage = require('react-intl').FormattedMessage; +const React = require('react'); + +const Page = require('../../components/page/www/page.jsx'); +const render = require('../../lib/render.jsx'); + +const FlexRow = require('../../components/flex-row/flex-row.jsx'); + +const OSChooser = require('../../components/os-chooser/os-chooser.jsx'); + +const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx'); +const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx'); +const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx'); +const ExtensionSection = require('../../components/extension-landing/extension-section.jsx'); +const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx'); +const ProjectCard = require('../../components/extension-landing/project-card.jsx'); + +const Steps = require('../../components/steps/steps.jsx'); +const Step = require('../../components/steps/step.jsx'); + +require('../../components/extension-landing/extension-landing.scss'); +require('./boost.scss'); + +class Boost extends ExtensionLanding { + render () { + return ( +
+ +

LEGO BOOST

+ + LEGO BOOST + + ) + }} + /> + + } + renderImage={{this.props.intl.formatMessage({id:} + renderRequirements={ + + + + Windows 10 version 1709+ + + + + macOS 10.13+ + + + + Bluetooth 4.0 + + + + Scratch Link + + + } + /> + + + +

+ +

+ + +
+ +
+

+ + Scratch + + ) + }} + /> +

+ + +
+ {this.props.intl.formatMessage({id: +
+

+ + + + + +

+

+ + + + + + + ) + }} + /> + +
+ +
+ + + + + +
+ {this.props.intl.formatMessage({id: +
+ + +
+

+ + + + + + + +

+

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

+

+

+ +

+

+

+ +

+ +
+ ); + } +} + +Boost.propTypes = { + intl: intlShape.isRequired +}; + +const WrappedBoost = injectIntl(Boost); + +render(, document.getElementById('app')); diff --git a/src/views/boost/boost.scss b/src/views/boost/boost.scss new file mode 100644 index 000000000..2464e5f12 --- /dev/null +++ b/src/views/boost/boost.scss @@ -0,0 +1,9 @@ +@import "../../colors"; +@import "../../frameless"; + +.boost { + .extension-header { + background-color: $ui-blue; + background-image: url("/images/boost/boost-pattern.svg"); + } +} diff --git a/src/views/boost/l10n.json b/src/views/boost/l10n.json new file mode 100644 index 000000000..9c313818e --- /dev/null +++ b/src/views/boost/l10n.json @@ -0,0 +1,34 @@ +{ + "boost.headerText": "The {boostLink} kit brings your LEGO creations to life with powerful motors, a color sensor and more. By combining it with Scratch, you can build your own robotic creatures, tell physical-digital stories, invent new game controllers, or whatever else you can imagine.", + "boost.gettingStarted": "Getting Started", + "boost.connectingBoost": "Connecting BOOST to Scratch", + "boost.powerBoost": "Turn on your sensor by pressing the power button.", + "boost.useScratch3": "Use the {scratch3Link} editor.", + "boost.addExtension": "Add the BOOST extension.", + "boost.thingsToTry": "Things to Try", + "boost.makeAMotorMove": "Make a motor move", + "boost.findTurnMotorOnForSeconds": "Find the {turnMotorOnForSeconds} block and click on it.", + "boost.turnMotorOnForSeconds": "“turn motor A on for 1 seconds”", + "boost.connectALegoBeam": "Connect a LEGO beam with an axle to motor A and click the block again to make it spin.", + "boost.starterProjects": "Starter Projects", + "boost.troubleshootingTitle": "Troubleshooting", + "boost.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link", + "boost.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.", + "boost.winOSVersionLinkText": "Windows", + "boost.macOSVersionLinkText": "Mac OS", + "boost.closeScratchCopiesTitle": "Close other copies of Scratch", + "boost.closeScratchCopiesText": "Only one copy of Scratch can connect with a BOOST at a time. If you have Scratch open in other browser tabs, close it and try again.", + "boost.otherComputerConnectedTitle": "Make sure no other computer is connected to your sensor", + "boost.otherComputerConnectedText": "Only one computer can be connected to a BOOST at a time. If you have another computer connected to your sensor, disconnect the sensor or close Scratch on that computer and try again.", + "boost.imgAltBoostIllustration": "Illustration of the LEGO BOOST.", + "boost.imgAltConnectALegoBeam": "A LEGO BOOST hub with an axle and a short beam connected to motor A.", + "boost.frogBand": "Frog Band", + "boost.frogBandDescription": "Shake, push and toss the sensor to make music.", + "boost.imgAltFrogBand": "A Scratch project with a frog and musical instruments", + "boost.dayAndNight": "Day and Night", + "boost.dayAndNightDescription": "Turn the sensor face down to change day into night.", + "boost.imgAltDayAndNight": "A Scratch project with an elf in a cloak", + "boost.underwaterRocket": "Underwater Rocket", + "boost.underwaterRocketDescription": "Spin and push the sensor to steer the ship.", + "boost.imgAltUnderwaterRocket": "A Scratch project with an underwater rocket ship" +}