mirror of
https://github.com/DeNNiiInc/Connect-5.git
synced 2026-04-17 22:46:00 +00:00
233 lines
7.5 KiB
Markdown
233 lines
7.5 KiB
Markdown
# Connect-5 🎮
|
||
|
||
<div align="center">
|
||
|
||
**Premium Real-Time Multiplayer Gomoku Game**
|
||
|
||
[](https://connect5.beyondcloud.technology/)
|
||
|
||
A beautiful, feature-rich implementation of the classic Connect-5 (Gomoku) game with real-time multiplayer support, built with modern web technologies.
|
||
|
||
[](https://nodejs.org/)
|
||
[](https://socket.io/)
|
||
[](https://postgresql.org/)
|
||
[](LICENSE)
|
||
|
||
[Play Now](https://connect5.beyondcloud.technology/) • [Features](#features) • [Installation](#installation) • [Usage](#usage) • [Multiplayer](#multiplayer) • [Deployment](#production-deployment)
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## ✨ Features
|
||
|
||
### 🎯 Game Modes
|
||
- **Local Play**: Play against friends on the same device with smooth turn-based gameplay
|
||
- **Real-Time Multiplayer**: Challenge players worldwide with <50ms move synchronization
|
||
- **Multiple Board Sizes**: Tactical variety with 15×15, 20×20, 25×25, or epic 50×50 grids
|
||
- **Smart Matchmaking**: Player lobby with live stats (Wins/Losses/Draws) for informed challenges
|
||
|
||
### 🌐 Multiplayer Features (NEW & ENHANCED)
|
||
|
||
#### Core Multiplayer
|
||
- **Live Player Lobby**: See all online players with real-time presence indicators
|
||
- **Challenge System**: Send and receive game invitations with instant notifications
|
||
- **Player Statistics**: Track your performance with persistent win/loss/draw records
|
||
- **Auto-Login**: Username persistence across sessions with 30-day cookie storage
|
||
- **Profanity Filter**: Family-friendly environment with bad-words filtering
|
||
|
||
#### 🏳️ Surrender & Rematch (NEW)
|
||
- **Graceful Surrender**: End hopeless games early with the Surrender button
|
||
- Confirmation modal prevents accidental surrenders
|
||
- Immediate stats update (counts as loss for surrenderer, win for opponent)
|
||
- Both players notified instantly
|
||
- **Instant Rematch**: Challenge the same opponent immediately after any game
|
||
- "Challenge Again" button in Game Over modal
|
||
- Full negotiation flow (accept/decline)
|
||
- Preserves board size preference
|
||
- No need to return to lobby between rematches
|
||
|
||
#### 🛡️ Reliability & State Management (NEW)
|
||
- **Smart Disconnect Handling**: 30-second grace period for network blips
|
||
- Automatic reconnection on internet restoration
|
||
- Full board state restoration (all moves preserved)
|
||
- Seamless resume even with new socket connection
|
||
- **Game State Protection**: No more abandoned games from accidental refreshes
|
||
- **Race Condition Prevention**: Server-side state locks prevent double-actions
|
||
- **Session Recovery**: Resume active games automatically on page reload
|
||
|
||
### 🎨 Premium Design
|
||
- **Graphing Paper Aesthetic**: Beautiful dark theme with precision grid lines
|
||
- **Smooth Animations**:
|
||
- Polished piece placement with scale effects
|
||
- Victory sequence highlighting with glow effects
|
||
- Modal transitions with glassmorphism
|
||
- **Modern UI Components**:
|
||
- Glassmorphism overlays with backdrop blur
|
||
- Gradient accents and hover states
|
||
- Responsive button designs
|
||
- **Cross-Platform**: Flawless experience on desktop, tablet, and mobile
|
||
|
||
### 🎲 Gameplay Excellence
|
||
- **8-Direction Win Detection**: Scan horizontal, vertical, and both diagonals
|
||
- **Turn Indicators**: Clear visual feedback showing whose turn it is
|
||
- **Win Highlighting**: Animated display of the winning 5-piece sequence
|
||
- **Draw Detection**: Automatic detection when board is full
|
||
- **Move Validation**: Client and server-side validation prevents invalid moves
|
||
- **Persistent Scoring**: All games saved to PostgreSQL with complete move history
|
||
|
||
---
|
||
|
||
## 📸 Screenshots
|
||
|
||
<div align="center">
|
||
|
||
### Multiplayer Lobby
|
||
|
||
*Challenge players in real-time from the lobby*
|
||
|
||
### Local Game Mode
|
||
|
||
|
||
### Different Board Sizes
|
||
|
||
|
||
### Victory Screen
|
||
|
||
|
||
### Surrender Modal
|
||
|
||
*Gracefully end games with the new confirmation modal*
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## 🚀 Installation
|
||
|
||
### Prerequisites
|
||
- **Node.js** 18+ ([Download](https://nodejs.org/))
|
||
- **PostgreSQL** Database ([Download](https://www.postgresql.org/download/))
|
||
- **Git** ([Download](https://git-scm.com/))
|
||
|
||
### Quick Start
|
||
|
||
```bash
|
||
# Clone the repository
|
||
git clone https://github.com/DeNNiiInc/Connect-5.git
|
||
cd Connect-5
|
||
|
||
# Install dependencies
|
||
npm install
|
||
|
||
# Configure database
|
||
# 1. Create database: CREATE DATABASE connect5;
|
||
# 2. Setup config:
|
||
cp db.config.example.js db.config.js
|
||
# 3. Edit db.config.js with your credentials
|
||
|
||
# 4. Initialize Database Schema
|
||
# (Check update-dbschema.js if psql is not available)
|
||
psql -h HOST -U postgres -d connect5 -f postgres-schema.sql
|
||
|
||
# Start the server
|
||
npm start
|
||
```
|
||
|
||
The server will start on **http://localhost:3000**
|
||
|
||
---
|
||
|
||
## 🎮 Usage
|
||
|
||
### Multiplayer Instructions
|
||
|
||
1. Click **"🌐 Multiplayer"**.
|
||
2. Enter your username (3-20 characters).
|
||
3. **Lobby**: See online players and their stats (Wins/Losses).
|
||
4. **Challenge**: Click "Challenge" next to a player.
|
||
5. **Game On**: Once accepted, the board loads for both of you.
|
||
|
||
### In-Game Controls
|
||
|
||
- **Place Piece**: Click any empty intersection.
|
||
- **Surrender**: Click the "Surrender" button (Game Controls area) to forfeit.
|
||
- **Rematch**: After the game, click "Challenge Again" to keep playing the same opponent.
|
||
|
||
---
|
||
|
||
## 🚀 Production Deployment
|
||
|
||
We support **Zero-Downtime Reliability** and **Auto-Start**.
|
||
|
||
### 1. Automated Deployment
|
||
Use our deployment script to setup Nginx/Apache and Node.js automatically:
|
||
|
||
```bash
|
||
sudo bash deploy.sh
|
||
```
|
||
|
||
### 2. Auto-Start on Reboot (Systemd)
|
||
Never worry about server restarts again. Install the systemd service:
|
||
|
||
```bash
|
||
sudo bash setup-auto-start.sh
|
||
```
|
||
*This ensures the app starts automatically and waits for the database to be ready.*
|
||
|
||
### 3. Auto-Deploy (Git Hooks)
|
||
Enable automatic updates when you `git pull`:
|
||
|
||
```bash
|
||
bash setup-auto-deploy.sh
|
||
```
|
||
*This installs a hook to restart the service automatically after code changes.*
|
||
|
||
See [DEPLOYMENT.md](DEPLOYMENT.md) for full details.
|
||
|
||
---
|
||
|
||
## 🛠️ Tech Stack
|
||
|
||
### Frontend
|
||
- **HTML5/CSS3**: Custom Glassmorphism design
|
||
- **Vanilla JS**: No frameworks, pure performance
|
||
- **Socket.io Client**: Real-time events
|
||
|
||
### Backend
|
||
- **Node.js + Express**: Robust server
|
||
- **Socket.io**: WebSocket management
|
||
- **PostgreSQL**: Rigid data persistence (Players, Games, Moves, Sessions)
|
||
|
||
### Database Schema
|
||
- **Reliability First**: Games are stored with status (`active`, `completed`, `abandoned`).
|
||
- **Data Integrity**: Players and Moves are linked via Foreign Keys.
|
||
|
||
---
|
||
|
||
## 🐛 Troubleshooting
|
||
|
||
| Issue | Solution |
|
||
|-------|----------|
|
||
| **Database Disconnected** | Check `db.config.js`. If on production, run `bash setup-auto-deploy.sh` to fix sync issues. |
|
||
| **"Function not found"** | Run `node update-dbschema.js` to patch missing SQL functions. |
|
||
| **Cannot Connect** | Ensure port 3000 is open. |
|
||
|
||
---
|
||
|
||
## 🤝 Contributing
|
||
|
||
Contributions are welcome! Please feel free to submit a Pull Request.
|
||
|
||
---
|
||
|
||
## 📧 Contact
|
||
|
||
**Beyond Cloud Technology**
|
||
- YouTube: [@beyondcloudtechnology](https://www.youtube.com/@beyondcloudtechnology)
|
||
- Repository: [DeNNiiInc/Connect-5](https://github.com/DeNNiiInc/Connect-5)
|
||
|
||
<div align="center">
|
||
Made with 💜 by Beyond Cloud Technology
|
||
</div>
|