Today we will create a simple and useful React component (especially for those who play RPG).
First, we will define what the component should do, Its methods and finally we will develop it. Also, I’m not going to enter into the discussion about the use of dice/die as a singular noun…Let’s begin!
Our dice React component will be a simple one, it should have a dice image and allow the user to interact with it by clicking on it. After a click, the component should display some animation to allow the user to know that something is happening and finally show the last selected face of the dice and text with its corresponding value.
To display the die image we are going to use Unicode characters. If you look at this Unicode table you will find that the hex codes from 2680 to 2685 (utmost left column) represent the six faces of a die:
Since this will be a simple component it will have just a few methods:
Constructor: Here we will initialize our state variables
GenerateRandomInt: as the name suggests we will use this method to create integers, it will receive a minimum and maximum value, both inclusive.
DiceRoll: Updates the internal state of our component.
HandleDiceThrow: Reacts to user interaction (Click) and starts the animation.
Talk is cheap, show me the code!
First, let’s declare our component using ES6 Classes and the code to render a simple div. We also should add a container to our HTML called root (a simple div will do):
The code on the end of the last block is used to render our React component to the target HTML Node: ReactDOM.render(componentToRender, targetNode).
Now we can start to implement the methods we discussed before, the easiest is the one that generates a new random int. It will receive two parameters and return a random value between (and including) them:
In our constructor, we are going to add some properties to our state.
- faceValue: The random value that should be displayed (1 – 6). This will come from our GenerateRandomInt function.
- face: The Unicode value that will be used to make the graphic representation of our dice based on the table we saw on the beginning of the post.
- rollCount: How many times our dice should roll before it stops with a face-up.
- isRolling: Is the dice being rolled right now?
The DiceRoll function will be simple too but it will make the most part of the work.
Imagine that the player has thrown the dice. What should happen? The dice start to roll and in each roll, a face is up, so all the values are updated.
in this function, we will get a new random int value that will be used to define our face value. Then we set our rollCount to be the current minus one (remember that the row count is how many times our dice will roll before a stop, so each iteration of a roll should decrease it).
If we still have roll to do in our current throw the isRolling var will be true, otherwise, it will be set to false.
Finally, the face property is updated using our Unicode table.
Our last method is going to be called when the user throws the dice.
When the user interacts with the dice the first thing we have to do is check if it is already rolling. If so we just ignore that interaction.
After making sure that the dice is in the correct state to be used the method GenerateRandomInt is used again, this time to define how many rolls our dice is going to do. The rollCount property is updated and the “animation” of the dice rolling is started. We simulate an animation by using a setTimeout that calls our DiceRoll method every few microseconds. It is important to note that the DiceRoll method is responsible for update the dice data.
We have all our functions to make our dice work. Let’s just add them to our constructor:
Now, all we must do is update our render function to display the face of the dice and allow the user to interact with it.
You can try the live version here: