DrawIt P2P 🎮

Two-device game with peer-to-peer WebRTC communication. Draw levels on your phone, play on your laptop!

---

✨ Features

• 🎨 Draw your own levels - Sketch platforms and obstacles with your phone camera
• 🎮 Real-time gameplay - Control your character directly from your phone
• 📡 Peer-to-peer - Direct phone-to-laptop connection via WebRTC data channels
• 🚀 No server needed - Fully decentralized, works anywhere
• 🖼️ Image processing - OpenCV.js converts drawings into playable levels
• 🕹️ Touch controls - Responsive mobile controller with haptic feedback
• ⚡ Fast & reliable - Low-latency P2P communication

---

🎯 Tech Stack

Technology	Purpose
JavaScript	Core game logic
HTML/CSS	User interface
WebRTC	Peer-to-peer networking
PeerJS	Simplified WebRTC API
Phaser 3	Game engine & physics
OpenCV.js	Computer vision & image processing
QRCode.js	Easy phone connection

---

🚀 Quick Start

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Node.js & npm (for local development)
• Phone and laptop

Installation

# 1. Clone the repository
git clone https://github.com/Rayaanxrio/Drawit.git
cd Drawit

# 2. Install dependencies
npm install

# 3. Start local development server
npm run dev

The server will start on http://localhost:3000

How to Play

On Laptop:

1. Open http://localhost:3000/index.html in your browser
2. Wait for peer ID to generate (QR code will appear)
3. Keep this window open

On Phone:

1. Scan the QR code with your phone camera
   • Or manually open the URL shown below the QR code
2. Wait for connection (status chip will turn green ✓)
3. Tap "PLAY GAME"
4. Point camera at your drawing and capture
5. Adjust corner markers to frame your level
6. Tap "SEND LEVEL"
7. Use on-screen controls to play!

---

🎨 How to Draw Levels

Drawing Guidelines

• Black marker → Platforms (safe to land on)
• Red marker → Danger zones (instant game over)
• Use thick, bold strokes for best detection
• Draw on clean white surface (whiteboard, paper, etc.)
• Ensure good lighting without glare

Shape Ideas

Platforms (Black):

• Stairs and ramps
• Floating islands
• Curved paths
• Ladders
• Trampolines

Dangers (Red):

• Spike pits
• Lava pools
• Moving obstacles
• Barriers

---

🎮 Gameplay

Controls (Phone)

Button	Action
◀ LEFT	Move character left
▶ RIGHT	Move character right
▲ JUMP	Jump (hold to move while in air)

Objective

• Navigate from bottom-left (spawn point) to explore your level
• Land on black platforms to stay safe
• Avoid red danger zones or it's game over!
• Design creative levels and share with friends

---

📁 Project Structure

drawit-p2p/
├── public/
│   ├── index.html           # Laptop game interface
│   ├── phone.html           # Mobile controller interface
│   ├── peer.js              # WebRTC P2P wrapper
│   ├── game.js              # Phaser game engine
│   ├── image-processor.js   # OpenCV shape detection
│   └── style.css            # Styling
├── package.json             # Dependencies
└── README.md               # This file

---

🔌 How It Works

Architecture

┌─────────────┐                           ┌─────────────┐
│    Phone    │                           │   Laptop    │
│             │                           │             │
│  • Camera   │◄──WebRTC Data Channel───►│  • Game     │
│  • Controls │   (PeerJS Signaling)      │  • Display  │
│             │                           │             │
└─────────────┘                           └─────────────┘

Connection Flow

1. Laptop: Generates unique peer ID via PeerJS
2. Laptop: Displays peer ID in QR code
3. Phone: Scans QR code to get peer ID
4. Phone: Connects to laptop using peer ID
5. P2P: Direct data channel established
6. Phone: Captures image → sends via data channel
7. Laptop: Processes image with OpenCV.js
8. Laptop: Builds Phaser game level
9. Phone: Sends controller inputs
10. Laptop: Updates game in real-time

Data Flow

Image Transfer:

• Images are chunked into 16KB packets (WebRTC limit)
• Sent sequentially via reliable data channel
• Reassembled on laptop side
• Processed with perspective transform

Controller Inputs:

• Sent as JSON messages: { action: 'left-start' }
• Low latency (~10-50ms typical)
• Reliable delivery guaranteed

---

🐛 Troubleshooting

Connection Issues

Problem: QR code doesn't appear

• Solution: Wait a few seconds for PeerJS to connect to signaling server
• Check browser console for errors

Problem: Phone can't connect to laptop

• Solution: Ensure both devices are on the same network
• Try refreshing both pages
• Check firewall settings

Problem: "Missing peer ID in URL" error

• Solution: Make sure you scanned the complete QR code
• Or manually type the full URL with ?peer= parameter

Detection Issues

Problem: Shapes not detected

• Use thicker marker strokes
• Improve lighting (avoid shadows/glare)
• Lower "Min Area" in debug settings
• Clean the drawing surface

Problem: Too much noise detected

• Increase "Min Area" to filter small marks
• Increase "Blur Size" for smoother detection
• Clean the whiteboard completely

Problem: Shapes too simplified

• Lower "Epsilon Factor" to preserve detail
• Use bolder, more defined shapes

Performance Issues

Problem: Game lags or stutters

• Draw fewer/simpler shapes
• Increase "Epsilon Factor" to simplify polygons
• Close other browser tabs
• Try a different device

---

🌐 Deployment

Static Hosting (Recommended)

Deploy to any static hosting service:

Vercel:

npm install -g vercel
vercel

Netlify:

npm install -g netlify-cli
netlify deploy

GitHub Pages:

1. Push to GitHub repository
2. Enable GitHub Pages in Settings
3. Select main branch / root folder

Custom PeerJS Server (Optional)

By default, the app uses the free PeerJS cloud server (0.peerjs.com). For production or privacy, you can run your own:

Option 1: Use PeerJS Cloud (Default)

• No setup needed
• Free tier available
• May have rate limits

Option 2: Self-hosted PeerJS Server

Install and run:

npm install -g peer
peerjs --port 9000 --key peerjs --path /myapp

Update public/peer.js:

const PEER_CONFIG = {
  host: 'your-server.com',
  secure: true,
  port: 9000,
  path: '/myapp',
  debug: 2
};

---

📱 Browser Compatibility

Browser	Laptop	Phone	Notes
Chrome	✅	✅	Best performance
Firefox	✅	✅	Fully supported
Safari	✅	✅	iOS 14+
Edge	✅	✅	Chromium-based

Camera Access Requirements:

• HTTPS connection (or localhost)
• Camera permission granted
• Modern browser version

---

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• PeerJS - Simplified WebRTC API
• Phaser - Excellent game engine
• OpenCV.js - Powerful computer vision
• QRCode.js - Easy QR code generation

---

🎯 Future Enhancements

Ideas for future development:

• Multiple color support (blue=ice, green=bouncy)
• Level saving and sharing
• Multiplayer racing mode
• Power-ups and collectibles
• Animated platforms
• Shape recognition (auto-detect circles, rectangles)
• Level editor with touch drawing
• Leaderboard and scoring

---

📞 Support

Having issues? Here's how to get help:

1. Check the Troubleshooting section
2. Look at browser console for errors
3. Open an issue on GitHub
4. Join our community discussions

---

⭐ Star History

If you find this project useful, please consider giving it a star on GitHub!

---

Built with ❤️ using WebRTC and modern web technologies

🎮 Have fun creating and playing your own levels! ✨