Skip to content

GitLab

S
scratch-www
Commit 77a4bd2d authored by morant's avatar morant
Browse files
Options

adding tips to the microworld

parent bd1319ed
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 17 deletions
src/components/tipsslider/tipsslider.json 0 → 100644
View file @ 77a4bd2d
[
{
"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.jsx 0 → 100644
View file @ 77a4bd2d
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('./tipsslider.scss');
var TipsSlider = React.createClass({
type: 'TipsSlider',
propTypes: {
items: React.PropTypes.array
},
getDefaultProps: function () {
return {
items: require('./tipsslider.json'),
showRemixes: false,
showLoves: false
};
},
render: function () {
console.error("ITEMS:");
console.error(this.props.items);
var settings = this.props.settings || {};
defaults(settings, {
dots: false,
infinite: false,
lazyLoad: true,
slidesToShow: 5,
slidesToScroll: 5,
variableWidth: true
});
var arrows = this.props.items.length > settings.slidesToShow;
var classes = classNames(
'tipsslider',
this.props.className
);
var slides = [];
console.error("before");
console.error(this.props.items.length);
for (var i=0; i < this.props.items.length; i++) {
var items = this.props.items[i].tips;
console.error("bla");
console.error(items);
var thumbnails = [];
for (var j=0; j < items.length; j++) {
var item = items[j];
thumbnails.push(<Thumbnail key={item.id}
title={item.title}
src={item.thumbnailUrl} />)
}
console.error(thumbnails)
slides.push(
<div className="testing">
<h3>{this.props.items[i].title}</h3>
{thumbnails}
</div>)
}
console.error("slides")
console.error(slides[0]);
return (
<Slider className={classes} arrows={arrows} {... settings}>
{slides}
</Slider>
);
}
});
module.exports = TipsSlider;
src/components/tipsslider/tipsslider.scss 0 → 100644
View file @ 77a4bd2d
@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/microworlds_art/microworlds_art.jsx
View file @ 77a4bd2d
...@@ -12,6 +12,7 @@ var Box = require('../../components/box/box.jsx'); ...@@ -12,6 +12,7 @@ var Box = require('../../components/box/box.jsx');
require('./microworlds_art.scss'); require('./microworlds_art.scss');
var Carousel = require('../../components/carousel/carousel.jsx'); var Carousel = require('../../components/carousel/carousel.jsx');
var Modal = require('../../components/modal/modal.jsx'); var Modal = require('../../components/modal/modal.jsx');
var TipsSlider = require('../../components/tipsslider/tipsslider.jsx');
var Microworld = React.createClass({ var Microworld = React.createClass({
type: 'Microworld', type: 'Microworld',
...@@ -119,31 +120,46 @@ var Microworld = React.createClass({ ...@@ -119,31 +120,46 @@ var Microworld = React.createClass({
</a> </a>
<iframe src="//scratch.mit.edu/projects/embed-editor/88148127/?isMicroworld=true" <iframe src="//scratch.mit.edu/projects/embed-editor/88148127/?isMicroworld=true"
frameborder="0"> </iframe> frameborder="0"> </iframe>
{this.renderTips()} <div className="box tipsslider">
<div className="box-header">
<h4>Start Painting</h4>
</div>
<div className="box-content">
{this.createSlider()}
</div>
</div>
</div> </div>
) )
}, },
createSlider: function() {
var tips = require("./microworlds_art_tips.json");
console.error("in here!");
console.error(tips);
return (
<TipsSlider items={tips} settings={{slidesToShow:1,slidesToScroll:1}}/>
)
},
renderTips: function() { renderTips: function() {
return ( return (
<div className="pathways"> <div className="pathways">
{/*<div className="tips"> <div className="tips">
<div className="tips-slider flexslider"> <div className="tips-slider flexslider">
<ul className =" slides"> <ul className =" slides">
<li> <li>
<div className="tip-slide"> <div className="tip-slide">
<h3>Start to Dance</h3> <h3>Start to Dance</h3>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/dancer-sprite.png"/> <img src = "/images/microworlds/hiphop/dancer-sprite.png"/>
<h5> First, select a sprite </h5> <h5> First, select a sprite </h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/switch-wait.gif" /> <img src = "/images/microworlds/hiphop/switch-wait.gif" />
<h5> Then, try this script</h5> <h5> Then, try this script</h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/green-flag.gif" /> <img src = "/images/microworlds/hiphop/green-flag.gif" />
<h5> Start it! </h5> <h5> Start it! </h5>
</div> </div>
...@@ -153,16 +169,16 @@ var Microworld = React.createClass({ ...@@ -153,16 +169,16 @@ var Microworld = React.createClass({
<div className="tip-slide"> <div className="tip-slide">
<h3>Repeat the Dance</h3> <h3>Repeat the Dance</h3>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/add-wait.gif" /> <img src = "/images/microworlds/hiphop/add-wait.gif" />
<h5>Add another "wait"</h5> <h5>Add another "wait"</h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/add-repeat.gif" /> <img src = "/images/microworlds/hiphop/add-repeat.gif" />
<h5>Drag this block over</h5> <h5>Drag this block over</h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/green-flag.gif" /> <img src = "/images/microworlds/hiphop/green-flag.gif" />
<h5> Start it </h5> <h5> Start it </h5>
</div> </div>
</div> </div>
...@@ -172,12 +188,12 @@ var Microworld = React.createClass({ ...@@ -172,12 +188,12 @@ var Microworld = React.createClass({
<h3>Play Music</h3> <h3>Play Music</h3>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/add-play-sound.gif" /> <img src = "/images/microworlds/hiphop/add-play-sound.gif" />
<h5> Add music that repeats </h5> <h5> Add music that repeats </h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/green-flag.gif"/> <img src = "/images/microworlds/hiphop/green-flag.gif"/>
<h5> Start it</h5> <h5> Start it</h5>
</div> </div>
</div> </div>
...@@ -187,17 +203,17 @@ var Microworld = React.createClass({ ...@@ -187,17 +203,17 @@ var Microworld = React.createClass({
<h3>Shadow Dance</h3> <h3>Shadow Dance</h3>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/shadow-dance.gif" /> <img src = "/images/microworlds/hiphop/shadow-dance.gif" />
<h5> Add this block </h5> <h5> Add this block </h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/green-flag.gif" /> <img src = "/images/microworlds/hiphop/green-flag.gif" />
<h5> Start it </h5> <h5> Start it </h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/stop.gif" /> <img src = "/images/microworlds/hiphop/stop.gif" />
<h5> Click the stop sign to reset </h5> <h5> Click the stop sign to reset </h5>
</div> </div>
</div> </div>
...@@ -207,16 +223,16 @@ var Microworld = React.createClass({ ...@@ -207,16 +223,16 @@ var Microworld = React.createClass({
<h3>More things to try</h3> <h3>More things to try</h3>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/change-dance-moves.gif" /> <img src = "/images/microworlds/hiphop/change-dance-moves.gif" />
<h5> Try different dance moves</h5> <h5> Try different dance moves</h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/long-dance-script.png" /> <img src = "/images/microworlds/hiphop/long-dance-script.png" />
<h5> Add more moves </h5> <h5> Add more moves </h5>
</div> </div>
<div className="tip-step"> <div className="tip-step">
<img src = "images/pathways/change-dance-timing.png" /> <img src = "/images/microworlds/hiphop/change-dance-timing.png" />
<h5> Change the timing </h5> <h5> Change the timing </h5>
</div> </div>
...@@ -225,7 +241,7 @@ var Microworld = React.createClass({ ...@@ -225,7 +241,7 @@ var Microworld = React.createClass({
</li> </li>
</ul> </ul>
</div> </div>
</div>*/} </div>
</div> </div>
); );
......
src/views/microworlds_art/microworlds_art.scss
View file @ 77a4bd2d
...@@ -169,6 +169,15 @@ $base-bg: $ui-white; ...@@ -169,6 +169,15 @@ $base-bg: $ui-white;
} }
} }
.tipsslider {
text-align: center;
.thumbnail {
display: inline-block;
margin: 0px 50px;
}
}
.pathways .box-content {padding:20px;} .pathways .box-content {padding:20px;}
......
src/views/microworlds_art/microworlds_art_tips.json 0 → 100644
View file @ 77a4bd2d
[
{
"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"
}
]
}
]
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