Add images

src/data/food.ts

@@ -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

@@ -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

 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

 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

@@ -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,