**Update: The site is now hosted at https://gu-list-creator.vercel.app/ and updates will be published whenever ready. Check the changelog for non-major updates!**

TL;DR: I created a tool for showing cards more easily here: [https://gu-list-creator.vercel.app/](https://gu-list-creator.surge.sh/)

This community has been brimming with activity with many people sharing their decks. Most use [GUDecks](https://gudecks.com/) to showcase their decks, which is a fantastic tool to do so.

![Screen Capture of a GUDecks Deck Overview](https://files.peakd.com/file/peakd-hive/kephler/23tkmzKmN59YpUJrkTz2ZS83yh6yQPL6xTEXqapDTR7qFELQzQaKhFdPwrsFNNBuvnTMp.jpg)

However, when trying to showcase why certain cards are included and others aren't, it is common to show the card in its entirety since not everyone knows the effects of every single card. Like so:

![2021-12-24 15_27_14-Gods Unchained Card List Creator.jpg](https://files.peakd.com/file/peakd-hive/kephler/24246PpHKUuoZt5UGUWeoqBMnZopffBPFZCxsVUTH59BeoRNGnqtqY11o5sKfBvGZvvJm.jpg)

There are a few ways to grab these card images, but I always end up going to the [official Gods Unchained Composited Card](https://immutable.github.io/gu-composited-card/) site to download the cards for the best quality. However, as the Composited Card site only accepts card IDs, I would usually go to GUDecks to find the card ID, key in the card ID to this site, and finally download the image. All that for just 1 card image. Kinda tedious, isn't it?

While I was using the Composited Card site, I noticed that it was also a library that could be used. That got me thinking - could I create a better tool for showcasing individual cards?

# Gods Unchained Card List Creator

![image.png](https://files.peakd.com/file/peakd-hive/kephler/48SrK1eaWKTphpB5VdxVQ8oCu5x8pzobu6atQxPBnCFzGow1v3UC8NyQWbZc4yjZv1.png)

And so, I created it - a tool that allowed you to search for cards by their name, and showed them in a nice grid-like fashion. You can give it a try here: [gu-list-creator.surge.sh](https://gu-list-creator.surge.sh).

As it was rushed in a couple hours the interface might not be very intuitive, but I hope it's sufficient for basic usage. You can:
- Reorder cards
- Delete cards by double-clicking on them

One catch is that you can't include multiples of a specific card. It's also not optimized for mobile, but I expect most people who use this tool to be on their computers anyway.

# Step-by-step usage

For example, let's say I want to showcase my awesome combo of *Expectant Egg* and *Out of Its Misery*. I'll first search for Expectant Egg on the sidebar.

![image.png](https://files.peakd.com/file/peakd-hive/kephler/Eo8a1tyq3XGH22dBR1ZdRJQSavb5Jt4xMsJPrYuhWCd7SMvjnw7X8K8MicRsavLtsWG.png)

Then, I'll do the same for each other card. Not only can you search for cards that are collectible, but you can also search for cards that are created by other cards like the *Chicken Egg* and *Brash Chicken*, as well as god powers.

![image.png](https://files.peakd.com/file/peakd-hive/kephler/23tw7oNjSTQyFkJw4VkW9S1wP42cKVPEzdehSqMmaC5QfVEJThZD3bLfetQt2D2uAGfe3.png)

The last thing to do is to use a screenshotting tool to screengrab the cards! I wanted to have a download button that would help you do that, but it doesn't seem to be doable without a lot more effort. For an initial prototype, I reckon that this is enough for basic usage.

![Final Result](https://files.peakd.com/file/peakd-hive/kephler/EpA6RGXUZgHooCJumbNWjjNkHcVT79r8U9AvvpVopW7dESYSs3Hu7CzoWc8EpusawbE.png)

And we're done! Simple, wasn't it?

# Technical Details

For the people who want some technical details, I'll briefly explain how I did this.

- Card data was sourced from one of GUDecks APIs that they use when displaying the decks on their page - they had already formatted the data nicely, so it was easy to work with. I downloaded the data so I wouldn't require a server (or constant pinging to GUDeck's servers). This also means that I will have to manually update the card data if cards are changed.
- Displaying the cards was done by using [Immutable's Composited Card library](https://github.com/immutable/gu-composited-card). This is the same one that powers their card preview site.
- I used a couple of Javascript and React libraries to help me achieve the user interface.
- No outgoing API requests other than those required to grab the card images, since they are encapsulated within the library that Immutable provided.

# Final Thoughts

I hope this tool helps people who are sharing their decks and strategies on Hive have an easier time grabbing card information. I would have loved to do something like importing deck codes, but the Gods Unchained team hasn't documented how they encode and decode deck strings. If you do use this tool, let me know what your thoughts are on it. I might make some improvements to it if there is demand for it. Thanks for reading!