README.md

---
title: Equal 2-Step Game
emoji: ⚖️
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
app_port: 7860
---

# Equal 2-Step Game ⚖️

An interactive educational game that teaches equality comparison and counting skills through engaging emoji-based questions. Perfect for children learning basic math concepts!

## 🎮 How to Play

The game consists of **two sequential steps** that help children develop comparison and counting skills:

### Step 1: Equality Check
- Look at the two sides with emojis
- Count the items on each side
- Answer the question: **"Are they equal?"**
- Choose between **"Equal"** or **"Not Equal"**

### Step 2: Comparison (Only if Not Equal)
- If you correctly answered "Not Equal" in Step 1, you proceed to Step 2
- The game asks either:
  - **"Which side has more?"** or
  - **"Which side has fewer?"**
- Click on the correct side to answer

### Game Flow
1. **Equal sides**: Step 1 → Correct answer → New question
2. **Unequal sides**: Step 1 → Step 2 → Correct answer → New question

## ✨ Features

- **Visual Learning**: Uses colorful emojis from different categories (animals, fruits, objects, hearts, stars)
- **Two-Step Logic**: Teaches both equality and comparison concepts
- **Immediate Feedback**: Shows "Correct! 🎉" or "Try again! 🤔" messages
- **Auto-Generated Questions**: Random emoji selection and counts (1-10 items)
- **Responsive Design**: Works on desktop, tablet, and mobile devices
- **Clean UI**: Simple, child-friendly interface with large buttons and clear visuals

## 🚀 How to Run

### Option 1: Development Mode

```bash
# Clone the repository
git clone <repository-url>
cd equal-2-step-game

# Install dependencies
npm install

# Start development server
npm run dev
```

The game will be available at `http://localhost:5173`

### Option 2: Production Build

```bash
# Build for production
npm run build

# Preview production build
npm run preview
```

### Option 3: Docker

```bash
# Build Docker image
docker build -t equal-2-step-game .

# Run container
docker run -p 3000:3000 equal-2-step-game
```

The game will be available at `http://localhost:3000`

## 🎯 Educational Benefits

- **Counting Skills**: Children practice counting objects up to 10
- **Equality Concepts**: Understanding when quantities are the same
- **Comparison Skills**: Learning "more than" and "fewer than" concepts
- **Visual Recognition**: Identifying and categorizing different emoji types
- **Logical Thinking**: Following two-step problem-solving processes

## 🎨 Game Categories

The game uses emojis from 5 different categories:

- **Animals**: 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐸 🐷
- **Fruits**: 🍎 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍒 🥝
- **Objects**: ⚽ 🏀 🎾 🏈 🎱 🎪 🎨 🎭 🎪 🎯
- **Hearts**: 💙 💚 💛 💜 🤍 🖤 🤎 💗 💖 💕
- **Stars**: ⭐ 🌟 💫 ✨ 🌠 ⚡ 🔥 ❄️ ☀️ 🌙

## 🛠️ Technical Details

### Technologies Used
- **React 19** with TypeScript
- **Vite** for build tooling
- **CSS3** with modern features (Grid, Flexbox, Animations)
- **Docker** for deployment

### Project Structure
```
src/
├── App.tsx          # Main game component
├── App.css          # Game styling
├── main.tsx         # App entry point
└── index.css        # Global styles

public/
├── favicon.svg      # App icon
└── index.html       # HTML template
```

### Game Logic
- **Question Generation**: Random emoji selection from categories
- **Count Generation**: Random numbers 1-10 for each side
- **Equality Control**: 50% chance for equal vs unequal questions
- **Step Control**: Step 2 only appears for unequal quantities
- **Safety Checks**: Prevents step 2 from showing with equal sides

## 🎨 Customization

You can easily customize the game by modifying the emoji categories in `src/App.tsx`:

```typescript
const emojiCategories = {
  animals: ['🐶', '🐱', ...], // Add your animal emojis
  fruits: ['🍎', '🍊', ...],  // Add your fruit emojis
  // Add more categories...
};
```

## 📱 Mobile Support

The game is fully responsive and optimized for:
- **Desktop**: Full-featured experience with hover effects
- **Tablet**: Touch-friendly interface with optimized sizing
- **Mobile**: Compact layout with large touch targets

## 🚀 Deployment

### Hugging Face Spaces
This project is configured for easy deployment to Hugging Face Spaces using Docker.

### Other Platforms
The built project can be deployed to any static hosting service:
- Vercel
- Netlify
- GitHub Pages
- AWS S3
- And more...

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch: `git checkout -b feature-name`
3. Make your changes
4. Test thoroughly
5. Submit a pull request

## 📄 License

MIT License - feel free to use this project for educational purposes!

## 🎓 Age Recommendation

This game is designed for children ages **3-8** who are learning:
- Basic counting (1-10)
- Equality concepts
- Comparison skills
- Visual recognition

Perfect for:
- **Preschool** mathematics preparation
- **Kindergarten** counting practice
- **Early elementary** comparison skills
- **Special education** visual learning support

---

Made with ❤️ for young learners everywhere!