Revert "Revert "Fix review comments, and organize code a bit.""

This reverts commit e9cb08d2.

src/components/nestedcarousel/nestedcarousel.json

+[
+  {
+     "title":"Start Dancing",
+     "thumbnails":[
+        {
+           "type":"tip",
+           "title":"First, select a sprite",
+           "thumbnailUrl":"/images/microworlds/hiphop/dancer-sprite.png"
+        },
+        {
+           "type":"tip",
+           "title":"Then, try this script",
+           "thumbnailUrl":"/images/microworlds/hiphop/switch-wait.gif"
+        },
+        {
+           "type":"tip",
+           "title":"Start it!",
+           "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
+        }
+     ]
+  },
+  {
+     "title":"Repeat the Dance",
+     "thumbnails":[
+        {
+           "type":"tip",
+           "title":"Add another \"wait\"",
+           "thumbnailUrl":"/images/microworlds/hiphop/add-wait.gif"
+        },
+        {
+           "type":"tip",
+           "title":"Drag this block over",
+           "thumbnailUrl":"/images/microworlds/hiphop/add-repeat.gif"
+        },
+        {
+           "type":"tip",
+           "title":"Start it",
+           "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
+        }
+     ]
+  }
+]
\ No newline at end of file

src/components/tipsslider/tipsslider.jsx → src/components/nestedcarousel/nestedcarousel.jsx

@@ -7,16 +7,24 @@ var Thumbnail = require('../thumbnail/thumbnail.jsx');
 
 require('slick-carousel/slick/slick.scss');
 require('slick-carousel/slick/slick-theme.scss');
-require('./tipsslider.scss');
+require('./nestedcarousel.scss');
 
-var TipsSlider = React.createClass({
-    type: 'TipsSlider',
+
+{/*
+    NestedCarousel is used to show a carousel, where each slide is composed of a few
+    thumbnails (for example, to show step-by-syep tips, where each stage has a few steps).
+    It creates the thumbnails without links.
+
+    Each slide has a title, and then a list of thumbnails, that will be shown together.
+*/}
+var NestedCarousel = React.createClass({
+    type: 'NestedCarousel',
     propTypes: {
         items: React.PropTypes.array
     },
     getDefaultProps: function () {
         return {
-            items: require('./tipsslider.json'),
+            items: require('./nestedcarousel.json')
         };
     },
     render: function () {
@@ -33,32 +41,35 @@ var TipsSlider = React.createClass({
         var arrows = this.props.items.length > settings.slidesToShow;
         
         var classes = classNames(
-            'tipsslider',
+            'nestedcarousel',
+            'carousel',
             this.props.className
         );
         
         var stages = [];
         for (var i=0; i < this.props.items.length; i++) {
-            var items = this.props.items[i].tips;
+            var items = this.props.items[i].thumbnails;
             var thumbnails = [];
             for (var j=0; j < items.length; j++) {
-                    var item = items[j];
-                    thumbnails.push(<Thumbnail key={item.id}
+                var item = items[j];
+                thumbnails.push(
+                    <Thumbnail key={'inner_' + i + '_' + j}
                                title={item.title}
-                               src={item.thumbnailUrl} />)
+                               src={item.thumbnailUrl}
+                               linkTitle = {false} />);
             }
             stages.push(
-            <div className="testing" key={"stage_" + i}>
+            <div key={'outer_' + i}>
                 <h3>{this.props.items[i].title}</h3>
                 {thumbnails}
-            </div>)
-        } 
+            </div>);
+        }
         return (
             <Slider className={classes} arrows={arrows} {... settings}>
-                {stages}    
+                {stages}
             </Slider>
         );
     }
 });
 
-module.exports = TipsSlider;
+module.exports = NestedCarousel;

src/components/nestedcarousel/nestedcarousel.scss

+@import "../../colors";
+@import "../carousel/carousel.scss";
+
+.nestedcarousel {
+    .slick-slide {
+        padding-left: 60px;
+    }
+}

src/components/thumbnail/thumbnail.jsx

@@ -15,7 +15,8 @@ var Thumbnail = React.createClass({
             src: '',
             type: 'project',
             showLoves: false,
-            showRemixes: false
+            showRemixes: false,
+            linkTitle: true
         };
     },
     render: function () {
@@ -54,13 +55,20 @@ var Thumbnail = React.createClass({
                 </div>
             );
         }
+        var titleElement;
+        if (this.props.linkTitle) {
+            titleElement =  <a href={this.props.href}>{this.props.title}</a>;
+        } else {
+            titleElement = this.props.title;
+        }
+
         return (
             <div className={classes} >
                 <a className="thumbnail-image" href={this.props.href}>
                     <img src={this.props.src} />
                 </a>
                 <div className="thumbnail-title">
-                    <a href={this.props.href}>{this.props.title}</a>
+                    {titleElement}
                 </div>
                 {extra}
             </div>

src/components/tipsslider/tipsslider.json

-[
-    {
-        "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.scss

-@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/microworld_art/microworld_art.json

@@ -27,21 +27,18 @@
    "tips":[
       {
          "title":"Start Dancing",
-         "tips":[
+         "thumbnails":[
             {
-               "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"
@@ -50,21 +47,18 @@
       },
       {
          "title":"Repeat the Dance",
-         "tips":[
+         "thumbnails":[
             {
-               "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"
@@ -73,15 +67,13 @@
       },
       {
          "title":"Play Music",
-         "tips":[
+         "thumbnails":[
             {
-               "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"
@@ -90,21 +82,18 @@
       },
       {
          "title":"Shadow Dance",
-         "tips":[
+         "thumbnails":[
             {
-               "id":7,
                "type":"tip",
                "title":"Add this block",
                "thumbnailUrl":"/images/microworlds/hiphop/shadow-dance.gif"
             },
             {
-               "id":8,
                "type":"tip",
                "title":"Start it",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
             },
             {
-               "id":9,
                "type":"tip",
                "title":"Click the stop sign to reset",
                "thumbnailUrl":"/images/microworlds/hiphop/stop.gif"
@@ -113,21 +102,18 @@
       },
       {
          "title":"More things to try",
-         "tips":[
+         "thumbnails":[
             {
-               "id":10,
                "type":"tip",
                "title":"Try different dance moves",
                "thumbnailUrl":"/images/microworlds/hiphop/change-dance-moves.gif"
             },
             {
-               "id":11,
                "type":"tip",
                "title":"Add more moves",
                "thumbnailUrl":"/images/microworlds/hiphop/long-dance-script.png"
             },
             {
-               "id":12,
                "type":"tip",
                "title":"Change the timing",
                "thumbnailUrl":"/images/microworlds/hiphop/change-dance-timing.png"

src/views/microworld_art/microworld_art.jsx

 var render = require('../../lib/render.jsx');
 var Microworld = require('../../components/microworld/microworld.jsx');
 
-render(<Microworld microworldData={require("./microworld_art.json")} />, document.getElementById('view'));
+var microworldData = require('./microworld_art.json');
+
+render(<Microworld microworldData={microworldData} />, document.getElementById('view'));

src/views/microworld_fashion/microworld_fashion.json

@@ -16,15 +16,13 @@
    "tips":[
       {
          "title":"Click on blocks to see what they do",
-         "tips":[
+         "thumbnails":[
             {
-               "id":0,
                "type":"tip",
                "title":" Try clicking this block ",
                "thumbnailUrl":"/images/microworlds/fashion/click-block-color.gif"
             },
             {
-               "id":1,
                "type":"tip",
                "title":" Or this block",
                "thumbnailUrl":"/images/microworlds/fashion/click-block-costume.gif"
@@ -33,21 +31,18 @@
       },
       {
          "title":"Try changing colors",
-         "tips":[
+         "thumbnails":[
             {
-               "id":2,
                "type":"tip",
                "title":" First, select a clothing item ",
                "thumbnailUrl":"/images/microworlds/fashion/shirts-sprite.png"
             },
             {
-               "id":3,
                "type":"tip",
                "title":" Then, try this script",
                "thumbnailUrl":"/images/microworlds/fashion/when-clicked-color.gif"
             },
             {
-               "id":4,
                "type":"tip",
                "title":" Test it out!",
                "thumbnailUrl":"/images/microworlds/fashion/click-shirt.gif"
@@ -56,21 +51,18 @@
       },
       {
          "title":"Try changing costumes",
-         "tips":[
+         "thumbnails":[
             {
-               "id":5,
                "type":"tip",
                "title":"Select a piece of clothing ",
                "thumbnailUrl":"/images/microworlds/fashion/hats-sprite.png"
             },
             {
-               "id":6,
                "type":"tip",
                "title":"Then, switch costumes",
                "thumbnailUrl":"/images/microworlds/fashion/when-clicked-costume.gif"
             },
             {
-               "id":7,
                "type":"tip",
                "title":" Now, click it!",
                "thumbnailUrl":"/images/microworlds/fashion/click-hat.gif"
@@ -79,21 +71,18 @@
       },
       {
          "title":"Say hello",
-         "tips":[
+         "thumbnails":[
             {
-               "id":8,
                "type":"tip",
                "title":"Select the person",
                "thumbnailUrl":"/images/microworlds/fashion/person-sprite.png"
             },
             {
-               "id":9,
                "type":"tip",
                "title":"Type in a phrase",
                "thumbnailUrl":"/images/microworlds/fashion/say-something.gif"
             },
             {
-               "id":10,
                "type":"tip",
                "title":"Then, try this script",
                "thumbnailUrl":"/images/microworlds/fashion/when-clicked-say.gif"
@@ -102,15 +91,13 @@
       },
       {
          "title":"Move the sprites",
-         "tips":[
+         "thumbnails":[
             {
-               "id":11,
                "type":"tip",
                "title":"Select an accessory",
                "thumbnailUrl":"/images/microworlds/fashion/accessories-sprite.png"
             },
             {
-               "id":12,
                "type":"tip",
                "title":"Tell it where to go",
                "thumbnailUrl":"/images/microworlds/fashion/when-clicked-goto.gif"
@@ -119,21 +106,18 @@
       },
       {
          "title":"Other things to try",
-         "tips":[
+         "thumbnails":[
             {
-               "id":13,
                "type":"tip",
                "title":"Add a sound ",
                "thumbnailUrl":"/images/microworlds/fashion/play-drum.png"
             },
             {
-               "id":14,
                "type":"tip",
                "title":" Explore other costumes ",
                "thumbnailUrl":"/images/microworlds/fashion/next-costume.png"
             },
             {
-               "id":15,
                "type":"tip",
                "title":"Make longer scripts ",
                "thumbnailUrl":"/images/microworlds/fashion/block-stack.png"

src/views/microworld_fashion/microworld_fashion.jsx

 var render = require('../../lib/render.jsx');
 var Microworld = require('../../components/microworld/microworld.jsx');
 
-render(<Microworld microworldData={require("./microworld_fashion.json")} />, document.getElementById('view'));
+var microworldData = require('./microworld_fashion.json');
+
+render(<Microworld microworldData={microworldData} />, document.getElementById('view'));

src/views/microworld_hiphop/microworld_hiphop.json

@@ -16,21 +16,18 @@
    "tips":[
       {
          "title":"Start Dancing",
-         "tips":[
+         "thumbnails":[
             {
-               "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"
@@ -39,21 +36,18 @@
       },
       {
          "title":"Repeat the Dance",
-         "tips":[
+         "thumbnails":[
             {
-               "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"
@@ -62,15 +56,13 @@
       },
       {
          "title":"Play Music",
-         "tips":[
+         "thumbnails":[
             {
-               "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"
@@ -79,21 +71,18 @@
       },
       {
          "title":"Shadow Dance",
-         "tips":[
+         "thumbnails":[
             {
-               "id":7,
                "type":"tip",
                "title":"Add this block",
                "thumbnailUrl":"/images/microworlds/hiphop/shadow-dance.gif"
             },
             {
-               "id":8,
                "type":"tip",
                "title":"Start it",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
             },
             {
-               "id":9,
                "type":"tip",
                "title":"Click the stop sign to reset",
                "thumbnailUrl":"/images/microworlds/hiphop/stop.gif"
@@ -102,21 +91,18 @@
       },
       {
          "title":"More things to try",
-         "tips":[
+         "thumbnails":[
             {
-               "id":10,
                "type":"tip",
                "title":"Try different dance moves",
                "thumbnailUrl":"/images/microworlds/hiphop/change-dance-moves.gif"
             },
             {
-               "id":11,
                "type":"tip",
                "title":"Add more moves",
                "thumbnailUrl":"/images/microworlds/hiphop/long-dance-script.png"
             },
             {
-               "id":12,
                "type":"tip",
                "title":"Change the timing",
                "thumbnailUrl":"/images/microworlds/hiphop/change-dance-timing.png"

src/views/microworld_hiphop/microworld_hiphop.jsx

 var render = require('../../lib/render.jsx');
 var Microworld = require('../../components/microworld/microworld.jsx');
 
-render(<Microworld microworldData={require("./microworld_hiphop.json")} />, document.getElementById('view'));
+var microworldData = require('./microworld_hiphop.json');
+
+render(<Microworld microworldData={microworldData} />, document.getElementById('view'));