Hand-And-Brain-Chess

This is a simple real-time chess application built to explore and learn about WebSockets. While it might not be the most feature-rich or perfect chessboard implementation, it includes a fun and unique “Hand and Brain” mode.

---

Live Demo

Try it out here:👉 https://chess-nu-seven.vercel.app/

---

Features

• Real-time Multiplayer: Play chess with another person in real-time.

• Hand and Brain Mode: A unique and fun way to play chess with a partner.

• Room-based Gameplay: Create or join a room to play with a friend.

• Simple and Clean UI: A minimalistic interface to focus on the game.

---

Hand and Brain Mode

Hand and Brain is a chess variant played by two teams of two players each.In this implementation, it’s a 1v1 mode with a twist:

• The Brain: Decides which piece to move.

• The Hand: Decides where to move the selected piece.

This adds a layer of strategy and communication (or miscommunication!) to the game, making it a fun and challenging experience.

---

Tech Stack

Frontend

• React: For building the user interface.

• Vite: A fast build tool and development server for modern web projects.

• TypeScript: Ensures type safety and cleaner code.

• Tailwind CSS: Utility-first CSS framework for rapid UI development.

• socket.io-client: Client-side WebSocket library for real-time communication.

• chess.js: Library for chess move generation, validation, and board management.

Backend

• Node.js: JavaScript runtime built on Chrome’s V8 engine.

• Express: Minimal and flexible backend framework.

• TypeScript: For type-safe backend code.

• socket.io: Server-side WebSocket library for handling real-time connections.

---

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js and npm installed on your machine.

Installation

1. Clone the repo

   git clone https://github.com/Starz099/chess.git

2. Install server dependencies

   cd server
   npm install

3. Install client dependencies

   cd ../client
   npm install

Usage

1. Start the server

   cd ../server
   npm run dev

2. Start the client

   cd ../client
   npm run dev

Open your browser and navigate to the address provided by Vite (usually http://localhost:5173).

---

Future Scope

While the current version fulfills the goal of learning and implementing WebSockets, there’s plenty of room to grow and refine. Future plans include:

• In-Game Chat

Add a chat section that allows players to communicate with their opponent during a match — making the gameplay more interactive and engaging.

• Advanced Game Logic

  • Castling Logic: Implement full support for castling according to chess rules.

  • Piece Promotion Selection: Let players choose the promotion piece (currently defaults to a queen).

• UI & UX Improvements

  • Enhance the interface for smoother and more intuitive gameplay.

  • Make the layout fully responsive, ensuring an enjoyable experience on mobile and tablet devices.

• Game Mechanics Enhancements

  • Add offer draw and accept/reject draw functionality.

  • Introduce game over and rematch options for a smoother flow between games.

• Game History & Analytics

  • Store completed games in a database to allow players to review and replay past matches.

  • Optionally include player stats like win rate, move history, or accuracy analysis.

---

What I Learnt

Here are some of the key things I learned while building it:

• WebSockets Fundamentals: How real-time communication happens between client and server using persistent socket connections.

• Socket Connection Lifecycle: How connections are established, maintained, and verified on both client and server sides.

• Event-driven Architecture: Designing the system around custom socket events to handle moves, room management, and game state updates.

• Basic System Design for Multiplayer Games: Gained a high-level understanding of how multiplayer applications synchronize state between multiple users efficiently.

• Frontend–Backend Coordination: How to manage consistent game logic between client and server to avoid desynchronization or cheating.

---

The primary goal of this project was to gain a deeper understanding of WebSocket technology and its real-world application in building real-time, interactive web experiences. Chess was chosen as a familiar yet complex domain that provided the perfect environment to explore synchronization, state management, and event-driven communication.

This project was built as a learning experience. It needs a lot of finishing. It may have bugs or incomplete features. Contributions, feedback, and suggestions are always welcome!