Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chrisnajman/tenzies-game
Tenzies dice game, built with React
https://github.com/chrisnajman/tenzies-game
dark-mode html-css-javascript nanoid react-confetti react-icons reactjs scrimba-react
Last synced: about 2 months ago
JSON representation
Tenzies dice game, built with React
- Host: GitHub
- URL: https://github.com/chrisnajman/tenzies-game
- Owner: chrisnajman
- License: mit
- Created: 2024-06-01T15:52:53.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-09-18T05:03:44.000Z (4 months ago)
- Last Synced: 2024-09-18T07:45:04.478Z (4 months ago)
- Topics: dark-mode, html-css-javascript, nanoid, react-confetti, react-icons, reactjs, scrimba-react
- Language: JavaScript
- Homepage: https://chrisnajman.github.io/tenzies-game/
- Size: 343 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tenzies Game
Interactive dice game, built followng the Scrimba React Tutorial [Tenzies Game (registration required)](https://v2.scrimba.com/learn-react-c0e/~052).
## Functionality
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.
---
## Enhancements
- 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.
## Accessibility
- 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).
## Code Note
### My Initial Version of `rollDice()`
```jsx
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)
}
}
```
### Final (Tutorial) Version
```jsx
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.
---
## Testing
Tested on Windows 10 with:
- Chrome
- Firefox
- Microsoft Edge
Page tested in both browser and device views.