From 13807c1215431a5e134530ebdb51291051f7693f Mon Sep 17 00:00:00 2001
From: Raul Almeida <haltsimog@gmail.com>
Date: Thu, 16 Apr 2020 11:52:49 -0300
Subject: [PATCH] WIP Item Carousel
---
src/Components/ItemCardAction.js | 6 +++---
src/Components/ItemCarousel.js | 26 +++++++++++++++-----------
src/Pages/ItemStore.js | 21 ++++++++++++++++-----
3 files changed, 34 insertions(+), 19 deletions(-)
diff --git a/src/Components/ItemCardAction.js b/src/Components/ItemCardAction.js
index 2922dc3d..c02455ea 100644
--- a/src/Components/ItemCardAction.js
+++ b/src/Components/ItemCardAction.js
@@ -64,15 +64,15 @@ export default function ItemCardAction (props) {
const handleClick = () => {
// this will become an axios get
- if (true) {
+ if (props.operation == 'unequip') {
setInfo(true);
setMessage("Item retirado");
}
- else if (true) {
+ else if (props.operation == 'equip') {
setInfo(true);
setMessage("Item equipado");
}
- else if (true) {
+ else if (props.operation == 'buy') {
setSuccess(true);
setMessage("Item comprado");
}
diff --git a/src/Components/ItemCarousel.js b/src/Components/ItemCarousel.js
index 4dfdf2d9..260a26c5 100644
--- a/src/Components/ItemCarousel.js
+++ b/src/Components/ItemCarousel.js
@@ -25,16 +25,18 @@ import ItemCard from './ItemCard.js';
//url/user_items/index?q={"item_type": umdaqueles, "op": "none", "unlock_rule": "purchase"}
export default function ItemCarousel (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 < 2; i++)
- items = items.concat(items);
+ const [left, setLeft] = useState(0);
+ const [right, setRight] = useState(5);
+
+ const goLeft = () => {
+ setLeft(left-1);
+ setRight(right-1);
+ }
+
+ const goRight = () => {
+ setRight(right+1);
+ setLeft(left+1);
+ }
return (
<Grid
@@ -45,7 +47,9 @@ export default function ItemCarousel (props) {
xs={12}
spacing={3}
>
- {items.map((i) => {
+ <p onClick={goLeft}>ESQUERDA</p>
+ <p onClick={goRight}>DIREITA</p>
+ {props.items.slice(left, right).map((i) => {
return <ItemCard
src={i.src}
action={i.action}
diff --git a/src/Pages/ItemStore.js b/src/Pages/ItemStore.js
index 3f762005..76cd9658 100644
--- a/src/Pages/ItemStore.js
+++ b/src/Pages/ItemStore.js
@@ -50,9 +50,20 @@ export default function ItemStoreContainer (props) {
setBadges(badge);
}));
}, [])
+
+ 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 (
- <Container style={{paddingTop : "2em", backgroundColor : "purple"}}>
+ <Container style={{paddingTop : "2em", backgroundColor : "#f4f4f4"}}>
<Grid container
direction="row"
justify="space-around"
@@ -67,19 +78,19 @@ export default function ItemStoreContainer (props) {
</Grid>
<StoreSection>
Bordas de avatar
- <ItemCarousel items={avatar_frames}/>
+ <ItemCarousel items={items}/>
</StoreSection>
<StoreSection>
Insígnias
- <ItemCarousel items={badges}/>
+ <ItemCarousel items={items}/>
</StoreSection>
<StoreSection>
Bordas de card
- <ItemCarousel items={card_frames}/>
+ <ItemCarousel items={items}/>
</StoreSection>
<StoreSection>
Bordas de capa de perfil
- <ItemCarousel items={cover_frames}/>
+ <ItemCarousel items={items}/>
</StoreSection>
</Container>
)
--
GitLab