Skip to content

Commit 4b06d19

Browse files
adzhindzhiadzhindzhi
authored
Merge pull request #328 from adzhindzhi/uepr-184-uepr-329
[UEPR-184 & UEPR-329] Add Face Sensing Tutorial
2 parents bde8e7a + e604258 commit 4b06d19

15 files changed

+223
-24
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -190,14 +190,14 @@
190190
margin: 0 0.5rem 0.5rem;
191191
}
192192

193-
.decks {
193+
.decks, .resources {
194194
display: flex;
195195
flex-direction: row;
196196
justify-content: space-around;
197197
padding: 0 1rem 0.5rem;
198198
}
199199

200-
.deck {
200+
.deck, .resource {
201201
display: flex;
202202
flex-direction: column;
203203
margin: 0 8px 8px;
@@ -207,13 +207,13 @@
207207
overflow: hidden;
208208
}
209209

210-
.deck-image {
210+
.deck-image, .resource-image {
211211
width: 200px;
212212
height: 100px;
213213
object-fit: cover;
214214
}
215215

216-
.deck-name {
216+
.deck-name, .resource-name {
217217
color: $looks-secondary;
218218
font-weight: bold;
219219
font-size: 0.85rem;

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

Lines changed: 79 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,60 @@ PreviewsStep.propTypes = {
275275
onShowAll: PropTypes.func.isRequired
276276
};
277277

278+
const PreviewExternalStep = ({externalResources, onShowAll}) => (
279+
<Fragment>
280+
<div className={styles.stepTitle}>
281+
<FormattedMessage
282+
defaultMessage="More things to try!"
283+
description="Title card with more things to try"
284+
id="gui.cards.more-things-to-try"
285+
/>
286+
</div>
287+
<div className={styles.resources}>
288+
{Object.keys(externalResources).slice(0, 2)
289+
.map(id => (
290+
<a
291+
className={styles.resource}
292+
key={`resource-preview-${id}`}
293+
href={externalResources[id].url}
294+
target="_blank"
295+
rel="noopener noreferrer"
296+
>
297+
<img
298+
className={styles.resourceImage}
299+
draggable={false}
300+
src={externalResources[id].img}
301+
/>
302+
<div className={styles.resourceName}>{externalResources[id].name}</div>
303+
</a>
304+
))}
305+
</div>
306+
<div className={styles.seeAll}>
307+
<div
308+
className={styles.seeAllButton}
309+
onClick={onShowAll}
310+
>
311+
<FormattedMessage
312+
defaultMessage="See more"
313+
description="Title for button to see more in how-to library"
314+
id="gui.cards.see-more"
315+
/>
316+
</div>
317+
</div>
318+
</Fragment>
319+
);
320+
321+
PreviewExternalStep.propTypes = {
322+
externalResources: PropTypes.shape({
323+
id: PropTypes.shape({
324+
name: PropTypes.node.isRequired,
325+
img: PropTypes.string.isRequired,
326+
url: PropTypes.string.isRequired
327+
})
328+
}).isRequired,
329+
onShowAll: PropTypes.func.isRequired
330+
};
331+
278332
const Cards = props => {
279333
const {
280334
activeDeckId,
@@ -359,26 +413,32 @@ const Cards = props => {
359413
onShowAll={onShowAll}
360414
/>
361415
) : (
362-
steps[step].video ? (
363-
showVideos ?
364-
(
365-
<VideoStep
366-
dragging={dragging}
367-
expanded={expanded}
368-
video={translateVideo(steps[step].video, locale)}
369-
/>
370-
) : (
371-
<ImageStep
372-
image={content[activeDeckId].img}
373-
title={content[activeDeckId].name}
374-
/>
375-
)
376-
) : (
377-
<ImageStep
378-
image={translateImage(steps[step].image, locale)}
379-
title={steps[step].title}
416+
steps[step].externalResources ? (
417+
<PreviewExternalStep
418+
externalResources={steps[step].externalResources}
419+
onShowAll={onShowAll}
380420
/>
381-
)
421+
) :
422+
steps[step].video ? (
423+
showVideos ?
424+
(
425+
<VideoStep
426+
dragging={dragging}
427+
expanded={expanded}
428+
video={translateVideo(steps[step].video, locale)}
429+
/>
430+
) : (
431+
<ImageStep
432+
image={content[activeDeckId].img}
433+
title={content[activeDeckId].name}
434+
/>
435+
)
436+
) : (
437+
<ImageStep
438+
image={translateImage(steps[step].image, locale)}
439+
title={steps[step].title}
440+
/>
441+
)
382442
)}
383443
{steps[step].trackingPixel && steps[step].trackingPixel}
384444
</div>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,16 @@ import videoPet from './steps/video-pet.en.png';
9191
import videoAnimate from './steps/video-animate.en.png';
9292
import videoPop from './steps/video-pop.en.png';
9393

94+
// Face Sensing
95+
import faceAddExtension from './steps/face-add-extension.en.gif';
96+
import faceAllowCamera from './steps/face-allow-camera.en.png';
97+
import faceAddFashionSprite from './steps/face-add-fashion-sprite.en.png';
98+
import faceGoToTopHead from './steps/face-go-to-top-head.en.gif';
99+
import faceGoToTopHeadForever from './steps/face-go-to-top-head-forever.en.png';
100+
import faceAdjustSize from './steps/face-adjust-size.en.gif';
101+
import faceAddAnotherSprite from './steps/face-add-another-sprite.en.png';
102+
import faceClickerGame from './steps/face-clicker-game.en.png';
103+
94104
// Make it Fly
95105
import flyChooseBackdrop from './steps/fly-choose-backdrop.LTR.gif';
96106
import flyChooseCharacter from './steps/fly-choose-character.LTR.png';
@@ -293,6 +303,16 @@ const enImages = {
293303
videoAnimate: videoAnimate,
294304
videoPop: videoPop,
295305

306+
// Face Sensing
307+
faceAddExtension: faceAddExtension,
308+
faceAllowCamera: faceAllowCamera,
309+
faceAddFashionSprite: faceAddFashionSprite,
310+
faceGoToTopHead: faceGoToTopHead,
311+
faceGoToTopHeadForever: faceGoToTopHeadForever,
312+
faceAdjustSize: faceAdjustSize,
313+
faceAddAnotherSprite: faceAddAnotherSprite,
314+
faceClickerGame: faceClickerGame,
315+
296316
// Make it Fly
297317
flyChooseBackdrop: flyChooseBackdrop,
298318
flyChooseCharacter: flyChooseCharacter,

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

Lines changed: 120 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ import libraryStory from './thumbnails/tell-a-story.jpg';
3939
// Video Sensing
4040
import libraryVideoSens from './thumbnails/video-sensing.jpg';
4141

42+
// Face Sensing
43+
import libraryFaceSens from './thumbnails/face-sensing.jpg';
44+
4245
// Make-it-Fly
4346
import libraryMakeFly from './thumbnails/make-it-fly.jpg';
4447

@@ -65,6 +68,10 @@ import addEffectsThumb from './thumbnails/add-effects.jpg';
6568
import moveArrowKeysThumb from './thumbnails/move-arrow-keys.jpg';
6669
import spinThumb from './thumbnails/spin.jpg';
6770

71+
// Extrernal Resources
72+
import codingCards from './thumbnails/coding-cards.png';
73+
import faceSensingGame from './thumbnails/face-sensing-game.png';
74+
6875
export const CATEGORIES = {
6976
gettingStarted: 'gettingStarted',
7077
basics: 'basics',
@@ -1558,7 +1565,119 @@ export default {
15581565
],
15591566
urlId: 'video-sensing'
15601567
},
1561-
1568+
'Face-Sensing': {
1569+
name: (
1570+
<FormattedMessage
1571+
defaultMessage="Face Sensing"
1572+
description="Name for the 'Face Sensing' how-to"
1573+
id="gui.howtos.facesens.name"
1574+
/>
1575+
),
1576+
img: libraryFaceSens,
1577+
category: CATEGORIES.intermediate,
1578+
steps: [{
1579+
video: 'fnjds1cjei'
1580+
},
1581+
{
1582+
title: (
1583+
<FormattedMessage
1584+
defaultMessage="Add the “Face Sensing” Extension"
1585+
description="Step name for 'Add the “Face Sensing” Extension' step"
1586+
id="gui.howtos.facesens.step_addExtension"
1587+
/>
1588+
),
1589+
image: 'faceAddExtension'
1590+
}, {
1591+
title: (
1592+
<FormattedMessage
1593+
defaultMessage="Allow Access to Your Camera (Your Video Is Private)"
1594+
description="Step name for 'Allow Access to Your Camera' step"
1595+
id="gui.howtos.facesens.step_allowCamera"
1596+
/>
1597+
),
1598+
image: 'faceAllowCamera'
1599+
}, {
1600+
title: (
1601+
<FormattedMessage
1602+
defaultMessage="Select a “Fashion” Accessory Sprite"
1603+
description="Step name for 'Select a “Fashion” Accessory Sprite' step"
1604+
id="gui.howtos.facesens.step_addFashionSprite"
1605+
/>
1606+
),
1607+
image: 'faceAddFashionSprite'
1608+
}, {
1609+
title: (
1610+
<FormattedMessage
1611+
defaultMessage="Go to Top of Head"
1612+
description="Step name for 'Go to Top of Head' step"
1613+
id="gui.howtos.facesens.step_goToTopHead"
1614+
/>
1615+
),
1616+
image: 'faceGoToTopHead'
1617+
}, {
1618+
title: (
1619+
<FormattedMessage
1620+
defaultMessage="Forever Go to Top of Head"
1621+
description="Step name for 'Forever Go to Top of Head' step"
1622+
id="gui.howtos.facesens.step_goToTopHeadForever"
1623+
/>
1624+
),
1625+
image: 'faceGoToTopHeadForever'
1626+
}, {
1627+
title: (
1628+
<FormattedMessage
1629+
defaultMessage="Use Blocks or Paint Editor to Adjust Size and Placement"
1630+
description="Step name for 'Use Blocks or Paint Editor to Adjust Size and Placement' step"
1631+
id="gui.howtos.facesens.step_adjustSize"
1632+
/>
1633+
),
1634+
image: 'faceAdjustSize'
1635+
}, {
1636+
title: (
1637+
<FormattedMessage
1638+
defaultMessage="Add Another Sprite or Try Additional Blocks"
1639+
description="Step name for 'Add Another Sprite or Try Additional Blocks' step"
1640+
id="gui.howtos.facesens.step_addAnotherSprite"
1641+
/>
1642+
),
1643+
image: 'faceAddAnotherSprite'
1644+
}, {
1645+
title: (
1646+
<FormattedMessage
1647+
defaultMessage="Or Convert a Clicker Game to Use Parts of Your Face"
1648+
description="Step name for 'Or Convert a Clicker Game to Use Parts of Your Face' step"
1649+
id="gui.howtos.facesens.step_clickerGame"
1650+
/>
1651+
),
1652+
image: 'faceClickerGame'
1653+
}, {
1654+
externalResources: {
1655+
'Face-Sensing-Game': {
1656+
name: (
1657+
<FormattedMessage
1658+
defaultMessage="Starter Project | Face Sensing Game"
1659+
description="Name for the 'Starter Project | Face Sensing Game' resource"
1660+
id="gui.howtos.externalResources.faceSensingGame"
1661+
/>
1662+
),
1663+
img: faceSensingGame,
1664+
url: 'https://scratch.mit.edu/projects/1210061611'
1665+
},
1666+
'Coding-Cards': {
1667+
name: (
1668+
<FormattedMessage
1669+
defaultMessage="Coding Cards | Face Sensing"
1670+
description="Name for the 'Coding Cards | Face Sensing' how-to"
1671+
id="gui.howtos.externalResources.codingCards"
1672+
/>
1673+
),
1674+
img: codingCards,
1675+
url: 'https://scratchfoundation.org/learn/learning-library/face-sensing'
1676+
}
1677+
}
1678+
}],
1679+
urlId: 'face-sensing'
1680+
},
15621681
'talking': {
15631682
name: (
15641683
<FormattedMessage

‎packages/scratch-gui/src/lib/libraries/decks/steps/face-add-another-sprite.en.png‎

174 KB
Loading

‎packages/scratch-gui/src/lib/libraries/decks/steps/face-add-extension.en.gif‎

121 KB
Loading

‎packages/scratch-gui/src/lib/libraries/decks/steps/face-add-fashion-sprite.en.png‎

29.6 KB
Loading

‎packages/scratch-gui/src/lib/libraries/decks/steps/face-adjust-size.en.gif‎

1.23 MB
Loading

‎packages/scratch-gui/src/lib/libraries/decks/steps/face-allow-camera.en.png‎

40.9 KB
Loading

‎packages/scratch-gui/src/lib/libraries/decks/steps/face-clicker-game.en.png‎

183 KB
Loading

0 commit comments

Comments
 (0)