diff --git a/src/components/microworld/microworld.jsx b/src/components/microworld/microworld.jsx index e9d08337c..45a524467 100644 --- a/src/components/microworld/microworld.jsx +++ b/src/components/microworld/microworld.jsx @@ -40,7 +40,7 @@ var Microworld = React.createClass({ return (
-

Get Inspired...

+

Get Inspired...

{videos.map(this.renderVideo)} @@ -81,10 +81,7 @@ var Microworld = React.createClass({ } return (
-

Start Creating!

- - - +

Start Creating!

{this.renderTips()} @@ -115,7 +112,7 @@ var Microworld = React.createClass({ return (
-

Check out ideas for more projects

+

Check out ideas for more projects

@@ -156,8 +153,8 @@ var Microworld = React.createClass({ return null; } return ( -
-

Get inspiration from other projects

+
+

Get inspiration from other projects

{rows}
); @@ -169,7 +166,7 @@ var Microworld = React.createClass({ return (
-

Chat with others!

+

Chat with others!

); @@ -185,7 +182,7 @@ var Microworld = React.createClass({ if (designChallenge.project_id) { return (
-

Join our Design Challenge!

+

Join our Design Challenge!

@@ -208,7 +205,7 @@ var Microworld = React.createClass({ } else { return (
-

Join our Design Challenge!

+

Join our Design Challenge!

-

{this.props.microworldData.title}

+

{this.props.microworldData.title}

{this.props.microworldData.description.join(' ')}

{this.renderVideos()} diff --git a/src/components/microworld/microworld.scss b/src/components/microworld/microworld.scss index c786e35e3..6b692d6ef 100644 --- a/src/components/microworld/microworld.scss +++ b/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 { diff --git a/src/routes.json b/src/routes.json index 478b94c9e..697995346 100644 --- a/src/routes.json +++ b/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" } ] diff --git a/src/views/microworld/art/art.json b/src/views/microworld/art/art.json index 4b7b09672..a008b334f 100644 --- a/src/views/microworld/art/art.json +++ b/src/views/microworld/art/art.json @@ -1,126 +1,11 @@ { "title":"Make Some Art", "description":[ - "Watch videos about how to create with technology.", - "Then, create your own art project.", + "Create your own art project with Scratch.", "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", diff --git a/src/views/microworld/art/art.jsx b/src/views/microworld/art/art.jsx index 5341647b8..62678a605 100644 --- a/src/views/microworld/art/art.jsx +++ b/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(, document.getElementById('view')); +render(, document.getElementById('app')); diff --git a/src/views/microworld/fashion/fashion.json b/src/views/microworld/fashion/fashion.json index 78db2f7fb..337a31c7c 100644 --- a/src/views/microworld/fashion/fashion.json +++ b/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":[ { diff --git a/src/views/microworld/fashion/fashion.jsx b/src/views/microworld/fashion/fashion.jsx index a98b133b3..0097fb9ad 100644 --- a/src/views/microworld/fashion/fashion.jsx +++ b/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(, document.getElementById('view')); +render(, document.getElementById('app')); diff --git a/src/views/microworld/hiphop/hiphop.json b/src/views/microworld/hiphop/hiphop.json index 5652d026f..84ffad3ae 100644 --- a/src/views/microworld/hiphop/hiphop.json +++ b/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":[ { diff --git a/src/views/microworld/hiphop/hiphop.jsx b/src/views/microworld/hiphop/hiphop.jsx index 8ae2a531c..ed4ce62aa 100644 --- a/src/views/microworld/hiphop/hiphop.jsx +++ b/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(, document.getElementById('view')); +render(, document.getElementById('app')); diff --git a/src/views/microworld/soccer/soccer.json b/src/views/microworld/soccer/soccer.json new file mode 100644 index 000000000..d1affd8d3 --- /dev/null +++ b/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 +} diff --git a/src/views/microworld/soccer/soccer.jsx b/src/views/microworld/soccer/soccer.jsx new file mode 100644 index 000000000..0aada133b --- /dev/null +++ b/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(, document.getElementById('app'));