Favorites Container

[JonoSommers]

Description:
The Favorites Container will hold up to 4 favorited cards and display them as mini 'posters' at the bottom of the Home Page. If the Favorites Container reaches the maximum limit of 4 cards, a message will notify the user to remove a card before adding another. A card's favorites attribute will be set to true when added to favorites, and the card will appear in the container.

Details:

• The Favorites Container holds a maximum of 4 favorited cards.
• Each favorited card will have a favorites attribute set to true when added to favorites.
• Display each favorited card as a mini 'poster' at the bottom of the Home Page, including the card's name and image.
• If the Favorites Container is full (i.e., contains 4 cards), a message is displayed: "You cannot add more favorites. Please remove a card to add a new one."
• Users can remove cards from the Favorites Container, which allows them to add new favorites.

Examples:

• Request Body for Adding a Favorite:

{
  "cardId": 101,
  "favorites": true
}

• Response Body for Adding a Favorite:

{
  "message": "Card 'Pikachu' has been added to your favorites.",
  "favorites": [
    {
      "cardId": 101,
      "name": "Pikachu",
      "image": "https://example.com/images/pikachu.png"
    }
  ]
}

• Response Body When Favorites Container is Full:

{
  "error": "You cannot add more favorites. Please remove a card to add a new one."
}

• Response Body for Retrieving User's Favorites (up to 4 cards):

{
  "favorites": [
    {
      "cardId": 101,
      "name": "Pikachu",
      "image": "https://example.com/images/pikachu.png"
    },
    {
      "cardId": 202,
      "name": "Snorlax",
      "image": "https://example.com/images/snorlax.png"
    },
    {
      "cardId": 303,
      "name": "Charizard",
      "image": "https://example.com/images/charizard.png"
    },
    {
      "cardId": 404,
      "name": "Umbreon",
      "image": "https://example.com/images/umbreon.png"
    }
  ]
}

Acceptance Criteria:

• The Favorites Container holds up to 4 favorited cards and displays them as mini 'posters' at the bottom of the Home Page.

• Each mini poster includes the card's name and image.

• When a card is added to favorites, the favorites attribute of that card is set to true, and it appears in the Favorites Container.

• If the Favorites Container is full (i.e., contains 4 cards), the following message is displayed: "You cannot add more favorites. Please remove a card to add a new one."

• Users can remove cards from the Favorites Container by toggling the favorites attribute back to false.

• Upon removing a card, the user can add a new favorite, and the UI updates accordingly.

• All interactions (button clicks, adding/removing cards) work as expected and pass the tests.