Real-Time Multiplayer Hex Game

A web implementation of the classic Hex board game (11×11 board) for two players, with real-time interactions.

Dynamic hexagonal board with real-time win detection

Overview

This project is a full web version of Hex, an abstract connection game where two players compete to connect their opposite borders with a continuous path of adjacent hexes.

Main features:

• 2-player real-time multiplayer using WebSockets
• Automatic win detection (connecting opposite borders)
• Integrated real-time chat
• Spectator mode with move history navigation (previous/next)
• Dynamically generated hexagonal board using D3.js
• Simple, responsive interface (Bootstrap)

Tech Stack

Layer	Technology	Main role
Backend	Node.js + Express	HTTP server and connection management
Real-time	Socket.IO	Bidirectional synchronization of moves & chat
Frontend	HTML5, CSS3, Bootstrap 5	User interface and layout
Rendering	D3.js v7	Interactive hexagonal board generation
Algorithm	Depth-First Search	Winning path detection (DFS)

Key Features

• Quick join using a nickname (max 2 players)
• Game starts automatically when two players are connected
• Instant hex coloring (red for player 1, blue for player 2)
• Win check via path-finding between opposite borders
• Public chat visible to players and spectators
• Move history navigation (for review or spectator mode)
• Borders: left-right for player 1 / top-bottom for player 2

How to Run

1. Clone the repository

   git clone https://github.com/[your-username]/pwebhex.git
   cd pwebhex

2. Install dependencies

   npm install

3. Start the server

   node serveur_socket.io.js

4. Open in your browser

   • Lobby / join page: http://localhost:8888/
   • Game (after joining): http://localhost:8888/hex/0 or http://localhost:8888/hex/1
   • Spectator: http://localhost:8888/hex/spec

Project Structure

├── serveur_socket.io.js      # Node.js server + Socket.IO + game logic
├── accueil.html              # Lobby / connection page
├── client_socket.io.html     # Game interface (board + chat + history)
└── README.md                 # This file

Skills Highlighted

• Full-stack JavaScript development
• Real-time shared state management (Socket.IO)
• Graph algorithms (path finding for win condition)
• Interactive SVG manipulation (D3.js)
• Multi-user synchronization and event handling
• Clean and functional UI design

Developed as part of a job search / internship preparation – 2025/2026.

Feel free to open an issue or contact me for a live demo!

License
MIT License