The first task I undertook was to parse the monsters JSON so that our DM’s could find the monster info they needed.
One of the first lessons I learned was that if one of the monster objects (monjects?) didn’t have a key that the other monsters did, trying to display this would result in the classic “Failed to Compile Error”.
To fix this, I figured I would leverage “if” statements to conditionally render content.
However, you can’t just slap nested “if” statements into a JSX file, so my technique was to nest “if” statements in functions, and then call those functions to render content.
For example:function sense() {if (monstersJSON.
senses) {return (<div><p><strong>Senses:</strong> <em>{monstersJSON.
senses}</em></p></div> ) }}is called inside of curly braces:function MonsterDisplay(props) {const monsterJSON = props.
monsterif (monstersJSON) {return (<div>{ sense() }</div>);}}D&D has a few values which are semi-mathematical.
One example is challenge rating experience points.
Monsters have experience ratings, which translate to experience points.
Since they don’t follow a simple mathematical relationship, I couldn’t use a mathematical function to determine how much XP to display for a given challenge rating.
Instead, I created an object with every challenge rating as a key and its associated experience points as a value.
const challengeRatingXP = {.
125: 25,.
25: 50,.
5: 100,1: 200,2: 450,3: 700,4: 1100,5: 1800,… }By doing this, I could use the challenge rating from the monster object as a key to get the experience points as a value.
Here’s how I set up the JSX to display the values I was looking for:<p>Challenge: {monsterJSON.
challenge_rating} ( {challengeRatingXP[monsterJSON.
challenge_rating]} XP) </p>So for a monster with a challenge rating of 3, the app would display:Challenge: 3 (700XP)Using similar logic, I was able to interpret & display the modifiers for strength, dexterity, constitution, intelligence, wisdom, & charisma.
const abilityScoreModifier = {…8: “-1”,9: “-1”,10: “0”,11: “0”,12: “+1”,13: “+1”,… }I stored the values as strings in order to display them in the conventional D&D fashion: “INT 16(+2)” or “CHA 5(-3)” .
In my exploration of D&D, I found out that each monster has a hit point bonus to add to their attack dice.
This bonus is not explicitly in the monster JSON object, but is calculated by the number of hit dice multiplied by the Constitution multiplier.
Fascinating, right?!The number of hit dice was stored as a string in the format “8d10” (8 ten-sided dice) or “10d6” (10 six-sided dice).
So I figured I would split that string at the ‘d’ character, returning only the 1st value, which would result in the number of hit dice as a string.
At this point, I have modifier value as a string, and a number of hit dice as a string, and surely I would have to use parseFloat() or parseInt() to grab the numerical value, right.wrong.When I did that, react promptly reminded me that they were not functions.
However, when I plugged in the strings into the calculations, it worked fine.
I’m guessing react has some built in ‘fuzzy’ logic to interpret stringy numbers.
Additionally, monsters have special abilities, actions, and legendary actions.
Any monster can have some combination of all three, or none at all.
All of these characteristics are in the form of arrays.
My teammate Jacob had the foresight to use the map function to display these values.
I used my lessons from previous characteristics to consolidate three different conditional map functions down to one where I passed in the title and the location of the array I was looking for.
Here’s the function I used:function mapDisplay(titleString, jsonLocation) {if(jsonLocation) {return(<div><h2><strong>{titleString}</strong></h2>{jsonLocation.
map(location => (<div><hr></hr><p><strong>{location.
name + “: “}</strong></p><p><em>{location.
desc}</em></p></div>))}</div>)}}And here’s how I called the function:{mapDisplay(“Special Abilities” monstersJSON.
special_abilities)}{mapDisplay(“Actions”, monstersJSON.
actions)}{mapDisplay(“Legendary Actions”, mmonstersJSON.
legendary_actions)}This was a fun way for me to learn both react and more about D&D.
I hope you enjoyed reading it!.. More details