mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
First version of generic microworlds.
Reads videos information from JSON, other parts still not generic.
This commit is contained in:
morant
parent
5c919506cf
commit
cca175154c
6 changed files with 1591 additions and 0 deletions
|
|
@ -23,5 +23,10 @@
|
|||
"pattern": "/microworlds_art",
|
||||
"view": "microworlds_art",
|
||||
"title": "Arts Microworld"
|
||||
},
|
||||
{
|
||||
"pattern": "/microworlds",
|
||||
"view": "microworlds",
|
||||
"title": "Microworld Template"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
239
src/views/microworlds/microworlds.jsx
Normal file
239
src/views/microworlds/microworlds.jsx
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
var classNames = require('classnames');
|
||||
var React = require('react');
|
||||
var render = require('../../lib/render.jsx');
|
||||
var omit = require('lodash.omit');
|
||||
|
||||
require('./microworlds.scss');
|
||||
|
||||
var Api = require('../../mixins/api.jsx');
|
||||
var Session = require('../../mixins/session.jsx');
|
||||
var Box = require('../../components/box/box.jsx');
|
||||
var Carousel = require('../../components/carousel/carousel.jsx');
|
||||
var Modal = require('../../components/modal/modal.jsx');
|
||||
var TipsSlider = require('../../components/tipsslider/tipsslider.jsx');
|
||||
|
||||
var Microworld = React.createClass({
|
||||
type: 'Microworld',
|
||||
mixins: [
|
||||
Api,
|
||||
Session
|
||||
],
|
||||
showVideo: function (keya) {
|
||||
|
||||
var videoOpenArr = this.state.videoOpen;
|
||||
videoOpenArr[keya] = true;
|
||||
this.setState({videoOpen: videoOpenArr});
|
||||
console.error("show");
|
||||
console.error(this.state.videoOpen);
|
||||
},
|
||||
closeVideo: function (keya) {
|
||||
var videoOpenArr = this.state.videoOpen;
|
||||
videoOpenArr[keya] = false;
|
||||
this.setState({videoOpen: videoOpenArr});
|
||||
console.error("close");
|
||||
console.error(this.state.videoOpen);
|
||||
},
|
||||
getInitialState: function () {
|
||||
return {
|
||||
videoOpen: {},
|
||||
featuredGlobal: {},
|
||||
featuredLocal: {},
|
||||
microworlds_data: {}
|
||||
};
|
||||
},
|
||||
componentDidMount: function () {
|
||||
this.getMicroworldData();
|
||||
this.getFeaturedGlobal();
|
||||
this.getFeaturedLocal();
|
||||
},
|
||||
getMicroworldData: function() {
|
||||
{/*Why is this not working?*/}
|
||||
var data = require("./microworlds_art.json");
|
||||
this.setState({microworlds_data: data});
|
||||
},
|
||||
getFeaturedGlobal: function () {
|
||||
this.api({
|
||||
uri: '/proxy/featured'
|
||||
}, function (err, body) {
|
||||
if (!err) {
|
||||
this.setState({featuredGlobal: body});
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
getFeaturedLocal: function () {
|
||||
var art_projects = require("./microworlds_projects");
|
||||
this.setState({featuredLocal: art_projects});
|
||||
},
|
||||
renderVideos: function () {
|
||||
{/*Change to read from global data*/}
|
||||
var data = require("./microworlds_art.json");
|
||||
console.error(data.videos);
|
||||
|
||||
return (
|
||||
<div className="videos-section section">
|
||||
<h1>Get Inspired...</h1>
|
||||
<div className="videos-container">
|
||||
<div className="videos">
|
||||
{data.videos.map(this.renderVideo)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
renderVideo: function (video, key) {
|
||||
console.error("video");
|
||||
console.error(video);
|
||||
var frameProps = {
|
||||
width: 570,
|
||||
height: 357,
|
||||
padding: 15
|
||||
};
|
||||
var left = 25 * (key+1)
|
||||
return (
|
||||
<div>
|
||||
<div className="video">
|
||||
<div className="play-button" onClick={this.showVideo.bind(this, key)} style={{ left: left +'%' }}>
|
||||
</div>
|
||||
<img src={video.image} />
|
||||
</div>
|
||||
<Modal
|
||||
className="video-modal"
|
||||
isOpen={this.state.videoOpen[key]}
|
||||
onRequestClose={this.closeVideo.bind(this, key)}
|
||||
style={{content:frameProps}}>
|
||||
<iframe src={video.link} width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderEditorWindow: function() {
|
||||
return (
|
||||
<div className="editor section">
|
||||
<h1>Start Creating!</h1>
|
||||
{/*<iframe src="//scratch.mit.edu/projects/embed-editor/86999051/?isMicroworld=true"
|
||||
frameborder="0"> </iframe>
|
||||
*/}
|
||||
<a href="//scratch.mit.edu/projects/88148127/#editor">
|
||||
<img src="/images/scratch-og.png" style={{width:"6%", position: "absolute", left: "75%"}}></img>
|
||||
</a>
|
||||
<iframe src="//scratch.mit.edu/projects/embed-editor/88148127/?isMicroworld=true"
|
||||
frameborder="0"> </iframe>
|
||||
{this.renderTips()}
|
||||
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderTips: function() {
|
||||
var tips = require("./microworlds_tips.json");
|
||||
return (
|
||||
<div className="box tipsslider">
|
||||
<div className="box-header">
|
||||
<h4>Start Painting</h4>
|
||||
</div>
|
||||
<div className="box-content">
|
||||
<TipsSlider items={tips} settings={{slidesToShow:1,slidesToScroll:1}}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderStarterProject: function() {
|
||||
return (
|
||||
<div className="project-ideas">
|
||||
<Box
|
||||
title="More Starter Projects"
|
||||
key="design_studio">
|
||||
<Carousel items={this.state.featuredLocal.scratch_starter_projects} />
|
||||
</Box>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderProjectIdeasBox: function() {
|
||||
var rows = [
|
||||
<Box
|
||||
title="Featured Community Projects"
|
||||
key="community_featured_projects">
|
||||
<Carousel items={this.state.featuredLocal.community_featured_projects} />
|
||||
</Box>,
|
||||
<Box
|
||||
title="All Community Projects"
|
||||
key="community_all_projects">
|
||||
<Carousel items={this.state.featuredLocal.community_newest_projects} />
|
||||
</Box>,
|
||||
];
|
||||
return (
|
||||
<div className="project-ideas">
|
||||
{rows}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderForum: function() {
|
||||
return (
|
||||
<div className="forum">
|
||||
<h1>Chat with other art lovers!</h1>
|
||||
<img src="/images/forum-image.png"/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderDesignStudio: function() {
|
||||
return (
|
||||
<div className="side-by-side section">
|
||||
<h1>Join our Design Challenge!</h1>
|
||||
<div className="design-studio">
|
||||
<iframe src="https://scratch.mit.edu/projects/89144801/#fullscreen" frameborder="0"> </iframe>
|
||||
</div>
|
||||
<div className="design-studio-projects">
|
||||
<Box
|
||||
title="Examples"
|
||||
key="scratch_desgin_studio"
|
||||
moreTitle="Visit the studio"
|
||||
moreHref={'/studios/' + '1728540' + '/'}>
|
||||
<Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.featuredLocal.scratch_design_studio1} />
|
||||
<Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.featuredLocal.scratch_design_studio2} />
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
render: function () {
|
||||
console.error("beginning");
|
||||
var classes = classNames(
|
||||
'top-banner'
|
||||
);
|
||||
var frameProps = {
|
||||
width: 570,
|
||||
height: 357,
|
||||
padding: 15
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="top-banner section">
|
||||
<h1>Make Some Art</h1>
|
||||
<p>Watch videos about how to create with technology.<br></br>
|
||||
Then, create your own art project.<br></br>
|
||||
Check out projects by others for inspiration,<br></br>
|
||||
communicate in the forum and join the challenges!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{this.renderVideos(frameProps)}
|
||||
console.error("here!!!");
|
||||
|
||||
<div className="content">
|
||||
{this.renderEditorWindow()}
|
||||
<h1>Check out ideas for more projects</h1>
|
||||
{this.renderStarterProject()}
|
||||
{this.renderDesignStudio()}
|
||||
<h1>Get inspiration from other projects</h1>
|
||||
{this.renderProjectIdeasBox()}
|
||||
{this.renderForum()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
render(<Microworld />, document.getElementById('view'));
|
||||
Modal.setAppElement(document.getElementById('view'));
|
||||
393
src/views/microworlds/microworlds.scss
Normal file
393
src/views/microworlds/microworlds.scss
Normal file
|
|
@ -0,0 +1,393 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
$base-bg: $ui-white;
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
background-color: $base-bg;
|
||||
|
||||
// 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;
|
||||
padding-top: 20px;
|
||||
width: 95%;
|
||||
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
.videos {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 30%;
|
||||
margin: 10px;
|
||||
border-radius: 7px;
|
||||
background-color: $active-gray;
|
||||
padding: 2px;
|
||||
|
||||
min-width: 300px;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: calc(100% - 20px);
|
||||
height: 179px;
|
||||
margin: 10px 10px 5px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
display: block;
|
||||
|
||||
opacity: .8;
|
||||
border: 5px solid $ui-border;
|
||||
border-radius: 20px;
|
||||
background-color: $type-gray;
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
|
||||
&,
|
||||
&: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;
|
||||
}
|
||||
|
||||
.box, iframe {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 25px;
|
||||
border: 0px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-top: 60px;
|
||||
width: 960px;
|
||||
-webkit-transform: scale(0.5);
|
||||
-webkit-transform-origin: top left;
|
||||
-moz-transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tipsslider {
|
||||
text-align: center;
|
||||
|
||||
.thumbnail {
|
||||
display: inline-block;
|
||||
margin: 0px 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pathways .box-content {padding:20px;}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
135
src/views/microworlds/microworlds_art.json
Normal file
135
src/views/microworlds/microworlds_art.json
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
],
|
||||
"tips": [
|
||||
{
|
||||
"title": "Start Dancing",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Repeat the Dance",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Play Music",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Shadow Dance",
|
||||
"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"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "More things to try",
|
||||
"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"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
701
src/views/microworlds/microworlds_projects.json
Normal file
701
src/views/microworlds/microworlds_projects.json
Normal file
|
|
@ -0,0 +1,701 @@
|
|||
{
|
||||
|
||||
"scratch_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_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
|
||||
}
|
||||
],
|
||||
"community_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
|
||||
}
|
||||
],
|
||||
"scratch_design_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
|
||||
}
|
||||
],
|
||||
"scratch_design_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
|
||||
}
|
||||
]
|
||||
}
|
||||
118
src/views/microworlds/microworlds_tips.json
Normal file
118
src/views/microworlds/microworlds_tips.json
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
[
|
||||
{
|
||||
"title": "Start Dancing",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Repeat the Dance",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Play Music",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Shadow Dance",
|
||||
"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"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "More things to try",
|
||||
"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"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
Loading…
Reference in a new issue