Skip to content

GitLab

S
scratch-www
Commit 3d9d280b authored by morant's avatar morant
Browse files
Options

Fix review comments, and organize code a bit. 

The only visible change should be that the tips thumbnails are no longer links.
parent 7c411845
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 316 additions and 622 deletions
src/components/microworld/microworld.jsx
View file @ 3d9d280b
This diff is collapsed.
src/components/microworld/microworld.scss
View file @ 3d9d280b
This diff is collapsed.
src/components/nestedcarousel/nestedcarousel.json 0 → 100644
View file @ 3d9d280b
[
{
"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
src/components/tipsslider/tipsslider.jsx → src/components/nestedcarousel/nestedcarousel.jsx
View file @ 3d9d280b
......@@ -7,16 +7,24 @@ var Thumbnail = require('../thumbnail/thumbnail.jsx');
require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./tipsslider.scss');
require('./nestedcarousel.scss');
var TipsSlider = React.createClass({
type: 'TipsSlider',
{/*
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('./tipsslider.json'),
items: require('./nestedcarousel.json')
};
},
render: function () {
......@@ -33,32 +41,35 @@ var TipsSlider = React.createClass({
var arrows = this.props.items.length > settings.slidesToShow;
var classes = classNames(
'tipsslider',
'nestedcarousel',
'carousel',
this.props.className
);
var stages = [];
for (var i=0; i < this.props.items.length; i++) {
var items = this.props.items[i].tips;
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={item.id}
var item = items[j];
thumbnails.push(
<Thumbnail key={'inner_' + i + '_' + j}
title={item.title}
src={item.thumbnailUrl} />)
src={item.thumbnailUrl}
linkTitle = {false} />);
}
stages.push(
<div className="testing" key={"stage_" + i}>
<div key={'outer_' + i}>
<h3>{this.props.items[i].title}</h3>
{thumbnails}
</div>)
}
</div>);
}
return (
<Slider className={classes} arrows={arrows} {... settings}>
{stages}
{stages}
</Slider>
);
}
});
module.exports = TipsSlider;
module.exports = NestedCarousel;
src/components/nestedcarousel/nestedcarousel.scss 0 → 100644
View file @ 3d9d280b
@import "../../colors";
@import "../carousel/carousel.scss";
.nestedcarousel {
.slick-slide {
padding-left: 60px;
}
}
src/components/thumbnail/thumbnail.jsx
View file @ 3d9d280b
......@@ -15,7 +15,8 @@ var Thumbnail = React.createClass({
src: '',
type: 'project',
showLoves: false,
showRemixes: false
showRemixes: false,
linkTitle: true
};
},
render: function () {
......@@ -54,13 +55,20 @@ var Thumbnail = React.createClass({
</div>
);
}
var titleElement;
if (this.props.linkTitle) {
titleElement = <a href={this.props.href}>{this.props.title}</a>;
} else {
titleElement = this.props.title;
}
return (
<div className={classes} >
<a className="thumbnail-image" href={this.props.href}>
<img src={this.props.src} />
</a>
<div className="thumbnail-title">
<a href={this.props.href}>{this.props.title}</a>
{titleElement}
</div>
{extra}
</div>
......
src/components/tipsslider/tipsslider.json deleted 100644 → 0
View file @ 7c411845
[
{
"id": 1,
"type": "project",
"title": "Project1",
"thumbnailUrl": "/images/microworlds/hiphop/add-repeat.gif",
"creator": "",
"href": "/images/microworlds/hiphop/add-repeat.gif"
},
{
"id": 2,
"type": "project",
"title": "Project2",
"thumbnailUrl": "/images/microworlds/hiphop/add-wait.gif",
"creator": "",
"href": "/images/microworlds/hiphop/add-wait.gif"
},
{
"id": 3,
"type": "project",
"title": "Project",
"thumbnailUrl": "",
"creator": "",
"href": "#"
},
{
"id": 4,
"type": "project",
"title": "Project",
"thumbnailUrl": "",
"creator": "",
"href": "#"
},
{
"id": 5,
"type": "project",
"title": "Project",
"thumbnailUrl": "",
"creator": "",
"href": "#"
},
{
"id": 6,
"type": "project",
"title": "Project",
"thumbnailUrl": "",
"creator": "",
"href": "#"
}
]
src/components/tipsslider/tipsslider.scss deleted 100644 → 0
View file @ 7c411845
@import "../../colors";
.tipsslider {
$icon-size: 40px;
$button-offset: $icon-size + 5px;
$box-content-offset: 20px;
//padding: 12px $button-offset;
.box-content & {
padding: 12px $button-offset - 20px;
}
.slick-next,
.slick-prev {
margin-top: -$icon-size/2;
width: $icon-size;
height: $icon-size;
&:before {
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: 70%;
width: $icon-size;
height: $icon-size;
font-size: $icon-size;
content: "";
}
&.slick-disabled:before {
opacity: 1;
}
}
.slick-prev {
left: 0;
&:before {
background-image: url("/svgs/carousel/prev_ui-dark-gray.svg");
}
&:hover:before {
background-image: url("/svgs/carousel/prev_ui-blue.svg");
background-size: 90%;
}
.box-content & {
left: -$box-content-offset;
}
}
.slick-next {
right: 0;
&:before {
background-image: url("/svgs/carousel/next_ui-dark-gray.svg");
}
&:hover:before {
background-image: url("/svgs/carousel/next_ui-blue.svg");
background-size: 90%;
}
.box-content & {
right: -$box-content-offset;
}
}
.slick-slide {
padding-right: 30px;
}
}
src/views/microworld_art/microworld_art.json
View file @ 3d9d280b
......@@ -27,21 +27,18 @@
"tips":[
{
"title":"Start Dancing",
"tips":[
"thumbnails":[
{
"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"
......@@ -50,21 +47,18 @@
},
{
"title":"Repeat the Dance",
"tips":[
"thumbnails":[
{
"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"
......@@ -73,15 +67,13 @@
},
{
"title":"Play Music",
"tips":[
"thumbnails":[
{
"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"
......@@ -90,21 +82,18 @@
},
{
"title":"Shadow Dance",
"tips":[
"thumbnails":[
{
"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"
......@@ -113,21 +102,18 @@
},
{
"title":"More things to try",
"tips":[
"thumbnails":[
{
"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"
......
src/views/microworld_art/microworld_art.jsx
View file @ 3d9d280b
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
render(<Microworld microworldData={require("./microworld_art.json")} />, document.getElementById('view'));
var microworldData = require('./microworld_art.json');
render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
src/views/microworld_fashion/microworld_fashion.json
View file @ 3d9d280b
......@@ -16,15 +16,13 @@
"tips":[
{
"title":"Click on blocks to see what they do",
"tips":[
"thumbnails":[
{
"id":0,
"type":"tip",
"title":" Try clicking this block ",
"thumbnailUrl":"/images/microworlds/fashion/click-block-color.gif"
},
{
"id":1,
"type":"tip",
"title":" Or this block",
"thumbnailUrl":"/images/microworlds/fashion/click-block-costume.gif"
......@@ -33,21 +31,18 @@
},
{
"title":"Try changing colors",
"tips":[
"thumbnails":[
{
"id":2,
"type":"tip",
"title":" First, select a clothing item ",
"thumbnailUrl":"/images/microworlds/fashion/shirts-sprite.png"
},
{
"id":3,
"type":"tip",
"title":" Then, try this script",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-color.gif"
},
{
"id":4,
"type":"tip",
"title":" Test it out!",
"thumbnailUrl":"/images/microworlds/fashion/click-shirt.gif"
......@@ -56,21 +51,18 @@
},
{
"title":"Try changing costumes",
"tips":[
"thumbnails":[
{
"id":5,
"type":"tip",
"title":"Select a piece of clothing ",
"thumbnailUrl":"/images/microworlds/fashion/hats-sprite.png"
},
{
"id":6,
"type":"tip",
"title":"Then, switch costumes",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-costume.gif"
},
{
"id":7,
"type":"tip",
"title":" Now, click it!",
"thumbnailUrl":"/images/microworlds/fashion/click-hat.gif"
......@@ -79,21 +71,18 @@
},
{
"title":"Say hello",
"tips":[
"thumbnails":[
{
"id":8,
"type":"tip",
"title":"Select the person",
"thumbnailUrl":"/images/microworlds/fashion/person-sprite.png"
},
{
"id":9,
"type":"tip",
"title":"Type in a phrase",
"thumbnailUrl":"/images/microworlds/fashion/say-something.gif"
},
{
"id":10,
"type":"tip",
"title":"Then, try this script",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-say.gif"
......@@ -102,15 +91,13 @@
},
{
"title":"Move the sprites",
"tips":[
"thumbnails":[
{
"id":11,
"type":"tip",
"title":"Select an accessory",
"thumbnailUrl":"/images/microworlds/fashion/accessories-sprite.png"
},
{
"id":12,
"type":"tip",
"title":"Tell it where to go",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-goto.gif"
......@@ -119,21 +106,18 @@
},
{
"title":"Other things to try",
"tips":[
"thumbnails":[
{
"id":13,
"type":"tip",
"title":"Add a sound ",
"thumbnailUrl":"/images/microworlds/fashion/play-drum.png"
},
{
"id":14,
"type":"tip",
"title":" Explore other costumes ",
"thumbnailUrl":"/images/microworlds/fashion/next-costume.png"
},
{
"id":15,
"type":"tip",
"title":"Make longer scripts ",
"thumbnailUrl":"/images/microworlds/fashion/block-stack.png"
......
src/views/microworld_fashion/microworld_fashion.jsx
View file @ 3d9d280b
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
render(<Microworld microworldData={require("./microworld_fashion.json")} />, document.getElementById('view'));
var microworldData = require('./microworld_fashion.json');
render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
src/views/microworld_hiphop/microworld_hiphop.json
View file @ 3d9d280b
......@@ -16,21 +16,18 @@
"tips":[
{
"title":"Start Dancing",
"tips":[
"thumbnails":[
{
"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"
......@@ -39,21 +36,18 @@
},
{
"title":"Repeat the Dance",
"tips":[
"thumbnails":[
{
"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"
......@@ -62,15 +56,13 @@
},
{
"title":"Play Music",
"tips":[
"thumbnails":[
{
"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"
......@@ -79,21 +71,18 @@
},
{
"title":"Shadow Dance",
"tips":[
"thumbnails":[
{
"id":7,
"type":"tip",
"title":"Add this block",
"thumbnailUrl":"/images/microworlds/hiphop/shadow-dance.gif"
},
{
"id":8,
"type":"tip",
"title":"Start it",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
},
{
"id":9,
"type":"tip",
"title":"Click the stop sign to reset",
"thumbnailUrl":"/images/microworlds/hiphop/stop.gif"
......@@ -102,21 +91,18 @@
},
{
"title":"More things to try",
"tips":[
"thumbnails":[
{
"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"
......
src/views/microworld_hiphop/microworld_hiphop.jsx
View file @ 3d9d280b
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
render(<Microworld microworldData={require("./microworld_hiphop.json")} />, document.getElementById('view'));
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