Sync Draw Guess

A real-time, multiplayer drawing and guessing game built using Node.js, Socket.IO, React, and TypeScript. Players join rooms, take turns drawing prompts, and compete to guess the drawings in a fun and interactive environment. With real-time canvas synchronization, timeouts for word selection, and smooth drawing experiences, this project captures the excitement of collaborative gameplay.

Tech Stack

Backend

The backend is developed using Node.js and Socket.IO. It handles real-time communication between clients and the server.

Server Events

• Client Events:

  • connect - Client connects to the server.
  • disconnecting - Client disconnects from the server.
  • joinRoom - Client joins a room.
  • leaveRoom - Client leaves a room.
  • startGame - Client starts the game.
  • draw - Client sends drawing data.
  • guess - Client sends a guess.
  • changeSettings - Client changes game settings.
  • wordSelect - Client selects a word.

• Server Events:

  • joinedRoom - Server confirms client has joined the room.
  • playerJoined - Server notifies when a player joins.
  • playerLeft - Server notifies when a player leaves.
  • gameStarted - Server notifies when the game starts.
  • gameEnded - Server notifies when the game ends.
  • drawData - Server sends drawing data to clients.
  • guessed - Server notifies when a word is guessed.
  • turnEnded - Server notifies when a turn ends.
  • chooseWord - Server requests the drawer to choose a word.
  • wordChosen - Server sends the chosen word to clients.
  • settingsChanged - Server notifies when settings are changed.
  • guessFail - Server notifies when a guess fails.

Room System

Players join a room using a unique room ID. If the drawer takes too long to choose a word, one is automatically assigned. Each turn has a time limit for guessing.

Frontend

The frontend is developed using React with TypeScript and Vite for a fast development experience.

Installation

Clone the repository

git clone https://github.com/DivyanshuLohani/SyncDrawGuess.git
cd SyncDrawGuess

Start a redis server

docker run -d -p 6379:6379 redis

Start the server

cd server 
npm install && npm run dev

Start the client

cd client
npm install && npm run dev

Playing

http://localhost:5173

Preview

2024-08-12.18-50-28.mp4