A real-time, turn-based strategy game inspired by Chain Reaction, built with Next.js, Socket.IO, and TypeScript.
Chemical is played on a grid where players place atoms that can trigger explosive chain reactions:
-
Cell Capacity: Each cell has a critical mass based on its position:
- Corner cells: 2 atoms
- Edge cells: 3 atoms
- Center cells: 4 atoms
-
Gameplay: Players alternate turns placing one atom in empty cells or cells they own
-
Explosions: When a cell reaches its capacity, it explodes, distributing atoms to adjacent cells
-
Cell Conversion: Explosions convert neighboring opponent cells to the current player's color
-
Winning: The last player with atoms on the board wins
- Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS, Framer Motion
- Backend: Next.js API Routes, Socket.IO for real-time multiplayer
- State Management: Zustand
- Database: Prisma with SQLite (easily configurable for PostgreSQL)
- Real-time: Socket.IO for authoritative server architecture
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd chemical- Install dependencies:
npm install- Set up the database:
npm run db:push
npm run db:generate- Seed the database (optional):
npm run db:seed- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
chemical/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API routes
│ │ ├── game/[roomId]/ # Game page
│ │ ├── lobby/ # Lobby page
│ │ └── page.tsx # Home page
│ ├── components/game/ # Game UI components
│ │ ├── GameBoard.tsx # Main game board
│ │ ├── Cell.tsx # Individual cells
│ │ ├── Atom.tsx # Atom visualization
│ │ ├── PlayerInfo.tsx # Player information
│ │ ├── TurnIndicator.tsx # Turn display
│ │ └── WinnerModal.tsx # Victory screen
│ ├── lib/
│ │ ├── game/ # Core game logic
│ │ ├── socket/ # Socket.IO integration
│ │ └── prisma.ts # Database client
│ └── types/ # TypeScript definitions
├── prisma/ # Database schema and migrations
└── public/ # Static assets
- Start: Visit the lobby page and either create a new game or join an existing one
- Setup: Enter your name and create a room or enter a room code to join
- Play: Click on empty cells or cells you own to place atoms
- Strategy: Plan moves to create chain reactions and convert opponent cells
- Win: Eliminate all opponent atoms to win the game
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run db:studio- Open Prisma Studionpm run db:push- Push schema changes to databasenpm run db:generate- Generate Prisma client
The project uses Prisma with SQLite for development. To switch to PostgreSQL:
- Update
prisma/schema.prisma:
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}-
Set your
DATABASE_URLenvironment variable -
Run migrations:
npm run db:migrate- ✅ 2-player multiplayer
- ✅ 9×6 default board with proper cell capacities
- ✅ Real-time gameplay with Socket.IO
- ✅ Chain reaction mechanics
- ✅ Cell conversion on explosions
- ✅ Win detection
- ✅ Responsive UI with animations
- 🔄 3-8 player support
- 🔄 Custom board sizes
- 🔄 Game replay system
- 🔄 Player statistics
- 🔄 Sound effects
- 🔄 AI opponent
The game uses an authoritative server architecture where:
- Server maintains the canonical game state
- Server validates all moves and executes game logic
- Clients receive state updates via WebSocket
- Prevents cheating and ensures consistency
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
MIT License - feel free to use this for your projects!
- Inspired by the classic Chain Reaction game
- Built with modern web technologies for optimal performance
- Designed for both desktop and mobile play