Now that we have all of the calculated values shown, the last thing to do is find the user’s Avatar image! That way users can see their cool armor and weapons! No problem! The Habitica API exposes a call that returns the avatar rendered as a png image!
Oh, that doesn’t work anymore. According to a GitHub issue that’s been broken since 2017.
But that is ok, because there is a separate call that produces all of the HTML needed to display the avatar image. So we will just use that!
Waaait…. that doesn’t work either. Ok. Maybe I’m using it wrong.
The nice thing about open source code is you can always look under the hood and see what is really happening. So, let’s take a look there and…
Oh. that’s broken too. Ok, well we can always look at the Habitica website and its code, and see how they are getting the avatar image.
After just a bit of research we can tell that they are displaying a lot of images on top of each other in a specific order to make up the entire avatar. The armor, weapons, face, accessories, etc are all loaded separately and when nested together make up the entire picture. Each element is named after the piece of armor, so we can look at the users inventory and just find the corresponding image to display…
Oh. It looks like we can’t actually reference each image separately. They combine them all into a collection of sprite sheets, and then reference the individual locations on those sprite sheets using CSS…
Ok, that makes sense, lots of games and websites use sprite sheets to improve performance. Except, they have like 6 different sprite sheets, so it is hard to know which one(s) have the images we want.
WAIT - the CSS file automatically knows all of the sprites and their locations, and the names of the css classes matches the name of the inventory item keys! So all we need to do is download the css file used by the website and….
NOPE. The CSS file is rebuilt every time they update the website, and is given a different name each time.
Aaaaand since Habitica regularly adds new seasonal outfits, that means we would have to manually update our module to use the name of the new css file every few months. Not ideal.
Hmm… The mobile app is displaying the avatar image, and we already have the source code for that from our project earlier in the month. Lets look through the code there and see what they are doing to render the avatar!
WHOA! They have a custom URL that they are using to load images for the mobile apps, and they can reference each one individually as a png! That could be exactly what we need….
Or we could just redesign our UI and toss out using the Avatar altogether.
This one works a little bit better with the Magic Mirror aesthetic anyway:
So we will implement that tomorrow!