Skip to content
Snippets Groups Projects
Commit 13807c12 authored by Raul Almeida's avatar Raul Almeida
Browse files

WIP Item Carousel

parent 4dd73677
No related branches found
No related tags found
1 merge request!21Gamification
...@@ -64,15 +64,15 @@ export default function ItemCardAction (props) { ...@@ -64,15 +64,15 @@ export default function ItemCardAction (props) {
const handleClick = () => { const handleClick = () => {
// this will become an axios get // this will become an axios get
if (true) { if (props.operation == 'unequip') {
setInfo(true); setInfo(true);
setMessage("Item retirado"); setMessage("Item retirado");
} }
else if (true) { else if (props.operation == 'equip') {
setInfo(true); setInfo(true);
setMessage("Item equipado"); setMessage("Item equipado");
} }
else if (true) { else if (props.operation == 'buy') {
setSuccess(true); setSuccess(true);
setMessage("Item comprado"); setMessage("Item comprado");
} }
......
...@@ -25,16 +25,18 @@ import ItemCard from './ItemCard.js'; ...@@ -25,16 +25,18 @@ import ItemCard from './ItemCard.js';
//url/user_items/index?q={"item_type": umdaqueles, "op": "none", "unlock_rule": "purchase"} //url/user_items/index?q={"item_type": umdaqueles, "op": "none", "unlock_rule": "purchase"}
export default function ItemCarousel (props) { export default function ItemCarousel (props) {
var items = [ const [left, setLeft] = useState(0);
{ const [right, setRight] = useState(5);
src: "https://upload.wikimedia.org/wikipedia/en/9/90/The_DuckDuckGo_Duck.png",
action: "equip", const goLeft = () => {
name: "Avatar um", setLeft(left-1);
description: "Descrição | Descrição" setRight(right-1);
}
const goRight = () => {
setRight(right+1);
setLeft(left+1);
} }
];
for (let i = 0; i < 2; i++)
items = items.concat(items);
return ( return (
<Grid <Grid
...@@ -45,7 +47,9 @@ export default function ItemCarousel (props) { ...@@ -45,7 +47,9 @@ export default function ItemCarousel (props) {
xs={12} xs={12}
spacing={3} spacing={3}
> >
{items.map((i) => { <p onClick={goLeft}>ESQUERDA</p>
<p onClick={goRight}>DIREITA</p>
{props.items.slice(left, right).map((i) => {
return <ItemCard return <ItemCard
src={i.src} src={i.src}
action={i.action} action={i.action}
......
...@@ -51,8 +51,19 @@ export default function ItemStoreContainer (props) { ...@@ -51,8 +51,19 @@ export default function ItemStoreContainer (props) {
})); }));
}, []) }, [])
var items = [
{
src: "https://upload.wikimedia.org/wikipedia/en/9/90/The_DuckDuckGo_Duck.png",
action: "equip",
name: "Avatar um",
description: "Descrição | Descrição"
}
];
for (let i = 0; i < 6; i++)
items = items.concat(items);
return ( return (
<Container style={{paddingTop : "2em", backgroundColor : "purple"}}> <Container style={{paddingTop : "2em", backgroundColor : "#f4f4f4"}}>
<Grid container <Grid container
direction="row" direction="row"
justify="space-around" justify="space-around"
...@@ -67,19 +78,19 @@ export default function ItemStoreContainer (props) { ...@@ -67,19 +78,19 @@ export default function ItemStoreContainer (props) {
</Grid> </Grid>
<StoreSection> <StoreSection>
Bordas de avatar Bordas de avatar
<ItemCarousel items={avatar_frames}/> <ItemCarousel items={items}/>
</StoreSection> </StoreSection>
<StoreSection> <StoreSection>
Insígnias Insígnias
<ItemCarousel items={badges}/> <ItemCarousel items={items}/>
</StoreSection> </StoreSection>
<StoreSection> <StoreSection>
Bordas de card Bordas de card
<ItemCarousel items={card_frames}/> <ItemCarousel items={items}/>
</StoreSection> </StoreSection>
<StoreSection> <StoreSection>
Bordas de capa de perfil Bordas de capa de perfil
<ItemCarousel items={cover_frames}/> <ItemCarousel items={items}/>
</StoreSection> </StoreSection>
</Container> </Container>
) )
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment