saifahn / magical-flash-cards Goto Github PK

The app is currently using CSS multi-column to display the cards. This looks appealing, but the cards are arranged in columns vertically so the first column displays the first cards.
The first row should display the first cards, followed by the second row, and so on.
After doing some research, it seems like this may be impossible with pure CSS and that it may be a good idea to use an existing Masonry layout library for React.

Split cards were not accounted for during the initial design of the app.
The card objects returned by the Scryfall API have some properties that will be useful in implementing split cards. One is layout; most cards have the property normal, but split cards have the layout split. In addition, cards with more than one face, like split cards, have the property card_faces. This property is an array of objects representing the different card faces, and the oracle text can be retrieved from there.

"card_faces": [
    {
        "object": "card_face",
        "name": "Invert",
        "mana_cost": "{U/R}",
        "type_line": "Instant",
        "printed_type_line": "",
        "oracle_text": "Switch the power and toughness of each of up to two target creatures until end of turn.",
        "printed_text": "",
        "watermark": "izzet"
    },
    {
        "object": "card_face",
        "name": "Invent",
        "mana_cost": "{4}{U}{R}",
        "type_line": "Instant",
        "printed_type_line": "",
        "oracle_text": "Search your library for an instant card and/or a sorcery card, reveal them, put them into your hand, then shuffle your library.",
        "printed_text": ""
    }
],

• Separate utility functions into separate files

Add props validation to all components.

Oracle text returned by the Scryfall API doesn't contain italics for reminder text.

Target creature you control gains protection from the color of your choice until end of turn.\nRebound (If you cast this spell from your hand, exile it as it resolves. At the beginning of your next upkeep, you may cast this card from exile without paying its mana cost.)

The desired behaviour is to italicize the reminder text:

Target creature you control gains protection from the color of your choice until end of turn.

Rebound (If you cast this spell from your hand, exile it as it resolves. At the beginning of your next upkeep, you may cast this card from exile without paying its mana cost.)

This shouldn't be too hard, we can take anything inside parentheses to be reminder text.

Some cards do not span the entire width, but they should, even if they don't have enough text.

A set such as Guilds of Ravnica contains split cards that do not function correctly at the moment. Split cards are loaded without oracle text, and this causes the app to crash as italicizeReminderText cannot run. Add a failcase to the function or where the function is called to make sure that this error does not occur.

https://flow.org/en/docs/install/

Currently the filtering by mana cost is based on CMC, which doesn't work with split cards. Additionally we are looking at the type line of split cards, rather than each individual side. This needs to be fixed as well.

GRN has a bunch of instants that have a hybrid mana cost.

Cards with Flashback are showing up, even if they are Sorceries.
This is due to the query that is given to the Scryfall API, which looks for the word 'flash' in the oracle text. The main Scryfall application accepts regular expressions to be more specific, but the API does not.

Possible Solutions

• Get the entire cardset for the set, then filter in the application.
• Keep the query the same, obtaining a small cardset, then filter further in the application.
  • I believe this to be optimal, as we are already requesting information from the API so we have to wait for the response regardless. Having a smaller set to filter will improve performance in the application.

Currently there is dummy data that is initially loaded. The app then queries Scryfall for a list of sets and loads them into the select element, but a set must be selected for it to update. This could be changed to load the latest set when all the sets have been loaded.

The list of sets is fetched upon loading of the app. However, the range of sets is determined by hard-coded date values. This should be changed so that sets in the last 5 years or so are loaded, making sure that the most recent sets are available.

Oracle text for cards is returned with newlines as "\n". For example:

Electrolyze deals 2 damage divided as you choose among one or two targets.\nDraw a card.

Currently the character is trimmed out of the text in the rendered card text, so it looks like:

Electrolyze deals 2 damage divided as you choose among one or two targets. Draw a card.

But the desired behaviour is more like:

Electrolyze deals 2 damage divided as you choose among one or two targets.
Draw a card.

This should be changed to something appropriate

Current Behaviour

• No sort toggled:
  • Cards are in alphabetical order (as desired.)
• Sort by colour toggled:
  • Cards are sorted by colour, then alphabetically (as desired.)
• Sort by mana cost toggled:
  • Cards are sorted in ascending converted mana cost (CMC), but otherwise seemingly in a random order.
• Sort by mana cost and colour toggled:
  • As above; ascending but in a different random order.
• The order for each combination is consistent, but undesired for the bottom two.

Desired Behaviour

• Sort by mana cost toggled:
  • Sort by CMC, then alphabetically.
• Sort by mana cost and colour toggled:
  • Sort by CMC, then colour, then alphabetical.
• Gold (multicoloured) cards are sorted after green.
• Colourless cards are sorted before white.