adding tips to the microworld

src/components/tipsslider/tipsslider.json

@@ -0,0 +1,50 @@
+[
+    {
+        "id": 1,
+        "type": "project",
+        "title": "Project1",
+        "thumbnailUrl": "/images/microworlds/hiphop/add-repeat.gif",
+        "creator": "",
+        "href": "/images/microworlds/hiphop/add-repeat.gif"
+    },
+    {
+        "id": 2,
+        "type": "project",
+        "title": "Project2",
+        "thumbnailUrl": "/images/microworlds/hiphop/add-wait.gif",
+        "creator": "",
+        "href": "/images/microworlds/hiphop/add-wait.gif"
+    },
+    {
+        "id": 3,
+        "type": "project",
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
+    },
+    {
+        "id": 4,
+        "type": "project",
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
+    },
+    {
+        "id": 5,
+        "type": "project",
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
+    },
+    {
+        "id": 6,
+        "type": "project",
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
+    }
+]

src/components/tipsslider/tipsslider.jsx

@@ -0,0 +1,75 @@
+var classNames = require('classnames');
+var defaults = require('lodash.defaults');
+var React = require('react');
+var Slider = require('react-slick');
+
+var Thumbnail = require('../thumbnail/thumbnail.jsx');
+
+require('slick-carousel/slick/slick.scss');
+require('slick-carousel/slick/slick-theme.scss');
+require('./tipsslider.scss');
+
+var TipsSlider = React.createClass({
+    type: 'TipsSlider',
+    propTypes: {
+        items: React.PropTypes.array
+    },
+    getDefaultProps: function () {
+        return {
+            items: require('./tipsslider.json'),
+            showRemixes: false,
+            showLoves: false
+        };
+    },
+    render: function () {
+        console.error("ITEMS:");
+        console.error(this.props.items);
+        var settings = this.props.settings || {};
+        defaults(settings, {
+            dots: false,
+            infinite: false,
+            lazyLoad: true,
+            slidesToShow: 5,
+            slidesToScroll: 5,
+            variableWidth: true
+        });
+        
+        var arrows = this.props.items.length > settings.slidesToShow;
+        
+        var classes = classNames(
+            'tipsslider',
+            this.props.className
+        );
+        
+        var slides = [];
+        console.error("before");
+        console.error(this.props.items.length);
+        for (var i=0; i < this.props.items.length; i++) {
+            var items = this.props.items[i].tips;
+            console.error("bla");
+            console.error(items);
+            var thumbnails = [];
+            for (var j=0; j < items.length; j++) {
+                    var item = items[j];
+                    thumbnails.push(<Thumbnail key={item.id}
+                               title={item.title}
+                               src={item.thumbnailUrl} />)
+            }
+            console.error(thumbnails)
+            slides.push(
+            <div className="testing">
+                <h3>{this.props.items[i].title}</h3>
+                {thumbnails}
+            </div>)
+        } 
+        console.error("slides")
+        console.error(slides[0]);        
+        return (
+            <Slider className={classes} arrows={arrows} {... settings}>
+                {slides}    
+            </Slider>
+        );
+    }
+});
+
+module.exports = TipsSlider;

src/components/tipsslider/tipsslider.scss

@@ -0,0 +1,75 @@
+@import "../../colors";
+
+.tipsslider {
+    $icon-size: 40px;
+    $button-offset: $icon-size + 5px;
+    $box-content-offset: 20px;
+
+    padding: 12px $button-offset;
+
+    .box-content & {
+        padding: 12px $button-offset - 20px;
+    }
+
+    .slick-next,
+    .slick-prev {
+        margin-top: -$icon-size/2;
+        width: $icon-size;
+        height: $icon-size;
+
+        &:before {
+            display: block;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 70%;
+            width: $icon-size;
+            height: $icon-size;
+            font-size: $icon-size;
+            content: "";
+        }
+
+        &.slick-disabled:before {
+            opacity: 1;
+        }
+    }
+
+    .slick-prev {
+        left: 0;
+
+        &:before {
+            background-image: url("/svgs/carousel/prev_ui-dark-gray.svg");
+        }
+
+        &:hover:before {
+            background-image: url("/svgs/carousel/prev_ui-blue.svg");
+            background-size: 90%;
+        }
+
+
+        .box-content & {
+            left: -$box-content-offset;
+        }
+    }
+
+    .slick-next {
+        right: 0;
+
+        &:before {
+            background-image: url("/svgs/carousel/next_ui-dark-gray.svg");
+        }
+
+        &:hover:before {
+            background-image: url("/svgs/carousel/next_ui-blue.svg");
+            background-size: 90%;
+        }
+
+        .box-content & {
+            right: -$box-content-offset;
+        }
+    }
+
+    .slick-slide {
+        padding-right: 30px;
+    }
+
+}

src/views/microworlds_art/microworlds_art.jsx

@@ -12,6 +12,7 @@ var Box = require('../../components/box/box.jsx');
 require('./microworlds_art.scss');
 var Carousel = require('../../components/carousel/carousel.jsx');
 var Modal = require('../../components/modal/modal.jsx');
+var TipsSlider = require('../../components/tipsslider/tipsslider.jsx');
 
 var Microworld = React.createClass({
     type: 'Microworld',
@@ -119,31 +120,46 @@ var Microworld = React.createClass({
                 </a>
                 <iframe src="//scratch.mit.edu/projects/embed-editor/88148127/?isMicroworld=true"
                         frameborder="0"> </iframe>
-                {this.renderTips()}
+                <div className="box tipsslider">
+                    <div className="box-header">
+                        <h4>Start Painting</h4>
+                    </div>
+                    <div className="box-content">
+                        {this.createSlider()}
+                    </div>
+                </div>
             </div>
         )
     },
+    createSlider: function() {
+        var tips =  require("./microworlds_art_tips.json");
+        console.error("in here!");
+        console.error(tips);
+        return (
+            <TipsSlider items={tips} settings={{slidesToShow:1,slidesToScroll:1}}/>
+            )
+    },
     renderTips: function() {
         return (
         <div className="pathways">
-            {/*<div className="tips">
+            <div className="tips">
             <div className="tips-slider flexslider">
               <ul className =" slides">
                 <li>
                     <div className="tip-slide">
                         <h3>Start to Dance</h3>
                         <div className="tip-step">
-                            <img src = "images/pathways/dancer-sprite.png"/>
+                            <img src = "/images/microworlds/hiphop/dancer-sprite.png"/>
                             <h5> First, select a sprite </h5>
                         </div>
 
                         <div className="tip-step">
-                            <img src = "images/pathways/switch-wait.gif" />
+                            <img src = "/images/microworlds/hiphop/switch-wait.gif" />
                             <h5> Then, try this script</h5>
                         </div>
 
                         <div className="tip-step">
-                            <img src = "images/pathways/green-flag.gif" />
+                            <img src = "/images/microworlds/hiphop/green-flag.gif" />
                             <h5> Start it! </h5>
                         </div>
 
@@ -153,16 +169,16 @@ var Microworld = React.createClass({
                 <div className="tip-slide">
                     <h3>Repeat the Dance</h3>
                 <div className="tip-step">
-                    <img src = "images/pathways/add-wait.gif" />
+                    <img src = "/images/microworlds/hiphop/add-wait.gif" />
                 <h5>Add another "wait"</h5>
                 </div>
                 <div className="tip-step">
-                    <img src = "images/pathways/add-repeat.gif" />
+                    <img src = "/images/microworlds/hiphop/add-repeat.gif" />
                 <h5>Drag this block over</h5>
                 </div>
 
                 <div className="tip-step">
-                    <img src = "images/pathways/green-flag.gif" />
+                    <img src = "/images/microworlds/hiphop/green-flag.gif" />
                 <h5> Start it </h5>
                 </div>
                 </div>
@@ -172,12 +188,12 @@ var Microworld = React.createClass({
                     <h3>Play Music</h3>
                 <div className="tip-step">
 
-                    <img src = "images/pathways/add-play-sound.gif" />
+                    <img src = "/images/microworlds/hiphop/add-play-sound.gif" />
                 <h5> Add music that repeats </h5>
                 </div>
 
                 <div className="tip-step">
-                    <img src = "images/pathways/green-flag.gif"/>
+                    <img src = "/images/microworlds/hiphop/green-flag.gif"/>
                 <h5> Start it</h5>
                 </div>
                 </div>
@@ -187,17 +203,17 @@ var Microworld = React.createClass({
                     <h3>Shadow Dance</h3>
                 <div className="tip-step">
 
-                    <img src = "images/pathways/shadow-dance.gif" />
+                    <img src = "/images/microworlds/hiphop/shadow-dance.gif" />
                 <h5> Add this block </h5>
                 </div>
 
                 <div className="tip-step">
-                    <img src = "images/pathways/green-flag.gif" />
+                    <img src = "/images/microworlds/hiphop/green-flag.gif" />
                 <h5> Start it </h5>
                 </div>
 
                 <div className="tip-step">
-                    <img src = "images/pathways/stop.gif" />
+                    <img src = "/images/microworlds/hiphop/stop.gif" />
                 <h5> Click the stop sign to reset </h5>
                 </div>
                 </div>
@@ -207,16 +223,16 @@ var Microworld = React.createClass({
                     <h3>More things to try</h3>
 
                 <div className="tip-step">
-                    <img src = "images/pathways/change-dance-moves.gif" />
+                    <img src = "/images/microworlds/hiphop/change-dance-moves.gif" />
                     <h5> Try different dance moves</h5>
                     </div>
                     <div className="tip-step">
-                    <img src = "images/pathways/long-dance-script.png" />
+                    <img src = "/images/microworlds/hiphop/long-dance-script.png" />
                     <h5> Add more moves </h5>
                     </div>
 
                     <div className="tip-step">
-                    <img src = "images/pathways/change-dance-timing.png" />
+                    <img src = "/images/microworlds/hiphop/change-dance-timing.png" />
                     <h5> Change the timing </h5>
                     </div>
 
@@ -225,7 +241,7 @@ var Microworld = React.createClass({
                     </li>
               </ul>
             </div>
-          </div>*/}
+          </div>
         </div>
 
             );

src/views/microworlds_art/microworlds_art.scss

@@ -169,6 +169,15 @@ $base-bg: $ui-white;
     }
   }
 
+  .tipsslider {
+    text-align: center;
+    
+    .thumbnail {
+      display: inline-block;
+      margin: 0px 50px;
+    }
+  }
+
 
   .pathways .box-content {padding:20px;}
 

src/views/microworlds_art/microworlds_art_tips.json

@@ -0,0 +1,66 @@
+[
+{
+        "title": "Start Dancing",
+        "tips": [
+            {
+                "id": 1,
+                "type": "tip",
+                "title": "First, select a sprite",
+                "thumbnailUrl": "/images/microworlds/hiphop/dancer-sprite.png"
+            },
+            {
+                "id": 2,
+                "type": "tip",
+                "title": "Then, try this script",
+                "thumbnailUrl": "/images/microworlds/hiphop/switch-wait.gif"
+            },
+            {
+                "id": 3,
+                "type": "tip",
+                "title": "Start it!",
+                "thumbnailUrl": "/images/microworlds/hiphop/green-flag.gif"
+            }
+        ]
+    },
+    {
+        "title": "Repeat the Dance",
+        "tips": [    
+            {
+                "id": 4,
+                "type": "tip",
+                "title": "Add another \"wait\"",
+                "thumbnailUrl": "/images/microworlds/hiphop/add-wait.gif"
+            },
+            {
+                "id": 5,
+                "type": "tip",
+                "title": "Drag this block over",
+                "thumbnailUrl": "/images/microworlds/hiphop/add-repeat.gif"
+            },
+            {
+                "id": 6,
+                "type": "tip",
+                "title": "Start it",
+                "thumbnailUrl": "/images/microworlds/hiphop/green-flag.gif"
+            }
+        ]
+    },
+    {
+        "title": "Play Music",
+        "tips": [
+
+            {
+                "id": 7,
+                "type": "tip",
+                "title": "Add music that repeats",
+                "thumbnailUrl": "/images/microworlds/hiphop/add-play-sound.gif"
+            },
+            {
+                "id": 8,
+                "type": "tip",
+                "title": "Start it",
+                "thumbnailUrl": "/images/microworlds/hiphop/green-flag.gif"
+            }
+        ]
+    }
+]