Chain Reaction - Online Multiplayer Game

A real-time multiplayer web implementation of the classic Chain Reaction board game. Create cascading reactions, dominate the board, and outsmart your opponents in this intense strategy game.

Live Demo: https://chain-reaction-tau.vercel.app/

Features

Core Gameplay

• Chain Reaction Mechanics: Classic board game rules with cascading explosions
• Multiple Game Modes: Play locally on the same device or online with friends
• Real-time Multiplayer: Up to 4 players in online rooms with instant synchronization
• Strategic Gameplay: Plan your moves carefully and anticipate opponent strategies

Online Features

• Room-based Matchmaking: Create or join game rooms with unique room codes
• Voice Chat: Integrated peer-to-peer voice communication using WebRTC
• Google Authentication: Quick sign-in with Google OAuth
• Player Reconnection: Rejoin active games after disconnection
• Game State Persistence: MongoDB-backed game state management

Technical Features

• Real-time Synchronization: Socket.IO for lag-free multiplayer experience
• Responsive Design: Modern UI with smooth animations and transitions
• Sound Effects: Immersive audio feedback for explosions and game events
• Comprehensive Testing: Jest test suite with coverage reporting

Architecture

This project consists of two main components:

1. Next.js Frontend (/src)

   • React-based UI with TypeScript
   • Game engine and state management
   • Socket.IO client for real-time communication
   • NextAuth for authentication

2. Socket Server (/socket-server)

   • Node.js/Express server
   • Socket.IO for WebSocket connections
   • Game state synchronization
   • WebRTC signaling for voice chat

Prerequisites

• Node.js 20 or higher
• npm or yarn or pnpm
• MongoDB Atlas account (or local MongoDB instance)
• Google OAuth credentials (for authentication)
• PeerJS account (for voice chat, optional)

Getting Started

1. Clone the Repository

git clone <repository-url>
cd chainreaction

2. Install Dependencies

Frontend:

npm install

Socket Server:

cd socket-server
npm install
cd ..

3. Environment Configuration

Create a .env.local file in the root directory:

# Next.js Configuration
NEXTAUTH_URL=http://localhost:3003
NEXTAUTH_SECRET=your-secret-key-here

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# MongoDB
MONGODB_URI=your-mongodb-connection-string

# Socket Server
NEXT_PUBLIC_SOCKET_URL=http://localhost:3001

# PeerJS (for voice chat)
NEXT_PUBLIC_PEERJS_HOST=your-peerjs-host
NEXT_PUBLIC_PEERJS_PORT=443
NEXT_PUBLIC_PEERJS_PATH=/peerjs

Create a .env file in the socket-server directory:

SOCKET_PORT=3001
CLIENT_URL=http://localhost:3003

4. Start Development Servers

Terminal 1 - Frontend:

npm run dev

Terminal 2 - Socket Server:

cd socket-server
npm run dev

The application will be available at:

• Frontend: http://localhost:3003
• Socket Server: http://localhost:3001

Project Structure

chainreaction/
├── src/
│   ├── app/                    # Next.js app directory
│   │   ├── api/                # API routes
│   │   │   ├── auth/           # NextAuth configuration
│   │   │   └── rooms/          # Room management API
│   │   ├── game/               # Game page
│   │   ├── lobby/              # Lobby page
│   │   └── local/               # Local multiplayer page
│   ├── components/
│   │   ├── game/               # Game components
│   │   │   ├── ChainReactionEngine.ts
│   │   │   ├── GameBoard.tsx
│   │   │   ├── OnlineMultiplayerGame.tsx
│   │   │   └── VoiceChatPanel.tsx
│   │   └── Header.tsx
│   ├── hooks/                  # Custom React hooks
│   │   ├── useGameState.ts
│   │   ├── useOnlineGameState.ts
│   │   ├── useSocket.ts
│   │   └── useVoiceChat.ts
│   ├── lib/                    # Utilities
│   │   ├── mongodb.ts
│   │   └── botPlayer.ts
│   └── types/                  # TypeScript definitions
├── socket-server/              # Socket.IO server
│   ├── index.js               # Main server file
│   └── config.js              # Server configuration
├── coverage/                   # Test coverage reports
└── public/                     # Static assets

Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Zustand - State management
• Socket.IO Client - Real-time communication
• NextAuth - Authentication
• PeerJS - WebRTC for voice chat

Backend

• Node.js - Runtime environment
• Express - Web framework
• Socket.IO - WebSocket server
• MongoDB - Database

Development

• Jest - Testing framework
• ESLint - Code linting
• TypeScript - Type checking

Testing

Run the test suite:

# Run all tests
npm test

# Watch mode
npm run test:watch

# With coverage
npm run test:coverage

Available Scripts

Frontend

• npm run dev - Start development server (port 3003)
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint
• npm test - Run tests
• npm run test:watch - Run tests in watch mode
• npm run test:coverage - Generate test coverage report

Socket Server

• npm start - Start production server
• npm run dev - Start development server with auto-reload

Game Rules

Chain Reaction is a strategy board game where players place orbs on a grid. When a cell reaches its maximum capacity (based on its position), it explodes and distributes orbs to adjacent cells. The goal is to eliminate all opponents and be the last player standing.

Key Mechanics:

• Corner cells: Max 1 orb
• Edge cells: Max 2 orbs
• Center cells: Max 3 orbs
• Explosions: Distribute orbs to adjacent cells (up, down, left, right)
• Chain Reactions: Explosions can trigger other explosions
• Player Elimination: Players are eliminated when they lose all their orbs

Deployment

The application is currently deployed at: https://chain-reaction-tau.vercel.app/lobby

Socket Server

The socket server can be deployed to any Node.js hosting service (Azure, Railway, Render, etc.). See socket-server/README.md for detailed deployment instructions.