[UEPR-184 & UEPR-329] Add Face Sensing Tutorial

packages/scratch-gui/src/components/cards/card.css

@@ -190,14 +190,14 @@
     margin: 0 0.5rem 0.5rem;
 }
 
-.decks {
+.decks, .resources {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     padding: 0 1rem 0.5rem;
 }
 
-.deck {
+.deck, .resource {
     display: flex;
     flex-direction: column;
     margin: 0 8px 8px;
@@ -207,13 +207,13 @@
     overflow: hidden;
 }
 
-.deck-image {
+.deck-image, .resource-image {
     width: 200px;
     height: 100px;
     object-fit: cover;
 }
 
-.deck-name {
+.deck-name, .resource-name {
     color: $looks-secondary;
     font-weight: bold;
     font-size: 0.85rem;

packages/scratch-gui/src/components/cards/cards.jsx

@@ -275,6 +275,60 @@ PreviewsStep.propTypes = {
     onShowAll: PropTypes.func.isRequired
 };
 
+const PreviewExternalStep = ({externalResources, onShowAll}) => (
+    <Fragment>
+        <div className={styles.stepTitle}>
+            <FormattedMessage
+                defaultMessage="More things to try!"
+                description="Title card with more things to try"
+                id="gui.cards.more-things-to-try"
+            />
+        </div>
+        <div className={styles.resources}>
+            {Object.keys(externalResources).slice(0, 2)
+                .map(id => (
+                    <a
+                        className={styles.resource}
+                        key={`resource-preview-${id}`}
+                        href={externalResources[id].url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <img
+                            className={styles.resourceImage}
+                            draggable={false}
+                            src={externalResources[id].img}
+                        />
+                        <div className={styles.resourceName}>{externalResources[id].name}</div>
+                    </a>
+                ))}
+        </div>
+        <div className={styles.seeAll}>
+            <div
+                className={styles.seeAllButton}
+                onClick={onShowAll}
+            >
+                <FormattedMessage
+                    defaultMessage="See more"
+                    description="Title for button to see more in how-to library"
+                    id="gui.cards.see-more"
+                />
+            </div>
+        </div>
+    </Fragment>
+);
+
+PreviewExternalStep.propTypes = {
+    externalResources: PropTypes.shape({
+        id: PropTypes.shape({
+            name: PropTypes.node.isRequired,
+            img: PropTypes.string.isRequired,
+            url: PropTypes.string.isRequired
+        })
+    }).isRequired,
+    onShowAll: PropTypes.func.isRequired
+};
+
 const Cards = props => {
     const {
         activeDeckId,
@@ -359,26 +413,32 @@ const Cards = props => {
                                     onShowAll={onShowAll}
                                 />
                             ) : (
-                                steps[step].video ? (
-                                    showVideos ?
-                                        (
-                                            <VideoStep
-                                                dragging={dragging}
-                                                expanded={expanded}
-                                                video={translateVideo(steps[step].video, locale)}
-                                            />
-                                        ) : (
-                                            <ImageStep
-                                                image={content[activeDeckId].img}
-                                                title={content[activeDeckId].name}
-                                            />
-                                        )
-                                ) : (
-                                    <ImageStep
-                                        image={translateImage(steps[step].image, locale)}
-                                        title={steps[step].title}
+                                steps[step].externalResources ? (
+                                    <PreviewExternalStep
+                                        externalResources={steps[step].externalResources}
+                                        onShowAll={onShowAll}
                                     />
-                                )
+                                ) :
+                                    steps[step].video ? (
+                                        showVideos ?
+                                            (
+                                                <VideoStep
+                                                    dragging={dragging}
+                                                    expanded={expanded}
+                                                    video={translateVideo(steps[step].video, locale)}
+                                                />
+                                            ) : (
+                                                <ImageStep
+                                                    image={content[activeDeckId].img}
+                                                    title={content[activeDeckId].name}
+                                                />
+                                            )
+                                    ) : (
+                                        <ImageStep
+                                            image={translateImage(steps[step].image, locale)}
+                                            title={steps[step].title}
+                                        />
+                                    )
                             )}
                             {steps[step].trackingPixel && steps[step].trackingPixel}
                         </div>

packages/scratch-gui/src/lib/libraries/decks/en-steps.js

@@ -91,6 +91,16 @@ import videoPet from './steps/video-pet.en.png';
 import videoAnimate from './steps/video-animate.en.png';
 import videoPop from './steps/video-pop.en.png';
 
+// Face Sensing
+import faceAddExtension from './steps/face-add-extension.en.gif';
+import faceAllowCamera from './steps/face-allow-camera.en.png';
+import faceAddFashionSprite from './steps/face-add-fashion-sprite.en.png';
+import faceGoToTopHead from './steps/face-go-to-top-head.en.gif';
+import faceGoToTopHeadForever from './steps/face-go-to-top-head-forever.en.png';
+import faceAdjustSize from './steps/face-adjust-size.en.gif';
+import faceAddAnotherSprite from './steps/face-add-another-sprite.en.png';
+import faceClickerGame from './steps/face-clicker-game.en.png';
+
 // Make it Fly
 import flyChooseBackdrop from './steps/fly-choose-backdrop.LTR.gif';
 import flyChooseCharacter from './steps/fly-choose-character.LTR.png';
@@ -293,6 +303,16 @@ const enImages = {
     videoAnimate: videoAnimate,
     videoPop: videoPop,
 
+    // Face Sensing
+    faceAddExtension: faceAddExtension,
+    faceAllowCamera: faceAllowCamera,
+    faceAddFashionSprite: faceAddFashionSprite,
+    faceGoToTopHead: faceGoToTopHead,
+    faceGoToTopHeadForever: faceGoToTopHeadForever,
+    faceAdjustSize: faceAdjustSize,
+    faceAddAnotherSprite: faceAddAnotherSprite,
+    faceClickerGame: faceClickerGame,
+
     // Make it Fly
     flyChooseBackdrop: flyChooseBackdrop,
     flyChooseCharacter: flyChooseCharacter,

packages/scratch-gui/src/lib/libraries/decks/index.jsx

@@ -39,6 +39,9 @@ import libraryStory from './thumbnails/tell-a-story.jpg';
 // Video Sensing
 import libraryVideoSens from './thumbnails/video-sensing.jpg';
 
+// Face Sensing
+import libraryFaceSens from './thumbnails/face-sensing.jpg';
+
 // Make-it-Fly
 import libraryMakeFly from './thumbnails/make-it-fly.jpg';
 
@@ -65,6 +68,10 @@ import addEffectsThumb from './thumbnails/add-effects.jpg';
 import moveArrowKeysThumb from './thumbnails/move-arrow-keys.jpg';
 import spinThumb from './thumbnails/spin.jpg';
 
+// Extrernal Resources
+import codingCards from './thumbnails/coding-cards.png';
+import faceSensingGame from './thumbnails/face-sensing-game.png';
+
 export const CATEGORIES = {
     gettingStarted: 'gettingStarted',
     basics: 'basics',
@@ -1558,7 +1565,119 @@ export default {
         ],
         urlId: 'video-sensing'
     },
-
+    'Face-Sensing': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Face Sensing"
+                description="Name for the 'Face Sensing' how-to"
+                id="gui.howtos.facesens.name"
+            />
+        ),
+        img: libraryFaceSens,
+        category: CATEGORIES.intermediate,
+        steps: [{
+            video: 'fnjds1cjei'
+        },
+        {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add the “Face Sensing” Extension"
+                    description="Step name for 'Add the “Face Sensing” Extension' step"
+                    id="gui.howtos.facesens.step_addExtension"
+                />
+            ),
+            image: 'faceAddExtension'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Allow Access to Your Camera (Your Video Is Private)"
+                    description="Step name for 'Allow Access to Your Camera' step"
+                    id="gui.howtos.facesens.step_allowCamera"
+                />
+            ),
+            image: 'faceAllowCamera'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Select a “Fashion” Accessory Sprite"
+                    description="Step name for 'Select a “Fashion” Accessory Sprite' step"
+                    id="gui.howtos.facesens.step_addFashionSprite"
+                />
+            ),
+            image: 'faceAddFashionSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Go to Top of Head"
+                    description="Step name for 'Go to Top of Head' step"
+                    id="gui.howtos.facesens.step_goToTopHead"
+                />
+            ),
+            image: 'faceGoToTopHead'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Forever Go to Top of Head"
+                    description="Step name for 'Forever Go to Top of Head' step"
+                    id="gui.howtos.facesens.step_goToTopHeadForever"
+                />
+            ),
+            image: 'faceGoToTopHeadForever'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Use Blocks or Paint Editor to Adjust Size and Placement"
+                    description="Step name for 'Use Blocks or Paint Editor to Adjust Size and Placement' step"
+                    id="gui.howtos.facesens.step_adjustSize"
+                />
+            ),
+            image: 'faceAdjustSize'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add Another Sprite or Try Additional Blocks"
+                    description="Step name for 'Add Another Sprite or Try Additional Blocks' step"
+                    id="gui.howtos.facesens.step_addAnotherSprite"
+                />
+            ),
+            image: 'faceAddAnotherSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Or Convert a Clicker Game to Use Parts of Your Face"
+                    description="Step name for 'Or Convert a Clicker Game to Use Parts of Your Face' step"
+                    id="gui.howtos.facesens.step_clickerGame"
+                />
+            ),
+            image: 'faceClickerGame'
+        }, {
+            externalResources: {
+                'Face-Sensing-Game': {
+                    name: (
+                        <FormattedMessage
+                            defaultMessage="Starter Project | Face Sensing Game"
+                            description="Name for the 'Starter Project | Face Sensing Game' resource"
+                            id="gui.howtos.externalResources.faceSensingGame"
+                        />
+                    ),
+                    img: faceSensingGame,
+                    url: 'https://scratch.mit.edu/projects/1210061611'
+                },
+                'Coding-Cards': {
+                    name: (
+                        <FormattedMessage
+                            defaultMessage="Coding Cards | Face Sensing"
+                            description="Name for the 'Coding Cards | Face Sensing' how-to"
+                            id="gui.howtos.externalResources.codingCards"
+                        />
+                    ),
+                    img: codingCards,
+                    url: 'https://scratchfoundation.org/learn/learning-library/face-sensing'
+                }
+            }
+        }],
+        urlId: 'face-sensing'
+    },
     'talking': {
         name: (
             <FormattedMessage