finally finished tutorial

Author: Titanium2099

src/components/cards/cards.jsx

@@ -94,10 +94,10 @@ const VideoStep = ({ expanded, video, title }) => {
         if (!currentVideo) return;
         currentVideo.src = video;
 
-        if(!title) {
+        if (!title) {
             currentVideo.controls = true;
             currentVideo.autoplay = false;
-        }else{
+        } else {
             currentVideo.controls = false;
             currentVideo.autoplay = true;
             currentVideo.muted = true;
@@ -119,7 +119,7 @@ const VideoStep = ({ expanded, video, title }) => {
         };
     }, [expanded, video]);
 
-    if(!title) {
+    if (!title) {
         return (
             <div className={styles.stepVideo}>
                 <video
@@ -128,7 +128,7 @@ const VideoStep = ({ expanded, video, title }) => {
                 />
             </div>
         );
-    }else{
+    } else {
         return (
             <Fragment>
                 <div className={styles.stepTitle}>
@@ -172,6 +172,20 @@ ImageStep.propTypes = {
     title: PropTypes.node.isRequired
 };
 
+const HTMLStep = ({ title, html }) => (
+    <Fragment>
+        <div dangerouslySetInnerHTML={{ __html: html }} style={{ marginTop: '30px' }} />
+        <div className={styles.stepTitle} style={{ marginTop: 'auto', marginBottom: 'auto' }}>
+            {title}
+        </div>
+    </Fragment>
+);
+
+HTMLStep.propTypes = {
+    //image: PropTypes.string.isRequired,
+    title: PropTypes.node.isRequired
+};
+
 const NextPrevButtons = ({ isRtl, onNextStep, onPrevStep, expanded }) => (
     <Fragment>
         {onNextStep ? (
@@ -223,9 +237,9 @@ const PreviewsStep = ({ deckIds, content, onActivateDeckFactory, 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"
+                defaultMessage="Next Steps!"
+                description="Title card with next steps"
+                id="gui.cards.next-steps"
             />
         </div>
         <div className={styles.decks}>
@@ -244,18 +258,6 @@ const PreviewsStep = ({ deckIds, content, onActivateDeckFactory, onShowAll }) =>
                 </div>
             ))}
         </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>
 );
 
@@ -353,37 +355,41 @@ const Cards = props => {
                             onShrinkExpandCards={onShrinkExpandCards}
                         />
                         <div className={expanded ? styles.stepBody : styles.hidden}>
-                            {steps[step].deckIds ? (
+                            {steps[step].innerHTML ? (
+                                <HTMLStep
+                                    html={steps[step].innerHTML}
+                                    title={steps[step].title}
+                                />
+                            ) : steps[step].deckIds ? (
                                 <PreviewsStep
                                     content={content}
                                     deckIds={steps[step].deckIds}
                                     onActivateDeckFactory={onActivateDeckFactory}
                                     onShowAll={onShowAll}
                                 />
-                            ) : (
-                                steps[step].video ? (
-                                    showVideos ? (
-                                        <VideoStep
-                                            dragging={dragging}
-                                            expanded={expanded}
-                                            video={translateVideo(steps[step].video, locale)}
-                                            title={steps[step].title}
-                                        />
-                                    ) : ( // Else show the deck image and title
-                                        <ImageStep
-                                            image={content[activeDeckId].img}
-                                            title={content[activeDeckId].name}
-                                        />
-                                    )
+                            ) : steps[step].video ? (
+                                showVideos ? (
+                                    <VideoStep
+                                        dragging={dragging}
+                                        expanded={expanded}
+                                        video={translateVideo(steps[step].video, locale)}
+                                        title={steps[step].title}
+                                    />
                                 ) : (
                                     <ImageStep
-                                        image={steps[step].img}
-                                        title={steps[step].title}
+                                        image={content[activeDeckId].img}
+                                        title={content[activeDeckId].name}
                                     />
                                 )
+                            ) : (
+                                <ImageStep
+                                    image={steps[step].img}
+                                    title={steps[step].title}
+                                />
                             )}
                             {steps[step].trackingPixel && steps[step].trackingPixel}
                         </div>
+
                         <NextPrevButtons
                             expanded={expanded}
                             isRtl={isRtl}

src/lib/libraries/decks/index.jsx

@@ -19,112 +19,78 @@ export const CATEGORIES = {
 };
 
 export default {
-
-    Torchy: {
+    UseTorchy: {
         name: (
             <FormattedMessage
-                defaultMessage="Using Torchy"
-                description="Name for the 'Using Torchy' tutorial"
-                id="gui.howtos.ai-getting-started.name"
+                defaultMessage="How to use Torchy"
+                description="Name for the 'Use Torchy' tutorial"
+                id="gui.gettingStarted.ai-use.name"
             />
         ),
         img: libraryAnimateChar,
         category: CATEGORIES.gettingStarted,
         steps: [
             {
-                video: AI_HOST + '/opening-popup.mp4',
                 title: (
                     <FormattedMessage
-                        defaultMessage="Open the Torchy Popup"
-                        description="Step name for 'Add a Sprite' step"
-                        id="gui.howtos.animate-char.open-torchy"
+                        defaultMessage="Welcome, this tutorial will show you how to use Torchy"
+                        description="Step name for 'Welcome' step"
+                        id="gui.gettingStarted.ai-use.welcome"
+                    />
+                ),
+                innerHTML: "<style>@keyframes scaleUpDown{0%,100%{transform:scaleY(1) scaleX(1)}50%,90%{transform:scaleY(1.1)}75%{transform:scaleY(.95)}80%{transform:scaleX(.95)}}@keyframes shake{0%,100%{transform:skewX(0) scale(1)}50%{transform:skewX(5deg) scale(.9)}}@keyframes particleUp{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0;top:-100%;transform:scale(.5)}}@keyframes glow{0%,100%{background-color:#ef5a00}50%{background-color:#ff7800}}.fire{width:60px;height:60px;background-color:transparent;margin-left:8px;margin-top:17px;position:relative;display:block;}.fire-center{position:absolute;height:100%;width:100%;animation:scaleUpDown 3s ease-out;animation-iteration-count:infinite;animation-fill-mode:both}.fire-center .main-fire{position:absolute;width:100%;height:100%;background-image:radial-gradient(farthest-corner at 10px 0,#d43300 0,#ef5a00 95%);transform:scaleX(.8) rotate(45deg);border-radius:0 40% 60% 40%;filter:drop-shadow(0 0 10px #d43322)}.fire-center .particle-fire{position:absolute;top:60%;left:45%;width:2px;height:2px;background-color:#ef5a00;border-radius:50%;filter:drop-shadow(0 0 10px #d43322);animation:particleUp 2s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}.fire-right{height:100%;width:100%;position:absolute;animation:shake 2s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}.fire-right .main-fire{position:absolute;top:15%;right:-25%;width:80%;height:80%;background-color:#ef5a00;transform:scaleX(.8) rotate(45deg);border-radius:0 40% 60% 40%;filter:drop-shadow(0 0 10px #d43322)}.fire-right .particle-fire{position:absolute;top:45%;left:50%;width:3.0303030303030303px;height:3.0303030303030303px;background-color:#ef5a00;transform:scaleX(.8) rotate(45deg);border-radius:50%;filter:drop-shadow(0 0 10px #d43322);animation:particleUp 2s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}.fire-left{position:absolute;height:100%;width:100%;animation:shake 3s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}.fire-left .main-fire{position:absolute;top:15%;left:-20%;width:80%;height:80%;background-color:#ef5a00;transform:scaleX(.8) rotate(45deg);border-radius:0 40% 60% 40%;filter:drop-shadow(0 0 10px #d43322)}.fire-left .particle-fire{position:absolute;top:10%;left:20%;width:10%;height:10%;background-color:#ef5a00;border-radius:50%;filter:drop-shadow(0 0 10px #d43322);animation:particleUp 3s infinite ease-out 0;animation-fill-mode:both}.fire-bottom .main-fire{position:absolute;top:30%;left:20%;width:75%;height:75%;background-color:#ff7800;transform:scaleX(.8) rotate(45deg);border-radius:0 40% 100% 40%;filter:blur(10px);animation:glow 2s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}</style><div class=fire><div class=fire-left><div class=main-fire></div><div class=particle-fire></div></div><div class=fire-center><div class=main-fire></div><div class=particle-fire></div></div><div class=fire-right><div class=main-fire></div><div class=particle-fire></div></div><div class=fire-bottom><div class=main-fire></div></div></div>"
+            },
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="Add your API keys (go to addons page and follow the instructions)"
+                        description="Step name for 'Add your API keys' step"
+                        id="gui.gettingStarted.ai-use.addApiKeys"
+                    />
+                ),
+                video: AI_HOST + '/open-addons-tab.mp4',
+            },
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="There are 2 ways to open the Torchy popup"
+                        description="Step name for 'There are 2 ways to open the Torchy popup' step"
+                        id="gui.gettingStarted.ai-use.openPopup"
+                    />
+                ),
+                video: AI_HOST + '/open-popup.mp4',
+            },
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="Torchy's UI:"
+                        description="Step name for 'popup User Interface' step"
+                        id="gui.gettingStarted.ai-use.popupUI"
+                    />
+                ),
+                img: AI_HOST + '/popup-ui.png',
+            },
+            {
+             title: (
+                    <FormattedMessage
+                        defaultMessage="To insert code into the editor, click the 'Insert' button"
+                        description="Step name for 'Insert code into the editor' step"
+                        id="gui.gettingStarted.ai-use.insertCode"
+                    />
+                ),
+                img: AI_HOST + '/insert-code.png',
+            },
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="That's it!"
+                        description="Step name for 'That's it!' step"
+                        id="gui.gettingStarted.ai-use.thatsIt"
                     />
                 ),
-            }
+                innerHTML: "<style>@keyframes scaleUpDown{0%,100%{transform:scaleY(1) scaleX(1)}50%,90%{transform:scaleY(1.1)}75%{transform:scaleY(.95)}80%{transform:scaleX(.95)}}@keyframes shake{0%,100%{transform:skewX(0) scale(1)}50%{transform:skewX(5deg) scale(.9)}}@keyframes particleUp{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0;top:-100%;transform:scale(.5)}}@keyframes glow{0%,100%{background-color:#ef5a00}50%{background-color:#ff7800}}.fire{width:60px;height:60px;background-color:transparent;margin-left:8px;margin-top:17px;position:relative;display:block;}.fire-center{position:absolute;height:100%;width:100%;animation:scaleUpDown 3s ease-out;animation-iteration-count:infinite;animation-fill-mode:both}.fire-center .main-fire{position:absolute;width:100%;height:100%;background-image:radial-gradient(farthest-corner at 10px 0,#d43300 0,#ef5a00 95%);transform:scaleX(.8) rotate(45deg);border-radius:0 40% 60% 40%;filter:drop-shadow(0 0 10px #d43322)}.fire-center .particle-fire{position:absolute;top:60%;left:45%;width:2px;height:2px;background-color:#ef5a00;border-radius:50%;filter:drop-shadow(0 0 10px #d43322);animation:particleUp 2s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}.fire-right{height:100%;width:100%;position:absolute;animation:shake 2s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}.fire-right .main-fire{position:absolute;top:15%;right:-25%;width:80%;height:80%;background-color:#ef5a00;transform:scaleX(.8) rotate(45deg);border-radius:0 40% 60% 40%;filter:drop-shadow(0 0 10px #d43322)}.fire-right .particle-fire{position:absolute;top:45%;left:50%;width:3.0303030303030303px;height:3.0303030303030303px;background-color:#ef5a00;transform:scaleX(.8) rotate(45deg);border-radius:50%;filter:drop-shadow(0 0 10px #d43322);animation:particleUp 2s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}.fire-left{position:absolute;height:100%;width:100%;animation:shake 3s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}.fire-left .main-fire{position:absolute;top:15%;left:-20%;width:80%;height:80%;background-color:#ef5a00;transform:scaleX(.8) rotate(45deg);border-radius:0 40% 60% 40%;filter:drop-shadow(0 0 10px #d43322)}.fire-left .particle-fire{position:absolute;top:10%;left:20%;width:10%;height:10%;background-color:#ef5a00;border-radius:50%;filter:drop-shadow(0 0 10px #d43322);animation:particleUp 3s infinite ease-out 0;animation-fill-mode:both}.fire-bottom .main-fire{position:absolute;top:30%;left:20%;width:75%;height:75%;background-color:#ff7800;transform:scaleX(.8) rotate(45deg);border-radius:0 40% 100% 40%;filter:blur(10px);animation:glow 2s ease-out 0;animation-iteration-count:infinite;animation-fill-mode:both}</style><div class=fire><div class=fire-left><div class=main-fire></div><div class=particle-fire></div></div><div class=fire-center><div class=main-fire></div><div class=particle-fire></div></div><div class=fire-right><div class=main-fire></div><div class=particle-fire></div></div><div class=fire-bottom><div class=main-fire></div></div></div>"
+            },
         ],
-        urlId: 'torchy'
-    }
-};
-
-
-/* {
-            video: 's228u3g5u9'
-        },
-        {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add a Backdrop"
-                    description="Step name for 'Add a Backdrop' step"
-                    id="gui.howtos.animate-char.step_addbg"
-                />
-            ),
-            image: 'animateCharPickBackdrop'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add a Sprite"
-                    description="Step name for 'Add a Sprite' step"
-                    id="gui.howtos.animate-char.step_addsprite"
-                />
-            ),
-            image: 'animateCharPickSprite'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Say Something"
-                    description="Step name for 'Say Something' step"
-                    id="gui.howtos.animate-char.step_saysomething"
-                />
-            ),
-            image: 'animateCharSaySomething'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add Sound"
-                    description="Step name for 'Add Sound' step"
-                    id="gui.howtos.animate-char.step_addsound"
-                />
-            ),
-            image: 'animateCharAddSound'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Animate Talking"
-                    description="Step name for 'Animate Talking' step"
-                    id="gui.howtos.animate-char.step_animatetalking"
-                />
-            ),
-            image: 'animateCharTalk'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Move Using Arrow Keys"
-                    description="Step name for 'Move Using Arrow Keys' step"
-                    id="gui.howtos.animate-char.step_arrowkeys"
-                />
-            ),
-            image: 'animateCharMove'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Jump"
-                    description="Step name for 'Jump' step"
-                    id="gui.howtos.animate-char.step_jump"
-                />
-            ),
-            image: 'animateCharJump'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Change Color"
-                    description="Step name for 'Change Color' step"
-                    id="gui.howtos.animate-char.step_changecolor"
-                />
-            ),
-            image: 'animateCharChangeColor'
-        }, {
-            deckIds: [
-                'code-cartoon',
-                'Tell-A-Story'
-            ]
-        }*/
+        urlId: 'use-torchy'
+    },
+};