Spaces:
Sleeping
Sleeping
Upload README.md
Browse files
README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# ๐จ Drawable
|
| 2 |
+
|
| 3 |
+
> The ultimate Draw & Guess game โ skribbl.io clone with superpowers.
|
| 4 |
+
|
| 5 |
+
## ๐ Features (beyond skribbl.io)
|
| 6 |
+
|
| 7 |
+
| Feature | Drawable | skribbl.io |
|
| 8 |
+
|---|---|---|
|
| 9 |
+
| Power-ups (Reveal, Time Warp, Bomb) | โ
| โ |
|
| 10 |
+
| Emoji reactions (floating) | โ
| โ |
|
| 11 |
+
| Drawing replay after each round | โ
| โ |
|
| 12 |
+
| Live score graph timeline | โ
| โ |
|
| 13 |
+
| Team mode (Red vs Blue) | โ
| โ |
|
| 14 |
+
| Sudden Death (wrong = lose points) | โ
| โ |
|
| 15 |
+
| Quick Draw mode (20s) | โ
| โ |
|
| 16 |
+
| 10 word categories | โ
| โ |
|
| 17 |
+
| Custom words | โ
| โ
|
|
| 18 |
+
| Achievements system | โ
| โ |
|
| 19 |
+
| Streak bonuses | โ
| โ |
|
| 20 |
+
| Host kick player | โ
| โ
|
|
| 21 |
+
| Spectator mode | โ
| โ |
|
| 22 |
+
| Undo stroke | โ
| โ |
|
| 23 |
+
| Shape tools (line, rect, circle) | โ
| โ |
|
| 24 |
+
| Bucket fill tool | โ
| โ
|
|
| 25 |
+
| Close-guess detection | โ
| โ |
|
| 26 |
+
|
| 27 |
+
## ๐ File Structure
|
| 28 |
+
|
| 29 |
+
```
|
| 30 |
+
drawable/
|
| 31 |
+
โโโ server.js # Node.js + Socket.IO backend
|
| 32 |
+
โโโ words.js # 300+ words across 10 categories
|
| 33 |
+
โโโ package.json
|
| 34 |
+
โโโ Dockerfile
|
| 35 |
+
โโโ .dockerignore
|
| 36 |
+
โโโ public/
|
| 37 |
+
โโโ index.html # Lobby
|
| 38 |
+
โโโ game.html # Game screen
|
| 39 |
+
โโโ css/style.css
|
| 40 |
+
โโโ js/
|
| 41 |
+
โโโ lobby.js
|
| 42 |
+
โโโ game.js
|
| 43 |
+
```
|
| 44 |
+
|
| 45 |
+
## ๐ Run Locally
|
| 46 |
+
|
| 47 |
+
```bash
|
| 48 |
+
npm install
|
| 49 |
+
npm start
|
| 50 |
+
# Open http://localhost:7860
|
| 51 |
+
```
|
| 52 |
+
|
| 53 |
+
## ๐ค Deploy to Hugging Face Spaces
|
| 54 |
+
|
| 55 |
+
1. Go to https://huggingface.co/new-space
|
| 56 |
+
2. Name: `drawable` | SDK: **Docker** | Visibility: Public
|
| 57 |
+
3. Clone the Space repo:
|
| 58 |
+
```bash
|
| 59 |
+
git clone https://huggingface.co/spaces/YOUR_USERNAME/drawable
|
| 60 |
+
```
|
| 61 |
+
4. Copy all project files into the cloned folder
|
| 62 |
+
5. Push:
|
| 63 |
+
```bash
|
| 64 |
+
git add . && git commit -m "init" && git push
|
| 65 |
+
```
|
| 66 |
+
6. Wait ~2 min for build. Your game is live! ๐
|
| 67 |
+
|
| 68 |
+
> **Note:** Hugging Face Spaces expose port 7860 automatically โ no config needed.
|
| 69 |
+
|
| 70 |
+
## โ Do I need a database?
|
| 71 |
+
|
| 72 |
+
**No!** All game state is stored in-memory on the server.
|
| 73 |
+
- Rooms exist while players are connected
|
| 74 |
+
- Scores reset each game
|
| 75 |
+
- No user accounts needed โ just pick a name and play
|
| 76 |
+
|
| 77 |
+
If you want persistent leaderboards later, add Supabase (free tier) and a `/leaderboard` endpoint.
|
| 78 |
+
|
| 79 |
+
## ๐ฎ How Rooms Work
|
| 80 |
+
|
| 81 |
+
```
|
| 82 |
+
Player โ click "Quick Play"
|
| 83 |
+
Server: any open room? โ YES โ join it
|
| 84 |
+
โ NO โ create new room, wait for others
|
| 85 |
+
|
| 86 |
+
Player โ click "Create Room" โ get 6-char code โ share with friends
|
| 87 |
+
Player โ click "Join Room" โ enter code โ join instantly
|
| 88 |
+
```
|