From e9cb08d273bff4fcd67f3ae63aa12abd064abdc8 Mon Sep 17 00:00:00 2001 From: morant Date: Fri, 19 Feb 2016 14:39:43 -0500 Subject: [PATCH] Revert "Fix review comments, and organize code a bit." This reverts commit 3d9d280bb95a48c05a471422ab30b815760e607c. --- src/components/microworld/microworld.jsx | 121 +++-- src/components/microworld/microworld.scss | 503 ++++++++++++------ .../nestedcarousel/nestedcarousel.json | 42 -- .../nestedcarousel/nestedcarousel.scss | 8 - src/components/thumbnail/thumbnail.jsx | 12 +- src/components/tipsslider/tipsslider.json | 50 ++ .../tipsslider.jsx} | 39 +- src/components/tipsslider/tipsslider.scss | 75 +++ src/views/microworld_art/microworld_art.json | 24 +- src/views/microworld_art/microworld_art.jsx | 4 +- .../microworld_fashion.json | 28 +- .../microworld_fashion/microworld_fashion.jsx | 4 +- .../microworld_hiphop/microworld_hiphop.json | 24 +- .../microworld_hiphop/microworld_hiphop.jsx | 4 +- 14 files changed, 622 insertions(+), 316 deletions(-) delete mode 100644 src/components/nestedcarousel/nestedcarousel.json delete mode 100644 src/components/nestedcarousel/nestedcarousel.scss create mode 100644 src/components/tipsslider/tipsslider.json rename src/components/{nestedcarousel/nestedcarousel.jsx => tipsslider/tipsslider.jsx} (59%) create mode 100644 src/components/tipsslider/tipsslider.scss diff --git a/src/components/microworld/microworld.jsx b/src/components/microworld/microworld.jsx index 5f1028bc8..af5f679bf 100644 --- a/src/components/microworld/microworld.jsx +++ b/src/components/microworld/microworld.jsx @@ -1,39 +1,40 @@ +var classNames = require('classnames'); var React = require('react'); +var render = require('../../lib/render.jsx'); +var omit = require('lodash.omit'); require('./microworld.scss'); var Box = require('../../components/box/box.jsx'); var Carousel = require('../../components/carousel/carousel.jsx'); var Modal = require('../../components/modal/modal.jsx'); -var NestedCarousel = require('../../components/nestedcarousel/nestedcarousel.jsx'); +var TipsSlider = require('../../components/tipsslider/tipsslider.jsx'); var Microworld = React.createClass({ type: 'Microworld', propTypes: { microworldData: React.PropTypes.node.isRequired }, - markVideoOpen: function (key) { - {/* When a video is clicked, mark it as an open video, so the video Modal will open. - Key is the number of the video, so distinguish between different videos on the page */} - + showVideo: function (key) { var videoOpenArr = this.state.videoOpen; videoOpenArr[key] = true; this.setState({videoOpen: videoOpenArr}); }, - markVideoClosed: function (key) { - {/* When a video's x is clicked, mark it as closed, so the video Modal will disappear. - Key is the number of the video, so distinguish between different videos on the page */} + closeVideo: function (key) { var videoOpenArr = this.state.videoOpen; videoOpenArr[key] = false; this.setState({videoOpen: videoOpenArr}); }, getInitialState: function () { return { - videoOpen: {} + videoOpen: {}, + featuredGlobal: {}, + featuredLocal: {}, + microworld_data: this.props.microworldData }; }, renderVideos: function () { - var videos = this.props.microworldData.videos; + var videos = this.state.microworld_data.videos if (!videos || videos.length <= 0) { return null; } @@ -58,23 +59,23 @@ var Microworld = React.createClass({ return (
-
+
- + +
- ); + ) }, - renderEditorWindow: function () { - var projectId = this.props.microworldData.microworld_project_id; + renderEditorWindow: function() { + var projectId = this.state.microworld_data.microworld_project_id; if (!projectId) { return null; @@ -82,33 +83,34 @@ var Microworld = React.createClass({ return (

Start Creating!

- - + + - {this.renderTips()} +
- ); + ) }, - renderTips: function () { - var tips = this.props.microworldData.tips; + renderTips: function() { + var tips = this.state.microworld_data.tips; if (!tips || tips.length <= 0) { return null; } return ( -
+
- +
- ); + ) }, - renderStarterProject: function () { - var starterProjects = this.props.microworldData.starter_projects; + renderStarterProject: function() { + var starterProjects = this.state.microworld_data.starter_projects; if (!starterProjects || starterProjects.length <= 0){ return null; } @@ -122,10 +124,10 @@ var Microworld = React.createClass({
- ); + ) }, - renderProjectIdeasBox: function () { - var communityProjects = this.props.microworldData.community_projects; + renderProjectIdeasBox: function() { + var communityProjects = this.state.microworld_data.community_projects; if (!communityProjects || communityProjects.size <= 0) { return null; } @@ -133,7 +135,7 @@ var Microworld = React.createClass({ var featured = communityProjects.featured_projects; var all = communityProjects.newest_projects; - var rows = []; + var rows = [] if (featured && featured.length > 0){ rows.push( - ); + ) } if (all && all.length > 0) { rows.push( @@ -150,7 +152,7 @@ var Microworld = React.createClass({ key="community_all_projects"> - ); + ) } if (rows.length <= 0) { return null; @@ -160,10 +162,10 @@ var Microworld = React.createClass({

Get inspiration from other projects

{rows}
- ); + ) }, - renderForum: function () { - if (!this.props.microworldData.show_forum) { + renderForum: function() { + if (!this.state.microworld_data.show_forum) { return null; } @@ -172,61 +174,64 @@ var Microworld = React.createClass({

Chat with others!

- ); + ) }, - renderDesignStudio: function () { - var designChallenge = this.props.microworldData.design_challenge; + renderDesignStudio: function() { + var designChallenge = this.state.microworld_data.design_challenge; if (!designChallenge) { return null; } if (designChallenge.studio_id) { - var studioHref = 'https://scratch.mit.edu//studios/' + designChallenge.studio_id + '/'; + var studioHref = 'https://scratch.mit.edu//studios/' + designChallenge.studio_id + '/' } + var designStudioIntro; if (designChallenge.project_id) { return (

Join our Design Challenge!

- +
- {/* The two carousels are used to show two rows of projects, one above the - other. This should be probably be changed, to allow better scrolling. */} - - + +
- ); + ) } else { - return ( + return (

Join our Design Challenge!

- +
- ); + ) } }, render: function () { + var classes = classNames( + 'top-banner' + ); + + var microworldData = this.state.microworld_data; + + return (
-

{this.props.microworldData.title}

-

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

+

{microworldData.title}

+

{microworldData.description.join(" ")}

{this.renderVideos()} diff --git a/src/components/microworld/microworld.scss b/src/components/microworld/microworld.scss index 725122bac..9fa3bd227 100644 --- a/src/components/microworld/microworld.scss +++ b/src/components/microworld/microworld.scss @@ -4,179 +4,386 @@ $base-bg: $ui-white; #view { - background-color: $base-bg; - padding: 0; + padding: 0; + background-color: $base-bg; - // To be integrated into the Global Typography standards - h3, - p { - font-weight: 300; + // To be integrated into the Global Typography standards + h3, + p { + font-weight: 300; + } + + p { + line-height: 2em; + } + + h1 { + margin: 0 auto; + padding: 5px 0; + max-width: 500px; + text-align: center; + color: $type-gray; + } + + .top-banner, .videos-section, .section { + padding: 30px 0; + width: 100%; + + h1, + p { + margin: 0 auto; + padding: 5px 0; + max-width: 500px; + text-align: center; + color: $type-gray; + } + } + + .videos-container { + display: flex; + margin: 0 auto; + + justify-content: center; + flex-wrap: wrap; + align-items: center; + + .videos { + display: inline-flex; + justify-content: center; + flex-wrap: wrap; } - p { - line-height: 2em; + .video { + position:relative; + margin: 10px; + border-radius: 7px; + background-color: $active-gray; + padding: 2px; + max-width: 290px; } - h1 { - margin: 0 auto; - padding: 5px 0; - max-width: 500px; - text-align: center; - color: $type-gray; + img { + width: calc(100% - 20px); + height: 179px; + margin: 10px 10px 5px 10px; + border-radius: 5px; } - .top-banner, - .videos-section, - .section { - padding: 30px 0; - width: 100%; + .play-button { + display: block; + top: calc(50% - 25px); + left: calc(50% - 35px); + opacity: .8; + border: 5px solid $ui-border; + border-radius: 20px; + background-color: $type-gray; + width: 70px; + height: 50px; - h1, - p { - margin: 0 auto; - padding: 5px 0; - max-width: 500px; - text-align: center; - color: $type-gray; - } + &, + &:after { + position: absolute; + margin: 0; + cursor: pointer; + padding: 0; + } + + &:after { + $play-arrow: rgba(255, 255, 255, 0); + top: 37px; + left: 28px; + margin-top: -30px; + border: solid transparent; + border-width: 18px; + border-color: $play-arrow; + border-left-color: $ui-white; + width: 0; + height: 0; + content: " "; + pointer-events: none; + } + } + } + + .content { + img { + margin-left: auto; + margin-right: auto; + display: block; } - .videos-container { - display: flex; - margin: 0 auto; - - justify-content: center; - flex-wrap: wrap; - align-items: center; - - .videos { - display: inline-flex; - justify-content: center; - flex-wrap: wrap; - } - - .video { - position: relative; - margin: 10px; - border-radius: 7px; - background-color: $active-gray; - padding: 2px; - max-width: 290px; - } - - img { - margin: 10px 10px 5px; - border-radius: 5px; - width: calc(100% - 20px); - height: 179px; - } - - .play-button { - display: block; - top: calc(50% - 25px); - left: calc(50% - 35px); - opacity: .8; - border: 5px solid $ui-border; - border-radius: 20px; - background-color: $type-gray; - width: 70px; - height: 50px; - - &, - &:after { - position: absolute; - margin: 0; - cursor: pointer; - padding: 0; - } - - &:after { - $play-arrow: rgba(255, 255, 255, 0); - top: 37px; - left: 28px; - margin-top: -30px; - border: solid transparent; - border-width: 18px; - border-color: $play-arrow; - border-left-color: $ui-white; - width: 0; - height: 0; - content: " "; - pointer-events: none; - } - } + .box, iframe { + margin-left: auto; + margin-right: auto; + padding-bottom: 15px; + padding-top: 25px; + border: 0px; + display: block; } - .content { - img { - display: block; - margin-right: auto; - margin-left: auto; - } + iframe { + width: 900px; + height: 600px; + } - .box, - iframe { - display: block; - margin-right: auto; - margin-left: auto; - border: 0; - padding-top: 25px; - padding-bottom: 15px; - } + .box { + width: 900px; + } + + .side-by-side { + margin-left: auto; + margin-right: auto; + width: 900px; + height:520px; + + .box { + width: 400px; + } + + .design-studio-projects,.design-studio { + width: 400px; + height: 500px; + display: inline-block; + } + .design-studio-projects { + float:right; + } + .design-studio { + float: left; iframe { - width: 900px; - height: 600px; + margin-top: 60px; + width: 960px; + -webkit-transform: scale(0.5); + -webkit-transform-origin: top left; + -moz-transform: scale(0.5); } + } - .box { - width: 900px; - } - .side-by-side { - margin-right: auto; - margin-left: auto; - width: 900px; - height: 520px; + } + } - .box { - width: 400px; - } + .box-content .tipsslider { + text-align: center; - .design-studio-projects, - .design-studio { - display: inline-block; - width: 400px; - height: 500px; - } + .thumbnail { + display: inline-block; + margin: 0px 50px; + } + } - .design-studio-projects { - float: right; - } - .design-studio { - float: left; + .pathways .box-content {padding:20px;} - iframe { - margin-top: 60px; - width: 960px; - -webkit-transform: scale(.5); - -webkit-transform-origin: top left; - -moz-transform: scale(.5); - } - } - } + .pathways .rightcol {float:right;width:30%;clear:none;margin-bottom:20px} + .pathways .rightcol .box-content{background-color:#FBFBFB} + .pathways .rightcol .box{margin-bottom:-10px;position:relative} + + + .pathways .thumb-with-subtext img {width:158px;height:128px;border:1px solid #ccc} + .pathways .thumb-with-subtext p {width:158px;height:auto} + .pathways .thumb-with-subtext{white-space:normal;display:inline-block;width:30%;margin:0 9px;vertical-align:top} + .pathways .thumb-with-title-and-sublinks{white-space:normal;display:inline-block;width:auto;margin:0 20px 20px 20px;vertical-align:top;text-align:left;} + .pathways .thumb-with-title-and-sublinks .span{} + .pathways .thumb-with-title-and-sublinks a {display:block} + + .pathways .intro{ overflow:auto;margin-bottom:20px; } + .pathways h1{ text-align:center;} + .pathways .tutorial-pane {height: 300px} + .pathways .leftcol, .pathways .rightcol { //margin-right: 20px;float:left;} + .pathways .leftcol { + width: 50%; + } + .pathways .rightcol { + text-align: center; + margin-left: 8%; + } + .pathways .intro .rightcol { + margin: 0; + text-align: right; + } + .pathways .intro .leftcol { + margin: 20px; + float: left; + position: relative; + } + .pathways .intro .introinfo { + font-size: 17px; + position: absolute; + top: 0; } - .box-content { - .nestedcarousel { - text-align: center; - - .thumbnail { - display: inline-block; - margin: 0 50px; - } - } + .pathways .intro .introinfo ul { + list-style-type: none; + margin: 0; } + + .pathways .intro h1 { + text-align: left; + } + .pathways .intro p { + font-size: 18px; + padding-right: 25px; + text-align: left; + } + + .pathways .microworld { + padding: 5px; + } + .pathways .editor-and-tips { + padding: 15px 15px 0px 15px; + border-radius: 15px 15px 0 0; + box-shadow: 0px 0px 8px #cccccc inset, 0 2px 3px rgba(34, 25, 25, 0.3); + border-top: 1px solid #E0E0E0; + border-right: 1px solid #E0E0E0; + border-left: 1px solid #E0E0E0; + background-color: white; + margin-bottom: 50px; + /* offset-x | offset-y | blur-radius | color */ + + } + //for tips slideshow + + .pathways .tips-slider.flexslider { + } + + .pathways .flexslider .flex-prev { + top: 130px; + margin-left: 50px; + } + .pathways .flexslider .flex-next { + margin-right: 50px; + top: 130px; + } + + .pathways .tips { + background-color: #E6E6E8; + width: 887px; + margin-left: 10px; + padding-bottom: 1px; + margin-bottom: 15px; + border: 1px solid #D0D1D2; + } + .pathways .tips h3 { + text-align: center; + font-size: 1.4em; + padding: 5px; + } + + .pathways .tip-slide { + width: 80%; + margin: 0 auto; + text-align: center; + //background: lightgray; + } + .pathways .tip-step { + display: inline-block; + margin: 0 10px; + min-width: 180px; + padding: 10px; + text-align: center; + vertical-align: middle; + height: 140px; + background-color: white; + border-radius: 10px; + position: relative; + } + + .pathways .tip-step h5 { + color: #5C5D5F; + font-size: 1.1em; + font-weight: 400; + position: absolute; + border-radius: 0 0 10px 10px; + width: 100%; + bottom: 0; + margin: 0; + left: 0; + } + .pathways .tip-step img { + margin-left: auto; + margin-right: auto; + position: relative; + top: 45%; + transform: translateY(-50%); + overflow: hidden; + height: 50; + } + + .pathways .tips-download { + background-color: #E6E6E8; + padding: 8px; + font-size: 1.1em; + margin: 0 -16px; + text-align: center; + font-family: "helvetica neue", arial, sans-serif; + } + + .pathways .tips-download a:hover:after { + text-decoration: none; + } + .pathways .button { + padding-left: .5em; + padding-right: .5em; + } + .get-started .button { + text-size: 12px; + border-color: #ED8629; + background-color: #E58220; + background-image: -webkit-linear-gradient(top, #FF9522, #E58220); + background-image: -moz-linear-gradient(top, #FF9522, #E58220); + background-image: -ms-linear-gradient(top, #FF9522, #E58220); + background-image: -o-linear-gradient(top, #FF9522, #E58220); + background-image: linear-gradient(top, #FF9522, #E58220); + filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF9522, endColorStr=#E58220); + } + //.pathways .box {background-color:#fff;} + .pathways .box-content { + margin: 5px 0; + border-top: none; + } + .pathways .tutorial-pane .box-content { + background-color: #f7f7f7; + padding: 20px 30px; + display: inline-block; + } + .pathways .slider-carousel { + padding: 10px 43px; + } + + .gallery.thumb { + position: relative; + } + + .pathways .gallery.thumb.item { + display: inline-block; + width: 33%; + font-size: 14px; + } + + .pathways .gallery.thumb a.image { + display: block; + } + + .pathways .gallery.thumb span.image img { + background-color: #fff; + width: 170px; + height: 100px; + margin: 5px; + } + + .pathways .gallery.thumb .stats { + vertical-align: top; + opacity: .9; + border-radius: 5px; + background-color: #333; + color: white !important; + position: absolute; + bottom: 30px; + right: 120px; + padding: 1px; + } + } } diff --git a/src/components/nestedcarousel/nestedcarousel.json b/src/components/nestedcarousel/nestedcarousel.json deleted file mode 100644 index 6dda5e6d8..000000000 --- a/src/components/nestedcarousel/nestedcarousel.json +++ /dev/null @@ -1,42 +0,0 @@ -[ - { - "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 diff --git a/src/components/nestedcarousel/nestedcarousel.scss b/src/components/nestedcarousel/nestedcarousel.scss deleted file mode 100644 index 1608d6739..000000000 --- a/src/components/nestedcarousel/nestedcarousel.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "../../colors"; -@import "../carousel/carousel.scss"; - -.nestedcarousel { - .slick-slide { - padding-left: 60px; - } -} diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx index c44e10e86..502e1182d 100644 --- a/src/components/thumbnail/thumbnail.jsx +++ b/src/components/thumbnail/thumbnail.jsx @@ -15,8 +15,7 @@ var Thumbnail = React.createClass({ src: '', type: 'project', showLoves: false, - showRemixes: false, - linkTitle: true + showRemixes: false }; }, render: function () { @@ -55,20 +54,13 @@ var Thumbnail = React.createClass({
); } - var titleElement; - if (this.props.linkTitle) { - titleElement = {this.props.title}; - } else { - titleElement = this.props.title; - } - return (
- {titleElement} + {this.props.title}
{extra}
diff --git a/src/components/tipsslider/tipsslider.json b/src/components/tipsslider/tipsslider.json new file mode 100644 index 000000000..5c16ec508 --- /dev/null +++ b/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": "#" + } +] diff --git a/src/components/nestedcarousel/nestedcarousel.jsx b/src/components/tipsslider/tipsslider.jsx similarity index 59% rename from src/components/nestedcarousel/nestedcarousel.jsx rename to src/components/tipsslider/tipsslider.jsx index 9902fe214..00c8440a0 100644 --- a/src/components/nestedcarousel/nestedcarousel.jsx +++ b/src/components/tipsslider/tipsslider.jsx @@ -7,24 +7,16 @@ var Thumbnail = require('../thumbnail/thumbnail.jsx'); require('slick-carousel/slick/slick.scss'); require('slick-carousel/slick/slick-theme.scss'); -require('./nestedcarousel.scss'); +require('./tipsslider.scss'); - -{/* - 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', +var TipsSlider = React.createClass({ + type: 'TipsSlider', propTypes: { items: React.PropTypes.array }, getDefaultProps: function () { return { - items: require('./nestedcarousel.json') + items: require('./tipsslider.json'), }; }, render: function () { @@ -41,35 +33,32 @@ var NestedCarousel = React.createClass({ var arrows = this.props.items.length > settings.slidesToShow; var classes = classNames( - 'nestedcarousel', - 'carousel', + 'tipsslider', this.props.className ); var stages = []; for (var i=0; i < this.props.items.length; i++) { - var items = this.props.items[i].thumbnails; + var items = this.props.items[i].tips; var thumbnails = []; for (var j=0; j < items.length; j++) { - var item = items[j]; - thumbnails.push( - ); + src={item.thumbnailUrl} />) } stages.push( -
+

{this.props.items[i].title}

{thumbnails} -
); - } +
) + } return ( - {stages} + {stages} ); } }); -module.exports = NestedCarousel; +module.exports = TipsSlider; diff --git a/src/components/tipsslider/tipsslider.scss b/src/components/tipsslider/tipsslider.scss new file mode 100644 index 000000000..ce8f80eee --- /dev/null +++ b/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; + } + +} diff --git a/src/views/microworld_art/microworld_art.json b/src/views/microworld_art/microworld_art.json index 4b7b09672..c2b16cf79 100644 --- a/src/views/microworld_art/microworld_art.json +++ b/src/views/microworld_art/microworld_art.json @@ -27,18 +27,21 @@ "tips":[ { "title":"Start Dancing", - "thumbnails":[ + "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" @@ -47,18 +50,21 @@ }, { "title":"Repeat the Dance", - "thumbnails":[ + "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" @@ -67,13 +73,15 @@ }, { "title":"Play Music", - "thumbnails":[ + "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" @@ -82,18 +90,21 @@ }, { "title":"Shadow Dance", - "thumbnails":[ + "tips":[ { + "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,18 +113,21 @@ }, { "title":"More things to try", - "thumbnails":[ + "tips":[ { + "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" diff --git a/src/views/microworld_art/microworld_art.jsx b/src/views/microworld_art/microworld_art.jsx index 7958e100d..60bae6813 100644 --- a/src/views/microworld_art/microworld_art.jsx +++ b/src/views/microworld_art/microworld_art.jsx @@ -1,6 +1,4 @@ var render = require('../../lib/render.jsx'); var Microworld = require('../../components/microworld/microworld.jsx'); -var microworldData = require('./microworld_art.json'); - -render(, document.getElementById('view')); +render(, document.getElementById('view')); diff --git a/src/views/microworld_fashion/microworld_fashion.json b/src/views/microworld_fashion/microworld_fashion.json index 78db2f7fb..40ef58dd9 100644 --- a/src/views/microworld_fashion/microworld_fashion.json +++ b/src/views/microworld_fashion/microworld_fashion.json @@ -16,13 +16,15 @@ "tips":[ { "title":"Click on blocks to see what they do", - "thumbnails":[ + "tips":[ { + "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" @@ -31,18 +33,21 @@ }, { "title":"Try changing colors", - "thumbnails":[ + "tips":[ { + "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" @@ -51,18 +56,21 @@ }, { "title":"Try changing costumes", - "thumbnails":[ + "tips":[ { + "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" @@ -71,18 +79,21 @@ }, { "title":"Say hello", - "thumbnails":[ + "tips":[ { + "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" @@ -91,13 +102,15 @@ }, { "title":"Move the sprites", - "thumbnails":[ + "tips":[ { + "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" @@ -106,18 +119,21 @@ }, { "title":"Other things to try", - "thumbnails":[ + "tips":[ { + "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" diff --git a/src/views/microworld_fashion/microworld_fashion.jsx b/src/views/microworld_fashion/microworld_fashion.jsx index 35d4b0bf9..11ac2e086 100644 --- a/src/views/microworld_fashion/microworld_fashion.jsx +++ b/src/views/microworld_fashion/microworld_fashion.jsx @@ -1,6 +1,4 @@ var render = require('../../lib/render.jsx'); var Microworld = require('../../components/microworld/microworld.jsx'); -var microworldData = require('./microworld_fashion.json'); - -render(, document.getElementById('view')); +render(, document.getElementById('view')); diff --git a/src/views/microworld_hiphop/microworld_hiphop.json b/src/views/microworld_hiphop/microworld_hiphop.json index 5652d026f..995264751 100644 --- a/src/views/microworld_hiphop/microworld_hiphop.json +++ b/src/views/microworld_hiphop/microworld_hiphop.json @@ -16,18 +16,21 @@ "tips":[ { "title":"Start Dancing", - "thumbnails":[ + "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" @@ -36,18 +39,21 @@ }, { "title":"Repeat the Dance", - "thumbnails":[ + "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" @@ -56,13 +62,15 @@ }, { "title":"Play Music", - "thumbnails":[ + "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" @@ -71,18 +79,21 @@ }, { "title":"Shadow Dance", - "thumbnails":[ + "tips":[ { + "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" @@ -91,18 +102,21 @@ }, { "title":"More things to try", - "thumbnails":[ + "tips":[ { + "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" diff --git a/src/views/microworld_hiphop/microworld_hiphop.jsx b/src/views/microworld_hiphop/microworld_hiphop.jsx index ac314fadd..1c10799c8 100644 --- a/src/views/microworld_hiphop/microworld_hiphop.jsx +++ b/src/views/microworld_hiphop/microworld_hiphop.jsx @@ -1,6 +1,4 @@ var render = require('../../lib/render.jsx'); var Microworld = require('../../components/microworld/microworld.jsx'); -var microworldData = require('./microworld_hiphop.json'); - -render(, document.getElementById('view')); +render(, document.getElementById('view'));