about_customblogblog_customclosedocumenteliemenuphotos_custompublications_customsearch_newsmiletoolsvideos_custom
close-normalfacebookgoogleinstagramlinkedinlocationmailredditrsstagtwitteryoutube

Hearthstone 3D card viewer in pure Javascript/CSS3

To celebrate the new Hearthstone extension, Blackrock Mountain, I’m releasing a Hearthstone 3D card viewer written in pure Javascript. I feel Blackrock Mountain’s release is the perfect opportunity to showcase HTML5’s top notch performance and inspire more people to do cool visualizations on the web. With well over 500 cards, it’s high time to create a tool with powerful filtering and attractive visualization to explore the cards in an interesting fashion that works both on desktops and tablets. Hope you like it  :)

For the impatient (or those who don’t care about technical details) you can click here for the visualizer. If you want to see what the tool looks like, here’s a short video that demos it:

Let’s go briefly over how to get the card data, what Javascript library I used, and some of the key challenges that I had to solve.

Where do you get the card data?

 

The card data are located in the game folder under the files card* files. The most important one is the file called: cardxml0.unity3d which contains the cards meta-data in a pseudo XML format where an <entity> block contains the data for a single card. The other files contain the textures/images for the cards. For example, here’s what the entity Holy Smite looks like:

Over time, parsing this file has become a little tricker. That’s because Hearthstone moved from having a single entry per card (with all the translations) to one entry per translation sometime after the Nax release. Blizzard also removed the string that previously described what each tag means. Now only the enumID appears. Nevertheless, this file contains all the information needed. It just takes a bit more time to write the correct parser :)

What libraries does the tool use?

I found out that if you want to do the type of visualization I wanted, there are many good Javascript 3D engines. After doing my research, I ended up using Three.js as framework after I tested its periodic element demo that’s fairly close to what I envisioned. Here’s a screenshot of this demo -- it’s not quite what I wanted but it was close enough to convince me:

From there, I simply ended up using the same libraries that Ricardo Cabello used for his periodic elements demo as they were very easy to use. Since Three.js doesn’t do animation natively, the viewer uses Tween.js to manage the transitions from point A to point B. To deal with user controls including pan, zoom, pinch, and rotate, the library of choice is called TrackballControls.

Gotchas

The first gotcha is: How do you paint the cards in your engine? The standard approach would be to create textures based on the cards. This allows for neat deformations but it is quite involving and I didn’t get good performance (probably because I did it wrong). It turns out that there is a simpler and more elegant way to display the cards: describe them as HTML objects and use a nifty little library called CSS3DRenderer to do the magic of importing them as 3D objects.

The second challenge was a usability one. As I added more and more filtering functions -- like the ability to filter by card race or hero class -- the left menu become longer and longer. Eventually it no longer fit on the screen. This was especially acute on tablet and small screens.

To fix this, I decided to implement a collapsible menu and control switch that would work well on tablets and desktops. I didn’t wanted to add additional burdens to the Javascript engine, and wanted to be sure it would be smooth on tablets, so I wrote  a menu which uses only CSS3 animation. This makes the menu fluid and lightweight. I discovered that to do a CSS-only menu, you have to use what is known as the checkbox hack. This hack uses the checkbox state to keep track of the menu state, and uses the CSS selector input[type=checkbox]:checked to add extra styling once the menu is open ( == checked).

Last, but not least, it was more tedious than I anticipated to find the right set of parameters for the field of depth, the space between cards for the various layout settings, and the animation timing. All-in-all, ensuring that the cards remained visible and look nice regardless of how many are displayed was a tremendous time sink.

Please let me know what you think of this tool and how you use it! If you find this post and my tool useful, please share it on your favorite social network by clicking one of the links below. I would love to have many fellow Hearthstone players use it. Speaking of this, if you’re a legend-level player and have time to coach me, drop me a message! I always love to learn more :)

Click above to share this post on your favorite social network.

Elie Bursztein

I lead Google's anti-abuse research team, which invents ways to protect users against cyber-criminal activities and Internet threats. I blog about web performance and security.

Stay in touch

Join the 35K awesome readers community!

or

Read next

Be in the Know

Join thousands of readers who receive my latest blog posts in their inbox.
 
No spam I promise and you can unsubscribe anytime.
Elie Bursztein © 2017
Papers
Blog
Tools
Photos
About Me

Recent entries