🐔 The Chicken Game

A risk-reward gambling-style web game where players bet credits to move a chicken across traffic lanes. Each lane increases your multiplier, but also increases the chance of crashing. Players must decide when to cash out before the chicken gets hit!

Brief Summary

The Chicken Game is an interactive web application that combines gambling mechanics with a fun, visual chicken-crossing-the-road theme. Players place bets, choose difficulty levels, and attempt to cross multiple lanes of traffic. Each successful crossing increases the multiplier, but the risk of crashing also increases. The goal is to cash out at the right time to maximize winnings while avoiding crashes.

Live Deployment

https://chicken-game-eta.vercel.app/

Video Demo

https://www.awesomescreenshot.com/video/48689941?key=1d6a21f9c35fec7b913befbc6b41c76e

Features Included

Frontend

Components

• 11+ modular React components including:
  • App.jsx, GameBoard.jsx, ControlPanel.jsx, TopBar.jsx, AuthModal.jsx
  • BetSection.jsx, TrafficLayer.jsx, RulesDrawer.jsx, and more

Animations

• CSS keyframe animations: chicken idle/hop, crash shake/flash, cashout flash, traffic movement, road scrolling, pulse/glow effects, modal pop-ins

Mobile Responsiveness

• Fully responsive design with Tailwind CSS breakpoints
• Mobile-first approach with adaptive text sizes and touch-friendly controls

Backend

User Registration / Login / Logout Functionality

• Firebase Authentication for user registration, login, and logout
• Email/password authentication with Firebase Auth
• Session persistence with automatic auth state management
• Secure token-based authentication

API Calls

• Structured API client (src/api/client.js) with authAPI and gameAPI objects
• Firebase Auth integration for authentication
• Firestore integration for user data storage
• Error handling and async/await patterns

Integration with Database

• Firebase Firestore for user data persistence (balances, user profiles)
• Real-time database integration
• User documents stored in Firestore users collection
• Automatic data synchronization

Classes and Objects

• Object-oriented API structure (authAPI, gameAPI objects with methods)
• Helper functions for user management
• Configuration objects for game difficulty and multipliers

Full-Stack Misc

Linking Frontend with Backend Framework

• React frontend integrated with Firebase backend services
• Firebase Authentication for user management
• Firebase Firestore for real-time data persistence
• Structured API client layer with async/await patterns
• Seamless integration between React components and Firebase services

Additional Cool Features

• 4 difficulty levels with different risk/reward profiles
• Infinite lane progression with dynamic multipliers
• Negative EV probability system (house edge)
• Demo mode for guests, add balance feature
• Visual crash/cashout feedback with animations
• Real-time game statistics overlay

Time Spent

Around 4-5 hours of time spent

Running the Project

Prerequisites

• Node.js (v16+)
• npm or yarn

Installation & Running

1. Clone the repository:

   git clone [your-repo-url]
   cd PennSparkS26

2. Install dependencies:

   npm install

3. Set up Firebase (required for authentication):

   • Create a Firebase project at Firebase Console
   • Enable Authentication → Sign-in method → Email/Password (enable)
   • Create a Firestore Database → Start in test mode (or configure security rules)
   • Get your Firebase config: Project Settings → General → Your apps → Web app
   • Create a .env file in the root directory:

     VITE_FIREBASE_API_KEY=your-api-key-here
     VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
     VITE_FIREBASE_PROJECT_ID=your-project-id
     VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
     VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
     VITE_FIREBASE_APP_ID=your-app-id-here

   Note: Demo mode works without Firebase - you can skip this step to test the game as a guest.

4. Start development server:

   npm run dev

5. Open http://localhost:5173 in your browser

Building for Production

npm run build
npm run preview

Deployment

The project can be deployed to:

• Vercel (recommended): Connect GitHub repo, add Firebase env variables, deploy automatically
• Netlify: Connect repo, add build command npm run build, set publish directory to dist
• Firebase Hosting: Use firebase deploy after configuring Firebase CLI

Important: Make sure to add all Firebase environment variables to your deployment platform's environment settings.

Note: Demo mode works without Firebase setup - users can play as guests without authentication.

How to Play

1. Click "Try Demo" or register/login
2. Set your bet amount
3. Choose difficulty (Easy/Medium/Hard/Daredevil)
4. Click "Start Game" or "Demo Mode"
5. Click "Cross Lane" to advance (multiplier increases, risk increases)
6. Click "Cash Out" to lock in winnings
7. Win: bet × multiplier | Lose: lose your bet if you crash

Tech Stack

• Frontend: React 18, Vite, Tailwind CSS, JavaScript (ES6+)
• Backend: Firebase Authentication, Firebase Firestore
• External Libraries: Firebase SDK v10+

Project Structure

PennSparkS26/
├── src/
│   ├── api/
│   │   └── client.js          # Firebase API integration
│   ├── firebase/
│   │   └── config.js          # Firebase configuration
│   ├── components/
│   │   ├── App.jsx            # Main app with Firebase auth state
│   │   ├── GameBoard.jsx     # Game visualization
│   │   ├── ControlPanel.jsx  # Game controls
│   │   └── ...                # Other components
│   ├── index.css             # Global styles & animations
│   └── main.jsx              # Entry point
├── .env                      # Firebase config (create this)
└── package.json

---

Additional Notes

• Demo Mode: Works without Firebase setup - perfect for testing the game mechanics
• Firebase Required: For user accounts, balance tracking, and data persistence
• Play Money Only: This is a play-money game for entertainment purposes only. No real money is involved.