Building a WoW Talent Calculator

I have always been a fan of the World of Warcraft talent calculator. It was quite the bummer when it began to change during the expansions.

To me, this is a classic RPG talent tree. It has a couple notable elements:

• Progression through the tree starts at the top in tier one
• A point limit needs to be met to unlock subsequent tiers
• Occasionally, you will need points in talents from one tier to access more powerful talents in another
• Each tree works on a separate set of points, but all points are taken from the same pool of total points available.
• You can’t remove points from lower tiers if points exist in a higher tier

Simple, yet, intelligent design.

A new challenge approaches

World of Warcraft Classic is on the horizon, with a release date of August 26th in the states.

Many classic fans are spending their time creatively awaiting this launch date, though some…not so much.

One thing that I was intrigued by was the ClassicDB talent tool – https://classicdb.ch/?talent

I thought, this would be pretty cool to try and recreate in Javascript.

I spent a little time sketching out the possibilities, the logic, and the requirements in Adobe XD.

Then I took to Codepen to try and build out a basic three column CSSGrid.

The resulting grid works nicely. It stacks on mobile and alots the correct amount of space for each talent.

A plan

As I began reverse engineering the logic in the ClassicDB talent calculator, I realized this project was a bit more complicated than I first thought. I knew I would use jQuery to build out the project. I knew I would use Codepen to document the work and also help share it on Stackoverflow if I got stuck.

But as I worked through the logistics I came across a couple realizations:

• The calculator’s points need to stem from the same total, but apply separately per each talent tree
• There are a number of things that occur as a talent is incremented such as adding points to the tree ‘points’ counter, and subtracting points from the overall ‘points total’ counter
• Each maxed out talent will need a gold border (new class) to represent ‘full’
• As new tiers are unlocked, previous talents cannot lose (decrement) points
• This is important since without this condition talents would remain ‘active’ while the inferior conditions are no longer met
• Adding tool tips to each item seemed easy enough, but, the content of those tooltips change depending on how many points are in the talent
• Some tooltips call for other talents to be activated first before a superior talent is able to be activated
• Lastly, this needs to scale dynamically for all classes otherwise building it out by hand would become untenuable

As you can see, the list is long but approachable once written down.

I broke the above into a few sections:

1. Create the tree ‘grid’ which would suffice for all classes. Make it responsive.
2. Create the counter logic for incrementing and decrementing the points for each talent
3. Create the tier progression logic for stepping through each tier
4. Create a pool of points to pull from and individualized ‘point sums’ per tree
5. Add tooltips for each talent and adjust their values based on JSON table of values
6. Create a way to save builds and share them with friends

Journeys are easier to navigate once you draw a map. The map above is a living document so it can be changed as the requirements and blockers call for it. But for now, it is the map I choose to follow.

More to come…

Notes from the future:

While working on this project I managed to get a working draft of the point progression working here:

While working on this project I resumed my JavaScript coursework and realized this can be achieved much more efficiently with better event delegation and propagation.

Additionally, I reached out to a Redditor regarding the data they used for their talent tree mobile app and they were kind enough to pass along their files – see here https://github.com/jjchrisdiehl/wowcalc/blob/master/ClassData.js

This provides a great opportunity to parse the ‘class data’ and iterate through the icons dynamically, but that is for a future refactoring of this project.