Scribble - Draw & Guess Game

A real-time multiplayer drawing and guessing game inspired by Skribbl.io, built with modern web technologies and optimized for both desktop and mobile devices.

Features

✨ Real-time Multiplayer - Play with friends using Socket.io
🎨 Smooth Drawing - Touch and mouse support with smooth brush strokes
📱 Mobile Optimized - Fully responsive design for all devices
🎯 Modern UI/UX - Beautiful dark theme with glassmorphism effects
🏆 Scoring System - Points based on speed of correct guesses
💬 Live Chat - Real-time chat and guessing system

Tech Stack

Frontend:

• React 18 + TypeScript
• Vite (Fast build tool)
• Socket.io Client
• Vanilla CSS (Modern design system)

Backend:

• Node.js + Express
• Socket.io Server
• In-memory game state

Getting Started

Prerequisites

• Node.js 16+ installed

Installation

1. Install all dependencies: ```bash npm run install:all ```

Or install manually: ```bash

Install client dependencies

cd client npm install

Install server dependencies

cd ../server npm install ```

Running the Application

You need to run both the client and server:

Terminal 1 - Start Server: ```bash cd server npm run dev ``` Server will run on http://localhost:3001

Terminal 2 - Start Client: ```bash cd client npm run dev ``` Client will run on http://localhost:3000

How to Play

1. Open http://localhost:3000 in your browser
2. Enter your name and choose an avatar color
3. Create a new room or join an existing one with a room code
4. Wait for at least 2 players to join
5. Click "Start Game" to begin
6. Take turns drawing and guessing!

Drawing:

• Select colors and brush sizes from the toolbar
• Draw on the canvas with mouse or touch
• Clear the canvas if needed

Guessing:

• Type your guess in the chat
• Faster correct guesses earn more points
• The word hint shows the number of letters

Mobile Support

The game is fully optimized for mobile devices:

• Touch drawing with smooth strokes
• Responsive layout that adapts to screen size
• Mobile-friendly controls and UI elements

Project Structure

``` scribble/ ├── client/ # React frontend │ ├── src/ │ │ ├── components/ # React components │ │ ├── App.tsx # Main app component │ │ └── index.css # Design system │ └── package.json ├── server/ # Node.js backend │ ├── index.js # Server & Socket.io logic │ ├── words.js # Word list │ └── package.json └── package.json # Root scripts ```

License

MIT