README.md

metadata

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

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:

   git clone https://huggingface.co/spaces/YOUR_USERNAME/drawable
   

4. Copy all project files into the cloned folder
5. Push:

   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