---
title: Drawable
sdk: docker
emoji: 🚀
colorFrom: blue
colorTo: pink
---
# 🎨 Drawable

> The ultimate Draw & Guess game — skribbl.io clone with superpowers.

## 🚀 Features (beyond skribbl.io)

| Feature | Drawable | skribbl.io |
|---|---|---|
| Power-ups (Reveal, Time Warp, Bomb) | ✅ | ❌ |
| Emoji reactions (floating) | ✅ | ❌ |
| Drawing replay after each round | ✅ | ❌ |
| Live score graph timeline | ✅ | ❌ |
| Team mode (Red vs Blue) | ✅ | ❌ |
| Sudden Death (wrong = lose points) | ✅ | ❌ |
| Quick Draw mode (20s) | ✅ | ❌ |
| 10 word categories | ✅ | ❌ |
| Custom words | ✅ | ✅ |
| Achievements system | ✅ | ❌ |
| Streak bonuses | ✅ | ❌ |
| Host kick player | ✅ | ✅ |
| Spectator mode | ✅ | ❌ |
| Undo stroke | ✅ | ❌ |
| Shape tools (line, rect, circle) | ✅ | ❌ |
| Bucket fill tool | ✅ | ✅ |
| Close-guess detection | ✅ | ❌ |

## 📁 File Structure

```
drawable/
├── server.js          # Node.js + Socket.IO backend
├── words.js           # 300+ words across 10 categories
├── package.json
├── Dockerfile
├── .dockerignore
└── public/
    ├── index.html     # Lobby
    ├── game.html      # Game screen
    ├── css/style.css
    └── js/
        ├── lobby.js
        └── game.js
```

## 🏠 Run Locally

```bash
npm install
npm start
# Open http://localhost:7860
```

## 🤗 Deploy to Hugging Face Spaces

1. Go to https://huggingface.co/new-space
2. Name: `drawable` | SDK: **Docker** | Visibility: Public
3. Clone the Space repo:
   ```bash
   git clone https://huggingface.co/spaces/YOUR_USERNAME/drawable
   ```
4. Copy all project files into the cloned folder
5. Push:
   ```bash
   git add . && git commit -m "init" && git push
   ```
6. Wait ~2 min for build. Your game is live! 🎉

> **Note:** Hugging Face Spaces expose port 7860 automatically — no config needed.

## ❓ Do I need a database?

**No!** All game state is stored in-memory on the server.  
- Rooms exist while players are connected  
- Scores reset each game  
- No user accounts needed — just pick a name and play  

If you want persistent leaderboards later, add Supabase (free tier) and a `/leaderboard` endpoint.

## 🎮 How Rooms Work

```
Player → click "Quick Play"
  Server: any open room? → YES → join it
                         → NO  → create new room, wait for others

Player → click "Create Room" → get 6-char code → share with friends
Player → click "Join Room"   → enter code → join instantly
```