Draft of Code a Cartoon tutorial for Oct 1st

Author: zoebentley

src/containers/tips-library.jsx

@@ -54,7 +54,7 @@ class TipsLibrary extends React.PureComponent {
                 eventually we will find a solution that doesn't involve loading a whole project
         */
         if (item.requiredProjectId && (item.requiredProjectId !== this.props.projectId)) {
-            const urlParams = `/projects/${item.requiredProjectId}/editor?tutorial=${item.urlId}`;
+            const urlParams = `/#${item.requiredProjectId}?tutorial=${item.urlId}`;
             return window.open(window.location.origin + urlParams, '_blank');
         }
 

src/lib/libraries/decks/en-steps.js

@@ -170,6 +170,19 @@ import moveArrowKeysUpDown from './steps/move-arrow-keys-up-down.en.png';
 import glideAroundBackAndForth from './steps/glide-around-back-and-forth.en.png';
 import glideAroundPoint from './steps/glide-around-point.en.png';
 
+// Code a Cartoon
+import codeCartoonSaySomething from './steps/code-cartoon-01-say-something.jpg';
+import codeCartoonAnimate from './steps/code-cartoon-02-animate.gif';
+import codeCartoonSelectDifferentCharacter from './steps/code-cartoon-03-select-different-character.gif';
+import codeCartoonUseMinusSign from './steps/code-cartoon-04-use-minus-sign.gif';
+import codeCartoonGrowShrink from './steps/code-cartoon-05-grow-shrink.gif';
+import codeCartoonSelectAnotherDifferentCharacter from './steps/code-cartoon-06-select-another-different-character.gif';
+import codeCartoonJump from './steps/code-cartoon-07-jump.gif';
+import codeCartoonChangeScenes from './steps/code-cartoon-08-change-scenes.gif';
+import codeCartoonGlideAround from './steps/code-cartoon-09-glide-around.gif';
+import codeCartoonChangeCostumes from './steps/code-cartoon-10-change-costumes.gif';
+import codeCartoonChooseMoreCharacters from './steps/code-cartoon-11-choose-more-characters.jpg';
+
 const enImages = {
     // Intro
     introMove: introMove,
@@ -341,7 +354,20 @@ const enImages = {
 
     // Glide Around
     glideAroundBackAndForth: glideAroundBackAndForth,
-    glideAroundPoint: glideAroundPoint
+    glideAroundPoint: glideAroundPoint,
+    
+    // Code a Cartoon
+    codeCartoonSaySomething: codeCartoonSaySomething,
+    codeCartoonAnimate: codeCartoonAnimate,
+    codeCartoonSelectDifferentCharacter: codeCartoonSelectDifferentCharacter,
+    codeCartoonUseMinusSign: codeCartoonUseMinusSign,
+    codeCartoonGrowShrink: codeCartoonGrowShrink,
+    codeCartoonSelectAnotherDifferentCharacter: codeCartoonSelectAnotherDifferentCharacter,
+    codeCartoonJump: codeCartoonJump,
+    codeCartoonChangeScenes: codeCartoonChangeScenes,
+    codeCartoonGlideAround: codeCartoonGlideAround,
+    codeCartoonChangeCostumes: codeCartoonChangeCostumes,
+    codeCartoonChooseMoreCharacters: codeCartoonChooseMoreCharacters
 
 };
 

src/lib/libraries/decks/index.jsx

@@ -45,6 +45,9 @@ import libraryPong from './thumbnails/pong.jpg';
 // Imagine a World
 import libraryImagine from './thumbnails/imagine.jpg';
 
+// Code a Cartoon
+import libraryCodeCartoon from './thumbnails/code-a-cartoon.jpg'
+
 // Videos
 import recordASound from './thumbnails/record-a-sound.jpg';
 import glideAroundThumb from './thumbnails/glide-around.jpg';
@@ -97,7 +100,128 @@ export default {
         ],
         urlId: 'getStarted'
     },
-
+    
+    'code-cartoon': {
+    name: (
+        <FormattedMessage
+            defaultMessage="Code a Cartoon"
+            description="Name for the 'Code a Cartoon' how-to"
+            id="gui.howtos.code-cartoon"
+        />
+    ),
+    tags: ['code-cartoon'],
+//    requiredProjectId: '331474033',
+    img: libraryCodeCartoon,
+    steps: [
+       {
+        title: (
+            <FormattedMessage
+                defaultMessage="Say Something When You Click the Green Flag"
+                description="Step name for 'Say Something When You Click the Green Flag' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonSaySomething"
+            />
+        ),
+        image: 'codeCartoonSaySomething'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Animate a Character When You Click It"
+                description="Step name for 'Animate a Character When You Click It' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonAnimate"
+            />
+        ),
+        image: 'codeCartoonAnimate'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Select a Different Character"
+                description="Step name for 'Select a Different Character' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonSelectDifferentCharacter"
+            />
+        ),
+        image: 'codeCartoonSelectDifferentCharacter'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Use a Minus Sign to Get Smaller"
+                description="Step name for 'Use a Minus Sign to Get Smaller' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonUseMinusSign"
+            />
+        ),
+        image: 'codeCartoonUseMinusSign'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Make a Character Grow and Shrink"
+                description="Step name for 'Make a Character Grow and Shrink' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonGrowShrink"
+            />
+        ),
+        image: 'codeCartoonGrowShrink'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Select a Different Character"
+                description="Step name for 'Select a Different Character' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonSelectAnotherDifferentCharacter"
+            />
+        ),
+        image: 'codeCartoonSelectAnotherDifferentCharacter'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Jump Up and Down"
+                description="Step name for 'Jump Up and Down' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonJump"
+            />
+        ),
+        image: 'codeCartoonJump'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Click a Character to Change Scenes"
+                description="Step name for 'Click a Character to Change Scenes' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonChangeScenes"
+            />
+        ),
+        image: 'codeCartoonChangeScenes'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Glide Around"
+                description="Step name for 'Glide Around' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonGlideAround"
+            />
+        ),
+        image: 'codeCartoonGlideAround'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Change Costumes"
+                description="Step name for 'Change Costumes' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonChangeCostumes"
+            />
+        ),
+        image: 'codeCartoonChangeCostumes'
+    }, {
+        title: (
+            <FormattedMessage
+                defaultMessage="Choose More Characters to Add to Your Cartoon"
+                description="Step name for 'Choose More Characters to Add to Your Cartoon' step"
+                id="gui.howtos.code-cartoon.step_codeCartoonChooseMoreCharacters"
+            />
+        ),
+        image: 'codeCartoonChooseMoreCharacters'
+    }, {
+        deckIds: [
+            'Chase-Game',
+            'Tell-A-Story'
+        ]
+    }
+    ],
+    urlId: 'code-cartoon'
+    },
+    
     'animate-a-name': {
         name: (
             <FormattedMessage