Skip to content
GitLab
Unverified Commit 41ce7ba9 authored by Michal Čaniga's avatar Michal Čaniga
Browse files

Add images

parent 85130e01
Hide whitespace changes
Inline Side-by-side
src/data/food.ts
View file @ 41ce7ba9
......@@ -12,20 +12,26 @@ export const food: Food[] = [
{
id: 1,
name: 'Beer',
price: 123,
restores: 1
price: 251,
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,
name: 'Chicken Wings',
price: 471,
restores: 2
price: 372,
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,
name: 'Chicken Nuggets',
price: 682,
restores: 3
price: 589,
restores: 3,
image:
'https://lh3.googleusercontent.com/proxy/yz5L82lj_C42CC_IlPfIx22esZDBVmq1n-IEOgM0PETAUnBn9mZAaQAe5VxnSB-mAV-g-ZwhM9JPrOMF0eq_k5EJQpndfkCs5f_S0WibcMSYAaz-r9gqTqs'
}
];
......
src/data/pokeballs.ts
View file @ 41ce7ba9
......@@ -11,13 +11,27 @@ export type Pokeball = {
export const pokeballs: Pokeball[] = [
{
id: 1,
name: 'Pokeball 1',
price: 12,
name: 'Weak Pokeball',
price: 180,
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'
},
{ 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 =>
......
src/pages/Home/HomeCarousel.tsx
View file @ 41ce7ba9
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';
......@@ -38,47 +39,54 @@ const Slide = ({
return (
<div style={containerStyle}>
{!isLoggedIn ? (
<div
style={{
background: '#eeeeee',
padding: 50,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}
>
<div
style={{
background: '#eeeeee',
padding: 50,
display: 'flex',
flexDirection: 'column',
justifyContent: '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
style={{ fontSize: 65, fontWeight: 'bold', textAlign: 'center' }}
>
{text}
Enjoy the game!
</Typography>
<div
style={{
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 = [
{ imagePath: '/placeholder.png', text: 'Fight pokemons' }, // TODO: place image from game
{ imagePath: '/placeholder.png', text: 'Buy items' }, // TODO: place image from store
{ imagePath: '/placeholder.png', text: 'Reach the top' }, // TODO: place image from leaderboard
{ imagePath: '/game.png', text: 'Fight pokemons' },
{ imagePath: '/store.png', text: 'Buy items' },
{ imagePath: '/leaderboard.png', text: 'Reach the top' },
{ imagePath: '/placeholder.png', text: 'Know your enemies' } // TODO: place image from encyclopedia
];
......@@ -88,10 +96,36 @@ export const HomeCarousel = () => {
const [isAuthModalVisible, setIsAuthModalVisible] = useState(false);
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 (
<>
<Carousel autoplay>
<Carousel
slickGoTo={slideNumber}
ref={ref => {
slider.current = ref;
}}
>
{slideData.map(({ imagePath, text }, idx) => (
<Slide
key={idx}
......
src/pages/Store/ItemCard.tsx
View file @ 41ce7ba9
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 { Pokeball } from '../../data/pokeballs';
......@@ -13,24 +13,26 @@ const ItemCard = ({
callback: (item: Item) => Promise<void>;
}) => (
<Col style={{ width: '200px' }}>
<Card
title={item.name}
hoverable
cover={
item.image ? (
<img alt={item.name} src={item.image} />
) : (
<QuestionCircleOutlined style={{ fontSize: '190px' }} />
)
}
>
<p>
Price: {item.price} <DollarOutlined />
</p>
<Button type="primary" onClick={() => callback(item)}>
Buy
</Button>
</Card>
<Badge count={'restores' in item ? item.restores : item.catches}>
<Card
title={item.name}
hoverable
cover={
item.image ? (
<img alt={item.name} src={item.image} />
) : (
<QuestionCircleOutlined style={{ fontSize: '190px' }} />
)
}
>
<p>
Price: {item.price} <DollarOutlined />
</p>
<Button type="primary" onClick={() => callback(item)}>
Buy
</Button>
</Card>
</Badge>
</Col>
);
......
src/pages/Store/Store.tsx
View file @ 41ce7ba9
......@@ -19,7 +19,7 @@ const Store = () => {
title: 'Confirm purchase',
content: `Are you sure that you want to buy ${item.name}?`,
onOk: () => {
if (!userData) {
if (!userData || userData.id === undefined) {
return;
}
......@@ -38,9 +38,8 @@ const Store = () => {
pokeballIds.push(item.id);
}
// TODO fix this -> userData.id ?? ''
modal.destroy();
updateUserDataInFirebase(userData.id ?? '', {
updateUserDataInFirebase(userData.id, {
...userData,
actualScore: userData.actualScore - item.price,
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