scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #867 from morantsur/feature/microworlds

Browse source 
Adding routes to microworlds
This commit is contained in:
Matthew Taylor 2016-09-12 12:06:27 -04:00 committed by GitHub
commit bd911c52d1
11 changed files with 77 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/microworld/microworld.jsx
View file

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

11
src/components/microworld/microworld.scss
View file

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

28
src/routes.json
View file

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

117
src/views/microworld/art/art.json
View file

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

6
src/views/microworld/art/art.jsx
View file

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

12
src/views/microworld/fashion/fashion.json
View file

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

6
src/views/microworld/fashion/fashion.jsx
View file

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

12
src/views/microworld/hiphop/hiphop.json
View file

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

6
src/views/microworld/hiphop/hiphop.jsx
View file

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

8
src/views/microworld/soccer/soccer.json Normal file
View file

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

8
src/views/microworld/soccer/soccer.jsx Normal file
View file

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