YuGiOh Database

The Goal

Create an application using xaml, C# and the MVVM structure to handle support of an API.
This should use json files, parsed with NewtonSoft.

Challenges

Using a new structure: MVVM.
Getting used to the NuGet manager and how to install packages.
Doing the correct research on how to handle a certain API.

Why YuGiOh?

For quite a long time, I've been an avid YuGiOh fan. Yet after a couple years of collecting cards and playing the Trading Card Game, I still don't know all the cards.
But I do know that there are some good websites that can show you all the cards with a detailed explanation.
So looking around trying to find an API for this assignment, I saw that there was one for YuGiOh, so I was immediately sold.
The API that I will use is provided by YGOPRODeck.

Repositories:
I have 2 repositories that both use an Interface. One of them will grab all the cards from the API, while the other will grab them from a local Json file.
The Json file included has a very small sample, around 16 cards.

The Interface has 5 functions, which are all Async.
Obviously a function to Get all Cards, one to Get all Archetypes, one to get all Types, and then 2 to get all cards based around either type or archetype.
The only big difference between both Repositories is the GetCards function.

Models:
I have 3 classes that handle the Models. A Base class of a BaseCard which has all common properties of the cards.
A SpellTrapCard class, which has the property of the typing.
A MonsterCard class, a class that has all the other properties of a card. (attack, defense,...)
Both of these use an Interface that forces both to get a Typing. I did it this way so that SpellTrapCard could be a standalone class.

Views:
With 2 Views, I have more than enough; a DetailPage and an OverViewPage.
Starting with the OverViewPage: This page has a listbox that will display all cards. Above there you can see 2 filter.

One for Type and one for Archetype. Selecting something here will automatically update all cards displayed!
In the bottom left corner, you will see how many cards there are in the listbox. If this is a 0, there will be text displayed "No Cards Found".
This can be caused by certain combinations of filters; because these filters influence each other!

In the bottom right corner, you can find a button that shows what you are using; the online API or the local Json.
Do keep in mind that both will need internet to load images.

And in the center, you see a button that says "Check Details", which will take you to the DetailPage.
This can also happen if you double click an item in the itembox.

With the DetailPage, I kept it pretty simple; all the properties of the card will be displayed, but only if the card has them.
If you click on the image on the left, it will go fullscreen. To go back, just click again.
To go back to the OverViewPage, click the "Go Back" button in the top right corner.

ViewModels:
I only have 2 Views, so 3 ViewModels will suffice; DetailPageVM, OverViewVM and a MainViewModel.
The MainViewModel will be used to show the CurrentPage, so this is linked to the MainWindow.xaml.
This VM is really simple as it just contains a method to switch to the DetailPage using a Card as parameter, or just switching to the OverViewPage.
Of course, like nearly every VM, this is an ObservableObject, so the Page actually changes.
These functions get called in the .xaml.cs files of the pages.

The DetailPageVM is also not complicated. This just stores the CurrentCard that will be used to display all info.

All the juicy stuff can be found in the OverViewVM.
In here, on construction, we start off with getting all cards from the API.
When the Repository is switched, we get the cards from the local Json.
Getting cards will always reset filters.

But whenever a filter changes, we will get all cards linked to that filter, and all the other filters.
Then we use the Intersect function to find all cards that are in both filters.
These will then be the cards we display.

That is about it for my first C# related project in a long time!
I really had some fun with this as it was mostly make-up in xaml and since I love dressing up my site, this was a given fun time for me.
Although it sometimes was infuriating how difficult it was and how sometimes the API doesn't want to work with you.
But it was worth the payoff.
I might've procrastinated a bit too much on this project, so pretty much 90% was done in 2 days.
Because of this I did sadly miss out on a big feature that I wanted to add; a search bar. Maybe a next time.

If you want to use this one, feel free to download the exe down below!
It feels very good just scrolling through all those cards that you probably have never seen and admire the amazing artworks.
If you rather want to admire my amazing code, just as usual, check it out on my GitHub!

The Goal

Challenges

Why YuGiOh?

The Code

In Conclusion