Merge pull request #314 from mitmedialab/dev_menuBarUpdates

Dev branch menu bar updates

extensions/src/common/extension/mixins/configurable/addCostumes/index.ts

@@ -9,6 +9,7 @@ let urlHelper: ReturnType<typeof getUrlHelper>;
 
 const rendererKey: keyof RenderedTarget = "renderer";
 const isRenderedTarget = (target: Target | RenderedTarget): target is RenderedTarget => rendererKey in target;
+const notRenderedTargetError = "Costume could not be added as the supplied target wasn't a rendered target";
 
 /**
  * Mixin the ability for extensions to add costumes to sprites
@@ -29,17 +30,30 @@ export default function <T extends MinimalExtensionConstructor>(Ctor: T) {
      * @param {string?} name optional name to attach to the costume
      */
     async addCostume(target: Target, image: ImageData, action: "add only" | "add and set", name?: string) {
-      if (!isRenderedTarget(target)) return console.warn("Costume could not be added is the supplied target wasn't a rendered target");
+      urlHelper ??= getUrlHelper(image);
+      await this.addCostumeBitmap(target, urlHelper.getDataURL(image), action, name);
+    }
+
+    /**
+     * Add a costume to the current sprite based on a bitmpa input
+     * @param {Target} target (e.g. `util.target`)
+     * @param {string} bitmapImage What image to use to create the costume
+     * @param {"add only" | "add and set"} action What action should be applied
+     * - **_add only_**: generates the costume and append it it to the sprite's costume library
+     * - **_add and set_**: Both generate the costume (adding it to the sprite's costume library) and set it as the sprite's current costume
+     * @param {string?} name optional name to attach to the costume
+     */
+    async addCostumeBitmap(target: Target, bitmapImage: string, action: "add only" | "add and set", name?: string) {
+      if (!isRenderedTarget(target)) return console.error(notRenderedTargetError);
 
       name ??= `${this.id}_generated_${Date.now()}`;
       bitmapAdapter ??= new MockBitmapAdapter();
-      urlHelper ??= getUrlHelper(image);
 
       // storage is of type: https://github.com/LLK/scratch-storage/blob/develop/src/ScratchStorage.js
       const { storage } = this.runtime;
       const dataFormat = storage.DataFormat.PNG;
       const assetType = storage.AssetType.ImageBitmap;
-      const dataBuffer = await bitmapAdapter.importBitmap(urlHelper.getDataURL(image));
+      const dataBuffer = await bitmapAdapter.importBitmap(bitmapImage);
 
       const asset = storage.createAsset(assetType, dataFormat, dataBuffer, null, true);
       const { assetId } = asset;
@@ -53,6 +67,24 @@ export default function <T extends MinimalExtensionConstructor>(Ctor: T) {
       if (action === "add and set") target.setCostume(length);
     }
 
+    /**
+     * Add a costume to the current sprite based on same image data
+     * @param {Target} target (e.g. `util.target`)
+     * @param {string?} name costume name to look for
+     */
+    setCostumeByName(target: Target, name: string): boolean {
+      if (!isRenderedTarget(target)) {
+        console.error(notRenderedTargetError);
+        return false;
+      }
+
+      let costumeIndex = target.getCostumeIndexByName(name);
+      if (costumeIndex < 0) return false;
+
+      target.setCostume(costumeIndex);
+      return true;
+    }
+
   }
 
   return ExtensionWithCustomSupport;

packages/scratch-gui/src/components/menu-bar/menu-bar.jsx

@@ -72,7 +72,7 @@ import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
 
-import scratchLogo from './prg-white.png';
+import scratchLogo from './raise-white.png';
 
 import sharedMessages from '../../lib/shared-messages';
 
@@ -682,24 +682,8 @@ class MenuBar extends React.Component {
                         </div>
                     </div>
                     <Divider className={classNames(styles.divider)} />
-                    <a
-                        className={classNames(styles.menuBarItem, styles.hoverable)}
-                        href="https://httyr.media.mit.edu/tutorials"
-                        target="_blank"
-                    >
-                        Curriculum  Tutorials
-                    </a>
-                    <Divider className={classNames(styles.divider)} />
-                    <a
-                        className={classNames(styles.menuBarItem, styles.hoverable, styles.blankLink)}
-                        href="https://teachablemachine.withgoogle.com/train"
-                        target="_blank"
-                    >
-                        Teachable Machine
-                    </a>
-                    {this.props.showTutorials ? (
+                    {true ? (
                         <div>
-                            <Divider className={classNames(styles.divider)} />
                             <div
                                 aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
                                 className={classNames(styles.menuBarItem, styles.hoverable)}

packages/scratch-gui/src/playground/render-gui.jsx

@@ -8,7 +8,7 @@ import HashParserHOC from '../lib/hash-parser-hoc.jsx';
 import log from '../lib/log.js';
 
 const onClickLogo = () => {
-    window.location = 'https://aieducation.mit.edu';
+    window.location = 'https://raise.mit.edu';
 };
 
 const handleTelemetryModalCancel = () => {

packages/scratch-vm/src/virtual-machine.js

@@ -655,7 +655,7 @@ class VirtualMachine extends EventEmitter {
             })
         } else if (url.includes("dropbox.com")) {        
             // Handle loading dropbox links
-            const dropboxRegex = /\/s\/[A-Za-z0-9]+\/.*.sb3/;
+            const dropboxRegex = /\/(s|scl)(\/fi)?\/[A-Za-z0-9]+\/.*.sb3(\?rlkey=[A-Za-z0-9]*)?/;
             const found = url.match(dropboxRegex);
             if (found.length > 0) url = 'https://dl.dropboxusercontent.com' + found[0];
         }