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 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.
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:
- Create the tree ‘grid’ which would suffice for all classes. Make it responsive.
- Create the counter logic for incrementing and decrementing the points for each talent
- Create the tier progression logic for stepping through each tier
- Create a pool of points to pull from and individualized ‘point sums’ per tree
- Add tooltips for each talent and adjust their values based on JSON table of values
- 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:
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.