React based game to implement and develop the concepts learnt.
***Short Pointers for a quick go through on the concepts used -
- Built from scratch using react js
- Used Props concept
- Used useState() and .map() to map the data to Die component.
- Used Math.floor(Math.random() * (1 - Low + High)) + Low formula to generate random integer number for the die value
- Inside the state looped in the 10 array object with their unique ids using nanoid() function
- To void repetition of code, created a standalone function to generate random integer values for the Die, and passed it on wherever required.
- Styled the background color of die on selection using conditional rendering approach
- Passed a function within a function as a prop in the Die component to pass a parameter to the onClick function Check props.holdDice for reference.
- Used React.useEffect to sync the 2 internal states on change of the die values each time new die was generated.
- For the final end game logic checked if all die isHeld to be true and if first value in the dice array matches every die value (checked inside use effect)
- To reset the game used if-else condition along with the state to 'tenzies' inside the rollDice function
- Used the 'react-confetti' imported it and rendered it using conditional rendering
- Also conditional rendering is being used to change the label of the button on winning the game to reset it to 'New game'.
- Nanoid and confetti needs to be npm'ed to import them. ;)