Use food and pokeball images in game

src/pages/Game/BottomBar.tsx

@@ -67,17 +67,19 @@ export const BottomBar = ({
 					</div>
 				</Col>
 				<Col span={12}>
-					{pokeballData.map((p, idx, arr) => (
-						<PokeballPowerup
-							key={idx}
-							alivePokemons={alivePokemons}
-							pokeball={p}
-							setAlivePokemons={setAlivePokemons}
-							setNewUserData={setNewUserData}
-							setScore={setScore}
-							style={idx !== arr.length - 1 ? { marginLeft: 5 } : undefined}
-						/>
-					))}
+					<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+						{pokeballData.map((p, idx, arr) => (
+							<PokeballPowerup
+								key={idx}
+								alivePokemons={alivePokemons}
+								pokeball={p}
+								setAlivePokemons={setAlivePokemons}
+								setNewUserData={setNewUserData}
+								setScore={setScore}
+								style={idx !== arr.length - 1 ? { marginLeft: 5 } : undefined}
+							/>
+						))}
+					</div>
 				</Col>
 			</Row>
 		</div>

src/pages/Game/FoodPowerup.tsx

@@ -28,22 +28,25 @@ export const FoodPowerup = ({
 	};
 
 	return (
-		<Badge count={food.restores}>
-			<Powerup
-				icon={<RestOutlined />}
-				onClick={() => {
-					heal(food.restores);
-					setNewUserData(prev =>
-						prev !== undefined
-							? {
-									...prev,
-									foodIds: consumePowerup(prev.pokeballIds, food.id)
-							  }
-							: undefined
-					);
-				}}
-				style={style}
-			/>
-		</Badge>
+		<div style={{ marginRight: '20px' }}>
+			<Badge count={food.restores}>
+				<Powerup
+					imageUrl={food.image}
+					icon={<RestOutlined />}
+					onClick={() => {
+						heal(food.restores);
+						setNewUserData(prev =>
+							prev !== undefined
+								? {
+										...prev,
+										foodIds: consumePowerup(prev.pokeballIds, food.id)
+								  }
+								: undefined
+						);
+					}}
+					style={style}
+				/>
+			</Badge>
+		</div>
 	);
 };

src/pages/Game/Lives.tsx

@@ -11,11 +11,11 @@ const heartNumbers = Array.from({ length: maxHearts }, (_, i) => i + 1);
 
 const Lives = ({ hearts }: HeartsProps) => (
 	<div>
-		{heartNumbers.map(h =>
+		{heartNumbers.map((h, idx) =>
 			h > hearts ? (
-				<HeartOutlined style={{ ...style, color: 'gray' }} />
+				<HeartOutlined key={idx} style={{ ...style, color: 'gray' }} />
 			) : (
-				<HeartOutlined style={style} />
+				<HeartOutlined key={idx} style={style} />
 			)
 		)}
 	</div>

src/pages/Game/PokeballPowerup.tsx

@@ -34,27 +34,30 @@ export const PokeballPowerup = ({
 	};
 
 	return (
-		<Badge count={pokeball.catches} style={{ backgroundColor: '#52c41a' }}>
-			<Powerup
-				icon={<TrademarkCircleOutlined />}
-				onClick={() => {
-					catchPokemons(pokeball.catches);
-					setNewUserData(prev =>
-						prev !== undefined
-							? {
-									...prev,
-									pokeballIds: consumePowerup(prev.pokeballIds, pokeball.id)
-							  }
-							: undefined
-					);
-					setScore(prev =>
-						prev !== undefined
-							? prev + pokeball.catches * catchReward
-							: undefined
-					);
-				}}
-				style={style}
-			/>
-		</Badge>
+		<div style={{ marginRight: '20px', display: 'flex' }}>
+			<Badge count={pokeball.catches} style={{ backgroundColor: '#52c41a' }}>
+				<Powerup
+					icon={<TrademarkCircleOutlined />}
+					imageUrl={pokeball.image}
+					onClick={() => {
+						catchPokemons(pokeball.catches);
+						setNewUserData(prev =>
+							prev !== undefined
+								? {
+										...prev,
+										pokeballIds: consumePowerup(prev.pokeballIds, pokeball.id)
+								  }
+								: undefined
+						);
+						setScore(prev =>
+							prev !== undefined
+								? prev + pokeball.catches * catchReward
+								: undefined
+						);
+					}}
+					style={style}
+				/>
+			</Badge>
+		</div>
 	);
 };

src/pages/Game/Powerup.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 
 type PowerupProps = {
 	icon: ReactNode;
+	imageUrl?: string;
 	onClick: () => void;
 	style?: React.CSSProperties;
 };
@@ -12,12 +13,37 @@ export const consumePowerup = (ids: number[], powerupId: number) => {
 	return [...ids.slice(0, powerupIdx), ...ids.slice(powerupIdx + 1)];
 };
 
-export const Powerup = ({ icon, onClick, style }: PowerupProps) => (
-	<Button
-		shape="circle"
-		size="large"
-		icon={icon}
+const ImageButton = ({
+	imageUrl,
+	onClick,
+	style
+}: Omit<PowerupProps, 'icon'>) => (
+	<button
+		style={{
+			backgroundImage: `url("${imageUrl}")`,
+			backgroundSize: 'cover',
+			borderRadius: '50%',
+			borderColor: '#1890ff',
+			padding: '20px',
+			textDecoration: 'none',
+			display: 'inline-block',
+			fontSize: '16px',
+			...style
+		}}
+		className="imageButton"
 		onClick={onClick}
-		style={style}
 	/>
 );
+
+export const Powerup = ({ icon, imageUrl, onClick, style }: PowerupProps) =>
+	!imageUrl ? (
+		<Button
+			shape="circle"
+			size="large"
+			icon={icon}
+			onClick={onClick}
+			style={style}
+		/>
+	) : (
+		<ImageButton onClick={onClick} imageUrl={imageUrl} style={style} />
+	);