I built it using npm create-react-app on VS Code and local server. The project has 2 components. All the functionality is happening inside the App component:
An array of dice objects is generated and their properties are passed to the Die component as props by mapping through the array.
rollDice function is created, which either returns new dice or keeps those dice, which isHeld property is a truthy value. It may start or finish the game, depending on tenzies state. If the game is over, it clears the roll counter and timer states.
holdDice function is created inside the App component, too. It's responsible for toggling die.isHeld property on dice click and changing the state of the dice array.
In the useEffect I find out whether all dice are held or at least some of them. If all of them are held and have the same value, I finish the game by changing the start and tenzies states. I also change the results state by adding a new result object to the array of results.
The Die component takes props and conditionally renders a die and style it, depending on the props.value and props.isHeld. The holdDice prop function is passed to the component's onClick event.
**Going above and beyond: **
I added the timer and the roll counter to the project.
I created 2 useEffects to save the current and best results of the game in local storage. To calculate the best result I used the Array.reduce method.
I set the game to start both on a "roll" button click and on a die click for a better UI.
I rendered the real dice instead of numbers by adding the number of spans with the "dot" class equal to the props.value.
In terms of styling I added some watermarks here and there and allocated a separate div for the results.
