Commit 78649b69 authored by Ray Schamp's avatar Ray Schamp

Merge pull request #353 from morantsur/feature/microworlds

Moving Microworlds pages to scratch-www & adding arts
parents ea04658b 99772ca4
var React = require('react');
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 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 */}
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 */}
var videoOpenArr = this.state.videoOpen;
videoOpenArr[key] = false;
this.setState({videoOpen: videoOpenArr});
},
getInitialState: function () {
return {
videoOpen: {}
};
},
renderVideos: function () {
var videos = this.props.microworldData.videos;
if (!videos || videos.length <= 0) {
return null;
}
return (
<div className="videos-section section">
<h1>Get Inspired...</h1>
<div className="videos-container">
<div className="videos">
{videos.map(this.renderVideo)}
</div>
</div>
</div>
);
},
renderVideo: function (video, key) {
var frameProps = {
width: 570,
height: 357,
padding: 15
};
return (
<div>
<div className="video">
<div className="play-button" onClick={this.markVideoOpen.bind(this, key)}>
</div>
<img src={video.image} />
</div>
<Modal
className="video-modal"
isOpen={this.state.videoOpen[key]}
onRequestClose={this.markVideoClosed.bind(this, key)}
style={{content:frameProps}}>
<iframe src={video.link} width="560" height="315" frameBorder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</Modal>
</div>
);
},
renderEditorWindow: function () {
var projectId = this.props.microworldData.microworld_project_id;
if (!projectId) {
return null;
}
return (
<div className="editor section">
<h1>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()}
</div>
);
},
renderTips: function () {
var tips = this.props.microworldData.tips;
if (!tips || tips.length <= 0) {
return null;
}
return (
<div className="box nestedcarousel">
<div className="box-header">
</div>
<div className="box-content">
<NestedCarousel items={tips} settings={{slidesToShow:1,slidesToScroll:1}}/>
</div>
</div>
);
},
renderStarterProject: function () {
var starterProjects = this.props.microworldData.starter_projects;
if (!starterProjects || starterProjects.length <= 0){
return null;
}
return (
<div className="project-ideas">
<h1>Check out ideas for more projects</h1>
<Box
title="More Starter Projects"
key="starter_projects">
<Carousel items={starterProjects} />
</Box>
</div>
);
},
renderProjectIdeasBox: function () {
var communityProjects = this.props.microworldData.community_projects;
if (!communityProjects || communityProjects.size <= 0) {
return null;
}
var featured = communityProjects.featured_projects;
var all = communityProjects.newest_projects;
var rows = [];
if (featured && featured.length > 0){
rows.push(
<Box
title="Featured Community Projects"
key="community_featured_projects">
<Carousel items={featured} />
</Box>
);
}
if (all && all.length > 0) {
rows.push(
<Box
title="All Community Projects"
key="community_all_projects">
<Carousel items={all} />
</Box>
);
}
if (rows.length <= 0) {
return null;
}
return (
<div className="project-ideas">
<h1>Get inspiration from other projects</h1>
{rows}
</div>
);
},
renderForum: function () {
if (!this.props.microworldData.show_forum) {
return null;
}
return (
<div className="forum">
<h1>Chat with others!</h1>
<img src="/images/forum-image.png"/>
</div>
);
},
renderDesignStudio: function () {
var designChallenge = this.props.microworldData.design_challenge;
if (!designChallenge) {
return null;
}
if (designChallenge.studio_id) {
var studioHref = 'https://scratch.mit.edu//studios/' + designChallenge.studio_id + '/';
}
if (designChallenge.project_id) {
return (
<div className="side-by-side section">
<h1>Join our Design Challenge!</h1>
<div className="design-studio">
<iframe src={'https://scratch.mit.edu/projects/' + designChallenge.project_id +
'/#fullscreen'} frameBorder="0"> </iframe>
</div>
<div className="design-studio-projects">
<Box title="Examples"
key="scratch_design_studio"
moreTitle={studioHref ? 'Visit the studio' : null}
moreHref={studioHref ? studioHref : null}>
{/* 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. */}
<Carousel settings={{slidesToShow:2,slidesToScroll:2}}
items={this.props.microworldData.design_challenge.studio1} />
<Carousel settings={{slidesToShow:2,slidesToScroll:2}}
items={this.props.microworldData.design_challenge.studio2} />
</Box>
</div>
</div>
);
} else {
return (
<div className="section">
<h1>Join our Design Challenge!</h1>
<Box
title="design Challenge Projects"
key="scratch_design_studio"
moreTitle={studioHref ? 'Visit the studio' : null}
moreHref={studioHref ? studioHref : null}>
<Carousel items={this.props.microworldData.design_challenge.studio1.concat(
this.props.microworldData.design_challenge.studio2)} />
</Box>
</div>
);
}
},
render: function () {
return (
<div className="inner">
<div className="top-banner section">
<h1>{this.props.microworldData.title}</h1>
<p>{this.props.microworldData.description.join(' ')}</p>
</div>
{this.renderVideos()}
<div className="content">
{this.renderEditorWindow()}
{this.renderStarterProject()}
{this.renderDesignStudio()}
{this.renderProjectIdeasBox()}
{this.renderForum()}
</div>
</div>
);
}
});
module.exports = Microworld;
@import "../../colors";
@import "../../frameless";
$base-bg: $ui-white;
#view {
background-color: $base-bg;
padding: 0;
// To be integrated into the Global Typography standards
h3,
p {
font-weight: 300;
}
p {
line-height: 2em;
}
h1 {
margin: 0 auto;
padding: 5px 10%;
text-align: center;
color: $type-gray;
}
.top-banner,
.videos-section,
.section {
padding: 30px 0;
width: 100%;
h1,
p {
margin: 0 auto;
padding: 5px 10%;
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;
}
.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;
}
}
}
.content {
img {
display: block;
margin-right: auto;
margin-left: auto;
}
.box,
iframe {
display: block;
margin-right: auto;
margin-left: auto;
border: 0;
padding-top: 25px;
padding-bottom: 15px;
}
iframe {
height: 600px;
}
.editor {
position: relative;
iframe {
width: 100%;
}
.scratch-link {
position: absolute;
right: 3%;
width: 10%;
}
}
.side-by-side {
margin-right: auto;
margin-left: auto;
height: 520px;
.design-studio-projects,
.design-studio {
display: inline-block;
width: 45%;
height: 500px;
}
.design-studio-projects {
float: right;
}
.design-studio {
float: left;
iframe {
margin-top: 60px;
width: 200%;
-webkit-transform: scale(.5);
-webkit-transform-origin: top left;
-moz-transform: scale(.5);
}
}
}
}
.box-content {
.nestedcarousel {
text-align: center;
.thumbnail {
display: inline-block;
margin: 0 50px;
}
}
}
}
[
{
"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
var classNames = require('classnames');
var defaults = require('lodash.defaults');
var React = require('react');
var Slider = require('react-slick');
var Thumbnail = require('../thumbnail/thumbnail.jsx');
require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./nestedcarousel.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',
propTypes: {
items: React.PropTypes.array
},
getDefaultProps: function () {
return {
items: require('./nestedcarousel.json')
};
},
render: function () {
var settings = this.props.settings || {};
defaults(settings, {
dots: true,
infinite: false,
lazyLoad: true,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: false
});
var arrows = this.props.items.length > settings.slidesToShow;
var classes = classNames(
'nestedcarousel',
'carousel',
this.props.className
);
var stages = [];
for (var i=0; i < this.props.items.length; i++) {
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={'inner_' + i + '_' + j}
title={item.title}
src={item.thumbnailUrl}
linkTitle = {false} />);
}
stages.push(
<div key={'outer_' + i}>
<h3>{this.props.items[i].title}</h3>
{thumbnails}
</div>);
}
return (
<Slider className={classes} arrows={arrows} {... settings}>
{stages}
</Slider>
);
}
});
module.exports = NestedCarousel;
@import "../../colors";
@import "../carousel/carousel.scss";
.nestedcarousel {
/* Overrides carousel's settings for extra padding */
.slick-slide {
padding: 0;
/* Add some padding under the title for each slide */
h3 {
padding-bottom: 10px;
}
/* Align to top. Important when one of the slides have
more than one line of text */
.thumbnail.project {
vertical-align: top;
}
}
}
......@@ -16,6 +16,7 @@ var Thumbnail = React.createClass({
type: 'project',
showLoves: false,
showRemixes: false,
linkTitle: true,
alt: ''
};
},
......@@ -55,13 +56,23 @@ var Thumbnail = React.createClass({
</div>
);
}
var imgElement,titleElement;
if (this.props.linkTitle) {
imgElement = <a className="thumbnail-image" href={this.props.href}>
<img src={this.props.src} alt={this.props.alt} />
</a>;
titleElement = <a href={this.props.href}>{this.props.title}</a>;
} else {
imgElement = <img src={this.props.src} />;
titleElement = this.props.title;
}
return (
<div className={classes} >
<a className="thumbnail-image" href={this.props.href}>
<img src={this.props.src} alt={this.props.alt} />
</a>
{imgElement}
<div className="thumbnail-title">
<a href={this.props.href}>{this.props.title}</a>
{titleElement}
</div>
{extra}
</div>
......
{
"title":"Make Some Art",
"description":[
"Watch videos about how to create with technology.",
"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",
"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
},
{
"title":"Digital Art Starter Project",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2513/9098.png",
"creator":"CSFirst",
"id":25139098
},
{
"title":"Graffiti Starter Project",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2546/8311.png",
"creator":"CSFirst",
"id":25468311
},
{
"title":"Paint with Tera Starter ",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2743/2322.png",
"creator":"CSFirst",
"id":27432322
},
{
"title":"Interactive Art Starter Project",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2501/4570.png",
"creator":"CSFirst",
"id":25014570
},
{
"title":"Interactive Art Starter Project - Kuniyoshi Start",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2482/0113.png",
"creator":"CSFirst",
"id":24820113
},
{
"title":"Interactive Art Starter Project - American Gothic",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2445/4633.png",
"creator":"CSFirst",
"id":24454633
},
{
"title":"Interactive Art Starter Project - The Scream",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2481/8944.png",
"creator":"CSFirst",
"id":24818944
},
{
"title":"Animation Starter Project - Penguin",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/6722.png",
"creator":"CSFirst",
"id":23956722
},
{
"title":"Animation Starter Project - Gobo",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/7767.png",
"creator":"CSFirst",
"id":23957767
},
{
"title":"Animation Starter Project - Ghost",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/7153.png",
"creator":"CSFirst",
"id":23957153
},
{
"title":"Animation Starter Project - Crab",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/6837.png",
"creator":"CSFirst",
"id":23956837
},
{
"title":"Intro to Art Starter Project",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2420/9090.png",
"creator":"CSFirst",
"id":24209090
}
],
"community_projects":{
"featured_projects":[
{
"title":"Change color effect by-function",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/141/3159.png",
"creator":"dapontes",
"id":1413159
},
{
"title":"CobwebMaker",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/133/0100.png",
"creator":"-Scratcher-",
"id":1330100
},
{
"title":"QuadraticMap3_Attractor",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/136/2772.png",
"creator":"mathjp",
"id":1362772
},
{
"title":"Plants_Jp1",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/131/8150.png",
"creator":"mathjp",
"id":1318150
},
{
"title":"TreeMaker",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/131/5337.png",
"creator":"-Scratcher-",
"id":1315337
},
{
"title":"3D Curve art",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/128/7436.png",
"creator":"nasami",
"id":1287436
},
{
"title":"pen art maker",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/115/3338.png",
"creator":"cooljj100",
"id":1153338
},
{
"title":"e-lisa-avo",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/64/1173.png",
"creator":"gerhardmb",
"id":641173
},
{
"title":"Pyramid_IFS_Fractal",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/129/4615.png",
"creator":"mathjp",
"id":1294615
},
{
"title":"3D Snail",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/127/0157.png",
"creator":"mathjp",
"id":1270157
},
{
"title":"Fractile Shape Maker 1S 1S",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/115/5121.png",
"creator":"recycle49",
"id":1155121
},
{
"title":"Mosaik",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/110/3305.png",
"creator":"frcroth",
"id":1103305
},
{
"title":"QuadraticMap2_Attractor",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/109/9424.png",
"creator":"mathjp",
"id":1099424
},
{
"title":"3D Cube",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/105/2958.png",
"creator":"VilceGT",
"id":1052958
},
{
"title":"Fractal_CarpetsV1",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/105/9322.png",
"creator":"mathjp",
"id":1059322
},
{
"title":"QuadraticMap1_Attractor",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/100/1796.png",
"creator":"mathjp",
"id":1001796
},
{
"title":"Pattern/Shape Generator 1S 1S",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/94/6911.png",
"creator":"recycle49",
"id":946911
},
{
"title":"Sweet Rainbow Kaliedoscope Attractor",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/94/0283.png",
"creator":"Venazard",
"id":940283
},
{
"title":"Scratch3_Attractor",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/94/6973.png",
"creator":"mathjp",
"id":946973
},
{
"title":"Peter_de_Jong_Attractor",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/85/3644.png",
"creator":"mathjp",
"id":853644
},
{
"title":"Invertable",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/53/6764.png",
"creator":"itsEMILagain",
"id":536764
},
{
"title":"Chalkboard designs",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/66/7803.png",
"creator":"Targethero",
"id":667803
},
{
"title":"Blades of grass",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/82/2114.png",
"creator":"AddZero",
"id":822114
},
{
"title":"Flexible Line",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/72/8858.png",
"creator":"Paddle2See",
"id":728858
}
],
"newest_projects":[
{
"title":"Pixel Art - Emerald ore",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8681/8843.png",
"creator":"SebastianLavers",
"id":86818843
},
{
"title":"Untitled-10",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8720/4697.png",
"creator":"SebastianLavers",
"id":87204697
},
{
"title":"pixel art - trayne",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8720/5631.png",
"creator":"SebastianLavers",
"id":87205631
},
{
"title":"MY STAR WARS PIXEL ICONS",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8294/4668.png",
"creator":"DevG2857",
"id":82944668
},
{
"title":"[Pixel Art] Bomb",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7663/8750.png",
"creator":"-PixelArt-",
"id":76638750
},
{
"title":"[Pixel Art] Pizza",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7652/8188.png",
"creator":"-PixelArt-",
"id":76528188
},
{
"title":"[Pixel Art] Ancient Book",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7652/9284.png",
"creator":"-PixelArt-",
"id":76529284
},
{
"title":"[Pixel Art] Grass Tile #2",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7567/6352.png",
"creator":"-PixelArt-",
"id":75676352
},
{
"title":"Millennium Falcon",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/4829/2520.png",
"creator":"HD_Pixel_Squid",
"id":48292520
},
{
"title":"Pixel Art Scene",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/5076/2664.png",
"creator":"AgentCNF",
"id":50762664
},
{
"title":"Sunset Pixel Art - By JK102",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7332/8110.png",
"creator":"jk102",
"id":73328110
},
{
"title":"Dragon Ball Z Pixel Art",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7225/3242.png",
"creator":"agentmcguffin",
"id":72253242
},
{
"title":"Pixel Art - Award",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7260/3768.png",
"creator":"Pixels-",
"id":72603768
},
{
"title":"PixelMoltenArmor",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/6927/7136.png",
"creator":"pixelart5",
"id":69277136
},
{
"title":"Fishing (Art)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/1901/6045.png",
"creator":"IsoPixel",
"id":19016045
},
{
"title":"Placid Pool Simulation",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/4696/9638.png",
"creator":"RememberNovember",
"id":46969638
},
{
"title":"[Pixel Art] Mountain Background",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7558/6228.png",
"creator":"-PixelArt-",
"id":75586228
},
{
"title":"[Pixel Art] Log",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7558/0582.png",
"creator":"-PixelArt-",
"id":75580582
},
{
"title":"[Pixel Art] Healthbar",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7468/7698.png",
"creator":"-PixelArt-",
"id":74687698
},
{
"title":"[Pixel Art] Food",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7450/4518.png",
"creator":"-PixelArt-",
"id":74504518
},
{
"title":"[Pixel Art] Starfield",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7450/3672.png",
"creator":"-PixelArt-",
"id":74503672
},
{
"title":"[Pixel Art] Nature Scene",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7449/9686.png",
"creator":"-PixelArt-",
"id":74499686
},
{
"title":"[Pixel Art] Clouds",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7450/1794.png",
"creator":"-PixelArt-",
"id":74501794
},
{
"title":"[Pixel Art] Medieval Door",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7333/1288.png",
"creator":"-PixelArt-",
"id":73331288
},
{
"title":"[Pixel Art] Sun and Moon",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7443/2594.png",
"creator":"-PixelArt-",
"id":74432594
},
{
"title":"[Pixel Art] Soda Can",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7333/0734.png",
"creator":"-PixelArt-",
"id":73330734
},
{
"title":"[Pixel Art] Rock Pack",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7324/3096.png",
"creator":"-PixelArt-",
"id":73243096
},
{
"title":"[Pixel Art] Grass Tile",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7321/3098.png",
"creator":"-PixelArt-",
"id":73213098
},
{
"title":"[Pixel Art] Animated Coin",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7321/2898.png",
"creator":"-PixelArt-",
"id":73212898
},
{
"title":"[Pixel Art] Sword",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7294/4390.png",
"creator":"-PixelArt-",
"id":72944390
}
]
},
"design_challenge":{
"project_id":"89144801",
"studio_id":"1728540",
"studio1":[
{
"gallery_id":1728540,
"creator":"mathjp",
"remixers_count":8,
"gallery_title":"Arts Design Challenge",
"love_count":28,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/326/6979.png",
"title":"Flowers_Creator",
"type":"project",
"id":3266979
},
{
"gallery_id":1728540,
"creator":"-Scratcher-",
"remixers_count":2,
"gallery_title":"Arts Design Challenge",
"love_count":9,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/131/5337.png",
"title":"TreeMaker",
"type":"project",
"id":1315337
},
{
"title":"a beautiful day with a flower",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/326/7716.png",
"creator":"Sakura102",
"id":3267716
},
{
"title":"A Walk in the Dream Park",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2032/9589.png",
"creator":"JoeTheMan18",
"id":20329589
},
{
"title":"Drawing with Shapes",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7700/9574.png",
"creator":"morant",
"id":77009574
},
{
"title":"pretty flower",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/271/1834.png",
"creator":"leszpio",
"id":2711834
},
{
"title":"Garden Secret",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/1045/1607.png",
"creator":"Eddie101101",
"id":10451607
}
],
"studio2":[
{
"title":"Garden Secret",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/1045/1607.png",
"creator":"Eddie101101",
"id":10451607
},
{
"title":"The Park",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2658/0310.png",
"creator":"taliapanda01",
"id":26580310
}
]
},
"show_forum":true
}
\ No newline at end of file
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
var microworldData = require('./microworld_art.json');
render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
{
"title":"Fashion",
"description":[
"Do you like fashion?",
"Watch this video about making fashion projects.",
"Then see what you can do with the dress-up game below.",
"Explore other fashion projects and make your own!"
],
"videos":[
{
"image":"https://i.vimeocdn.com/video/528845372.webp?mw=900&amp;mh=583&amp;q=70",
"link":"//player.vimeo.com/video/528845372?title=0&byline=0&portrait=0"
}
],
"microworld_project_id":"68494068",
"tips":[
{
"title":"Click on blocks to see what they do",
"thumbnails":[
{
"type":"tip",
"title":" Try clicking this block ",
"thumbnailUrl":"/images/microworlds/fashion/click-block-color.gif"
},
{
"type":"tip",
"title":" Or this block",
"thumbnailUrl":"/images/microworlds/fashion/click-block-costume.gif"
}
]
},
{
"title":"Try changing colors",
"thumbnails":[
{
"type":"tip",
"title":" First, select a clothing item ",
"thumbnailUrl":"/images/microworlds/fashion/shirts-sprite.png"
},
{
"type":"tip",
"title":" Then, try this script",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-color.gif"
},
{
"type":"tip",
"title":" Test it out!",
"thumbnailUrl":"/images/microworlds/fashion/click-shirt.gif"
}
]
},
{
"title":"Try changing costumes",
"thumbnails":[
{
"type":"tip",
"title":"Select a piece of clothing ",
"thumbnailUrl":"/images/microworlds/fashion/hats-sprite.png"
},
{
"type":"tip",
"title":"Then, switch costumes",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-costume.gif"
},
{
"type":"tip",
"title":" Now, click it!",
"thumbnailUrl":"/images/microworlds/fashion/click-hat.gif"
}
]
},
{
"title":"Say hello",
"thumbnails":[
{
"type":"tip",
"title":"Select the person",
"thumbnailUrl":"/images/microworlds/fashion/person-sprite.png"
},
{
"type":"tip",
"title":"Type in a phrase",
"thumbnailUrl":"/images/microworlds/fashion/say-something.gif"
},
{
"type":"tip",
"title":"Then, try this script",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-say.gif"
}
]
},
{
"title":"Move the sprites",
"thumbnails":[
{
"type":"tip",
"title":"Select an accessory",
"thumbnailUrl":"/images/microworlds/fashion/accessories-sprite.png"
},
{
"type":"tip",
"title":"Tell it where to go",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-goto.gif"
}
]
},
{
"title":"Other things to try",
"thumbnails":[
{
"type":"tip",
"title":"Add a sound ",
"thumbnailUrl":"/images/microworlds/fashion/play-drum.png"
},
{
"type":"tip",
"title":" Explore other costumes ",
"thumbnailUrl":"/images/microworlds/fashion/next-costume.png"
},
{
"type":"tip",
"title":"Make longer scripts ",
"thumbnailUrl":"/images/microworlds/fashion/block-stack.png"
}
]
}
],
"_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":[
{
"title":"☆Mystica Dress Up Game☆",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7135/4508.png",
"creator":"xVanyx",
"id":71354508
},
{
"title":"Design a bag Contest! Round two! remix",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/6762/5700.png",
"creator":"walterwolf",
"id":67625700
},
{
"title":"Paint Nails! ~ [Pinta las uñas]",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2465/4259.png",
"creator":"aguchita",
"id":24654259
},
{
"title":"★1990s Inspired Dress Up★",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/6464/1106.png",
"creator":"amee-",
"id":64641106
},
{
"title":"Minion Dress up Game",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/1205/3016.png",
"creator":"Dobbby",
"id":12053016
},
{
"title":"Mabel's Dress Up",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2579/6804.png",
"creator":"MagicianCat",
"id":25796804
},
{
"title":"Jeremy's Dressup",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/4110/6638.png",
"creator":"ipzy",
"id":41106638
},
{
"title":"Elsa Dress-Up",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2130/5521.png",
"creator":"elsaunikitty",
"id":21305521
}
],
"newest_projects":[
{
"title":"Purse Land",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9349/4126.png",
"creator":"punkbass",
"id":93494126
},
{
"title":"Lilly's Fashion Salon! ",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9363/9916.png",
"creator":"cs54016",
"id":93639916
},
{
"title":"Lilly's Fashion Salon! ",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9363/9916.png",
"creator":"cs54016",
"id":93639916
},
{
"title":"dress up game (my characters/ bff characters)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9363/5245.png",
"creator":"lockeythekey",
"id":93635245
},
{
"title":"Anime Dress Up",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9361/1094.png",
"creator":"Alyanda",
"id":93611094
},
{
"title":"Stick Man/Woman Dress Up!",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9357/7986.png",
"creator":"loopey7890",
"id":93577986
},
{
"title":"2-D Dress Up!",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9361/3207.png",
"creator":"Arkoarsenic",
"id":93613207
},
{
"title":"Stickbro Dress Up",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9356/4550.png",
"creator":"Discord21",
"id":93564550
},
{
"title":"Bear Dress Up remix",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9361/2027.png",
"creator":"cssuperfudge",
"id":93612027
},
{
"title":"dress up Lucy",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9360/8879.png",
"creator":"123showbiz",
"id":93608879
},
{
"title":"Hair Play",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9181/0572.png",
"creator":"Aphrodite369",
"id":91810572
},
{
"title":"Warrior Cat Maker",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9357/0484.png",
"creator":"Nikinoo42",
"id":93570484
},
{
"title":"Bearie Dress Up remix",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9358/0802.png",
"creator":"SRajput",
"id":93580802
},
{
"title":"Chibi Cute Bear Dress Up :D",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9355/9967.png",
"creator":"UnicornAnna",
"id":93559967
},
{
"title":"Laura beach dress up",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9356/5520.png",
"creator":"rozyczka2122004",
"id":93565520
},
{
"title":"Dress Up",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9354/8643.png",
"creator":"rwd05",
"id":93548643
},
{
"title":"dress up scratch cat!",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9356/1200.png",
"creator":"CONFIDENTDRAGON",
"id":93561200
},
{
"title":"Dress Up Olive",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9276/7275.png",
"creator":"rozyczka2122004",
"id":92767275
},
{
"title":"Bear Dress Up remix",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9354/5576.png",
"creator":"pixiepants14",
"id":93545576
},
{
"title":"Dress up Nano and Giga",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8681/5299.png",
"creator":"awesomesauce1243",
"id":86815299
}
]
},
"design_challenge":{
"_commentedout_project_id":"89144801",
"studio_id":"1424746",
"studio1":[
{
"title":" BIG cool dress up",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/5027/9238.png",
"creator":"Ratties123",
"id":50279238
},
{
"title":"~*Dressup*~ (40+ clothes and acessories)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/4966/3352.png",
"creator":"NinniV",
"id":49663352
},
{
"title":"Dress up Bun-bun",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7047/3464.png",
"creator":"LillyMoon15",
"id":70473464
},
{
"title":"Dress Up Pikachu",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/1189/5141.png",
"creator":"poke10",
"id":11895141
},
{
"title":"dress up",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/6261/8658.png",
"creator":"peachycream1",
"id":62618658
}
],
"studio2":[
{
"title":"Dress Up Fun!",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/6289/6096.png",
"creator":"sapphire-grace",
"id":62896096
},
{
"title":"Finicky Fashionista",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7210/8732.png",
"creator":"Bex36",
"id":72108732
},
{
"title":"Dress Up! :D",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/6/2256.png",
"creator":"angelical",
"id":62256
},
{
"title":"Dress Up Tera",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/1165/6680.png",
"creator":"Scratchteam",
"id":11656680
}
]
},
"show_forum":false
}
\ No newline at end of file
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
var microworldData = require('./microworld_fashion.json');
render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
{
"title":"Hip Hop",
"description":[
"Do you like hip-hop?",
"Watch a video about making hip-hop projects.",
"Then, create your own dance scene!",
"Check out projects by others for inspiration."
],
"videos":[
{
"image":"https://i.vimeocdn.com/video/521248373.webp?mw=900&mh=583&q=70",
"link":"//player.vimeo.com/video/124055657?title=0&byline=0&portrait=0"
}
],
"microworld_project_id":"68260156",
"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"
}
]
}
],
"_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":[
{
"title":"tuting spins",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/4827/0148.png",
"creator":"LHB97",
"id":48270148
},
{
"title":"Top Rock Giga",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/4048/8688.png",
"creator":"designerd",
"id":40488688
},
{
"title":"EpicDance",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/4819/7838.png",
"creator":"codamax",
"id":48197838
},
{
"title":"Top Rockin in LA",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/3848/8304.png",
"creator":"sleggss",
"id":38488304
},
{
"title":"Silhouette Dance",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/2758/2882.png",
"creator":"natalie",
"id":27582882
}
],
"newest_projects":[
{
"title":"Crash Team Racing - Oxide Station Music (musica)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9331/8865.png",
"creator":"golden_freddy_fnaf5",
"id":93318865
},
{
"title":"DANCE OFF!!!!!!!",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9287/4306.png",
"creator":"fjoyce11",
"id":92874306
},
{
"title":"hip hop",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9301/0585.png",
"creator":"Graystripe436",
"id":93010585
},
{
"title":"Hip hop",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9100/9512.png",
"creator":"krivas57",
"id":91009512
},
{
"title":"ElectroKill",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9039/0194.png",
"creator":"Snipeshot621",
"id":90390194
},
{
"title":"Breakbeat Mayhem",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9033/9020.png",
"creator":"Snipeshot621",
"id":90339020
},
{
"title":"(GetUpMusic)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8848/1759.png",
"creator":"XavierTheBrave",
"id":88481759
},
{
"title":"Hip Hop Dance",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8864/4804.png",
"creator":"kawaiigroovycat15",
"id":88644804
},
{
"title":"lezione hip hop",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8840/9021.png",
"creator":"MartinaStrazzer",
"id":88409021
},
{
"title":"Hip Hop Peeps",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8834/4657.png",
"creator":"dhajacob",
"id":88344657
},
{
"title":"Hiphop (voorbeeld signalen)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8812/7565.png",
"creator":"Juf-Pinky",
"id":88127565
},
{
"title":"Flashback: 1990",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8645/1526.png",
"creator":"Splo",
"id":86451526
},
{
"title":"Focus by Ariana Grande",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8687/1578.png",
"creator":"musical11",
"id":86871578
},
{
"title":"Clock",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8640/1798.png",
"creator":"IlikeMario5",
"id":86401798
},
{
"title":"Nice Hip Hop",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/6195/5882.png",
"creator":"FireyDeath4",
"id":61955882
},
{
"title":"SUPRISE!!!",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8629/4705.png",
"creator":"Jungster31",
"id":86294705
},
{
"title":"Harold Hip-Hop's Big Adventure",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8536/8362.png",
"creator":"Will64",
"id":85368362
},
{
"title":"epic dance(add your own dancers)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8308/2812.png",
"creator":"Zstrap10",
"id":83082812
},
{
"title":"Hip-Hop VS. Bad photoshop! [Hallowen update!]",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7579/4280.png",
"creator":"konradel",
"id":75794280
},
{
"title":"hip hop is in the air",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7653/2008.png",
"creator":"millamarwick",
"id":76532008
}
]
},
"design_challenge":{
"_commentedout_project_id":"89144801",
"studio_id":"1065372",
"studio1":[
{
"title":"Crash Team Racing - Oxide Station Music (musica)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9331/8865.png",
"creator":"golden_freddy_fnaf5",
"id":93318865
},
{
"title":"DANCE OFF!!!!!!!",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9287/4306.png",
"creator":"fjoyce11",
"id":92874306
},
{
"title":"hip hop",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9301/0585.png",
"creator":"Graystripe436",
"id":93010585
},
{
"title":"Hip hop",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9100/9512.png",
"creator":"krivas57",
"id":91009512
},
{
"title":"ElectroKill",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9039/0194.png",
"creator":"Snipeshot621",
"id":90390194
},
{
"title":"Breakbeat Mayhem",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/9033/9020.png",
"creator":"Snipeshot621",
"id":90339020
},
{
"title":"(GetUpMusic)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8848/1759.png",
"creator":"XavierTheBrave",
"id":88481759
},
{
"title":"Hip Hop Dance",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8864/4804.png",
"creator":"kawaiigroovycat15",
"id":88644804
},
{
"title":"lezione hip hop",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8840/9021.png",
"creator":"MartinaStrazzer",
"id":88409021
},
{
"title":"Hip Hop Peeps",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8834/4657.png",
"creator":"dhajacob",
"id":88344657
},
{
"title":"Hiphop (voorbeeld signalen)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8812/7565.png",
"creator":"Juf-Pinky",
"id":88127565
},
{
"title":"Flashback: 1990",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8645/1526.png",
"creator":"Splo",
"id":86451526
},
{
"title":"Focus by Ariana Grande",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8687/1578.png",
"creator":"musical11",
"id":86871578
},
{
"title":"Clock",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8640/1798.png",
"creator":"IlikeMario5",
"id":86401798
},
{
"title":"Nice Hip Hop",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/6195/5882.png",
"creator":"FireyDeath4",
"id":61955882
},
{
"title":"SUPRISE!!!",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8629/4705.png",
"creator":"Jungster31",
"id":86294705
}
],
"studio2":[
{
"title":"Harold Hip-Hop's Big Adventure",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8536/8362.png",
"creator":"Will64",
"id":85368362
},
{
"title":"epic dance(add your own dancers)",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/8308/2812.png",
"creator":"Zstrap10",
"id":83082812
},
{
"title":"Hip-Hop VS. Bad photoshop! [Hallowen update!]",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7579/4280.png",
"creator":"konradel",
"id":75794280
},
{
"title":"hip hop is in the air",
"type":"project",
"remixers_count":168,
"love_count":3062,
"thumbnail_url":"//cdn.scratch.mit.edu/static/site/projects/thumbnails/7653/2008.png",
"creator":"millamarwick",
"id":76532008
}
]
},
"show_forum":false
}
\ No newline at end of file
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
var microworldData = require('./microworld_hiphop.json');
render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment