Designed an app
Used VueJS
Wrote CSS
Designed UI components
Built UI components
+3

DCUO Combat Rating Calculator


DC Universe Online uses Combat Rating (CR) to unlock content throughout the game as players earn new rewards and gear through gameplay. 

A CR Calculator gives an "at a glance" look at the components of Combat Rating and can help inform decisions during loot drops or trips to vendors as players level their characters through the content tiers. 

To the left, the primary calculator is arranged to match the equipped gear UI of the game with inputs for each gear slot along with the weighted percentage of the slot's contribution to CR.

CR is displayed at the top as a whole number (CR in-game is always rounded down to the nearest whole number) and a decimal number. The decimal number shows how close a character is to achieving the next CR level.

To the right, a matrix of gear combinations show how different levels of gear will affect the character's CR. 

The X axis has four predefined columns corresponding to auto-scaling loot boxes and their rarity which are based on the character's current CR. The level of these boxes are not disclosed in-game until after the box is opened. The fifth column is a "Goal" column, which can be defined by the player—this is good for plugging in the level of vendor gear that a player is working toward. The Y axis mirrors the CR Calculator with entries for each gear slot.

Inside the matrix, players can see quickly how a particular piece of gear will affect their character's CR:

  • Green entries show a breakthrough to a higher CR as recognized in-game.
  • Black entries show an incremental increase to CR, but not enough to jump to the next level.
  • Gray entries show a decrease in CR. This would be gear that is not needed and should be skipped in loot choices if possible.
Using the matrix, players can choose optimal loot drops to maximize the CR of their character. Double-clicking an entry in the matrix will apply it to the CR calculator.