Merge pull request #867 from morantsur/feature/microworlds

Adding routes to microworlds

src/components/microworld/microworld.jsx

@@ -40,7 +40,7 @@ var Microworld = React.createClass({
 
         return (
             <div className="videos-section section">
-                <h1>Get Inspired...</h1>
+                <h1 className="sectionheader">Get Inspired...</h1>
                 <div className="videos-container">
                     <div className="videos">
                         {videos.map(this.renderVideo)}
@@ -81,10 +81,7 @@ var Microworld = React.createClass({
         }
         return (
             <div className="editor section">
-                <h1>Start Creating!</h1>
+                <h1 className="sectionheader">Start Creating!</h1>
-                <a href={'//scratch.mit.edu/projects/'+ projectId +'/#editor'}>
-                  <img className="scratch-link" src="/images/scratch-og.png"></img>
-                </a>
                 <iframe src={'//scratch.mit.edu/projects/embed-editor/' + projectId + '/?isMicroworld=true'}
                         frameBorder="0"> </iframe>
                 {this.renderTips()}
@@ -115,7 +112,7 @@ var Microworld = React.createClass({
 
         return (
             <div className="project-ideas">
-                <h1>Check out ideas for more projects</h1>
+                <h1 className="sectionheader">Check out ideas for more projects</h1>
                 <Box
                     title="More Starter Projects"
                     key="starter_projects">
@@ -156,8 +153,8 @@ var Microworld = React.createClass({
             return null;
         }
         return (
-            <div className="project-ideas">
+            <div className="project-ideas section">
-                <h1>Get inspiration from other projects</h1>
+                <h1 className="sectionheader">Get inspiration from other projects</h1>
                 {rows}
             </div>
         );
@@ -169,7 +166,7 @@ var Microworld = React.createClass({
 
         return (
         <div className="forum">
-            <h1>Chat with others!</h1>
+            <h1 className="sectionheader">Chat with others!</h1>
             <img src="/images/forum-image.png"/>
         </div>
         );
@@ -185,7 +182,7 @@ var Microworld = React.createClass({
         if (designChallenge.project_id) {
             return (
                 <div className="side-by-side section">
-                    <h1>Join our Design Challenge!</h1>
+                    <h1 className="sectionheader">Join our Design Challenge!</h1>
                     <div className="design-studio">
                         <iframe src={'https://scratch.mit.edu/projects/' + designChallenge.project_id +
                                      '/#fullscreen'} frameBorder="0"> </iframe>
@@ -208,7 +205,7 @@ var Microworld = React.createClass({
         } else {
             return (
                 <div className="section">
-                    <h1>Join our Design Challenge!</h1>
+                    <h1 className="sectionheader">Join our Design Challenge!</h1>
                     <Box
                         title="design Challenge Projects"
                         key="scratch_design_studio"
@@ -225,7 +222,7 @@ var Microworld = React.createClass({
         return (
             <div className="inner microworld">
                 <div className="top-banner section">
-                    <h1>{this.props.microworldData.title}</h1>
+                    <h1 className="sectionheader">{this.props.microworldData.title}</h1>
                     <p>{this.props.microworldData.description.join(' ')}</p>
                 </div>
                 {this.renderVideos()}

src/components/microworld/microworld.scss

@@ -9,6 +9,13 @@ $base-bg: $ui-white;
 }
 
 .microworld {
+    .sectionheader {
+        margin: 0 auto;
+        padding: 5px 10%;
+        text-align: center;
+        color: $type-gray;
+    }
+
     .top-banner, 
     .videos-section,
     .section {
@@ -140,6 +147,10 @@ $base-bg: $ui-white;
 
             .design-studio-projects {
                 float: right;
+
+                .box {
+                    width: 100%;
+                }
             }
 
             .design-studio {

src/routes.json

@@ -212,5 +212,33 @@
         "pattern": "^/explore/studios/?$",
         "routeAlias": "/explore(?!/ajax)",
         "redirect": "/explore/studios/all"
+    },
+    {
+        "name": "microworld-art",
+        "pattern": "^/microworlds/art",
+        "routeAlias": "/microworlds",
+        "view": "microworld/art/art",
+        "title": "Art"
+    },
+    {
+        "name": "microworld-hiphop",
+        "pattern": "^/microworlds/hiphop",
+        "routeAlias": "/microworlds",
+        "view": "microworld/hiphop/hiphop",
+        "title": "Hip Hop Dance"
+    },
+    {
+        "name": "microworld-fashion",
+        "pattern": "^/microworlds/fashion",
+        "routeAlias": "/microworlds",
+        "view": "microworld/fashion/fashion",
+        "title": "Fashion"
+    },
+    {
+        "name": "microworld-soccer",
+        "pattern": "^/microworlds/soccer",
+        "routeAlias": "/microworlds",
+        "view": "microworld/soccer/soccer",
+        "title": "Soccer"
     }
 ]

src/views/microworld/art/art.json

@@ -1,126 +1,11 @@
 {
    "title":"Make Some Art",
    "description":[
-      "Watch videos about how to create with technology.",
+      "Create your own art project with Scratch.",
-      "Then, create your own art project.",
       "Check out projects by others for inspiration,",
       "communicate in the forum and join the challenges!"
    ],
-   "videos":[
-      {
-         "key":"1",
-         "image":"http://farm8.staticflickr.com/7245/7120445933_7de87c2bd9_z.jpg",
-         "link":"https://player.vimeo.com/video/40904471"
-      },
-      {
-         "key":"2",
-         "image":"http://blogs.adobe.com/conversations/files/2015/04/project-para2-1024x572.jpg",
-         "link":"https://www.youtube.com/embed/Tdvj8XMrqXc?autoplay=1"
-      },
-      {
-         "key":"3",
-         "image":"http://iluminate.com/wp-content/uploads/2015/07/iluminate-news-residency-at-resorts-world-genting-malaysia-1200x798.jpg",
-         "link":"https://www.youtube.com/embed/Xg1dUhVI9i0?autoplay=1"
-      }
-   ],
    "microworld_project_id":"88148127",
-   "tips":[
-      {
-         "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"
-            }
-         ]
-      },
-      {
-         "title":"Play Music",
-         "thumbnails":[
-            {
-               "type":"tip",
-               "title":"Add music that repeats",
-               "thumbnailUrl":"/images/microworlds/hiphop/add-play-sound.gif"
-            },
-            {
-               "type":"tip",
-               "title":"Start it",
-               "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
-            }
-         ]
-      },
-      {
-         "title":"Shadow Dance",
-         "thumbnails":[
-            {
-               "type":"tip",
-               "title":"Add this block",
-               "thumbnailUrl":"/images/microworlds/hiphop/shadow-dance.gif"
-            },
-            {
-               "type":"tip",
-               "title":"Start it",
-               "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
-            },
-            {
-               "type":"tip",
-               "title":"Click the stop sign to reset",
-               "thumbnailUrl":"/images/microworlds/hiphop/stop.gif"
-            }
-         ]
-      },
-      {
-         "title":"More things to try",
-         "thumbnails":[
-            {
-               "type":"tip",
-               "title":"Try different dance moves",
-               "thumbnailUrl":"/images/microworlds/hiphop/change-dance-moves.gif"
-            },
-            {
-               "type":"tip",
-               "title":"Add more moves",
-               "thumbnailUrl":"/images/microworlds/hiphop/long-dance-script.png"
-            },
-            {
-               "type":"tip",
-               "title":"Change the timing",
-               "thumbnailUrl":"/images/microworlds/hiphop/change-dance-timing.png"
-            }
-         ]
-      }
-   ],
    "starter_projects":[
       {
          "title":"Architecture Stamps Starter Project",

src/views/microworld/art/art.jsx

@@ -1,6 +1,8 @@
+var React = require('react'); // eslint-disable-line
 var render = require('../../../lib/render.jsx');
 var Microworld = require('../../../components/microworld/microworld.jsx');
+var Page = require('../../../components/page/www/page.jsx');
 
-var microworldData = require('./microworld_art.json');
+var microworldData = require('./art.json');
 
-render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
+render(<Page><Microworld microworldData={microworldData} /></Page>, document.getElementById('app'));

src/views/microworld/fashion/fashion.json

@@ -125,17 +125,6 @@
          ]
       }
    ],
-   "_commentedout_starter_projects":[
-      {
-         "title":"Architecture Stamps Starter Project",
-         "type":"project",
-         "remixers_count":168,
-         "love_count":3062,
-         "thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2445/6318.png",
-         "creator":"CSFirst",
-         "id":24456318
-      }
-   ],
    "community_projects":{
       "featured_projects":[
          {
@@ -395,7 +384,6 @@
       ]
    },
    "design_challenge":{
-      "_commentedout_project_id":"89144801",
       "studio_id":"1424746",
       "studio1":[
          {

src/views/microworld/fashion/fashion.jsx

@@ -1,6 +1,8 @@
+var React = require('react'); // eslint-disable-line
 var render = require('../../../lib/render.jsx');
 var Microworld = require('../../../components/microworld/microworld.jsx');
+var Page = require('../../../components/page/www/page.jsx');
 
-var microworldData = require('./microworld_fashion.json');
+var microworldData = require('./fashion.json');
 
-render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
+render(<Page><Microworld microworldData={microworldData} /></Page>, document.getElementById('app'));

src/views/microworld/hiphop/hiphop.json

@@ -110,17 +110,6 @@
          ]
       }
    ],
-   "_commentedout_starter_projects":[
-      {
-         "title":"Architecture Stamps Starter Project",
-         "type":"project",
-         "remixers_count":168,
-         "love_count":3062,
-         "thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2445/6318.png",
-         "creator":"CSFirst",
-         "id":24456318
-      }
-   ],
    "community_projects":{
       "featured_projects":[
          {
@@ -353,7 +342,6 @@
       ]
    },
    "design_challenge":{
-      "_commentedout_project_id":"89144801",
       "studio_id":"1065372",
       "studio1":[
          {

src/views/microworld/hiphop/hiphop.jsx

@@ -1,6 +1,8 @@
+var React = require('react'); // eslint-disable-line
 var render = require('../../../lib/render.jsx');
 var Microworld = require('../../../components/microworld/microworld.jsx');
+var Page = require('../../../components/page/www/page.jsx');
 
-var microworldData = require('./microworld_hiphop.json');
+var microworldData = require('./hiphop.json');
 
-render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
+render(<Page><Microworld microworldData={microworldData} /></Page>, document.getElementById('app'));

src/views/microworld/soccer/soccer.json

@@ -0,0 +1,8 @@
+{
+   "title":"Soccer",
+   "description":[
+      "Make your own soccer animation or game!"
+   ],
+   "microworld_project_id":"116297919",
+   "show_forum":false
+}

src/views/microworld/soccer/soccer.jsx

@@ -0,0 +1,8 @@
+var React = require('react'); // eslint-disable-line
+var render = require('../../../lib/render.jsx');
+var Microworld = require('../../../components/microworld/microworld.jsx');
+var Page = require('../../../components/page/www/page.jsx');
+
+var microworldData = require('./soccer.json');
+
+render(<Page><Microworld microworldData={microworldData} /></Page>, document.getElementById('app'));