🎲 React Tenzies Game

Roll the dice and try to get all ten dice showing the same number! A fun and addictive React game with confetti celebrations.

🌐 Live Demo

🚀 Play Tenzies Now - Can you get all dice to match?

✨ Features

• 🎲 Interactive Dice - Click to hold/freeze dice at their current value
• 🎊 Celebration Confetti - Animated confetti when you win the game
• ♿ Accessibility - Screen reader announcements and keyboard navigation
• 📱 Responsive Design - Works perfectly on desktop and mobile devices
• ⚡ Fast Performance - Built with React 18 and Vite for optimal speed
• 🎨 Beautiful UI - Clean, modern design with smooth animations
• 🔄 Game Reset - Start a new game instantly after winning
• 🎯 Focus Management - Automatic focus handling for better UX

🎮 How to Play

1. Roll the Dice 🎲

   • Click "Roll" to roll all unfrozen dice

2. Hold Your Dice 🔒

   • Click on any die to freeze it at its current value
   • Held dice will be highlighted and won't change on the next roll

3. Match All Dice 🎯

   • Keep rolling and holding until all 10 dice show the same number

4. Celebrate & Play Again 🎉

   • Enjoy the confetti celebration when you win!
   • Click "New Game" to start over

🚀 Quick Start

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/scottfully/tenzies-game-react.git
   cd tenzies-game-react

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to the URL given by Vite to start playing! 🎉

🛠️ Built With

• React - UI library with hooks and modern features
• Vite - Fast build tool and dev server
• nanoid - Unique ID generator for dice
• react-confetti - Celebration confetti effects

📜 Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm start        # Start development server (alias)

🎨 Styling

The game features:

• Modern CSS with custom properties
• Flexbox layouts for responsive design
• Smooth hover and click animations
• Accessible color contrasts
• Professional typography with Karla font from Google Fonts

♿ Accessibility Features

• Screen Reader Support - Live region announcements for game state
• Keyboard Navigation - Full keyboard accessibility
• Focus Management - Automatic focus on "New Game" button when winning
• Semantic HTML - Proper heading structure and ARIA labels

🎯 Game Logic

The game implements these core mechanics:

• Dice Generation - Random values 1-6 for each of 10 dice
• Hold State - Toggle held/unheld state for individual dice
• Win Condition - All dice held AND all showing the same value
• State Management - React hooks for dice state and game logic

🙏 Acknowledgments

• Built and improved during the Scrimba React Course
• Refactored into better directory structure and made style improvements
• Inspired by the classic Tenzies dice game

🎓 Learning Goals

This project demonstrates:

• React functional components and hooks
• State management with useState
• Effect hooks with useEffect
• Event handling and conditional rendering
• Component composition and prop passing
• Accessibility best practices

Happy coding! 👨‍💻