diff --git a/src/Components/ItemCarousel.js b/src/Components/ItemCarousel.js index 260a26c59d7d6985f1c915f55feb26180ec76481..a3e03e8e4fbcbf3a6a442a433896bb1191334030 100644 --- a/src/Components/ItemCarousel.js +++ b/src/Components/ItemCarousel.js @@ -22,6 +22,9 @@ import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; import ItemCard from './ItemCard.js'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; +import IconButton from '@material-ui/core/IconButton'; //url/user_items/index?q={"item_type": umdaqueles, "op": "none", "unlock_rule": "purchase"} export default function ItemCarousel (props) { @@ -29,13 +32,13 @@ export default function ItemCarousel (props) { const [right, setRight] = useState(5); const goLeft = () => { - setLeft(left-1); - setRight(right-1); + setRight(right == 0 ? props.items.length-1 : right-1); + setLeft(left == 0 ? props.items.length-1 : left-1); } const goRight = () => { - setRight(right+1); - setLeft(left+1); + setRight(right == props.items.length-1 ? 0 : right+1); + setLeft(left == props.items.length-1 ? 0 : left+1); } return ( @@ -47,15 +50,22 @@ export default function ItemCarousel (props) { xs={12} spacing={3} > - <p onClick={goLeft}>ESQUERDA</p> - <p onClick={goRight}>DIREITA</p> - {props.items.slice(left, right).map((i) => { + <IconButton onClick={goLeft}> + <ArrowBackIcon/> + </IconButton> + {(left > right ? + props.items.slice(left, props.items.length).concat(props.items.slice(0, right)) + : props.items.slice(left, right) + ).map((i) => { return <ItemCard src={i.src} action={i.action} name={i.name} description={i.description}/> })} + <IconButton onClick={goRight}> + <ArrowForwardIcon/> + </IconButton> </Grid> ) } diff --git a/src/Pages/ItemStore.js b/src/Pages/ItemStore.js index 76cd96581bbb9cf3f4b14267504f6a628aa64ec5..92d3865724c1656ac49d01e7fdbe801e4ed281be 100644 --- a/src/Pages/ItemStore.js +++ b/src/Pages/ItemStore.js @@ -28,9 +28,14 @@ import StoreGuide from '../Components/StoreGuide.js'; import ItemCarousel from '../Components/ItemCarousel.js'; import {apiUrl} from '../env'; -const StoreSection = styled.h2` +const SectionTitle = styled.h3` font-weight: 100; ` +const StoreSection = styled.div` + font-size: 1.5em; + margin-top: 20px; + margin-bottom: 20px; +` export default function ItemStoreContainer (props) { const [avatar_frames, setAvatarFrames] = useState([]); @@ -59,8 +64,8 @@ export default function ItemStoreContainer (props) { description: "Descrição | Descrição" } ]; - for (let i = 0; i < 6; i++) - items = items.concat(items); + for (let i = 0; i < 10; i++) + items = items.concat(items[0]); return ( <Container style={{paddingTop : "2em", backgroundColor : "#f4f4f4"}}> @@ -77,19 +82,19 @@ export default function ItemStoreContainer (props) { <StoreGuide/> </Grid> <StoreSection> - Bordas de avatar + <SectionTitle>Bordas de avatar</SectionTitle> <ItemCarousel items={items}/> </StoreSection> <StoreSection> - Insígnias + <SectionTitle>Insígnias</SectionTitle> <ItemCarousel items={items}/> </StoreSection> <StoreSection> - Bordas de card + <SectionTitle>Bordas de card</SectionTitle> <ItemCarousel items={items}/> </StoreSection> <StoreSection> - Bordas de capa de perfil + <SectionTitle>Bordas de capa de perfil</SectionTitle> <ItemCarousel items={items}/> </StoreSection> </Container>