Spaces:
Sleeping
Sleeping
File size: 2,576 Bytes
806f43a fbf0f7b 806f43a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | ---
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
``` |