Dev Diary #2: Working prototype

In May, I started working on a side project building an online draft tool for Pokemon TCG. I had a clear idea of what I wanted from the basic functionality but the world situation hasn't been easy so my work on the project was small pieces of frustration here and there. Over the summer, I sat down a couple of times trying to make this happen but struggled to get the technical side figured out.

Today, I finally have a working prototype! I didn't make big changes to the technical approach compared to my failed attempts but maybe my subconscious had been working on the problem over the summer since this time it clicked.

The Prototype

I have to say, I'm so excited by the flow of the app from the user perspective. It's intuitive to use: after joining a game (currently only supports one hardcoded test session), you get a list of cards to pick from and once you make your pick, you get the rest of the cards from the player next to you in the rotation.

On the right side, you see a barebones list of the cards you have picked up. The picks list is definitely going to under go a major overhaul and it's a piece I've got most feedback on: people want a way to organize their cards to their liking and see the exact info of the card to make sure they can make optimal picks for the future.

Demo

Above is a quick demo video with two players picking cards. Manual testing of a real-time multi-user applications has proven to be quite a challenge. Not necessarily difficult but time consuming since you have to make all the clicks and decisions for each user. I can't wait to get the second version of the prototype out in a way that I can deploy it to a server and run some tests with people other than myself.

Improving something that runs and works is so much easier and motivating than staring an empty project. I think I was in the empty project state for way too long but now I can start making small tasks to implement new things or improve existing which makes it easier to work on it shorter time periods at the time.

Show us what's under the hood!

Since you're here on my blog, you're probably interested in learning about the tech side of the project as well.

On the backend, I run node with express. Currently the project doesn't have any kind of persistence (card pools are hard coded for example) but I'm planning to implement Postgres database for user-created cubes and games and either using that or some no-SQL approach for logging draft actions. One of the down-the-road things I'm excited about is analysing picks: as games are played, we'll get a lot of data of what picks players make on specific pools of cards and that can make a lot of interesting insights into different cubes and even individual boosters.

On the frontend, I'm using React. Nothing fancy or special here, just basic React stuff. I might add some state management like Redux to make it easier as there's a lot of state all over the place and it's becoming a bit hard to manage.

To connect the two (and users to each other), I use Socket.io which is a great Javascript library for building websocket-based applications. Most of my struggles have been making the sockets do what I want to do but over a lot of practice and trial and error, I've gotten quite comfortable with it.

Next steps

There are so many things to work on and that excites me:

1. Private server testing
   One of the things that needs to happen next is to remove a bunch of hardcoded stuff and make it deploayble to a server. This will help me get started with private testing with players from the Pokemon cube draft community. More feedback, more bugs exposed and more ideas!
2. Improving stability
   Right now, this thing breaks down really easily. Sockets are quite fragile and in this kind of thing, I need to improve the stability a lot so that small network issues or accidentally refreshing the page doesn't ruin the draft for everyone.
3. Organizing & managing picks
   As I mentioned earlier, one thing people really feel a big need for is good tools for managing the list of your picks. I don't exactly yet know what kind of things I should build there but I'll probably spend a weekend in the future playing MtG Arena's draft to gain some inspiration and talk with players more.
4. Tooling for building cubes & games
   A crucial first bit in the game admin side is building a way for players to create their own cubes  from lists (or importing Google Sheets as they are currently used to track and draft cubes).

After these four main points, the game should be in a spot where I can run controlled test drafts with the community. If you are running Pokemon TCG Cubes with your friends online and would like to test out this, send me an email at juhamattisantala ((at)) gmail ((dot)) com and we can talk!