TCG Pokemon Card Viewer

Goal

Building a tool using C# and XAML with the MVVM pattern. The tool should have online and offline mode. For the online functionality, an external API has to be used to get the data. The data for the offline functionality should be gathered via JSON files.

Introduction

Games often have dozens, if not hundreds of items the player can collect and use. In such a case it can be very useful to be able to view the item stats so the player knows if the item is worth collecting. Moreso, having a list of all the items and their stats currently in the game is also useful during development of said game. That is why I decided to use the Pokemon TCG API for this project, as it is a card game with thousands of cards. This means that the need for a central application to view the different cards available is very high for both the developer of the computer game and the player.

Overview Page

The overview page gives you access to a search area where you can set the following search queries:

  • Card Type (e.g. Colorless)
  • Card Subtype (e.g. Stage 1)
  • Page Size
  • Page Number
  • Card Name (e.g. Charizard or Char*)

The name field can contain the exact card name, but can also have a wildcard character (*). The wildcard character will match with any number of characters, and can be anywhere within the name. If you search for "C*", it will look for any card name starting with the letter 'C'.

Overview Page

Detail Page

The detail page will give you more info on the card's stats, such as the classification. If the card has it, the attacks, abilities and rules will also be dynamically displayed. The card series logo is displayed under the card.

Overview Page

Switching Repositories

The tool contains a local mock-up repository in order to test out the features offline. Both the online and offline repository contain the same functionality. You can easily switch between the repositories via the UI. Simply select the "Search" icon in the left sidebar to use the API repository and the "Collection" icon to use the local repository.

Conclusion

I had written a project in C# before, but this was my first time using XAML, which went quite well. I would have liked to make the side buttons a bit more user-friendly, but I could not find a way to accomplish that in XAML without breaking the MVVM pattern. Designing the layout of the page was part of the assignment, but by far my least favourite part. I did enjoy figuring out how the API works and adding features based on that, and adding the same features afterwards in the offline repository. Unfortunately, some combinations of search parameters returned wrong or no data, so I had to make sure that the parameters you could select were always compatible with each other.

Sources