Consume only one powerup with given id

src/pages/Game/FoodPowerup.tsx

@@ -5,7 +5,7 @@ import { maxHearts } from '../../data/constants';
 import { Food } from '../../data/food';
 import { SetUserData } from '../../utils/commonTypes';
 
-import { Powerup } from './Powerup';
+import { consumePowerup, Powerup } from './Powerup';
 
 type FoodPowerupProps = {
 	setHearts: (hearts: number) => void;
@@ -37,7 +37,7 @@ export const FoodPowerup = ({
 						prev !== undefined
 							? {
 									...prev,
-									foodIds: prev.foodIds.filter(id => id !== food.id)
+									foodIds: consumePowerup(prev.pokeballIds, food.id)
 							  }
 							: undefined
 					);

src/pages/Game/PokeballPowerup.tsx

@@ -10,7 +10,7 @@ import {
 } from '../../utils/commonTypes';
 import { PokemonOnCanvas } from '../../utils/pokemonFetcher';
 
-import { Powerup } from './Powerup';
+import { consumePowerup, Powerup } from './Powerup';
 
 type PokeballPowerupProps = {
 	pokeball: Pokeball;
@@ -43,7 +43,7 @@ export const PokeballPowerup = ({
 						prev !== undefined
 							? {
 									...prev,
-									pokeballIds: prev.pokeballIds.filter(id => id !== pokeball.id)
+									pokeballIds: consumePowerup(prev.pokeballIds, pokeball.id)
 							  }
 							: undefined
 					);

src/pages/Game/Powerup.tsx

@@ -7,6 +7,11 @@ type PowerupProps = {
 	style?: React.CSSProperties;
 };
 
+export const consumePowerup = (ids: number[], powerupId: number) => {
+	const powerupIdx = ids.findIndex(id => id === powerupId);
+	return [...ids.slice(0, powerupIdx), ...ids.slice(powerupIdx + 1)];
+};
+
 export const Powerup = ({ icon, onClick, style }: PowerupProps) => (
 	<Button
 		shape="circle"