addition game

README.md

@@ -1,55 +1,53 @@
 ---
-title: Equal 2-Step Game
-emoji: ⚖️
-colorFrom: blue
-colorTo: purple
+title: Addition Game
+emoji: ➕
+colorFrom: green
+colorTo: blue
 sdk: docker
 pinned: false
-app_port: 7860
+app_port: 7860 # Assuming Vite default port, adjust if different after changes
 ---
+# Simple Addition Game ➕
 
-# 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!
+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 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
+The game presents a simple addition problem (e.g., `1 + 2 = ?`).
 
-### Game Flow
-1. **Equal sides**: Step 1 → Correct answer → New question
-2. **Unequal sides**: Step 1 → Step 2 → Correct answer → New question
+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 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
+- **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
 
-### Option 1: Development Mode
+This project is built with React (using Vite) and TypeScript.
+
+### Development Mode
 
 ```bash
-# Clone the repository
-git clone <repository-url>
-cd equal-2-step-game
+# Clone the repository (if you haven't already)
+# git clone <repository-url>
+# cd <repository-name>
 
 # Install dependencies
 npm install
@@ -58,9 +56,9 @@ npm install
 npm run dev
 ```
 
-The game will be available at `http://localhost:5173`
+The game will typically be available at `http://localhost:5173` (Vite's default port).
 
-### Option 2: Production Build
+### Production Build
 
 ```bash
 # Build for production
@@ -70,122 +68,83 @@ npm run build
 npm run preview
 ```
 
-### Option 3: Docker
+### 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
-docker build -t equal-2-step-game .
+# Build Docker image (example name)
+docker build -t addition-game .
 
-# Run container
-docker run -p 3000:3000 equal-2-step-game
+# Run container (example mapping to port 3000 on host)
+docker run -p 3000:5173 addition-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
+- **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.
 
-## 🎨 Game Categories
+## 🎨 Emoji Pool
 
-The game uses emojis from 5 different categories:
+The game uses a diverse pool of emojis to represent objects, including:
+🍎 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍒 🥝 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐸 🐷 ⚽ 🏀 🎾 🏈 🎱 🎨 🎭 🎯 🚗 🚕 🚓 🚑 🚁 🚀
 
-- **Animals**: 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐸 🐷
-- **Fruits**: 🍎 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍒 🥝
-- **Objects**: ⚽ 🏀 🎾 🏈 🎱 🎪 🎨 🎭 🎪 🎯
-- **Hearts**: 💙 💚 💛 💜 🤍 🖤 🤎 💗 💖 💕
-- **Stars**: ⭐ 🌟 💫 ✨ 🌠 ⚡ 🔥 ❄️ ☀️ 🌙
+This pool can be easily modified in `src/App.tsx`.
 
 ## 🛠️ Technical Details
 
 ### Technologies Used
-- **React 19** with TypeScript
-- **Vite** for build tooling
-- **CSS3** with modern features (Grid, Flexbox, Animations)
-- **Docker** for deployment
 
-### Project Structure
+- **React** with TypeScript
+- **Vite** for build tooling and development server
+- **CSS3** for styling
+
+### Project Structure (Key Files)
+
 ```
 src/
-├── App.tsx          # Main game component
-├── App.css          # Game styling
-├── main.tsx         # App entry point
-└── index.css        # Global styles
+├── 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/
-├── 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...
-};
+├── index.html       # HTML template
+└── ...              # Other static assets like favicons
 ```
 
 ## 📱 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...
+The game is designed to be responsive and playable on various devices, including desktops, tablets, and mobile phones.
 
 ## 🤝 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
+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
 
-MIT License - feel free to use this project for educational purposes!
+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 designed for children ages **3-8** who are learning:
-- Basic counting (1-10)
-- Equality concepts
-- Comparison skills
-- Visual recognition
+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
 
-Perfect for:
-- **Preschool** mathematics preparation
-- **Kindergarten** counting practice
-- **Early elementary** comparison skills
-- **Special education** visual learning support
+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!
+Made with ❤️ for young learners everywhere!

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "equal-2-step-game",
+  "name": "preposition-learning-game",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "equal-2-step-game",
+      "name": "preposition-learning-game",
       "version": "1.0.0",
       "dependencies": {
         "react": "^19.0.0",

src/App.css

@@ -1,282 +1,334 @@
-/* Main container */
-.equal-game {
-  min-height: 100vh;
+/* General App Styles */
+body {
+  font-family: 'Arial', sans-serif;
+  background-color: #f0f8ff; /* Light alice blue */
+  color: #333;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  padding: 2rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  font-family: 'Arial', sans-serif;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  padding: 20px;
+  box-sizing: border-box;
 }
 
-/* Loading state */
-.loading {
+.app-container {
+  background-color: #fff;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 100%;
+  max-width: 900px; /* Max width adjusted for new layout */
+}
+
+.game-header {
+  margin-bottom: 30px;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  height: 100vh;
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: white;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.game-header h1 {
+  font-size: 2.5rem; 
+  color: #007bff; 
+  margin: 0;
+}
+
+.display-mode-selector button {
+  font-size: 1.3rem; 
+  padding: 10px 18px;
+  margin: 0 8px;
+  border: 2px solid #007bff;
+  background-color: #fff;
+  color: #007bff;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.display-mode-selector button:hover {
+  background-color: #0056b3;
+  color: #fff;
+}
+
+.display-mode-selector button.active {
+  background-color: #007bff;
+  color: #fff;
 }
 
-/* Question title */
-.question-title {
-  font-size: 3rem;
+.score-display {
+  font-size: 1.6rem; 
   font-weight: bold;
-  color: white;
-  text-align: center;
-  margin-bottom: 2rem;
-  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+  color: #28a745; 
+}
+
+/* Game Area Styles */
+.game-area {
+  padding: 20px;
+}
+
+/* New Question Container for 5-column layout */
+.question-container-new {
+  display: flex;
+  justify-content: space-around; /* Distribute columns */
+  align-items: flex-start; /* Align tops of columns */
+  background-color: #fffacd; /* Light yellow background like image */
+  padding: 20px;
+  border-radius: 15px;
+  margin-bottom: 30px;
+  border: 1px solid #ddd; /* Soft border */
 }
 
-/* Comparison container */
-.comparison-container {
+.operand-column, .result-column {
   display: flex;
+  flex-direction: column;
   align-items: center;
+  justify-content: center; /* Center content like the question mark */
+  gap: 15px; 
+  flex: 1; 
+  padding: 10px;
+  min-height: 150px; /* Ensure it has some height to center the ? vertically */
+}
+
+.number-box {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  padding: 20px 30px;
+  min-width: 80px; /* Minimum width for the number box */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  display: inline-flex; /* To make it wrap content tightly */
   justify-content: center;
-  gap: 3rem;
-  margin-bottom: 3rem;
-  flex-wrap: wrap;
+  align-items: center;
 }
 
-/* Side container */
-.side-container {
-  background: white;
-  border-radius: 20px;
-  padding: 2rem;
-  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
-  min-width: 300px;
-  max-width: 400px;
+.number-text {
+  font-size: 3.5rem; /* Large numbers */
+  font-weight: bold;
+  color: #333;
+}
+
+.objects-display {
   display: flex;
-  flex-direction: column;
+  flex-direction: column; /* Stack objects vertically as in image */
+  justify-content: center;
   align-items: center;
-  gap: 1rem;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  gap: 8px; 
+  min-height: 60px; /* Base height even if empty */
+  width: 100%; 
 }
 
-.side-container.clickable {
-  cursor: pointer;
+.item-object {
+  font-size: 2.5rem !important; /* Adjusted emoji size */
+  padding: 2px;
 }
 
-.side-container.clickable:hover {
-  transform: scale(1.05);
-  box-shadow: 0 12px 35px rgba(0,0,0,0.2);
+.operator-cell {
+  display: flex;
+  flex-direction: column; /* To center operator and have line above/below */
+  align-items: center;
+  justify-content: center; /* Center the operator symbol vertically */
+  position: relative; /* For pseudo-elements for lines */
+  align-self: stretch; /* Make cell take full height of question-container-new */
+  padding: 0 20px; /* Horizontal padding around operator */
 }
 
-/* Emoji grid */
-.emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
-  gap: 8px;
-  max-width: 300px;
-  justify-items: center;
+.operator-cell::before, .operator-cell::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2px; /* Width of the vertical line */
+  background-color: #bdbdbd; /* Color of the vertical line */
+  height: calc(50% - 25px); /* Adjust based on operator symbol size and desired gap */
 }
 
-.emoji-item {
-  font-size: 2rem;
-  display: block;
-  animation: popIn 0.3s ease-out;
+.operator-cell::before {
+  top: 0;
 }
 
-@keyframes popIn {
-  0% {
-    transform: scale(0);
-  }
-  80% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
+.operator-cell::after {
+  bottom: 0;
 }
 
-/* Count display */
-.count-display {
-  font-size: 2.5rem;
+.operator-symbol {
+  font-size: 2rem; 
   font-weight: bold;
-  color: #333;
-  background: #f0f0f0;
+  color: #555;
+  background-color: #fff;
+  border: 2px solid #bdbdbd;
   border-radius: 50%;
-  width: 80px;
-  height: 80px;
+  width: 40px;
+  height: 40px;
   display: flex;
-  align-items: center;
   justify-content: center;
-  border: 3px solid #ddd;
+  align-items: center;
+  z-index: 1; /* To appear above the pseudo-element lines */
 }
 
-/* VS divider */
-.vs-divider {
-  font-size: 2rem;
+.answer-placeholder-new {
+  font-size: 4rem; /* Large question mark */
   font-weight: bold;
-  color: white;
-  background: rgba(255,255,255,0.2);
-  border-radius: 50%;
-  width: 80px;
-  height: 80px;
+  color: #dc3545; /* Red color or similar to operand numbers */
   display: flex;
-  align-items: center;
   justify-content: center;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+  align-items: center;
+  /* If it needs a box like numbers, we can add similar styling to .number-box here */
+  /* For now, just a large character */
 }
 
-/* Answer buttons for step 1 */
-.answer-buttons {
+/* Options Styles - Assuming these are still relevant */
+.options-container {
   display: flex;
-  gap: 2rem;
   justify-content: center;
-  flex-wrap: wrap;
+  gap: 20px; 
+  margin-bottom: 30px;
 }
 
-.answer-btn {
-  padding: 1.5rem 3rem;
-  font-size: 1.5rem;
+.option-button {
+  font-size: 2.5rem; 
   font-weight: bold;
-  border: none;
+  padding: 20px 35px;
+  border: 3px solid #28a745; 
+  background-color: #fff;
+  color: #28a745;
   border-radius: 15px;
   cursor: pointer;
-  transition: all 0.3s ease;
-  min-width: 150px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+  transition: background-color 0.3s, color 0.3s, transform 0.2s;
+  min-width: 90px; 
 }
 
-.equal-btn {
-  background: linear-gradient(45deg, #4CAF50, #45a049);
-  color: white;
+.option-button:hover {
+  background-color: #218838; 
+  color: #fff;
+  transform: translateY(-3px); 
 }
 
-.equal-btn:hover {
-  background: linear-gradient(45deg, #45a049, #4CAF50);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
-}
-
-.not-equal-btn {
-  background: linear-gradient(45deg, #f44336, #d32f2f);
-  color: white;
+/* Feedback Message Styles */
+.feedback-message {
+  font-size: 1.8rem; 
+  font-weight: bold;
+  margin-top: 25px;
+  padding: 15px;
+  border-radius: 10px;
+  color: #fff;
+  /* Assuming JS still sets background color for correct/incorrect, or do it here */
 }
 
-.not-equal-btn:hover {
-  background: linear-gradient(45deg, #d32f2f, #f44336);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+.feedback-message:empty {
+    display: none;
 }
 
-/* Step 2 instruction */
-.step2-instruction {
-  font-size: 1.2rem;
-  color: white;
+/* Loading State */
+.loading {
+  font-size: 2rem;
   text-align: center;
-  margin-top: 1rem;
-  background: rgba(255,255,255,0.1);
-  padding: 1rem 2rem;
-  border-radius: 10px;
-  backdrop-filter: blur(10px);
+  padding: 50px;
+  color: #007bff;
 }
 
-/* Feedback message */
-.feedback-message {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  color: #333;
-  font-size: 2rem;
-  font-weight: bold;
-  padding: 2rem 3rem;
-  border-radius: 20px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-  z-index: 1000;
-  animation: feedbackPop 0.5s ease-out;
-}
+/* Remove old styles that are no longer used */
+/* .question-container, .operand-stack, .operator, .answer-placeholder (and their media queries if specific) */
 
-@keyframes feedbackPop {
-  0% {
-    transform: translate(-50%, -50%) scale(0);
+/* Responsive adjustments for the new layout */
+@media (max-width: 768px) {
+  .game-header h1 {
+    font-size: 2rem;
   }
-  80% {
-    transform: translate(-50%, -50%) scale(1.1);
+  .display-mode-selector button {
+    font-size: 1.1rem;
+    padding: 8px 12px;
   }
-  100% {
-    transform: translate(-50%, -50%) scale(1);
+  .score-display {
+    font-size: 1.3rem;
   }
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .question-title {
-    font-size: 2rem;
-    margin-bottom: 1.5rem;
+  .question-container-new {
+    flex-direction: column; /* Stack columns vertically on smaller screens */
+    align-items: center; /* Center columns when stacked */
+    padding: 15px;
   }
-  
-  .comparison-container {
-    gap: 2rem;
-    flex-direction: column;
+  .operand-column, .result-column {
+    width: 100%; /* Make columns take full width when stacked */
+    max-width: 300px; /* Limit width of operand columns */
+    gap: 10px;
   }
-  
-  .side-container {
-    min-width: 250px;
-    max-width: 300px;
-    padding: 1.5rem;
+  .operator-cell {
+    flex-direction: row; /* Operators side by side with lines */
+    align-self: auto; /* Reset self-stretch */
+    padding: 10px 0;
+    width: 80%;
+    max-width: 250px;
   }
-  
-  .vs-divider {
-    width: 60px;
-    height: 60px;
-    font-size: 1.5rem;
+  .operator-cell::before, .operator-cell::after {
+    width: calc(50% - 25px); /* Horizontal lines */
+    height: 2px;
+    top: 50%;
+    transform: translateY(-50%);
   }
-  
-  .emoji-item {
-    font-size: 1.5rem;
+  .operator-cell::before {
+    left: 0;
   }
-  
-  .count-display {
-    width: 60px;
-    height: 60px;
-    font-size: 2rem;
+  .operator-cell::after {
+    right: 0;
+    left: auto; /* Override previous left: 50% */
   }
-  
-  .answer-buttons {
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
+  .number-text {
+    font-size: 2.8rem;
   }
-  
-  .answer-btn {
-    padding: 1rem 2rem;
-    font-size: 1.2rem;
-    min-width: 200px;
+  .item-object {
+    font-size: 2rem !important;
+  }
+  .operator-symbol {
+    font-size: 1.5rem;
+    width: 35px;
+    height: 35px;
+  }
+  .options-container {
+    flex-direction: column; 
+    gap: 10px;
+  }
+  .option-button {
+    font-size: 2rem;
+    padding: 15px 25px;
   }
-  
   .feedback-message {
     font-size: 1.5rem;
-    padding: 1.5rem 2rem;
   }
 }
 
 @media (max-width: 480px) {
-  .equal-game {
-    padding: 1rem;
+  .game-header {
+    flex-direction: column;
+    gap: 10px;
   }
-  
-  .question-title {
-    font-size: 1.5rem;
+  .game-header h1 {
+    font-size: 1.6rem;
   }
-  
-  .side-container {
-    min-width: 200px;
-    max-width: 250px;
-    padding: 1rem;
+   .display-mode-selector button {
+    font-size: 1rem;
+    padding: 6px 10px;
+  }
+  .number-text {
+    font-size: 2.2rem; 
   }
-  
-  .emoji-grid {
-    max-width: 200px;
+  .item-object {
+    font-size: 1.8rem !important;
   }
-  
-  .emoji-item {
-    font-size: 1.2rem;
+  .operator-symbol {
+    font-size: 1.3rem;
+    width: 30px;
+    height: 30px;
   }
+  .option-button {
+    font-size: 1.6rem;
+    padding: 12px 20px;
+  }
+}
+
+/* Clean up old, unused styles - This should be done carefully after verifying */
+.question-container, .operand-stack, .operator, .answer-placeholder, .result-objects-display {
+    display: none !important; /* Hide them if they are still in the DOM somehow */
 }

src/App.tsx

@@ -1,263 +1,202 @@
 import { useState, useEffect } from 'react'
 import './App.css'
 
-// Game question structure
-interface ComparisonQuestion {
-  leftSide: string[];
-  rightSide: string[];
-  isEqual: boolean;
-  secondStepQuestion: 'more' | 'fewer';
+// Define the types for the game
+type DisplayMode = 'numbers' | 'objects' | 'both';
+
+interface AdditionQuestion {
+  num1: number;
+  num2: number;
+  answer: number;
+  options: number[];
+  object1: string;
+  object2: string;
 }
 
-// Game states
-type GameStep = 'step1' | 'step2' | 'correct-step1' | 'correct-step2';
+// Emoji pool
+const emojis = ['🍎', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍒', '🥝', '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐸', '🐷', '⚽', '🏀', '🎾', '🏈', '🎱', '🎨', '🎭', '🎯', '🚗', '🚕', '🚓', '🚑', '🚁', '🚀'];
 
 function App() {
-  const [currentQuestion, setCurrentQuestion] = useState<ComparisonQuestion | null>(null);
-  const [gameStep, setGameStep] = useState<GameStep>('step1');
+  const [currentQuestion, setCurrentQuestion] = useState<AdditionQuestion | null>(null);
+  const [displayMode, setDisplayMode] = useState<DisplayMode>('numbers');
   const [feedback, setFeedback] = useState('');
-  const [showFeedback, setShowFeedback] = useState(false);
+  const [score, setScore] = useState(0);
 
-  // Emoji pools for different categories
-  const emojiCategories = {
-    animals: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐸', '🐷'],
-    fruits: ['🍎', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍒', '🥝'],
-    objects: ['⚽', '🏀', '🎾', '🏈', '🎱', '🎪', '🎨', '🎭', '🎪', '🎯'],
-    hearts: ['💙', '💚', '💛', '💜', '🤍', '🖤', '🤎', '💗', '💖', '💕'],
-    stars: ['⭐', '🌟', '💫', '✨', '🌠', '⚡', '🔥', '❄️', '☀️', '🌙']
+  // Generate a random number between min and max (inclusive)
+  const getRandomNumber = (min: number, max: number) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
   };
 
-  // Generate a random question
-  const generateQuestion = (): ComparisonQuestion => {
-    const categories = Object.keys(emojiCategories) as (keyof typeof emojiCategories)[];
-    const selectedCategory = categories[Math.floor(Math.random() * categories.length)];
-    const emojis = emojiCategories[selectedCategory];
-    
-    // Pick a random emoji for this question
-    const emoji = emojis[Math.floor(Math.random() * emojis.length)];
-    
-    // Generate counts (1-10)
-    const leftCount = Math.floor(Math.random() * 10) + 1;
-    let rightCount = Math.floor(Math.random() * 10) + 1;
-    
-    // 50% chance of making them equal
-    const shouldBeEqual = Math.random() < 0.5;
-    if (shouldBeEqual) {
-      rightCount = leftCount;
+  // Helper function to get an operand (0-5) with a reduced chance of it being 0
+  const getOperandWithReducedZero = (maxValue: number): number => {
+    const CHANCE_OF_BEING_ZERO = 0.10; // 10% chance the operand is 0
+
+    if (maxValue < 0) maxValue = 0; // Ensure maxValue is not negative
+    if (maxValue === 0) return 0; // If max is 0, operand must be 0
+
+    if (Math.random() < CHANCE_OF_BEING_ZERO) {
+      return 0;
+    } else {
+      // Generate a number from 1 to maxValue
+      return getRandomNumber(1, maxValue);
     }
-    
-    // Create arrays with repeated emoji
-    const leftSide = Array(leftCount).fill(emoji);
-    const rightSide = Array(rightCount).fill(emoji);
-    
-    // Determine second step question type
-    const secondStepQuestion: 'more' | 'fewer' = Math.random() < 0.5 ? 'more' : 'fewer';
-    
-    return {
-      leftSide,
-      rightSide,
-      isEqual: leftCount === rightCount,
-      secondStepQuestion
-    };
   };
 
-  // Initialize with first question
-  useEffect(() => {
-    setCurrentQuestion(generateQuestion());
-  }, []);
+  // Get a random emoji
+  const getRandomEmoji = () => {
+    return emojis[Math.floor(Math.random() * emojis.length)];
+  };
 
-  // Safety effect: if we're in step 2 but sides are equal, generate new question
-  useEffect(() => {
-    if (currentQuestion && 
-        (gameStep === 'step2' || gameStep === 'correct-step2') && 
-        currentQuestion.leftSide.length === currentQuestion.rightSide.length) {
-      // Generate new question and go back to step 1
-      setTimeout(() => {
-        setCurrentQuestion(generateQuestion());
-        setGameStep('step1');
-      }, 1000);
-    }
-  }, [currentQuestion, gameStep]);
+  // Generate a new question
+  const generateQuestion = () => {
+    let num1, num2;
+    const MAX_OPERAND_VALUE = 5;
+    const MAX_SUM = 5;
 
-  // Handle step 1 answer (equal/not equal)
-  const handleStep1Answer = (answer: 'equal' | 'not-equal') => {
-    if (!currentQuestion) return;
-    
-    const isCorrect = (answer === 'equal') === currentQuestion.isEqual;
-    
-    if (isCorrect) {
-      setFeedback('Correct! 🎉');
-      setShowFeedback(true);
-      setGameStep('correct-step1');
-      
-      // If they correctly identified as "equal", generate new question
-      // If they correctly identified as "not equal", proceed to step 2
-      if (answer === 'equal') {
-        // Generate new question after delay
-        setTimeout(() => {
-          setCurrentQuestion(generateQuestion());
-          setGameStep('step1');
-          setShowFeedback(false);
-          setFeedback('');
-        }, 2000);
-      } else {
-        // Proceed to step 2 only if they are NOT equal
-        setTimeout(() => {
-          setGameStep('step2');
-          setShowFeedback(false);
-          setFeedback('');
-        }, 1500);
+    do {
+      num1 = getOperandWithReducedZero(MAX_OPERAND_VALUE);
+      num2 = getOperandWithReducedZero(MAX_OPERAND_VALUE);
+    } while (num1 + num2 > MAX_SUM);
+
+    const answer = num1 + num2;
+
+    // Generate options, one of which is the correct answer
+    const options = new Set<number>();
+    options.add(answer);
+    while (options.size < 3) {
+      const option = getRandomNumber(0, 10); // Options can be up to 10
+      if (option !== answer) { // Ensure options are not trivially easy if sum is 0 or 1
+          options.add(option);
       }
-    } else {
-      setFeedback('Try again! 🤔');
-      setShowFeedback(true);
-      setTimeout(() => {
-        setShowFeedback(false);
-        setFeedback('');
-      }, 1000);
     }
-  };
 
-  // Handle step 2 answer (more/fewer)
-  const handleStep2Answer = (answer: 'left' | 'right') => {
-    if (!currentQuestion) return;
-    
-    const leftCount = currentQuestion.leftSide.length;
-    const rightCount = currentQuestion.rightSide.length;
-    
-    // Safety check: if sides are equal, this shouldn't happen in step 2
-    if (leftCount === rightCount) {
-      // Generate new question and go back to step 1
-      setCurrentQuestion(generateQuestion());
-      setGameStep('step1');
-      return;
-    }
-    
-    let isCorrect = false;
-    
-    if (currentQuestion.secondStepQuestion === 'more') {
-      if (leftCount > rightCount && answer === 'left') isCorrect = true;
-      if (rightCount > leftCount && answer === 'right') isCorrect = true;
-    } else { // fewer
-      if (leftCount < rightCount && answer === 'left') isCorrect = true;
-      if (rightCount < leftCount && answer === 'right') isCorrect = true;
+    const object1 = getRandomEmoji();
+    let object2 = getRandomEmoji();
+    // Ensure objects are different if numbers are different, or if it's the same number, it's fine.
+    // This logic primarily ensures visual distinction when counts are different.
+    if (num1 > 0 && num2 > 0 && num1 !== num2) { // only ensure different emojis if counts are different and non-zero
+        while (object2 === object1) {
+            object2 = getRandomEmoji();
+        }
+    } else if (num1 > 0 && num2 > 0 && num1 === num2) { // if numbers are same and non-zero, make sure emojis are same for clarity
+        object2 = object1;
     }
-    
-    if (isCorrect) {
-      setFeedback('Excellent! 🌟');
-      setShowFeedback(true);
-      setGameStep('correct-step2');
-      
-      // Generate new question after delay
+
+
+    setCurrentQuestion({
+      num1,
+      num2,
+      answer,
+      options: Array.from(options).sort(() => Math.random() - 0.5), // Shuffle options
+      object1,
+      object2,
+    });
+    setFeedback('');
+  };
+
+  useEffect(() => {
+    generateQuestion();
+  }, []);
+
+  // Handle answer submission
+  const handleAnswer = (selectedOption: number) => {
+    if (currentQuestion && selectedOption === currentQuestion.answer) {
+      setFeedback('Correct! 🎉');
+      setScore(score + 1);
       setTimeout(() => {
-        setCurrentQuestion(generateQuestion());
-        setGameStep('step1');
-        setShowFeedback(false);
-        setFeedback('');
-      }, 2000);
-    } else {
+        generateQuestion();
+      }, 1500);
+    } else if (currentQuestion) { // Added currentQuestion check here
       setFeedback('Try again! 🤔');
-      setShowFeedback(true);
       setTimeout(() => {
-        setShowFeedback(false);
         setFeedback('');
       }, 1000);
     }
   };
 
-  // Render emoji grid
-  const renderEmojiSide = (emojis: string[], side: 'left' | 'right') => {
-    const gridClass = `emoji-grid ${side}`;
-    return (
-      <div className={gridClass}>
-        {emojis.map((emoji, index) => (
-          <span key={index} className="emoji-item">
-            {emoji}
-          </span>
-        ))}
-      </div>
-    );
-  };
-
   if (!currentQuestion) {
-    return <div className="loading">Loading...</div>;
+    return <div className="loading">Loading game...</div>;
   }
 
+  const { num1, num2, answer, options, object1, object2 } = currentQuestion;
+  // const sumObject = object1; // No longer needed as sum is not displayed with objects here
+
   return (
-    <div className="equal-game">
-      {gameStep === 'step1' || gameStep === 'correct-step1' ? (
-        // Step 1: Are they equal?
-        <>
-          <h1 className="question-title">Are they equal?</h1>
-          
-          <div className="comparison-container">
-            <div className="side-container">
-              {renderEmojiSide(currentQuestion.leftSide, 'left')}
-              <div className="count-display">{currentQuestion.leftSide.length}</div>
-            </div>
-            
-            <div className="vs-divider">VS</div>
-            
-            <div className="side-container">
-              {renderEmojiSide(currentQuestion.rightSide, 'right')}
-              <div className="count-display">{currentQuestion.rightSide.length}</div>
-            </div>
+    <div className="app-container">
+      <header className="game-header">
+        <h1>Addition Game</h1>
+        <div className="display-mode-selector">
+          <button onClick={() => setDisplayMode('numbers')} className={displayMode === 'numbers' ? 'active' : ''}>Number</button>
+          <button onClick={() => setDisplayMode('objects')} className={displayMode === 'objects' ? 'active' : ''}>Object</button>
+          <button onClick={() => setDisplayMode('both')} className={displayMode === 'both' ? 'active' : ''}>Both</button>
+        </div>
+        <div className="score-display">Score: {score}</div>
+      </header>
+
+      <main className="game-area">
+        <div className="question-container-new">
+          {/* Operand 1 Column */}
+          <div className="operand-column">
+            {(displayMode === 'numbers' || displayMode === 'both') && (
+              <div className="number-box">
+                <span className="number-text">{num1}</span>
+              </div>
+            )}
+            {(displayMode === 'objects' || displayMode === 'both') && (
+              <div className="objects-display">
+                {Array(num1).fill(null).map((_, i) => (
+                  <span key={`obj1-${i}`} className="item-object">{object1}</span>
+                ))}
+              </div>
+            )}
+            {/* If only objects mode and num1 is 0, show nothing or a placeholder if desired*/}
+            {displayMode === 'objects' && num1 === 0 && <div className="objects-display" style={{minHeight: '4rem'}}></div>}
           </div>
-          
-          {gameStep === 'step1' && (
-            <div className="answer-buttons">
-              <button 
-                className="answer-btn equal-btn"
-                onClick={() => handleStep1Answer('equal')}
-              >
-                Equal
-              </button>
-              <button 
-                className="answer-btn not-equal-btn"
-                onClick={() => handleStep1Answer('not-equal')}
-              >
-                Not Equal
-              </button>
-            </div>
-          )}
-        </>
-      ) : (
-        // Step 2: Which side has more/fewer? (Only if sides are NOT equal)
-        currentQuestion.leftSide.length !== currentQuestion.rightSide.length ? (
-          <>
-            <h1 className="question-title">
-              Which side has {currentQuestion.secondStepQuestion}?
-            </h1>
-            
-            <div className="comparison-container">
-              <div className="side-container clickable" onClick={() => handleStep2Answer('left')}>
-                {renderEmojiSide(currentQuestion.leftSide, 'left')}
-                <div className="count-display">{currentQuestion.leftSide.length}</div>
+
+          {/* Operator + Column */}
+          <div className="operator-cell">
+            <span className="operator-symbol">+</span>
+          </div>
+
+          {/* Operand 2 Column */}
+          <div className="operand-column">
+            {(displayMode === 'numbers' || displayMode === 'both') && (
+              <div className="number-box">
+                <span className="number-text">{num2}</span>
               </div>
-              
-              <div className="vs-divider">VS</div>
-              
-              <div className="side-container clickable" onClick={() => handleStep2Answer('right')}>
-                {renderEmojiSide(currentQuestion.rightSide, 'right')}
-                <div className="count-display">{currentQuestion.rightSide.length}</div>
+            )}
+            {(displayMode === 'objects' || displayMode === 'both') && (
+              <div className="objects-display">
+                {Array(num2).fill(null).map((_, i) => (
+                  <span key={`obj2-${i}`} className="item-object">{object2}</span>
+                ))}
               </div>
-            </div>
-            
-            <div className="step2-instruction">
-              Click on the side with {currentQuestion.secondStepQuestion} items
-            </div>
-          </>
-        ) : (
-          // If somehow we get to step 2 with equal sides, generate new question
-          <div className="loading">Generating new question...</div>
-        )
-      )}
-      
-      {showFeedback && (
-        <div className="feedback-message">
-          {feedback}
+            )}
+            {displayMode === 'objects' && num2 === 0 && <div className="objects-display" style={{minHeight: '4rem'}}></div>}
+          </div>
+
+          {/* Operator = Column */}
+          <div className="operator-cell">
+            <span className="operator-symbol">=</span>
+          </div>
+
+          {/* Result Column - Now displays a question mark */}
+          <div className="result-column">
+            <span className="answer-placeholder-new">?</span>
+          </div>
+
         </div>
-      )}
+
+        <div className="options-container">
+          {options.map((option) => (
+            <button key={option} onClick={() => handleAnswer(option)} className="option-button">
+              {option}
+            </button>
+          ))}
+        </div>
+
+        {feedback && <div className="feedback-message">{feedback}</div>}
+      </main>
     </div>
   );
 }