DrawBattle 🎨⚔️

A real-time multiplayer drawing battle game. Two teams draw simultaneously and try to guess each other's words.

Features

• Real-time drawing sync between players
• Team vs team battle (Red vs Blue)
• Timer-based rounds with scoring
• Delayed Guessing Mode — guessing only opens after both teams submit their drawings
• Drawing tools: pen, eraser, color palette, brush size

---

Project Structure

drawbattle/
├── server/   ← Socket.io backend (deploy to Railway)
└── client/   ← Next.js frontend (deploy to Vercel)

---

Deployment

Step 1 — Deploy the Server to Railway

1. Go to railway.app and sign up (free)
2. Click New Project → Deploy from GitHub repo
3. Push the server/ folder to a GitHub repo (or use Railway's CLI)
4. Set the root directory to server
5. Railway auto-detects Node.js and runs npm start
6. Once deployed, copy your Railway URL — it looks like: https://drawbattle-server-production.up.railway.app

Alternative: Deploy server manually via CLI

npm install -g @railway/cli
cd server
railway login
railway init
railway up

---

Step 2 — Deploy the Frontend to Vercel

1. Push the client/ folder to a GitHub repo
2. Go to vercel.com and import the repo
3. Set the root directory to client
4. Add this Environment Variable in Vercel project settings:

   NEXT_PUBLIC_SOCKET_URL=https://your-railway-url.up.railway.app
   

   (Replace with your actual Railway URL from Step 1)
5. Click Deploy!

---

Local Development

Run the server

cd server
npm install
npm run dev   # starts on port 3001

Run the client

cd client
npm install
npm run dev   # starts on port 3000

The client auto-connects to http://localhost:3001 when NEXT_PUBLIC_SOCKET_URL is not set.

---

How to Play

1. Share the Vercel URL with your friends
2. Everyone enters a name, a room code (make one up), and picks a team
3. The host configures settings (rounds, delayed guessing mode) and hits Start Game
4. Each team sees their own secret word and draws simultaneously
5. In normal mode: teammates guess in real-time while drawing happens
6. In Delayed Guessing Mode: guessing only opens after both teams submit/timer ends
7. Teams score points by correctly guessing the other team's word
8. Most points after all rounds wins!