Merge pull request #1095 from morantsur/microworlds_projects

Add a microworlds homepage, and point microworlds pages at the new microworlds projects.

src/components/modal/ttt/modal.jsx

@@ -67,7 +67,7 @@ var TTTModal = React.createClass({
                             href={this.props.tutorialLoc}
                             className="button white mod-ttt-item"
                         >
-                            <FormattedMessage id="ttt.tryIt" />
+                            <FormattedMessage id="tile.tryIt" />
                         </a>
                     </FlexRow>
                     <FlexRow as="li" className="mod-ttt-item">

src/components/title-banner/title-banner.scss

@@ -27,3 +27,7 @@
 .title-banner-strong {
     font-weight: 700;  
 }
+
+.title-banner.mod-blue-bg {
+    background-color: $ui-blue;
+}

src/components/ttt-tile/ttt-tile.jsx

@@ -9,10 +9,10 @@ var TTTTile = React.createClass({
     type: 'TTTTile',
     propTypes: {
         title: React.PropTypes.string.isRequired,
-        description: React.PropTypes.string.isRequired,
+        description: React.PropTypes.string,
         thumbUrl: React.PropTypes.string.isRequired,
         tutorialLoc: React.PropTypes.string.isRequired,
-        onGuideClick: React.PropTypes.func.isRequired
+        onGuideClick: React.PropTypes.func
     },
     render: function () {
         var classes = classNames(
@@ -27,7 +27,7 @@ var TTTTile = React.createClass({
                             <img className="ttt-tile-image-img" src={this.props.thumbUrl} alt="" />
                             <div className="ttt-tile-image-try">
                                 <div className="button mod-ttt-try-button">
-                                    <FormattedMessage id="ttt.tryIt" />
+                                    <FormattedMessage id="tile.tryIt" />
                                 </div>
                             </div>
                         </div>
@@ -44,10 +44,12 @@ var TTTTile = React.createClass({
                     </div>
 
                 </a>
-                <div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
+                {this.props.onGuideClick && (
-                    <FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
+                    <div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
-                    <img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
+                        <FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
-                </div>
+                        <img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
+                    </div>
+                )}
             </div>
         );
     }

src/routes.json

@@ -251,5 +251,12 @@
         "routeAlias": "/microworlds",
         "view": "microworld/soccer/soccer",
         "title": "Soccer"
+    },
+    {
+        "name": "microworlds-homepage",
+        "pattern": "^/microworlds/go/?(\\?.*)?$",
+        "routeAlias": "/microworlds",
+        "view": "microworldshomepage/microworldshomepage",
+        "title": "Microworlds"
     }
 ]

src/views/microworld/art/art.json

@@ -5,7 +5,7 @@
       "Check out projects by others for inspiration,",
       "communicate in the forum and join the challenges!"
    ],
-   "microworld_project_id":"88148127",
+   "microworld_project_id":"133865435",
    "starter_projects":[
       {
          "title":"Architecture Stamps Starter Project",

src/views/microworld/fashion/fashion.json

@@ -12,7 +12,7 @@
          "link":"//player.vimeo.com/video/134864477?title=0&byline=0&portrait=0"
       }
    ],
-   "microworld_project_id":"68494068",
+   "microworld_project_id":"133865474",
    "tips":[
       {
          "title":"Click on blocks to see what they do",

src/views/microworld/hiphop/hiphop.json

@@ -12,7 +12,7 @@
          "link":"//player.vimeo.com/video/124055657?title=0&byline=0&portrait=0"
       }
    ],
-   "microworld_project_id":"68260156",
+   "microworld_project_id":"133865050",
    "tips":[
       {
          "title":"Start Dancing",

src/views/microworld/soccer/soccer.json

@@ -3,6 +3,6 @@
    "description":[
       "Make your own soccer animation or game!"
    ],
-   "microworld_project_id":"116297919",
+   "microworld_project_id":"133865271",
    "show_forum":false
 }

src/views/microworldshomepage/l10n.json

@@ -0,0 +1,13 @@
+{
+    "tile.tutorial": "Microworld",
+    "tile.tryIt": "Try It",
+    "microworlds.title": "Scratch Microworlds",
+    "microworlds.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try one.",
+    "microworlds.HipHopTitle": "Hip Hop Dance",
+    "microworlds.FashionTitle": "Fashion",
+    "microworlds.HouseTitle": "Interactive House",
+    "microworlds.MakeMusicTitle": "Make Music",
+    "microworlds.SoccerTitle": "Soccer",
+    "microworlds.JokeTitle": "Make a Joke",
+    "microworlds.ArtTitle": "Make Art"
+}

src/views/microworldshomepage/microworlds.json

@@ -0,0 +1,37 @@
+[
+    {
+        "title": "microworlds.HipHopTitle",
+        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5050.png",
+        "tutorialLoc": "/pathways/hiphop"
+    },
+    {
+        "title": "microworlds.MakeMusicTitle",
+        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5393.png",
+        "tutorialLoc": "/projects/embed-editor/133865393/?isMicroworld=true"
+    },
+    {
+        "title": "microworlds.SoccerTitle",
+        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5271.png",
+        "tutorialLoc": "/projects/embed-editor/133865271/?isMicroworld=true"
+    },
+    {
+        "title": "microworlds.FashionTitle",
+        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5474.png",
+        "tutorialLoc": "/pathways/fashion"
+    },
+    {
+        "title": "microworlds.ArtTitle",
+        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5435.png",
+        "tutorialLoc": "/projects/embed-editor/133865435/?isMicroworld=true"
+    },
+    {
+        "title": "microworlds.JokeTitle",
+        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5327.png",
+        "tutorialLoc": "/projects/embed-editor/133865327/?isMicroworld=true"
+    },
+    {
+        "title": "microworlds.HouseTitle",
+        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13383/5490.png",
+        "tutorialLoc": "/projects/embed-editor/133835490/?isMicroworld=true"
+    }
+]

src/views/microworldshomepage/microworldshomepage.jsx

@@ -0,0 +1,47 @@
+var React = require('react');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var render = require('../../lib/render.jsx');
+
+var MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
+var Tiles = require('./microworlds.json');
+
+require('./microworldshomepage.scss');
+
+var MicroworldsHomepage = injectIntl(React.createClass({
+    type: 'MicroworldsHomepage',
+    render: function () {
+        return (
+            <div className="microworlds">
+                <TitleBanner className="masthead mod-blue-bg">
+                    <h1 className="title-banner-h1">
+                        <FormattedMessage id="microworlds.title" />
+                    </h1>
+                    <p className="intro title-banner-p">
+                        <FormattedHTMLMessage id="microworlds.subTitle" />
+                    </p>
+                </TitleBanner>
+                <div className="inner">
+                    <MasonryGrid >
+                        {Tiles.map(
+                            function (tile, key) {
+                                return <TTTTile
+                                    key={key}
+                                    title={this.props.intl.formatMessage({id: tile.title})}
+                                    tutorialLoc={tile.tutorialLoc}
+                                    thumbUrl={tile.thumbUrl}
+                                    />;
+                            }, this)
+                        }
+                    </MasonryGrid>
+                </div>
+            </div>
+        );
+    }
+}));
+
+render(<Page><MicroworldsHomepage /></Page>, document.getElementById('app'));

src/views/microworldshomepage/microworldshomepage.scss

@@ -0,0 +1,3 @@
+#view {
+    padding: 0;
+}

src/views/thingstotry/l10n.json

@@ -1,16 +1,16 @@
 {
+    "tile.tutorial": "Tutorial",
+    "tile.guides": "See Cards and Guides",
+    "tile.tryIt": "Try It",
     "ttt.placeholder": "Placeholder text",
     "ttt.title": "Things to Try",
     "ttt.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try the <strong className=\"title-banner-strong\">Tutorial</strong>. You can also download a set of <strong className=\"title-banner-strong\">Activity Cards</strong> and <strong className=\"title-banner-strong\">Educator Guide</strong> for each theme.",
-    "tile.tutorial": "Tutorial",
-    "tile.guides": "See Cards and Guides",
     "ttt.tutorialTitle": "Tutorial",
     "ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",
     "ttt.activityTitle": "Activity Cards",
     "ttt.activitySubtitle": "Explore new coding ideas using this set of illustrated cards you can print out.",
     "ttt.educatorTitle": "Educator Guide",
     "ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
-    "ttt.tryIt": "Try It",
     "ttt.open": "Open",
     "ttt.MakeItFlyTitle": "Make It Fly",
     "ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",

src/views/thingstotry/thingstotry.jsx

@@ -57,7 +57,7 @@ var ThingsToTry = injectIntl(React.createClass({
     render: function () {
         return (
             <div className="ttt">
-                <TitleBanner className="masthead mod-ttt-title">
+                <TitleBanner className="masthead mod-blue-bg">
                     <section className="ttt-section">
                         <img className="ttt-banner-image" src="/svgs/ttt/resources.svg" alt=""/>
                     </section>

src/views/thingstotry/thingstotry.scss

@@ -7,11 +7,6 @@ $base-bg: $ui-white;
     padding: 0;
 }
 
-// .mod-ttt-title, to avoid collision with .title-banner.mod-tt in ttt modal
-.title-banner.mod-ttt-title {
-    background-color: $ui-blue;
-}
-
 .ttt-section {
     display: flex;
     margin: 0 auto;