Tenzies Game

This is a redo of the tenzies game project that is taught in Scrimba's learn React for free course with my own added features

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Tenzies is a 10-dice game and you win when you are able to roll your dice till all dice have the same number, in the shortest possible time.

Players should be able to:

• Roll the dice using a roll button
• Hold die in place when it is clicked
• See a confetti when they win the game

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• React
• React-confetti
• React-hook (useWindowSize)
• React-timer-hook (useStopWatch)
• LocalStorage
• SASS

What I learned

useEffect in React can be used to keep two or more states in sync. This is what was used to check if all the dice were the same and had the same value.

Continued development

I am looking to add the following features to the game on my own to practice and gain more experience.

• An overlay screen that displays score details
• Time taken to complete game
• Number of rolls made to complete game
• Best number of rolls, i.e the least number of rolls made to win
• Best time, i.e the leat time taken to win

What I learned after adding new features

In my bid to add a timer, I came accros the react-timer-hook package that helps implement stop watches, timers and dates. This is what I used to track the time taken to win the game. I also came accross the useWindowSize hook that helped with making the confetti that plays on the screen after a win responsive.

Useful resources

• Emoji Unicode Reference
• react-timer-hook
• useWindowSize
• react-confetti

Author

• Website - Maame Yaa Serwaa Bona-Mensa
• Twitter - @mys_bm