A mobile-friendly React web application for playing the classic Judgement card game with friends. Built with React, Tailwind CSS, and Firebase for real-time multiplayer gameplay.

Judgement is a trick-taking card game where 4 players compete to win the most hands:

• Players: Exactly 4 players required
• Cards: Each player gets 13 cards (5 initially, then 8 more after trump selection)
• Trump: One player selects the trump suit after seeing their first 5 cards
• Objective: Win the most hands to be declared the winner
• Rules: Follow suit if possible, trump cards beat non-trump cards

• ✅ Real-time multiplayer for 4 players
• ✅ Google Authentication with Gmail
• ✅ Trump suit selection mechanism
• ✅ Card validation and turn management
• ✅ Automatic hand winner determination
• ✅ Live scoring and leaderboard
• ✅ Game completion and winner announcement

• 📱 Mobile-first responsive design
• ⚡ Real-time updates via Firebase Realtime Database
• 🔐 Secure Google OAuth authentication
• 🎨 Beautiful UI with Tailwind CSS
• 🎮 Touch-optimized card interactions
• 💨 Fast development with Vite
• 🔄 Hot module replacement (HMR)
• 🔴 Redux Toolkit for state management
• 🔥 Firebase middleware for real-time sync

• Frontend: React 18 + Vite
• State Management: Redux Toolkit + React-Redux
• Styling: Tailwind CSS
• Backend: Firebase (Authentication + Realtime Database)
• Deployment: Ready for Vercel/Netlify

• Node.js 16+ and npm
• Firebase project with Authentication and Realtime Database enabled
• Google OAuth configured in Firebase Console

1. Go to Firebase Console
2. Create a new project
3. Enable Google Analytics (optional)

1. In Firebase Console, go to Authentication > Sign-in method
2. Enable Google provider
3. Add your domain to authorized domains

1. Go to Realtime Database in Firebase Console
2. Create database in test mode
3. Choose your preferred location
4. Update security rules:

{
  "rules": {
    "games": {
      "$gameId": {
        ".read": true,
        ".write": true,
        "players": {
          "$uid": {
            ".validate": "$uid === auth.uid"
          }
        }
      }
    }
  }
}

1. Go to Project Settings > General
2. Scroll down to Your apps
3. Click Web app and register your app
4. Copy the config object

# Clone the repository
git clone <your-repo-url>
cd judgement-card-game

# Install dependencies
npm install

Update src/firebase.js with your Firebase configuration:

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  databaseURL: "https://your-project-default-rtdb.firebaseio.com/",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "your-app-id",
  measurementId: "your-measurement-id",
};

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

• Sign in with your Google account
• Wait for 3 other players to join
• Mark yourself as ready

• First player receives 5 cards
• They choose the trump suit
• All players then receive 8 more cards (13 total)

• Players take turns playing cards
• Must follow the lead suit if possible
• Trump cards beat non-trump cards
• Highest valid card wins the hand

• Player who wins the most hands (out of 13) wins the game
• Ties are broken by... most recent hand won

The app is optimized for mobile devices with:

• Touch-friendly card interactions
• Responsive layouts for all screen sizes
• Safe area support for devices with notches
• Optimized for portrait orientation
• Fast loading and smooth animations

src/
├── components/           # React components
│   ├── Card.jsx         # Individual card component
│   ├── GameBoard.jsx    # Main game interface
│   ├── GameComplete.jsx # End game screen
│   ├── LoginScreen.jsx  # Google auth login
│   ├── MobileButton.jsx # Reusable button component
│   ├── TrumpSelector.jsx# Trump suit selection
│   └── WaitingRoom.jsx  # Player lobby
├── store/              # Redux state management
│   ├── store.js        # Main store configuration
│   ├── hooks.js        # Typed Redux hooks
│   ├── firebaseMiddleware.js # Firebase real-time sync
│   └── slices/         # Redux slices
│       ├── authSlice.js    # Authentication state
│       ├── gameSlice.js    # Game state and logic
│       └── uiSlice.js      # UI state management
├── utils/              # Utility functions
│   ├── gameConstants.js # Game constants
│   └── gameUtils.js    # Game logic utilities
├── firebase.js         # Firebase configuration
└── App.jsx            # Main app component

The application uses Redux Toolkit for predictable state management:

• Auth Slice: User authentication and profile data
• Game Slice: Game state, players, cards, and game logic
• UI Slice: Loading states, modals, and user interface state
• Firebase Middleware: Real-time synchronization with Firebase

For detailed Redux setup and usage, see REDUX_SETUP.md.

• Modify tailwind.config.js for custom theme
• Update component styles in individual files
• Colors and spacing follow Tailwind conventions

• Modify game logic in src/utils/gameUtils.js
• Update constants in src/utils/gameConstants.js
• Extend Firebase database structure as needed

npm install -g vercel
vercel

npm run build
# Upload dist/ folder to Netlify

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

Firebase Connection Issues

• Verify your Firebase config in src/firebase.js
• Check that Realtime Database is enabled
• Ensure authentication is properly configured

Authentication Problems

• Verify Google OAuth is enabled in Firebase Console
• Check that your domain is in authorized domains
• Clear browser cache and try again

Game State Issues

• Check browser console for errors
• Verify Firebase security rules
• Ensure all 4 players are properly connected

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

This project is licensed under the MIT License - see the LICENSE file for details.

• React team for the amazing framework
• Firebase for real-time backend services
• Tailwind CSS for beautiful styling
• Vite for lightning-fast development

Enjoy playing Judgement with your friends! 🎴🎉