Skip to content

Game of dice, where you match all ten dice to win the game, built using React

Notifications You must be signed in to change notification settings

waynecen/tenzi-game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A game of dice where the goal is to hold ten dice of the same value. Try to get the fastest time!

🏃 Motivation & Challenges

This project was created to practice using React and apply what I learned about React Hooks

Tracking amount of rolls:

const [rollCount, setRollCount] = React.useState(0);

function rollNewDice() {
    // tenzies is another state keeping track of the win condition
    if (!tenzies) {
        setRollCount((prevCount) => prevCount + 1);
    } else {
        setRollCount(0);
    }
}

Conditionally rendering dot faces with props:

// if value is 1, render class with props.value
{value === 1 && (
    <div className={`--${value}`}>
        <span class="dot"></span>
    </div>
)}

Using localStorage to keep track of best time:

React.useEffect(() => {
    const currentBestTime = localStorage.getItem("bestTime");
    if (tenzies) {
        if (!currentBestTime) {
            localStorage.setItem("bestTime", JSON.stringify(time));
        } else if (time < currentBestTime) {
            setBestTime(time);
        }
    }
}, [tenzies, time]);

🚧 To Do

  • Add dots instead of numbers to dice
  • Track number of rolls
  • Track time to win
  • Save best time in localStorage

Preview

project preview