Merge pull request #5833 from LLK/dependabot/npm_and_yarn/scratch-paint-0.2.0-prerelease.20200529184518

Bumps [scratch-paint](https://github.com/LLK/scratch-paint) from 0.2.0-prerelease.20200519194740 to 0.2.0-prerelease.20200529184518.
- [Release notes](https://github.com/LLK/scratch-paint/releases)
- [Commits](https://github.com/LLK/scratch-paint/commits)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.gitattributes

@@ -12,6 +12,7 @@
 *.svg binary
 
 # Prefer LF for most file types
+*.css text eol=lf
 *.frag text eol=lf
 *.htm text eol=lf
 *.html text eol=lf

.npmignore

@@ -5,11 +5,8 @@
 /node_modules
 npm-*
 
-# TO REVERT: the scratch-desktop branch wants to build scratch-gui from source.
-# To support that we need to un-ignore the /src directory.
-# Once we merge the scratch-desktop branch into develop we should re-ignore /src here.
-# We can also do that by omitting or reverting this commit during the merge.
-# /src
+# Double copies of all the static assets and tutorial gifs
+/src
 
 # Testing
 /.nyc_output

.travis.yml

@@ -4,7 +4,7 @@ dist: xenial
 addons:
     chrome: stable
 node_js:
-- 8
+- 10
 env:
   global:
   - CHROMEDRIVER_VERSION=LATEST

package.json

@@ -103,19 +103,18 @@
     "react-test-renderer": "16.2.0",
     "react-tooltip": "3.8.0",
     "react-virtualized": "9.20.1",
-    "react-visibility-sensor": "5.0.2",
     "redux": "3.7.2",
     "redux-mock-store": "^1.2.3",
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
-    "scratch-audio": "0.1.0-prerelease.20190925183642",
-    "scratch-blocks": "0.1.0-prerelease.20200421135214",
-    "scratch-l10n": "3.8.20200421213407",
-    "scratch-paint": "0.2.0-prerelease.20200213174123",
-    "scratch-render": "0.1.0-prerelease.20200424190354",
-    "scratch-storage": "1.3.2",
-    "scratch-svg-renderer": "0.2.0-prerelease.20200205003400",
-    "scratch-vm": "0.2.0-prerelease.20200402182733",
+    "scratch-audio": "0.1.0-prerelease.20200528195344",
+    "scratch-blocks": "0.1.0-prerelease.20200528193139",
+    "scratch-l10n": "3.9.20200528181319",
+    "scratch-paint": "0.2.0-prerelease.20200529184518",
+    "scratch-render": "0.1.0-prerelease.20200512203149",
+    "scratch-storage": "1.3.3",
+    "scratch-svg-renderer": "0.2.0-prerelease.20200507183648",
+    "scratch-vm": "0.2.0-prerelease.20200527195112",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.0",
@@ -140,7 +139,8 @@
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
+      "editor-msgs(\\.js)?$": "<rootDir>/test/__mocks__/editor-msgs-mock.js"
     }
   }
 }

src/components/alerts/alert.css

@@ -15,6 +15,7 @@
     padding-right: 1rem;
     margin-bottom: 7px;
     min-height: 1.5rem;
+    pointer-events: all;
 }
 
 .alert.warn {

src/components/gui/gui.css

@@ -309,6 +309,7 @@ $fade-out-distance: 15px;
     z-index: $z-index-alerts;
     position: absolute;
     margin-top: 53px;
+    pointer-events: none;
 }
 
 /*

src/components/gui/gui.jsx

@@ -89,6 +89,7 @@ const GUIComponent = props => {
         loading,
         logo,
         renderLogin,
+        onClickAbout,
         onClickAccountNav,
         onCloseAccountNav,
         onLogOut,
@@ -105,6 +106,7 @@ const GUIComponent = props => {
         onRequestCloseTelemetryModal,
         onSeeCommunity,
         onShare,
+        onShowPrivacyPolicy,
         onTelemetryModalCancel,
         onTelemetryModalOptIn,
         onTelemetryModalOptOut,
@@ -162,6 +164,7 @@ const GUIComponent = props => {
                         onOptIn={onTelemetryModalOptIn}
                         onOptOut={onTelemetryModalOptOut}
                         onRequestClose={onRequestCloseTelemetryModal}
+                        onShowPrivacyPolicy={onShowPrivacyPolicy}
                     />
                 ) : null}
                 {loading ? (
@@ -218,6 +221,7 @@ const GUIComponent = props => {
                     logo={logo}
                     renderLogin={renderLogin}
                     showComingSoon={showComingSoon}
+                    onClickAbout={onClickAbout}
                     onClickAccountNav={onClickAccountNav}
                     onClickLogo={onClickLogo}
                     onCloseAccountNav={onCloseAccountNav}
@@ -388,6 +392,7 @@ GUIComponent.propTypes = {
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
+    onClickAbout: PropTypes.func,
     onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
@@ -399,6 +404,7 @@ GUIComponent.propTypes = {
     onRequestCloseTelemetryModal: PropTypes.func,
     onSeeCommunity: PropTypes.func,
     onShare: PropTypes.func,
+    onShowPrivacyPolicy: PropTypes.func,
     onTabSelect: PropTypes.func,
     onTelemetryModalCancel: PropTypes.func,
     onTelemetryModalOptIn: PropTypes.func,

src/components/library-item/library-item.jsx

@@ -4,7 +4,6 @@ import React from 'react';
 
 import Box from '../box/box.jsx';
 import PlayButton from '../../containers/play-button.jsx';
-import ScratchImage from '../scratch-image/scratch-image.jsx';
 import styles from './library-item.css';
 import classNames from 'classnames';
 
@@ -37,12 +36,10 @@ class LibraryItemComponent extends React.PureComponent {
                             />
                         </div>
                     ) : null}
-                    {this.props.iconSource ? (
-                        <ScratchImage
-                            className={styles.featuredImage}
-                            imageSource={this.props.iconSource}
-                        />
-                    ) : null}
+                    <img
+                        className={styles.featuredImage}
+                        src={this.props.iconURL}
+                    />
                 </div>
                 {this.props.insetIconURL ? (
                     <div className={styles.libraryItemInsetImageContainer}>
@@ -130,9 +127,9 @@ class LibraryItemComponent extends React.PureComponent {
                         onMouseEnter={this.props.showPlayButton ? this.props.onMouseEnter : null}
                         onMouseLeave={this.props.showPlayButton ? this.props.onMouseLeave : null}
                     >
-                        <ScratchImage
+                        <img
                             className={styles.libraryItemImage}
-                            imageSource={this.props.iconSource}
+                            src={this.props.iconURL}
                         />
                     </Box>
                 </Box>
@@ -162,7 +159,7 @@ LibraryItemComponent.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    iconSource: ScratchImage.ImageSourcePropType,
+    iconURL: PropTypes.string,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     isPlaying: PropTypes.bool,

src/components/library/library.jsx

@@ -10,7 +10,6 @@ import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
 import Spinner from '../spinner/spinner.jsx';
-import storage from '../../lib/storage';
 
 import styles from './library.css';
 
@@ -30,61 +29,6 @@ const messages = defineMessages({
 const ALL_TAG = {tag: 'all', intlLabel: messages.allTag};
 const tagListPrefix = [ALL_TAG];
 
-/**
- * Find the AssetType which corresponds to a particular file extension. For example, 'png' => AssetType.ImageBitmap.
- * @param {string} fileExtension - the file extension to look up.
- * @returns {AssetType} - the AssetType corresponding to the extension, if any.
- */
-const getAssetTypeForFileExtension = function (fileExtension) {
-    const compareOptions = {
-        sensitivity: 'accent',
-        usage: 'search'
-    };
-    for (const assetTypeId in storage.AssetType) {
-        const assetType = storage.AssetType[assetTypeId];
-        if (fileExtension.localeCompare(assetType.runtimeFormat, compareOptions) === 0) {
-            return assetType;
-        }
-    }
-};
-
-/**
- * Figure out one or more icon(s) for a library item.
- * If it's an animated thumbnail, this will return an array of `imageSource`.
- * Otherwise it'll return just one `imageSource`.
- * @param {object} item - either a library item or one of a library item's costumes.
- *   The latter is used internally as part of processing an animated thumbnail.
- * @returns {LibraryItem.PropTypes.icons} - an `imageSource` or array of them, ready for `LibraryItem` & `ScratchImage`
- */
-const getItemIcons = function (item) {
-    const costumes = (item.json && item.json.costumes) || item.costumes;
-    if (costumes) {
-        return costumes.map(getItemIcons);
-    }
-
-    if (item.rawURL) {
-        return {
-            uri: item.rawURL
-        };
-    }
-
-    if (item.assetId && item.dataFormat) {
-        return {
-            assetId: item.assetId,
-            assetType: getAssetTypeForFileExtension(item.dataFormat)
-        };
-    }
-
-    const md5ext = item.md5ext || item.md5 || item.baseLayerMD5;
-    if (md5ext) {
-        const [assetId, fileExtension] = md5ext.split('.');
-        return {
-            assetId: assetId,
-            assetType: getAssetTypeForFileExtension(fileExtension)
-        };
-    }
-};
-
 class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
@@ -264,9 +208,8 @@ class LibraryComponent extends React.Component {
                     })}
                     ref={this.setFilteredDataRef}
                 >
-                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => {
-                        const icons = getItemIcons(dataItem);
-                        return (<LibraryItem
+                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
+                        <LibraryItem
                             bluetoothRequired={dataItem.bluetoothRequired}
                             collaborator={dataItem.collaborator}
                             description={dataItem.description}
@@ -274,7 +217,9 @@ class LibraryComponent extends React.Component {
                             extensionId={dataItem.extensionId}
                             featured={dataItem.featured}
                             hidden={dataItem.hidden}
-                            icons={icons}
+                            iconMd5={dataItem.md5}
+                            iconRawURL={dataItem.rawURL}
+                            icons={dataItem.json && dataItem.json.costumes}
                             id={index}
                             insetIconURL={dataItem.insetIconURL}
                             internetConnectionRequired={dataItem.internetConnectionRequired}
@@ -285,8 +230,8 @@ class LibraryComponent extends React.Component {
                             onMouseEnter={this.handleMouseEnter}
                             onMouseLeave={this.handleMouseLeave}
                             onSelect={this.handleSelect}
-                        />);
-                    }) : (
+                        />
+                    )) : (
                         <div className={styles.spinnerWrapper}>
                             <Spinner
                                 large

src/components/menu-bar/icon--about.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M10 2c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm-.072 10.42c-.256 0-.472.076-.648.227-.176.151-.264.338-.264.56 0 .25.091.445.273.584.182.139.395.209.639.209.236 0 .444-.07.624-.211s.27-.335.27-.581c0-.222-.086-.409-.258-.56-.172-.151-.384-.227-.636-.227zm.144-6.42c-.624 0-1.17.113-1.638.338-.468.225-.824.51-1.068.853-.244.343-.366.683-.366 1.017 0 .162.077.313.231.452.154.139.343.209.567.209.38 0 .638-.199.774-.597.144-.38.32-.668.528-.864.208-.196.532-.293.972-.293.376 0 .683.097.921.291.238.194.357.432.357.713 0 .144-.039.278-.117.402-.078.123-.174.235-.288.336-.114.1-.299.249-.555.446-.292.225-.524.42-.696.584-.172.164-.31.354-.414.571-.104.217-.156.473-.156.769 0 .236.071.414.213.534.142.12.317.18.525.18.4 0 .638-.183.714-.55l.099-.362.093-.206.183-.227.327-.288c.492-.387.833-.663 1.023-.827.19-.164.354-.358.492-.584.138-.225.207-.488.207-.787 0-.38-.121-.733-.363-1.057-.242-.324-.585-.58-1.029-.769-.444-.188-.956-.283-1.536-.283z" id="a"/></defs><g transform="translate(-2 -2)" fill="none"><mask><use xlink:href="#a"/></mask><use fill="#fff" xlink:href="#a"/></g></svg>

src/components/menu-bar/menu-bar.css

@@ -218,3 +218,9 @@
 .mystuff > a {
   background-image: url("/images/mystuff.png");
 }
+
+.about-icon {
+    height: 1.25rem;
+    margin: 0.5rem;
+    vertical-align: middle;
+}

src/components/menu-bar/menu-bar.jsx

@@ -69,6 +69,7 @@ import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
+import aboutIcon from './icon--about.svg';
 
 import scratchLogo from './scratch-logo.svg';
 
@@ -141,6 +142,19 @@ MenuItemTooltip.propTypes = {
     isRtl: PropTypes.bool
 };
 
+const AboutButton = props => (
+    <Button
+        className={classNames(styles.menuBarItem, styles.hoverable)}
+        iconClassName={styles.aboutIcon}
+        iconSrc={aboutIcon}
+        onClick={props.onClick}
+    />
+);
+
+AboutButton.propTypes = {
+    onClick: PropTypes.func.isRequired
+};
+
 class MenuBar extends React.Component {
     constructor (props) {
         super(props);
@@ -311,6 +325,8 @@ class MenuBar extends React.Component {
                 {remixMessage}
             </Button>
         );
+        // Show the About button only if we have a handler for it (like in the desktop app)
+        const aboutButton = this.props.onClickAbout ? <AboutButton onClick={this.props.onClickAbout} /> : null;
         return (
             <Box
                 className={classNames(
@@ -689,6 +705,8 @@ class MenuBar extends React.Component {
                         </React.Fragment>
                     )}
                 </div>
+
+                {aboutButton}
             </Box>
         );
     }
@@ -722,6 +740,7 @@ MenuBar.propTypes = {
     locale: PropTypes.string.isRequired,
     loginMenuOpen: PropTypes.bool,
     logo: PropTypes.string,
+    onClickAbout: PropTypes.func,
     onClickAccount: PropTypes.func,
     onClickEdit: PropTypes.func,
     onClickFile: PropTypes.func,

src/components/scratch-image/scratch-image.jsx

@@ -1,138 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import VisibilitySensor from 'react-visibility-sensor';
-
-import storage from '../../lib/storage';
-
-class ScratchImage extends React.PureComponent {
-    static init () {
-        this._maxParallelism = 6;
-        this._currentJobs = 0;
-        this._pendingImages = new Set();
-    }
-
-    static loadPendingImages () {
-        if (this._currentJobs >= this._maxParallelism) {
-            // already busy
-            return;
-        }
-
-        // Find the first visible image. If there aren't any, find the first non-visible image.
-        let nextImage;
-        for (const image of this._pendingImages) {
-            if (image.isVisible) {
-                nextImage = image;
-                break;
-            } else {
-                nextImage = nextImage || image;
-            }
-        }
-
-        // If we found an image to load:
-        // 1) Remove it from the queue
-        // 2) Load the image
-        // 3) Pump the queue again
-        if (nextImage) {
-            this._pendingImages.delete(nextImage);
-            const imageSource = nextImage.props.imageSource;
-            ++this._currentJobs;
-            storage
-                .load(imageSource.assetType, imageSource.assetId)
-                .then(asset => {
-                    if (!nextImage.wasUnmounted) {
-                        const dataURI = asset.encodeDataURI();
-
-                        nextImage.setState({
-                            imageURI: dataURI
-                        });
-                    }
-                    --this._currentJobs;
-                    this.loadPendingImages();
-                });
-        }
-    }
-
-    constructor (props) {
-        super(props);
-        this.state = {};
-        Object.assign(this.state, this._loadImageSource(props.imageSource));
-    }
-    componentWillReceiveProps (nextProps) {
-        const newState = this._loadImageSource(nextProps.imageSource);
-        this.setState(newState);
-    }
-    componentWillUnmount () {
-        this.wasUnmounted = true;
-        ScratchImage._pendingImages.delete(this);
-    }
-    /**
-     * Calculate the state changes necessary to load the image specified in the provided source info. If the component
-     * is mounted, call setState() with the return value of this function. If the component has not yet mounted, use
-     * the return value of this function as initial state for the component.
-     *
-     * @param {object} imageSource - the new source for the image, including either assetId or URI
-     * @returns {object} - the new state values, if any.
-     */
-    _loadImageSource (imageSource) {
-        if (imageSource) {
-            if (imageSource.uri) {
-                ScratchImage._pendingImages.delete(this);
-                return {
-                    imageURI: imageSource.uri,
-                    lastRequestedAsset: null
-                };
-            }
-            if (this.state.lastRequestedAsset !== imageSource.assetId) {
-                ScratchImage._pendingImages.add(this);
-                return {
-                    lastRequestedAsset: imageSource.assetId
-                };
-            }
-        }
-        // Nothing to do - don't change any state.
-        return {};
-    }
-    render () {
-        const {
-            imageSource: _imageSource,
-            ...imgProps
-        } = this.props;
-        return (
-            <VisibilitySensor
-                intervalCheck
-                scrollCheck
-            >
-                {
-                    ({isVisible}) => {
-                        this.isVisible = isVisible;
-                        ScratchImage.loadPendingImages();
-                        return (
-                            <img
-                                {...imgProps} // do this first in case it contains `src`
-                                src={this.state.imageURI} // overrides imgProps.src if present
-                            />
-                        );
-                    }
-                }
-            </VisibilitySensor>
-        );
-    }
-}
-
-ScratchImage.ImageSourcePropType = PropTypes.oneOfType([
-    PropTypes.shape({
-        assetId: PropTypes.string.isRequired,
-        assetType: PropTypes.oneOf(Object.values(storage.AssetType)).isRequired
-    }),
-    PropTypes.shape({
-        uri: PropTypes.string.isRequired
-    })
-]);
-
-ScratchImage.propTypes = {
-    imageSource: ScratchImage.ImageSourcePropType.isRequired
-};
-
-ScratchImage.init();
-
-export default ScratchImage;

src/components/stage/stage.css

@@ -66,7 +66,6 @@
 
     overflow: hidden;
     display: flex;
-    align-items: center;
     justify-content: center;
 }
 

src/components/telemetry-modal/telemetry-modal.jsx

@@ -101,6 +101,9 @@ class TelemetryModal extends React.PureComponent {
                             privacyPolicyLink: (<a
                                 className={styles.privacyPolicyLink}
                                 href="https://scratch.mit.edu/privacy_policy/"
+                                onClick={this.props.onShowPrivacyPolicy}
+                                target="_blank"
+                                rel="noopener noreferrer"
                             >
                                 <FormattedMessage {...messages.privacyPolicyLink} />
                             </a>)
@@ -134,7 +137,8 @@ TelemetryModal.propTypes = {
     onCancel: PropTypes.func,
     onOptIn: PropTypes.func.isRequired,
     onOptOut: PropTypes.func.isRequired,
-    onRequestClose: PropTypes.func
+    onRequestClose: PropTypes.func,
+    onShowPrivacyPolicy: PropTypes.func
 };
 
 export default injectIntl(TelemetryModal);

src/containers/library-item.jsx

@@ -21,8 +21,6 @@ class LibraryItem extends React.PureComponent {
             'startRotatingIcons',
             'stopRotatingIcons'
         ]);
-        // TODO: is there a better "is it an array?" check to use here?
-        this.hasIconsArray = props.icons.hasOwnProperty('length');
         this.state = {
             iconIndex: 0,
             isRotatingIcon: false
@@ -55,7 +53,7 @@ class LibraryItem extends React.PureComponent {
         // only show hover effects on the item if not showing a play button
         if (!this.props.showPlayButton) {
             this.props.onMouseEnter(this.props.id);
-            if (this.hasIconsArray) {
+            if (this.props.icons && this.props.icons.length) {
                 this.stopRotatingIcons();
                 this.setState({
                     isRotatingIcon: true
@@ -67,7 +65,7 @@ class LibraryItem extends React.PureComponent {
         // only show hover effects on the item if not showing a play button
         if (!this.props.showPlayButton) {
             this.props.onMouseLeave(this.props.id);
-            if (this.hasIconsArray) {
+            if (this.props.icons && this.props.icons.length) {
                 this.setState({
                     isRotatingIcon: false
                 }, this.stopRotatingIcons);
@@ -93,22 +91,23 @@ class LibraryItem extends React.PureComponent {
         const nextIconIndex = (this.state.iconIndex + 1) % this.props.icons.length;
         this.setState({iconIndex: nextIconIndex});
     }
-    curIconSource () {
-        if (this.hasIconsArray) {
-            if (this.state.isRotatingIcon &&
-                this.state.iconIndex < this.props.icons.length &&
-                this.props.icons[this.state.iconIndex]) {
-                // multiple icons, currently animating: show current frame
-                return this.props.icons[this.state.iconIndex];
-            }
-            // multiple icons, not currently animating: show first frame
-            return this.props.icons[0];
+    curIconMd5 () {
+        const iconMd5Prop = this.props.iconMd5;
+        if (this.props.icons &&
+            this.state.isRotatingIcon &&
+            this.state.iconIndex < this.props.icons.length) {
+            const icon = this.props.icons[this.state.iconIndex] || {};
+            return icon.md5ext || // 3.0 library format
+                icon.baseLayerMD5 || // 2.0 library format, TODO GH-5084
+                iconMd5Prop;
         }
-        // single icon
-        return this.props.icons;
+        return iconMd5Prop;
     }
     render () {
-        const iconSource = this.curIconSource();
+        const iconMd5 = this.curIconMd5();
+        const iconURL = iconMd5 ?
+            `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
+            this.props.iconRawURL;
         return (
             <LibraryItemComponent
                 bluetoothRequired={this.props.bluetoothRequired}
@@ -118,7 +117,8 @@ class LibraryItem extends React.PureComponent {
                 extensionId={this.props.extensionId}
                 featured={this.props.featured}
                 hidden={this.props.hidden}
-                iconSource={iconSource}
+                iconURL={iconURL}
+                icons={this.props.icons}
                 id={this.props.id}
                 insetIconURL={this.props.insetIconURL}
                 internetConnectionRequired={this.props.internetConnectionRequired}
@@ -149,10 +149,14 @@ LibraryItem.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    icons: PropTypes.oneOfType([
-        LibraryItemComponent.propTypes.iconSource, // single icon
-        PropTypes.arrayOf(LibraryItemComponent.propTypes.iconSource) // rotating icons
-    ]),
+    iconMd5: PropTypes.string,
+    iconRawURL: PropTypes.string,
+    icons: PropTypes.arrayOf(
+        PropTypes.shape({
+            baseLayerMD5: PropTypes.string, // 2.0 library format, TODO GH-5084
+            md5ext: PropTypes.string // 3.0 library format
+        })
+    ),
     id: PropTypes.number.isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,

src/index.js

@@ -1,6 +1,5 @@
 import GUI from './containers/gui.jsx';
 import AppStateHOC from './lib/app-state-hoc.jsx';
-import TitledHOC from './lib/titled-hoc.jsx';
 import GuiReducer, {guiInitialState, guiMiddleware, initEmbedded, initFullScreen, initPlayer} from './reducers/gui';
 import LocalesReducer, {localesInitialState, initLocale} from './reducers/locales';
 import {ScratchPaintReducer} from 'scratch-paint';
@@ -17,7 +16,6 @@ const guiReducers = {
 export {
     GUI as default,
     AppStateHOC,
-    TitledHOC,
     setAppElement,
     guiReducers,
     guiInitialState,

src/lib/analytics.js

@@ -1,23 +1,10 @@
 import GoogleAnalytics from 'react-ga';
 
-import log from './log';
-
-const GA_ID = (process.env.GA_ID || window.GA_ID);
-if (GA_ID) {
-    GoogleAnalytics.initialize(GA_ID, {
-        debug: (process.env.NODE_ENV !== 'production'),
-        titleCase: true,
-        sampleRate: (process.env.NODE_ENV === 'production') ? 100 : 0,
-        forceSSL: true
-    });
-} else {
-    log.info('Disabling GA because GA_ID is not set.');
-    window.ga = () => {
-        // The `react-ga` module calls this function to implement all Google Analytics calls. Providing an empty
-        // function effectively disables `react-ga`. This is similar to the `testModeAPI` feature of `react-ga` except
-        // that `testModeAPI` logs the arguments of every call into an array. That's nice for testing purposes but
-        // would look like a memory leak in a live program.
-    };
-}
+GoogleAnalytics.initialize(process.env.GA_ID || window.GA_ID, {
+    debug: (process.env.NODE_ENV !== 'production'),
+    titleCase: true,
+    sampleRate: (process.env.NODE_ENV === 'production') ? 100 : 0,
+    forceSSL: true
+});
 
 export default GoogleAnalytics;

src/lib/download-blob.js

@@ -8,11 +8,23 @@ export default (filename, blob) => {
         return;
     }
 
-    const url = window.URL.createObjectURL(blob);
-    downloadLink.href = url;
-    downloadLink.download = filename;
-    downloadLink.type = blob.type;
-    downloadLink.click();
-    window.URL.revokeObjectURL(url);
-    document.body.removeChild(downloadLink);
+    if ('download' in HTMLAnchorElement.prototype) {
+        const url = window.URL.createObjectURL(blob);
+        downloadLink.href = url;
+        downloadLink.download = filename;
+        downloadLink.type = blob.type;
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+        window.URL.revokeObjectURL(url);
+    } else {
+        // iOS Safari, open a new page and set href to data-uri
+        let popup = window.open('', '_blank');
+        const reader = new FileReader();
+        reader.onloadend = function () {
+            popup.location.href = reader.result;
+            popup = null;
+        };
+        reader.readAsDataURL(blob);
+    }
+
 };

src/lib/drop-area-hoc.jsx

@@ -78,7 +78,7 @@ const DropAreaHOC = function (dragTypes) {
                 }
             }
             render () {
-                const componentProps = omit(this.props, ['onDrop', 'dragInfo']);
+                const componentProps = omit(this.props, ['onDrop', 'dragInfo', 'componentRef']);
                 return (
                     <WrappedComponent
                         containerRef={this.setRef}

src/lib/libraries/costumes.json

@@ -2072,6 +2072,476 @@
             2
         ]
     },
+    {
+        "name": "Character1-a",
+        "md5": "03bc23a9fa12c1244c83a07a81f20bfd.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            49,
+            124,
+            1
+        ]
+    },
+    {
+        "name": "Character1-b",
+        "md5": "f26b130c2c58b812be21d1a9745863a1.svg",
+        "type": "costume",
+        "tags": [
+            "disability",
+            "disabled",
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            54,
+            122,
+            1
+        ]
+    },
+    {
+        "name": "Character1-c",
+        "md5": "cc0be722cf93eef63726bd606ab11c5c.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            54,
+            126,
+            1
+        ]
+    },
+    {
+        "name": "Character1-d",
+        "md5": "6be261800647c53becb1f93ed31ed13e.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            54,
+            123,
+            1
+        ]
+    },
+    {
+        "name": "Character1-e",
+        "md5": "6f78ce6a87d114162ed9fbef30f9a0fd.svg",
+        "type": "costume",
+        "tags": [
+            "disability",
+            "disabled",
+            "wheelchair",
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            65,
+            120,
+            1
+        ]
+    },
+    {
+        "name": "Character1-f",
+        "md5": "527ba82c5e82f43c8fca0be905dbe20a.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            54,
+            126,
+            1
+        ]
+    },
+    {
+        "name": "Character1-g",
+        "md5": "1e303bb57aac0cb4678e85de4251f3f4.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            54,
+            125,
+            1
+        ]
+    },
+    {
+        "name": "Character1-h",
+        "md5": "0f18f9e90d0ed68ebec23da087eb2603.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            54,
+            126,
+            1
+        ]
+    },
+    {
+        "name": "Character1-i",
+        "md5": "5e2f620e5687a36e1954414054c69ccc.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            59,
+            124,
+            1
+        ]
+    },
+    {
+        "name": "Character1-j",
+        "md5": "1044a68cc743f83564e36a6bca16830b.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            57,
+            127,
+            1
+        ]
+    },
+    {
+        "name": "Character1-k",
+        "md5": "b37d0e0d46f07cb2cbdc5285e176bf62.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            55,
+            122,
+            1
+        ]
+    },
+    {
+        "name": "Character1-l",
+        "md5": "984043e1e7c544999c31f952d1d43a56.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            56,
+            124,
+            1
+        ]
+    },
+    {
+        "name": "Character1-m",
+        "md5": "6d5ddfc69f9c6a3f1d2ded1428237931.svg",
+        "type": "costume",
+        "tags": [
+            "old",
+            "grandma",
+            "mom",
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            56,
+            126,
+            1
+        ]
+    },
+    {
+        "name": "Character2-a",
+        "md5": "7084b3baab935de819cc5ab46f7cecf8.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            47,
+            127,
+            1
+        ]
+    },
+    {
+        "name": "Character2-b",
+        "md5": "df7cbf2913bcea721df2e0360644f193.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            44,
+            125,
+            1
+        ]
+    },
+    {
+        "name": "Character2-c",
+        "md5": "e0eacf1e575adc559c41e3a81a892168.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            47,
+            123,
+            1
+        ]
+    },
+    {
+        "name": "Character2-d",
+        "md5": "e8b44b0e904fd4bb7430c26b743f1520.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            44,
+            128,
+            1
+        ]
+    },
+    {
+        "name": "Character2-e",
+        "md5": "67d425b11544caa0fe9228f355c6485b.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            48,
+            122,
+            1
+        ]
+    },
+    {
+        "name": "Character2-f",
+        "md5": "db3f436fcb6fb28828a4c932b60feb5e.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            48,
+            126,
+            1
+        ]
+    },
+    {
+        "name": "Character2-g",
+        "md5": "93e035270675f933b94ee951d7e475e3.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            47,
+            125,
+            1
+        ]
+    },
+    {
+        "name": "Character2-h",
+        "md5": "f4f2778df2840de5a6449a49f3efb599.svg",
+        "type": "costume",
+        "tags": [
+            "disability",
+            "disabled",
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            44,
+            128,
+            1
+        ]
+    },
+    {
+        "name": "Character2-i",
+        "md5": "1cf73a791959e07b5bafe18474f93b78.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            48,
+            126,
+            1
+        ]
+    },
+    {
+        "name": "Character2-j",
+        "md5": "bf0d808f7bf0c11c338b4fea0a735874.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            48,
+            128,
+            1
+        ]
+    },
     {
         "name": "Cheesy Puffs",
         "md5": "82772a61ec74974e84c686c61ea0b7d5.png",
@@ -6302,6 +6772,66 @@
             1
         ]
     },
+    {
+        "name": "Kia-a",
+        "md5": "e56e480c994572323d88355b8733e1a3.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            38,
+            133,
+            1
+        ]
+    },
+    {
+        "name": "Kia-b",
+        "md5": "b3d0a248adbc26b0d0826e042a81670a.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            33,
+            133,
+            1
+        ]
+    },
+    {
+        "name": "Kia-c",
+        "md5": "db6cd6b145bb6d8dc299475af7423d6e.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            55,
+            133,
+            1
+        ]
+    },
     {
         "name": "Kiran-a",
         "md5": "7c0bedab5404830a5147cc4a2d46e997.svg",
@@ -6781,6 +7311,66 @@
             1
         ]
     },
+    {
+        "name": "Luca-a",
+        "md5": "90fa2ad340edc6e6ba963710feef940e.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            44,
+            130,
+            1
+        ]
+    },
+    {
+        "name": "Luca-b",
+        "md5": "18dfad514602a4907502c7c84861b24e.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            41,
+            130,
+            1
+        ]
+    },
+    {
+        "name": "Luca-c",
+        "md5": "963cb82687acaf5de53a22b287192723.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            50,
+            130,
+            1
+        ]
+    },
     {
         "name": "Magicwand",
         "md5": "89aa5332042d7bbf8368293a4efeafa4.svg",
@@ -7409,6 +7999,66 @@
             1
         ]
     },
+    {
+        "name": "Noor-a",
+        "md5": "4cf233c6540e434aded60608ba316ce3.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            38,
+            130,
+            1
+        ]
+    },
+    {
+        "name": "Noor-b",
+        "md5": "975585ca9461f0730a285fc96df73425.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            41,
+            130,
+            1
+        ]
+    },
+    {
+        "name": "Noor-c",
+        "md5": "c1792bbd5970034b4595ff7e742d6e47.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            50,
+            130,
+            1
+        ]
+    },
     {
         "name": "Octopus-a",
         "md5": "e22d9b633feffc1d026980a1f21e07d7.svg",
@@ -9088,6 +9738,66 @@
             2
         ]
     },
+    {
+        "name": "Sasha-a",
+        "md5": "e26bf53469cafd730ca150e745ceeafc.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            48,
+            132,
+            1
+        ]
+    },
+    {
+        "name": "Sasha-b",
+        "md5": "a0b8890ce458aebed5e7002e1897508e.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            40,
+            132,
+            1
+        ]
+    },
+    {
+        "name": "Sasha-c",
+        "md5": "89bb25e1465eb9481d267e4f9df592af.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            56,
+            131,
+            1
+        ]
+    },
     {
         "name": "Saxophone-a",
         "md5": "4414c51bdd03f60f40a1210e1d55cf57.svg",
@@ -9890,6 +10600,166 @@
             1
         ]
     },
+    {
+        "name": "Tatiana-a",
+        "md5": "5cf65a9f942ca92c93915527ff9db1e6.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            60,
+            53,
+            1
+        ]
+    },
+    {
+        "name": "Tatiana-b",
+        "md5": "91fb7d056beaf553ccec03d61d72c545.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            49,
+            61,
+            1
+        ]
+    },
+    {
+        "name": "Tatiana-c",
+        "md5": "e207fd3f99e1db8c5d66f49446f27e37.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            60,
+            53,
+            1
+        ]
+    },
+    {
+        "name": "Tatiana-d",
+        "md5": "e2ea6bbc6066574d4836e808a1c5f849.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            49,
+            55,
+            1
+        ]
+    },
+    {
+        "name": "Taylor-a",
+        "md5": "ae2eaae0882543dc276c8e7d56ff2e7b.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            59,
+            52,
+            1
+        ]
+    },
+    {
+        "name": "Taylor-b",
+        "md5": "e0082f49fc5d0d83d7fad6124ba82bb1.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            48,
+            53,
+            1
+        ]
+    },
+    {
+        "name": "Taylor-c",
+        "md5": "ae2eaae0882543dc276c8e7d56ff2e7b.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            59,
+            52,
+            1
+        ]
+    },
+    {
+        "name": "Taylor-d",
+        "md5": "a504d785629f2d1ca6b87e80b334d5e8.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            48,
+            50,
+            1
+        ]
+    },
     {
         "name": "Ten80 Pop Down",
         "md5": "fea7045c09073700b88fae8d4d257cd1.png",
@@ -10248,6 +11118,86 @@
             1
         ]
     },
+    {
+        "name": "Trisha-a",
+        "md5": "55d31103bc86447c6a727b4f0664a5ea.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            81,
+            57,
+            1
+        ]
+    },
+    {
+        "name": "Trisha-b",
+        "md5": "c31dc8487a841f644889784ff437e2c5.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            63,
+            60,
+            1
+        ]
+    },
+    {
+        "name": "Trisha-c",
+        "md5": "55d31103bc86447c6a727b4f0664a5ea.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            81,
+            57,
+            1
+        ]
+    },
+    {
+        "name": "Trisha-d",
+        "md5": "2d06023ec09ec312ab49055530511134.svg",
+        "type": "costume",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            63,
+            55,
+            1
+        ]
+    },
     {
         "name": "Truck-a",
         "md5": "aaa05abc5aa182a0d7bfdc6db0f3207a.svg",

src/lib/libraries/sprites.json

@@ -3424,6 +3424,319 @@
             "objName": "Champ99"
         }
     },
+    {
+        "name": "Characters 1",
+        "md5": "03bc23a9fa12c1244c83a07a81f20bfd.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            13,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Characters 1",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "03bc23a9fa12c1244c83a07a81f20bfd",
+                    "name": "character1-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "03bc23a9fa12c1244c83a07a81f20bfd.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 49.8898709690844,
+                    "rotationCenterY": 124.76092657062226
+                },
+                {
+                    "assetId": "f26b130c2c58b812be21d1a9745863a1",
+                    "name": "character1-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "f26b130c2c58b812be21d1a9745863a1.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 54.60290188300769,
+                    "rotationCenterY": 122.98040317401274
+                },
+                {
+                    "assetId": "cc0be722cf93eef63726bd606ab11c5c",
+                    "name": "character1-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "cc0be722cf93eef63726bd606ab11c5c.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 54.60291410943074,
+                    "rotationCenterY": 126.85057804587933
+                },
+                {
+                    "assetId": "6be261800647c53becb1f93ed31ed13e",
+                    "name": "character1-d",
+                    "bitmapResolution": 1,
+                    "md5ext": "6be261800647c53becb1f93ed31ed13e.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 54.602918664146046,
+                    "rotationCenterY": 123.84994499999999
+                },
+                {
+                    "assetId": "6f78ce6a87d114162ed9fbef30f9a0fd",
+                    "name": "character1-e",
+                    "bitmapResolution": 1,
+                    "md5ext": "6f78ce6a87d114162ed9fbef30f9a0fd.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 65.725,
+                    "rotationCenterY": 120.67006881854581
+                },
+                {
+                    "assetId": "527ba82c5e82f43c8fca0be905dbe20a",
+                    "name": "character1-f",
+                    "bitmapResolution": 1,
+                    "md5ext": "527ba82c5e82f43c8fca0be905dbe20a.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 54.60291455471537,
+                    "rotationCenterY": 126.76429674297606
+                },
+                {
+                    "assetId": "1e303bb57aac0cb4678e85de4251f3f4",
+                    "name": "character1-g",
+                    "bitmapResolution": 1,
+                    "md5ext": "1e303bb57aac0cb4678e85de4251f3f4.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 54.60291143772301,
+                    "rotationCenterY": 125.34991500000001
+                },
+                {
+                    "assetId": "0f18f9e90d0ed68ebec23da087eb2603",
+                    "name": "character1-h",
+                    "bitmapResolution": 1,
+                    "md5ext": "0f18f9e90d0ed68ebec23da087eb2603.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 54.60291643772288,
+                    "rotationCenterY": 126.34996499999997
+                },
+                {
+                    "assetId": "5e2f620e5687a36e1954414054c69ccc",
+                    "name": "character1-i",
+                    "bitmapResolution": 1,
+                    "md5ext": "5e2f620e5687a36e1954414054c69ccc.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 59.662344830457954,
+                    "rotationCenterY": 124.64983500000002
+                },
+                {
+                    "assetId": "1044a68cc743f83564e36a6bca16830b",
+                    "name": "character1-j",
+                    "bitmapResolution": 1,
+                    "md5ext": "1044a68cc743f83564e36a6bca16830b.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 57.80000000000001,
+                    "rotationCenterY": 127.9064156368213
+                },
+                {
+                    "assetId": "b37d0e0d46f07cb2cbdc5285e176bf62",
+                    "name": "character1-k",
+                    "bitmapResolution": 1,
+                    "md5ext": "b37d0e0d46f07cb2cbdc5285e176bf62.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 55.00291821886171,
+                    "rotationCenterY": 122.96517404562759
+                },
+                {
+                    "assetId": "984043e1e7c544999c31f952d1d43a56",
+                    "name": "character1-l",
+                    "bitmapResolution": 1,
+                    "md5ext": "984043e1e7c544999c31f952d1d43a56.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 56,
+                    "rotationCenterY": 124.849995
+                },
+                {
+                    "assetId": "6d5ddfc69f9c6a3f1d2ded1428237931",
+                    "name": "character1-m",
+                    "bitmapResolution": 1,
+                    "md5ext": "6d5ddfc69f9c6a3f1d2ded1428237931.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 56,
+                    "rotationCenterY": 126.73041545130786
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "83a9787d4cb6f3b7632b4ddfebf74367",
+                    "name": "pop",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 1123,
+                    "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 9,
+            "visible": true,
+            "x": -102,
+            "y": -23.999999999999993,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Characters 1"
+        }
+    },
+    {
+        "name": "Characters 2",
+        "md5": "7084b3baab935de819cc5ab46f7cecf8.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            10,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Characters 2",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "7084b3baab935de819cc5ab46f7cecf8",
+                    "name": "character2-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "7084b3baab935de819cc5ab46f7cecf8.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 47.99056799868501,
+                    "rotationCenterY": 127.80503283089969
+                },
+                {
+                    "assetId": "df7cbf2913bcea721df2e0360644f193",
+                    "name": "character2-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "df7cbf2913bcea721df2e0360644f193.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 44.99552075655663,
+                    "rotationCenterY": 125.14875889583388
+                },
+                {
+                    "assetId": "e0eacf1e575adc559c41e3a81a892168",
+                    "name": "character2-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "e0eacf1e575adc559c41e3a81a892168.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 47.95809,
+                    "rotationCenterY": 123.53880000000001
+                },
+                {
+                    "assetId": "e8b44b0e904fd4bb7430c26b743f1520",
+                    "name": "character2-d",
+                    "bitmapResolution": 1,
+                    "md5ext": "e8b44b0e904fd4bb7430c26b743f1520.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 44.995540756556636,
+                    "rotationCenterY": 128.2061488659535
+                },
+                {
+                    "assetId": "67d425b11544caa0fe9228f355c6485b",
+                    "name": "character2-e",
+                    "bitmapResolution": 1,
+                    "md5ext": "67d425b11544caa0fe9228f355c6485b.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 48.00809000000001,
+                    "rotationCenterY": 122.45
+                },
+                {
+                    "assetId": "db3f436fcb6fb28828a4c932b60feb5e",
+                    "name": "character2-f",
+                    "bitmapResolution": 1,
+                    "md5ext": "db3f436fcb6fb28828a4c932b60feb5e.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 48.53553350541961,
+                    "rotationCenterY": 126.89993965793039
+                },
+                {
+                    "assetId": "93e035270675f933b94ee951d7e475e3",
+                    "name": "character2-g",
+                    "bitmapResolution": 1,
+                    "md5ext": "93e035270675f933b94ee951d7e475e3.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 47.53308999999999,
+                    "rotationCenterY": 125.43368141092515
+                },
+                {
+                    "assetId": "f4f2778df2840de5a6449a49f3efb599",
+                    "name": "character2-h",
+                    "bitmapResolution": 1,
+                    "md5ext": "f4f2778df2840de5a6449a49f3efb599.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 44.953870756556626,
+                    "rotationCenterY": 128.08851543576878
+                },
+                {
+                    "assetId": "1cf73a791959e07b5bafe18474f93b78",
+                    "name": "character2-i",
+                    "bitmapResolution": 1,
+                    "md5ext": "1cf73a791959e07b5bafe18474f93b78.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 48.00809000000001,
+                    "rotationCenterY": 126.87082000000001
+                },
+                {
+                    "assetId": "bf0d808f7bf0c11c338b4fea0a735874",
+                    "name": "character2-j",
+                    "bitmapResolution": 1,
+                    "md5ext": "bf0d808f7bf0c11c338b4fea0a735874.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 48.64271853726632,
+                    "rotationCenterY": 128.03860864267807
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "83a9787d4cb6f3b7632b4ddfebf74367",
+                    "name": "pop",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 1123,
+                    "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 8,
+            "visible": true,
+            "x": -195,
+            "y": 37.00000000000001,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Characters 2"
+        }
+    },
     {
         "name": "Cheesy Puffs",
         "md5": "82772a61ec74974e84c686c61ea0b7d5.png",
@@ -10977,6 +11290,86 @@
             "objName": "Keyboard"
         }
     },
+    {
+        "name": "Kia",
+        "md5": "e56e480c994572323d88355b8733e1a3.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            3,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Kia",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "e56e480c994572323d88355b8733e1a3",
+                    "name": "Kia-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "e56e480c994572323d88355b8733e1a3.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 38.99436950683594,
+                    "rotationCenterY": 133.91017150878906
+                },
+                {
+                    "assetId": "b3d0a248adbc26b0d0826e042a81670a",
+                    "name": "Kia-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "b3d0a248adbc26b0d0826e042a81670a.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 33.86018625895264,
+                    "rotationCenterY": 133.81014001838557
+                },
+                {
+                    "assetId": "db6cd6b145bb6d8dc299475af7423d6e",
+                    "name": "Kia-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "db6cd6b145bb6d8dc299475af7423d6e.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 55.533868959382346,
+                    "rotationCenterY": 133.7360717987814
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "83a9787d4cb6f3b7632b4ddfebf74367",
+                    "name": "Pop",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 1123,
+                    "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 4,
+            "visible": true,
+            "x": 211.99999999999997,
+            "y": 39.00000000000001,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Kia"
+        }
+    },
     {
         "name": "Kiran",
         "md5": "7c0bedab5404830a5147cc4a2d46e997.svg",
@@ -11759,6 +12152,86 @@
             "objName": "Llama"
         }
     },
+    {
+        "name": "Luca",
+        "md5": "90fa2ad340edc6e6ba963710feef940e.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            3,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Luca",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "90fa2ad340edc6e6ba963710feef940e",
+                    "name": "Luca-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "90fa2ad340edc6e6ba963710feef940e.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 44.518938859952925,
+                    "rotationCenterY": 130.28487970293187
+                },
+                {
+                    "assetId": "18dfad514602a4907502c7c84861b24e",
+                    "name": "Luca-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "18dfad514602a4907502c7c84861b24e.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 41.801770753585856,
+                    "rotationCenterY": 130.2642790555675
+                },
+                {
+                    "assetId": "963cb82687acaf5de53a22b287192723",
+                    "name": "Luca-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "963cb82687acaf5de53a22b287192723.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 50.565256229860694,
+                    "rotationCenterY": 130.02168173555543
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "83a9787d4cb6f3b7632b4ddfebf74367",
+                    "name": "Pop",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 1123,
+                    "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 5,
+            "visible": true,
+            "x": 179,
+            "y": 17,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Luca"
+        }
+    },
     {
         "name": "Magic Wand",
         "md5": "89aa5332042d7bbf8368293a4efeafa4.svg",
@@ -12848,6 +13321,86 @@
             "objName": "Neigh Pony"
         }
     },
+    {
+        "name": "Noor",
+        "md5": "4cf233c6540e434aded60608ba316ce3.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            3,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Noor",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "4cf233c6540e434aded60608ba316ce3",
+                    "name": "Noor-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "4cf233c6540e434aded60608ba316ce3.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 38.4758779691426,
+                    "rotationCenterY": 130.22760078036825
+                },
+                {
+                    "assetId": "975585ca9461f0730a285fc96df73425",
+                    "name": "Noor-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "975585ca9461f0730a285fc96df73425.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 41.73210898803782,
+                    "rotationCenterY": 130.22760078036825
+                },
+                {
+                    "assetId": "c1792bbd5970034b4595ff7e742d6e47",
+                    "name": "Noor-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "c1792bbd5970034b4595ff7e742d6e47.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 50.673619073816894,
+                    "rotationCenterY": 130.25802625960853
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "83a9787d4cb6f3b7632b4ddfebf74367",
+                    "name": "Pop",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 1123,
+                    "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 6,
+            "visible": true,
+            "x": 154,
+            "y": -19,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Noor"
+        }
+    },
     {
         "name": "Octopus",
         "md5": "e22d9b633feffc1d026980a1f21e07d7.svg",
@@ -15694,6 +16247,86 @@
             "objName": "Sam"
         }
     },
+    {
+        "name": "Sasha",
+        "md5": "e26bf53469cafd730ca150e745ceeafc.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            3,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Sasha",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "e26bf53469cafd730ca150e745ceeafc",
+                    "name": "Sasha-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "e26bf53469cafd730ca150e745ceeafc.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 48.12538146972656,
+                    "rotationCenterY": 132.3017578125
+                },
+                {
+                    "assetId": "a0b8890ce458aebed5e7002e1897508e",
+                    "name": "Sasha-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "a0b8890ce458aebed5e7002e1897508e.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 40.4882598059082,
+                    "rotationCenterY": 132.05174255371094
+                },
+                {
+                    "assetId": "89bb25e1465eb9481d267e4f9df592af",
+                    "name": "Sasha-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "89bb25e1465eb9481d267e4f9df592af.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 56.06647351528716,
+                    "rotationCenterY": 131.95398475097656
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "83a9787d4cb6f3b7632b4ddfebf74367",
+                    "name": "Pop",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 1123,
+                    "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 7,
+            "visible": true,
+            "x": 119.00000000000001,
+            "y": -50,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Sasha"
+        }
+    },
     {
         "name": "Saxophone",
         "md5": "4414c51bdd03f60f40a1210e1d55cf57.svg",
@@ -17405,6 +18038,184 @@
             "objName": "Takeout"
         }
     },
+    {
+        "name": "Tatiana",
+        "md5": "5cf65a9f942ca92c93915527ff9db1e6.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            4,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Tatiana",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "5cf65a9f942ca92c93915527ff9db1e6",
+                    "name": "Tatiana-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "5cf65a9f942ca92c93915527ff9db1e6.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 60.66618579359704,
+                    "rotationCenterY": 53.97647634953694
+                },
+                {
+                    "assetId": "91fb7d056beaf553ccec03d61d72c545",
+                    "name": "Tatiana-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "91fb7d056beaf553ccec03d61d72c545.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 49.74537298932822,
+                    "rotationCenterY": 61.254895800177906
+                },
+                {
+                    "assetId": "e207fd3f99e1db8c5d66f49446f27e37",
+                    "name": "Tatiana-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "e207fd3f99e1db8c5d66f49446f27e37.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 60.666205767105936,
+                    "rotationCenterY": 53.86536113811712
+                },
+                {
+                    "assetId": "e2ea6bbc6066574d4836e808a1c5f849",
+                    "name": "Tatiana-d",
+                    "bitmapResolution": 1,
+                    "md5ext": "e2ea6bbc6066574d4836e808a1c5f849.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 49.85653018505951,
+                    "rotationCenterY": 55.72124957487232
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "c893b0a9b3e2e0594f1f921a12aa66be",
+                    "name": "Footsteps",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 256348,
+                    "md5ext": "c893b0a9b3e2e0594f1f921a12aa66be.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 2,
+            "visible": true,
+            "x": -8.99999999999999,
+            "y": 122.00000000000001,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Tatiana"
+        }
+    },
+    {
+        "name": "Taylor",
+        "md5": "ae2eaae0882543dc276c8e7d56ff2e7b.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            4,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Taylor",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "ae2eaae0882543dc276c8e7d56ff2e7b",
+                    "name": "Taylor-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "ae2eaae0882543dc276c8e7d56ff2e7b.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 59.066061145351995,
+                    "rotationCenterY": 52.19126
+                },
+                {
+                    "assetId": "e0082f49fc5d0d83d7fad6124ba82bb1",
+                    "name": "Taylor-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "e0082f49fc5d0d83d7fad6124ba82bb1.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 48.612321639466984,
+                    "rotationCenterY": 53.0163
+                },
+                {
+                    "assetId": "ae2eaae0882543dc276c8e7d56ff2e7b",
+                    "name": "Taylor-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "ae2eaae0882543dc276c8e7d56ff2e7b.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 59.066061145351995,
+                    "rotationCenterY": 52.19126
+                },
+                {
+                    "assetId": "a504d785629f2d1ca6b87e80b334d5e8",
+                    "name": "Taylor-d",
+                    "bitmapResolution": 1,
+                    "md5ext": "a504d785629f2d1ca6b87e80b334d5e8.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 48.945654918401004,
+                    "rotationCenterY": 50.35257000000004
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "c893b0a9b3e2e0594f1f921a12aa66be",
+                    "name": "Footsteps",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 256348,
+                    "md5ext": "c893b0a9b3e2e0594f1f921a12aa66be.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 1,
+            "visible": true,
+            "x": 2.000000000000007,
+            "y": -116.99999999999999,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Taylor"
+        }
+    },
     {
         "name": "Ten80 Dance",
         "md5": "f60f99278455c843b7833fb7615428dd.png",
@@ -17961,6 +18772,95 @@
             "objName": "Trees"
         }
     },
+    {
+        "name": "Trisha",
+        "md5": "55d31103bc86447c6a727b4f0664a5ea.svg",
+        "type": "sprite",
+        "tags": [
+            "people",
+            "person",
+            "boy",
+            "girl",
+            "nonbinary",
+            "non-binary",
+            "kid",
+            "character"
+        ],
+        "info": [
+            0,
+            4,
+            1
+        ],
+        "json": {
+            "isStage": false,
+            "name": "Trisha",
+            "variables": {},
+            "lists": {},
+            "broadcasts": {},
+            "blocks": {},
+            "comments": {},
+            "currentCostume": 0,
+            "costumes": [
+                {
+                    "assetId": "55d31103bc86447c6a727b4f0664a5ea",
+                    "name": "Trisha-a",
+                    "bitmapResolution": 1,
+                    "md5ext": "55d31103bc86447c6a727b4f0664a5ea.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 81.34455278988648,
+                    "rotationCenterY": 57.02459255690913
+                },
+                {
+                    "assetId": "c31dc8487a841f644889784ff437e2c5",
+                    "name": "Trisha-b",
+                    "bitmapResolution": 1,
+                    "md5ext": "c31dc8487a841f644889784ff437e2c5.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 63.260135124357646,
+                    "rotationCenterY": 60.86251166255646
+                },
+                {
+                    "assetId": "55d31103bc86447c6a727b4f0664a5ea",
+                    "name": "Trisha-c",
+                    "bitmapResolution": 1,
+                    "md5ext": "55d31103bc86447c6a727b4f0664a5ea.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 81.34455278988648,
+                    "rotationCenterY": 57.02459255690913
+                },
+                {
+                    "assetId": "2d06023ec09ec312ab49055530511134",
+                    "name": "Trisha-d",
+                    "bitmapResolution": 1,
+                    "md5ext": "2d06023ec09ec312ab49055530511134.svg",
+                    "dataFormat": "svg",
+                    "rotationCenterX": 63.275047131412066,
+                    "rotationCenterY": 55.525379847189015
+                }
+            ],
+            "sounds": [
+                {
+                    "assetId": "c893b0a9b3e2e0594f1f921a12aa66be",
+                    "name": "Footsteps",
+                    "dataFormat": "wav",
+                    "format": "",
+                    "rate": 48000,
+                    "sampleCount": 256348,
+                    "md5ext": "c893b0a9b3e2e0594f1f921a12aa66be.wav"
+                }
+            ],
+            "volume": 100,
+            "layerOrder": 3,
+            "visible": true,
+            "x": 5.999999999999982,
+            "y": -0.9999999999999964,
+            "size": 100,
+            "direction": 90,
+            "draggable": false,
+            "rotationStyle": "all around",
+            "objName": "Trisha"
+        }
+    },
     {
         "name": "Truck",
         "md5": "aaa05abc5aa182a0d7bfdc6db0f3207a.svg",

src/lib/project-saver-hoc.jsx

@@ -251,6 +251,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
                     if (id && this.props.onUpdateProjectThumbnail) {
                         this.storeProjectThumbnail(id);
                     }
+                    this.reportTelemetryEvent('projectDidSave');
                     return response;
                 })
                 .catch(err => {
@@ -291,9 +292,15 @@ const ProjectSaverHOC = function (WrappedComponent) {
          */
         // TODO make a telemetry HOC and move this stuff there
         reportTelemetryEvent (event) {
-            if (this.props.onProjectTelemetryEvent) {
-                const metadata = collectMetadata(this.props.vm, this.props.reduxProjectTitle, this.props.locale);
-                this.props.onProjectTelemetryEvent(event, metadata);
+            try {
+                if (this.props.onProjectTelemetryEvent) {
+                    const metadata = collectMetadata(this.props.vm, this.props.reduxProjectTitle, this.props.locale);
+                    this.props.onProjectTelemetryEvent(event, metadata);
+                }
+            } catch (e) {
+                log.error('Telemetry error', event, e);
+                // This is intentionally fire/forget because a failure
+                // to report telemetry should not block saving
             }
         }
 

test/__mocks__/editor-msgs-mock.js

@@ -0,0 +1,3 @@
+export default {
+    en: {}
+};

test/helpers/selenium-helper.js

@@ -19,6 +19,7 @@ class SeleniumHelper {
             'clickText',
             'clickButton',
             'clickXpath',
+            'clickBlocksCategory',
             'elementIsVisible',
             'findByText',
             'findByXpath',
@@ -124,6 +125,17 @@ class SeleniumHelper {
         return this.findByText(text, scope).then(el => el.click());
     }
 
+    async clickBlocksCategory (categoryText) {
+        // The toolbox is destroyed and recreated several times, so avoid clicking on a nonexistent element and erroring
+        // out. First we wait for the block pane itself to appear, then wait 100ms for the toolbox to finish refreshing,
+        // then finally click the toolbox text.
+
+        await this.findByXpath('//div[contains(@class, "blocks_blocks")]');
+        await this.driver.sleep(100);
+        await this.clickText(categoryText, 'div[contains(@class, "blocks_blocks")]');
+        await this.driver.sleep(500); // Wait for scroll to finish
+    }
+
     rightClickText (text, scope) {
         return this.findByText(text, scope).then(el => this.driver.actions()
             .click(el, Button.RIGHT)

test/integration/blocks.test.js

@@ -3,6 +3,7 @@ import SeleniumHelper from '../helpers/selenium-helper';
 
 const {
     clickText,
+    clickBlocksCategory,
     clickButton,
     clickXpath,
     findByText,
@@ -31,8 +32,7 @@ describe('Working with the blocks', () => {
     test('Blocks report when clicked in the toolbox', async () => {
         await loadUri(uri);
         await clickText('Code');
-        await clickText('Operators', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Operators');
         await clickText('join', scope.blocksTab); // Click "join <hello> <world>" block
         await findByText('apple banana', scope.reportedValue); // Tooltip with result
         const logs = await getLogs();
@@ -41,14 +41,13 @@ describe('Working with the blocks', () => {
 
     test('Switching sprites updates the block menus', async () => {
         await loadUri(uri);
-        await clickText('Sound', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Sound');
         // "Meow" sound block should be visible
         await findByText('Meow', scope.blocksTab);
         await clickText('Backdrops'); // Switch to the backdrop
         // Now "pop" sound block should be visible and motion blocks hidden
         await findByText('pop', scope.blocksTab);
-        await clickText('Motion', scope.blocksTab);
+        await clickBlocksCategory('Motion');
         await findByText('Stage selected: no motion blocks');
 
         const logs = await getLogs();
@@ -58,8 +57,7 @@ describe('Working with the blocks', () => {
     test('Creating variables', async () => {
         await loadUri(uri);
         await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');
 
         // Expect a default variable "my variable" to be visible
         await clickText('my\u00A0variable', scope.blocksTab);
@@ -75,8 +73,7 @@ describe('Working with the blocks', () => {
         await clickButton('OK');
 
         // Make sure reporting works on a new variable
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');
         await clickText('score', scope.blocksTab);
         await findByText('0', scope.reportedValue); // Tooltip with result
 
@@ -100,8 +97,7 @@ describe('Working with the blocks', () => {
     test('Creating a list', async () => {
         await loadUri(uri);
         await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');
 
         await clickText('Make a List');
         let el = await findByXpath("//input[@name='New list name:']");
@@ -133,8 +129,7 @@ describe('Working with the blocks', () => {
 
     test('Custom procedures', async () => {
         await loadUri(uri);
-        await clickText('My Blocks');
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('My Blocks');
         await clickText('Make a Block');
         // Click on the "add an input" buttons
         await clickText('number or text', scope.modal);
@@ -165,8 +160,7 @@ describe('Working with the blocks', () => {
     test('Record option from sound block menu opens sound recorder', async () => {
         await loadUri(uri);
         await clickText('Code');
-        await clickText('Sound', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Sound');
         await clickText('Meow', scope.blocksTab); // Click "play sound <Meow> until done" block
         await clickText('record'); // Click "record..." option in the block's sound menu
         // Access has been force denied, so close the alert that comes up
@@ -193,8 +187,7 @@ describe('Working with the blocks', () => {
 
         // Make sure it is updated in the block menu
         await clickText('Code');
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
         await clickText('newname', scope.blocksTab);
     });
 
@@ -213,19 +206,17 @@ describe('Working with the blocks', () => {
 
         // Make sure it is updated in the block menu
         await clickText('Code');
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
         await clickText('<NewCostume>', scope.blocksTab);
 
-        await clickText('Sound', scope.blocksTab);
+        await clickBlocksCategory('Sound');
     });
 
     test('Adding costumes DOES update the default costume name in the toolbox', async () => {
         await loadUri(uri);
 
         // By default, costume2 is in the costume tab
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
         await clickText('costume2', scope.blocksTab);
 
         // Also check that adding a new costume does update the list
@@ -254,8 +245,7 @@ describe('Working with the blocks', () => {
         await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
             "//div[contains(text(), 'A Bass')]");
         await clickText('Code');
-        await clickText('Sound', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Sound');
         await clickText('A\u00A0Bass', scope.blocksTab); // Need &nbsp; for block text
     });
 
@@ -264,15 +254,13 @@ describe('Working with the blocks', () => {
         const playerUri = path.resolve(__dirname, '../../build/player.html');
         await loadUri(playerUri);
         await clickText('See inside');
-        await clickText('Variables');
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Variables');
         await clickText('my\u00A0variable');
 
         await clickText('See Project Page');
         await clickText('See inside');
 
-        await clickText('Variables');
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Variables');
         await clickText('my\u00A0variable');
     });
 
@@ -281,8 +269,7 @@ describe('Working with the blocks', () => {
         await loadUri(uri);
         await clickText('Costumes');
         await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll
+        await clickBlocksCategory('Variables');
         await clickText('Make a List');
         const el = await findByXpath("//input[@name='New list name:']");
         await el.sendKeys('list1');

test/integration/costumes.test.js

@@ -193,11 +193,7 @@ describe('Working with costumes', () => {
             .mouseMove(abbyElement)
             .perform();
         // wait for one of Abby's alternate costumes to appear
-        const src1 = await abbyElement.findElement({css: 'img'}).getAttribute('src');
-        await driver.sleep(300);
-        const src2 = await abbyElement.findElement({css: 'img'}).getAttribute('src');
-        const sourcesMatch = (src1 === src2);
-        await expect(sourcesMatch).toBeFalsy(); // 'src' attribute should have changed by now
+        await findByXpath('//img[@src="https://cdn.assets.scratch.mit.edu/internalapi/asset/45de34b47a2ce22f6f5d28bb35a44ff5.svg/get/"]');
         const logs = await getLogs();
         await expect(logs).toEqual([]);
     });

test/unit/components/menu-bar.test.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers';
+import MenuBar from '../../../src/components/menu-bar/menu-bar';
+import {menuInitialState} from '../../../src/reducers/menus';
+import {LoadingState} from '../../../src/reducers/project-state';
+
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+import VM from 'scratch-vm';
+
+
+describe('MenuBar Component', () => {
+    const store = configureStore()({
+        locales: {
+            isRtl: false,
+            locale: 'en-US'
+        },
+        scratchGui: {
+            menus: menuInitialState,
+            projectState: {
+                loadingState: LoadingState.NOT_LOADED
+            },
+            vm: new VM()
+        }
+    });
+
+    const getComponent = function (props = {}) {
+        return <Provider store={store}><MenuBar {...props} /></Provider>;
+    };
+
+    test('menu bar with no About handler has no About button', () => {
+        const menuBar = mountWithIntl(getComponent());
+        const button = menuBar.find('AboutButton');
+        expect(button.exists()).toBe(false);
+    });
+
+    test('menu bar with an About handler has an About button', () => {
+        const onClickAbout = jest.fn();
+        const menuBar = mountWithIntl(getComponent({onClickAbout}));
+        const button = menuBar.find('AboutButton');
+        expect(button.exists()).toBe(true);
+    });
+
+    test('clicking on About button calls the handler', () => {
+        const onClickAbout = jest.fn();
+        const menuBar = mountWithIntl(getComponent({onClickAbout}));
+        const button = menuBar.find('AboutButton');
+        expect(onClickAbout).toHaveBeenCalledTimes(0);
+        button.simulate('click');
+        expect(onClickAbout).toHaveBeenCalledTimes(1);
+    });
+});