README.md

---
title: Addition Game
emoji: ➕
colorFrom: green
colorTo: blue
sdk: docker
pinned: false
app_port: 7860 # Assuming Vite default port, adjust if different after changes
---
# Simple Addition Game ➕

An interactive educational game designed to teach basic addition (sums up to 5, extendable) to young children. It uses numbers, colorful emojis, or a combination of both to make learning fun and engaging!

## 🎮 How to Play

The game presents a simple addition problem (e.g., `1 + 2 = ?`).

1.  **Observe the Problem**: See the two numbers to be added.
2.  **Choose Display Mode**: At the top, select how you want to see the numbers:
    *   **Number**: Shows only numerals (e.g., `1` and `2`).
    *   **Object**: Shows only emojis (e.g., 🍎 and 🍎🍎).
    *   **Both**: Shows numerals in boxes with emojis underneath each.
3.  **Solve**: Determine the sum of the two numbers.
4.  **Select Answer**: Click on one of the three answer options provided at the bottom of the screen. One of these options is the correct sum.
5.  **Feedback**: The game will tell you if your answer is "Correct! 🎉" or "Try again! 🤔".
6.  **New Question**: After a correct answer, a new addition problem is automatically generated.

## ✨ Features

- **Visual Learning**: Uses numbers, a variety of emojis (fruits, animals, objects, etc.), or both to represent numbers.
- **Interactive Display Modes**: Children can switch between seeing problems as numbers, objects, or a combination, catering to different learning preferences.
- **Clear Question Format**: Presents addition problems in a clear, visual layout (e.g., `Num1 + Num2 = ?`).
- **Multiple Choice Answers**: Provides three options, making it easy for young children to select their answer.
- **Immediate Feedback**: Instant confirmation of correct or incorrect answers.
- **Score Tracking**: Keeps a simple score of correct answers.
- **Randomized Questions**: Generates addition problems with numbers from 0 to 5, ensuring the sum does not exceed 5 (configurable).
- **Reduced Zero Probability**: The chance of 0 appearing as an operand is intentionally lowered to provide more varied practice.
- **Responsive Design**: Adapts to different screen sizes (desktop, tablet, mobile).
- **Child-Friendly UI**: Large, easy-to-click buttons and clear, colorful visuals.

## 🚀 How to Run

This project is built with React (using Vite) and TypeScript.

### Development Mode

```bash
# Clone the repository (if you haven't already)
# git clone <repository-url>
# cd <repository-name>

# Install dependencies
npm install

# Start development server
npm run dev
```

The game will typically be available at `http://localhost:5173` (Vite's default port).

### Production Build

```bash
# Build for production
npm run build

# Preview production build
npm run preview
```

### Docker

If a `Dockerfile` is configured (the one from the previous game might need adjustments for port or build steps if they changed significantly):

```bash
# Build Docker image (example name)
docker build -t addition-game .

# Run container (example mapping to port 3000 on host)
docker run -p 3000:5173 addition-game
```

## 🎯 Educational Benefits

- **Basic Addition Skills**: Children practice adding numbers with sums typically up to 5 (can be easily extended).
- **Number Recognition**: Reinforces the visual representation of numbers.
- **Object Counting**: Connects numerals with quantities of objects.
- **Problem Solving**: Encourages children to think through and solve simple math problems.
- **Visual-Numeric Association**: Helps bridge the gap between abstract numbers and concrete objects, especially in "Both" mode.

## 🎨 Emoji Pool

The game uses a diverse pool of emojis to represent objects, including:
🍎 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍒 🥝 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐸 🐷 ⚽ 🏀 🎾 🏈 🎱 🎨 🎭 🎯 🚗 🚕 🚓 🚑 🚁 🚀

This pool can be easily modified in `src/App.tsx`.

## 🛠️ Technical Details

### Technologies Used

- **React** with TypeScript
- **Vite** for build tooling and development server
- **CSS3** for styling

### Project Structure (Key Files)

```
src/
├── App.tsx          # Main game component, logic, and JSX structure
├── App.css          # Styling for the game
├── main.tsx         # Application entry point
└── index.css        # Global styles (if any beyond App.css)

public/
├── index.html       # HTML template
└── ...              # Other static assets like favicons
```

## 📱 Mobile Support

The game is designed to be responsive and playable on various devices, including desktops, tablets, and mobile phones.

## 🤝 Contributing

Contributions are welcome! Please follow standard Git practices:

1.  Fork the repository.
2.  Create a new branch for your feature (`git checkout -b feature/YourFeature`).
3.  Commit your changes (`git commit -m 'Add some feature'`).
4.  Push to the branch (`git push origin feature/YourFeature`).
5.  Open a Pull Request.

## 📄 License

This project is typically licensed under the MIT License (please verify if a `LICENSE` file exists or add one as appropriate).

## 🎓 Age Recommendation

This game is suitable for children typically in **Preschool to early Elementary grades (ages 3-7)** who are beginning to learn:

-   Number identification
-   Basic counting
-   The concept of addition

It can serve as a fun tool for parents and educators to introduce and reinforce these early math skills.

---

Made with ❤️ for young learners everywhere!