Interactive dice game, built followng the Scrimba React Tutorial Tenzies Game (registration required).

1. Roll all dice on clicking "Roll" button.
2. Freeze a die on clicking it.
3. On game completion:
   • Change the button text from "Roll" to "New game".
   • Launch confetti.
   • On clicking "New game", roll a set of new dice,
     • Hide confetti.

• Numbers replaced by dice svgs.
• Number of rolls printed below 'Roll" button.
• Number of games printed to table.
• Best (lowest) score printed to table.
• Worst (highest) score printed to table.
• Warning (alert()) if all dice selected but dice values not the same.

• Fully keyboard navigable.
• SVG dice images:
  • have the aria-hidden="true" property, so are inaccessible to screen readers (but not to search engines).
  • corresponding number span wrappers have className="visually-hidden, so are only accessible to screen readers (and also to search engines).

function rollDice() {
  setDice((prevDice) =>
    prevDice.map((die) => {
      return die.isHeld ? die : createNewDice()
    })
  )

  const allDiceHeld = dice.every((die) => die.isHeld)
  const firstDie = dice[0]
  const sameValues = dice.every((die) => firstDie.value === die.value)
  if (allDiceHeld && sameValues) {
    setGameStatus(false)
    setDice(tenRandomNumbers)
  }
}

function rollDice() {
  if (!gameStatus) {
    setDice((prevDice) =>
      prevDice.map((die) => {
        return die.isHeld ? die : createNewDice()
      })
    )
  } else {
    setGameStatus(false)
    setDice(tenRandomNumbers())
  }
}

Both work, but (obviously) the second version is more succinct.

Tested on Windows 10 with:

• Chrome
• Firefox
• Microsoft Edge

Page tested in both browser and device views.