Weekend: Unit Catalog

After some friendly hook ups, I got my Duelyst key a little early. It's a mix of a board game and a card game, where your pieces are drawn from a deck and positioned around the board in an effort to take out your opponent's general (think a Queen in Chess). The game is great, and browsing the forums for tips and strategies I came across a post:

Does anyone have a complete list (in any format) with all of the cards updated to the current version? ...

If there isn't one, I think I'll try to find some time to make one myself. I believe it'd be pretty good to have the cards available outside of the game in a searchable format for faster referencing.

A relatively simple idea - an online catalog of all the units (cards). So, as the romantic that I am, I spent my Valentine's day on a long and productive date with Meteor. The end result can be found here.

A simple catalog web app, with filters

I had initially gotten greedy, and wanted to take the chance to get to know both Meteor and ReactJS (which I've been hearing so many cool things about) better, at the same time. I found this handy package which would allow me to do such a thing and so I began coding, following along with the examples as well as the official ReactJS tutorial.

Everything was going fairly smooth into I ran into the actual backend part. I wasn't really sure how to interface data from the server to the front-end, how that was suppose to all automagically work with ReactJS, etc. In the end (probably some time after lunch) I decided I'd have to acquaint myself with ReactJS some other time and dropped to pure Meteor for the rest of the project.

From there things went fairly smoothly. I refamiliarized myself with concepts I had learned early in the year: helpers, sessions, collections. With the templates and helpers I was able to quickly redo what I had done in ReactJS. With that out of the way, I began working on the backend. Basically, I wanted to read a JSON file containing all the unit data. However, although Duelyst might have sparked this particular project, I had been working on something previously which was actually for another game I'm playing (and working on!) that also happens to use a card system.

So, the web app had to be game-agnostic. The JSON could have some custom properties and filters, according to the game, and the UI would generate automatically based off of that. At first I was trying to transmit that extra information (the JSON was split into 2, the "simpler" unit data, and then this "filter" data) through a simple array or something from the server to the client. I didn't get far with this, and opted instead to simply drop the filter stuff into its own Meteor collection.

This probably worked out better, since now I could iterate through that and generate dropdowns via the templates easily. I think this is what took the majority of my day to do: getting the dropdowns to pass an update (to a Session) so that the cards listed would properly filter based off the new selection.

By the end of the night I was able to accomplish exactly what I had hoped. Not only that, but I was able to write a small script for use with node (or actually, iojs now which came REAL in handy with it's flagged ES6 support) that let me convert the source XML data files from LEADtoFIRE into the JSON that my catalog app needs (and which is what is currently displayed). With a little more CSS love, I'll toss this guy on Github and share it more publically with the games' communities. With enough interest, I could even add cool features like "deck sharing" or something.

For now though, it was a good experience and enjoyable session of Meteor practice. A shame about React though, but perhaps another time and another weekend project.