Unverified Commit 8e9b19b9 authored by Michal Čaniga's avatar Michal Čaniga
Browse files

Use food and pokeball images in game

parent 02b9e098
......@@ -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>
......
......@@ -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>
);
};
......@@ -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>
......
......@@ -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>
);
};
......@@ -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} />
);
Markdown is supported
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