🌍 Earth Day Waste Sorting Challenge

The Earth Day Waste Sorting Challenge is a fast-paced, educational web game where players drag waste items into the correct recycling, organic, or hazardous bins. Every correct sort teaches a real environmental fact and tracks your estimated real-world impact — kilograms of waste diverted from landfill and CO₂ equivalent saved.

The game features a special Earth Day Mode that activates on April 22nd each year, a curated library of 60+ waste items, five distinct game modes, and a full impact tracker that makes every sort feel meaningful.

• Earth-green color palette (#2d6a4f, #52b788) with parallax scrolling background
• Animated 🌍 globe and "Sort Smarter. Save the Planet." tagline on the home screen
• Animated falling leaves and "🌍 Happy Earth Day!" banner on April 22nd
• "Next Earth Day" countdown displayed year-round

• Curated set of 30 high-impact waste items
• Countdown timer to midnight (end of Earth Day)
• Special "Earth Day Champion" results card with shareable summary
• Green confetti on every correct sort

• Every sort (correct or incorrect) shows a real environmental fact
• Decomposition times, CO₂ figures, and recycling science
• Color-coded borders matching the correct bin category
• "Did you know?" prefix for counterintuitive "trick" items
• Zen mode: facts stay visible until you dismiss them

• Live display of estimated kg of waste diverted from landfill
• Live display of estimated kg CO₂e saved
• Planet Health Bar fills from 0–100% as you sort correctly
• Full-screen celebration at 100%: "You've made a real difference today! 🌍"

• Covers food packaging, garden waste, household chemicals, electronic accessories, construction materials, and medical waste
• Difficulty 1–3 with progressive unlocking
• At least 5 "trick" items (e.g. greasy pizza box → Organic, broken glass → Hazardous)
• Every item has a unique fact of at least 20 words

• base_points × combo_multiplier + speed_bonus + impact_bonus
• Difficulty-weighted base points: 10 / 15 / 25
• Combo multipliers: ×1.0 → ×1.2 → ×1.5 → ×2.0
• Speed bonus (+5 pts) for sorts under 2 seconds
• Impact bonus: floor(impactKg × 10) per item

• Level up every 10 correct sorts
• Difficulty-2 items unlock at Level 4, difficulty-3 at Level 7
• Spawn delay decreases 50ms per level (minimum 200ms)

• Accessibility Mode: +25% font sizes, 64×64px touch targets, high-contrast palette, reduced motion
• Full keyboard navigation: Tab/arrow keys to cycle bins, Enter/Space to confirm
• ARIA labels on all bins and draggable items
• WCAG 2.1 AA contrast compliance

• "About Earth Day" screen: history (founded 1970), global significance, 3 actionable tips
• "Did You Know?" rotating fact panel on the home screen (10 facts, 5s interval)
• Visual Recycling Guide: all 6 categories with 5 example items each
• "Take Action" suggestions on the results screen

• Node.js 18 or later
• npm 9 or later

# Clone the repository
git clone https://github.com/mohamednizzad/Waste-Sorting-Challenge.git
cd Waste-Sorting-Challenge

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 in your browser.

npm run build
npm run preview

src/
├── components/
│   ├── GameScreen.tsx          # Main game layout (refactored from WasteGame)
│   ├── HomeScreen.tsx          # Home screen with Earth Day theme
│   ├── ModeSelectScreen.tsx    # Game mode selection
│   ├── ResultsScreen.tsx       # End-of-session results
│   ├── AboutEarthDayScreen.tsx # Earth Day educational hub
│   ├── RecyclingGuideScreen.tsx# Visual recycling guide
│   ├── DraggableItem.tsx       # Draggable waste item card
│   ├── DroppableBin.tsx        # Droppable bin target
│   ├── FactCard.tsx            # Post-sort educational fact panel
│   ├── ImpactTrackerPanel.tsx  # Live impact metrics display
│   ├── PlanetHealthBar.tsx     # Progress bar toward 100% impact
│   └── EarthDayOverlay.tsx     # April 22nd decorations
├── hooks/
│   ├── useGameEngine.ts        # Full game loop logic
│   ├── useEarthDay.ts          # Earth Day detection (injectable clock)
│   └── useAccessibility.ts    # Accessibility mode (localStorage)
├── logic/
│   ├── scoring.ts              # Pure scoring functions
│   ├── levelGating.ts          # Level/difficulty/spawn logic
│   ├── impactCalc.ts           # Impact accumulation + planet health
│   ├── performanceRating.ts    # Eco Novice → Eco Champion rating
│   ├── sessionSerializer.ts    # JSON round-trip serialization
│   └── prettyPrinter.ts        # Human-readable session summary
├── data/
│   ├── gameData.ts             # WasteItem + CategoryInfo + 60+ items
│   └── earthDayData.ts         # Facts, tips, Earth Day theme, tags
├── App.tsx                     # Screen navigation state machine
├── main.tsx                    # React entry point
└── index.css                   # Global styles + accessibility overrides

The project uses Vitest for unit tests and fast-check for property-based testing. 18 correctness properties are verified across all pure logic modules.

# Run all tests (single pass)
npx vitest --run

# Run tests in watch mode
npx vitest

Key property tests include:

• Eco_Score formula correctness — for any valid inputs, the formula holds exactly
• Score never goes negative — for any sequence of sorts, score ≥ 0
• Session serialization round-trip — serialize → deserialize produces identical state
• Malformed input never throws — deserializer always returns an error object, never throws
• Level gating difficulty ceiling — available items always respect the current level cap

Earth Day Mode activates automatically on April 22nd each year. It presents a curated set of 30 waste items chosen for their real-world environmental impact, displays a countdown to midnight, and awards an "Earth Day Champion" results card on completion.

On all other days, the home screen shows a "Next Earth Day" countdown so players always know how many days remain.

Eco_Score = floor(base_points × combo_multiplier) + speed_bonus + impact_bonus

Base points:     Difficulty 1 → 10 pts | Difficulty 2 → 15 pts | Difficulty 3 → 25 pts
Combo multiplier: ×1.0 (1–2) | ×1.2 (3–4) | ×1.5 (5–9) | ×2.0 (10+)
Speed bonus:     +5 pts if sorted within 2 seconds (not in Zen mode)
Impact bonus:    floor(impactKg × 10) pts per item
Wrong sort:      −5 pts (minimum 0), combo resets to 0

Contributions are welcome! If you want to add more waste items, improve educational facts, or enhance accessibility, please open an issue or pull request.

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-improvement
3. Commit your changes: git commit -m 'Add more organic waste items'
4. Push to the branch: git push origin feature/my-improvement
5. Open a Pull Request

MIT License — see LICENSE for details.

Crafted By Mohamed Nizzad with 💝 for Google AI Studio motivated by Dev.to.