A fun and interactive version of the classic Tenzies game built using React, Vite, and TailwindCSS. The goal: Roll until all dice have the same value. Click each die to freeze it between rolls.
Live Demo: Play the game here
tenzies-project/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images and media (unused in current build)
│ ├── components/
│ │ └── Dice.jsx # Single die component
│ ├── App.css # Optional component-specific styles
│ ├── App.jsx # Main game logic and UI
│ ├── index.css # Tailwind and global styles
│ ├── main.jsx # Entry point
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
└── README.md # Project documentation
- Win condition detection – Automatically detects when all dice are the same and held.
- Randomized dice rolls – Rolls all non-held dice with values between 1 and 6.
- Hold functionality – Click on a die to lock its value.
- Victory celebration – Confetti animation on win.
- New game button – Resets the game instantly.
- Responsive design – Styled with TailwindCSS for mobile and desktop.
- React (Functional components + Hooks)
- Vite (Fast dev server & build tool)
- TailwindCSS (Utility-first styling)
- NanoID (Unique ID generation for dice)
- React-Confetti (Victory animation)
-
Clone this repository
git clone https://github.com/Molo-M/tenzies-project.git cd tenzies-project -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open in browser
- Visit the local server link provided by Vite (e.g.
http://localhost:5173).
- Visit the local server link provided by Vite (e.g.
- Click Roll to roll all dice.
- Click any die to hold its value between rolls.
- Continue rolling until all dice are the same and all are held.
- Celebrate your win 🎉 and click New Game to start over.
This project is open source under the MIT License.