Unverified Commit 41ce7ba9 authored by Michal Čaniga's avatar Michal Čaniga
Browse files

Add images

parent 85130e01
...@@ -12,20 +12,26 @@ export const food: Food[] = [ ...@@ -12,20 +12,26 @@ export const food: Food[] = [
{ {
id: 1, id: 1,
name: 'Beer', name: 'Beer',
price: 123, price: 251,
restores: 1 restores: 1,
image:
'https://media.istockphoto.com/vectors/hand-drawn-glass-of-beer-vector-id1038586226?k=20&m=1038586226&s=612x612&w=0&h=1GrTdY-samaQRovrcbwuFPJQUwsjI7UyWWSXpZL9bFA='
}, },
{ {
id: 2, id: 2,
name: 'Chicken Wings', name: 'Chicken Wings',
price: 471, price: 372,
restores: 2 restores: 2,
image:
'https://previews.123rf.com/images/larryrains/larryrains1904/larryrains190400145/122787282-hot-wing-mascot-a-cartoon-illustration-of-a-flaming-buffalo-wing-mascot-.jpg'
}, },
{ {
id: 3, id: 3,
name: 'Chicken Nuggets', name: 'Chicken Nuggets',
price: 682, price: 589,
restores: 3 restores: 3,
image:
'https://lh3.googleusercontent.com/proxy/yz5L82lj_C42CC_IlPfIx22esZDBVmq1n-IEOgM0PETAUnBn9mZAaQAe5VxnSB-mAV-g-ZwhM9JPrOMF0eq_k5EJQpndfkCs5f_S0WibcMSYAaz-r9gqTqs'
} }
]; ];
......
...@@ -11,13 +11,27 @@ export type Pokeball = { ...@@ -11,13 +11,27 @@ export type Pokeball = {
export const pokeballs: Pokeball[] = [ export const pokeballs: Pokeball[] = [
{ {
id: 1, id: 1,
name: 'Pokeball 1', name: 'Weak Pokeball',
price: 12, price: 180,
catches: 1, catches: 1,
image:
'https://st2.depositphotos.com/3213441/12022/v/600/depositphotos_120226152-stock-illustration-pokemon-go-pokeball-round-sign.jpg'
},
{
id: 2,
name: 'Regular Pokeball',
price: 263,
catches: 2,
image: 'https://www.downloadclipart.net/large/pokeball-png-photos.png' image: 'https://www.downloadclipart.net/large/pokeball-png-photos.png'
}, },
{ id: 2, name: 'Pokeball 2', price: 48, catches: 2 }, {
{ id: 3, name: 'Pokeball 3', price: 19, catches: 3 } id: 3,
name: 'Strong Pokeball',
price: 394,
catches: 3,
image:
'https://www.pngitem.com/pimgs/m/135-1351704_pokeball-png-image-poke-ball-clip-art-transparent.png'
}
]; ];
export const getUserPokeballs = (pokeballIds?: number[]): Pokeball[] | null => export const getUserPokeballs = (pokeballIds?: number[]): Pokeball[] | null =>
......
import { Carousel, Typography } from 'antd'; import { Carousel, Typography } from 'antd';
import { useMemo, useState } from 'react'; import { CarouselRef } from 'antd/lib/carousel';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useLoggedInUser } from '../../hooks/useLoggedInUser'; import { useLoggedInUser } from '../../hooks/useLoggedInUser';
...@@ -38,47 +39,54 @@ const Slide = ({ ...@@ -38,47 +39,54 @@ const Slide = ({
return ( return (
<div style={containerStyle}> <div style={containerStyle}>
{!isLoggedIn ? ( <div
<div style={{
style={{ background: '#eeeeee',
background: '#eeeeee', padding: 50,
padding: 50, display: 'flex',
display: 'flex', flexDirection: 'column',
flexDirection: 'column', justifyContent: 'center',
justifyContent: 'center', alignItems: 'center'
alignItems: 'center' }}
}} >
> {!isLoggedIn ? (
<>
<Typography
style={{ fontSize: 65, fontWeight: 'bold', textAlign: 'center' }}
>
{text}
</Typography>
<div
style={{
display: 'flex'
}}
>
<SignInButton
setAuthModalType={setAuthModalType}
setIsAuthModalVisible={setIsAuthModalVisible}
/>
<SignUpButton
setAuthModalType={setAuthModalType}
setIsAuthModalVisible={setIsAuthModalVisible}
/>
</div>
</>
) : (
<Typography <Typography
style={{ fontSize: 65, fontWeight: 'bold', textAlign: 'center' }} style={{ fontSize: 65, fontWeight: 'bold', textAlign: 'center' }}
> >
{text} Enjoy the game!
</Typography> </Typography>
<div )}
style={{ </div>
display: 'flex'
}}
>
<SignInButton
setAuthModalType={setAuthModalType}
setIsAuthModalVisible={setIsAuthModalVisible}
/>
<SignUpButton
setAuthModalType={setAuthModalType}
setIsAuthModalVisible={setIsAuthModalVisible}
/>
</div>
</div>
) : null}
</div> </div>
); );
}; };
// TODO: replace placeholders with website screenshots
const slideData = [ const slideData = [
{ imagePath: '/placeholder.png', text: 'Fight pokemons' }, // TODO: place image from game { imagePath: '/game.png', text: 'Fight pokemons' },
{ imagePath: '/placeholder.png', text: 'Buy items' }, // TODO: place image from store { imagePath: '/store.png', text: 'Buy items' },
{ imagePath: '/placeholder.png', text: 'Reach the top' }, // TODO: place image from leaderboard { imagePath: '/leaderboard.png', text: 'Reach the top' },
{ imagePath: '/placeholder.png', text: 'Know your enemies' } // TODO: place image from encyclopedia { imagePath: '/placeholder.png', text: 'Know your enemies' } // TODO: place image from encyclopedia
]; ];
...@@ -88,10 +96,36 @@ export const HomeCarousel = () => { ...@@ -88,10 +96,36 @@ export const HomeCarousel = () => {
const [isAuthModalVisible, setIsAuthModalVisible] = useState(false); const [isAuthModalVisible, setIsAuthModalVisible] = useState(false);
const [authModalType, setAuthModalType] = useState<AuthModalType>(); const [authModalType, setAuthModalType] = useState<AuthModalType>();
const [slideNumber, setSlideNumber] = useState(0);
const slider = useRef<CarouselRef | null>();
// antd autoplay doesn't work correctly, change slides DYI
useEffect(() => {
const interval = setInterval(
() =>
setSlideNumber(prev => (prev !== slideData.length - 1 ? prev + 1 : 0)),
3000
);
return () => {
clearInterval(interval);
};
}, []);
useEffect(() => {
if (slider?.current) {
slider.current.goTo(slideNumber);
}
}, [slideNumber]);
return ( return (
<> <>
<Carousel autoplay> <Carousel
slickGoTo={slideNumber}
ref={ref => {
slider.current = ref;
}}
>
{slideData.map(({ imagePath, text }, idx) => ( {slideData.map(({ imagePath, text }, idx) => (
<Slide <Slide
key={idx} key={idx}
......
import { DollarOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { DollarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Button, Card, Col } from 'antd'; import { Badge, Button, Card, Col } from 'antd';
import { Food } from '../../data/food'; import { Food } from '../../data/food';
import { Pokeball } from '../../data/pokeballs'; import { Pokeball } from '../../data/pokeballs';
...@@ -13,24 +13,26 @@ const ItemCard = ({ ...@@ -13,24 +13,26 @@ const ItemCard = ({
callback: (item: Item) => Promise<void>; callback: (item: Item) => Promise<void>;
}) => ( }) => (
<Col style={{ width: '200px' }}> <Col style={{ width: '200px' }}>
<Card <Badge count={'restores' in item ? item.restores : item.catches}>
title={item.name} <Card
hoverable title={item.name}
cover={ hoverable
item.image ? ( cover={
<img alt={item.name} src={item.image} /> item.image ? (
) : ( <img alt={item.name} src={item.image} />
<QuestionCircleOutlined style={{ fontSize: '190px' }} /> ) : (
) <QuestionCircleOutlined style={{ fontSize: '190px' }} />
} )
> }
<p> >
Price: {item.price} <DollarOutlined /> <p>
</p> Price: {item.price} <DollarOutlined />
<Button type="primary" onClick={() => callback(item)}> </p>
Buy <Button type="primary" onClick={() => callback(item)}>
</Button> Buy
</Card> </Button>
</Card>
</Badge>
</Col> </Col>
); );
......
...@@ -19,7 +19,7 @@ const Store = () => { ...@@ -19,7 +19,7 @@ const Store = () => {
title: 'Confirm purchase', title: 'Confirm purchase',
content: `Are you sure that you want to buy ${item.name}?`, content: `Are you sure that you want to buy ${item.name}?`,
onOk: () => { onOk: () => {
if (!userData) { if (!userData || userData.id === undefined) {
return; return;
} }
...@@ -38,9 +38,8 @@ const Store = () => { ...@@ -38,9 +38,8 @@ const Store = () => {
pokeballIds.push(item.id); pokeballIds.push(item.id);
} }
// TODO fix this -> userData.id ?? ''
modal.destroy(); modal.destroy();
updateUserDataInFirebase(userData.id ?? '', { updateUserDataInFirebase(userData.id, {
...userData, ...userData,
actualScore: userData.actualScore - item.price, actualScore: userData.actualScore - item.price,
foodIds, foodIds,
......
Supports Markdown
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