Upload 5 files

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:20-slim
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --production
+COPY . .
+EXPOSE 7860
+CMD ["node", "server.js"]

README.md

@@ -1,10 +1,88 @@
----
-title: DRAWABLE
-emoji: 😻
-colorFrom: red
-colorTo: blue
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🎨 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
+```

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "drawable",
+  "version": "1.0.0",
+  "description": "Drawable - The Ultimate Draw & Guess Game",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "socket.io": "^4.7.2",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

server.js

@@ -0,0 +1,659 @@
+const express = require('express');
+const http = require('http');
+const { Server } = require('socket.io');
+const path = require('path');
+const wordLists = require('./words');
+
+const app = express();
+const server = http.createServer(app);
+const io = new Server(server, { cors: { origin: '*' } });
+const PORT = process.env.PORT || 7860;
+
+app.use(express.static(path.join(__dirname, 'public')));
+app.get('/game', (req, res) => res.sendFile(path.join(__dirname, 'public', 'game.html')));
+app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'public', 'index.html')));
+
+// ─── In-memory game state ───────────────────────────────────────────────────
+const rooms = {};
+
+function genCode() {
+  let code;
+  do { code = Math.random().toString(36).substring(2, 8).toUpperCase(); } while (rooms[code]);
+  return code;
+}
+
+function getWords(settings, count = 3) {
+  let pool = [];
+  if (settings.wordMode === 'custom' && settings.customWords.length >= count) {
+    pool = [...settings.customWords];
+  } else if (settings.wordMode === 'mixed') {
+    const cats = settings.categories || Object.keys(wordLists);
+    cats.forEach(c => { if (wordLists[c]) pool = pool.concat(wordLists[c]); });
+    pool = pool.concat(settings.customWords || []);
+  } else {
+    const cats = settings.categories || Object.keys(wordLists);
+    cats.forEach(c => { if (wordLists[c]) pool = pool.concat(wordLists[c]); });
+  }
+  pool = [...new Set(pool)];
+  const choices = [];
+  while (choices.length < count && pool.length > 0) {
+    const i = Math.floor(Math.random() * pool.length);
+    choices.push(pool.splice(i, 1)[0]);
+  }
+  return choices;
+}
+
+function hintMask(word, revealed) {
+  return word.split('').map((c, i) => c === ' ' ? ' ' : revealed.includes(i) ? c : '_').join('');
+}
+
+function levenshtein(a, b) {
+  const dp = Array.from({ length: a.length + 1 }, (_, i) =>
+    Array.from({ length: b.length + 1 }, (_, j) => i === 0 ? j : j === 0 ? i : 0));
+  for (let i = 1; i <= a.length; i++)
+    for (let j = 1; j <= b.length; j++)
+      dp[i][j] = a[i-1] === b[j-1] ? dp[i-1][j-1] : 1 + Math.min(dp[i-1][j], dp[i][j-1], dp[i-1][j-1]);
+  return dp[a.length][b.length];
+}
+
+function createRoom(settings = {}) {
+  const id = genCode();
+  rooms[id] = {
+    id,
+    host: null,
+    players: [],
+    spectators: [],
+    state: 'waiting',
+    settings: {
+      maxPlayers: 8,
+      rounds: 3,
+      drawTime: 80,
+      wordChoices: 3,
+      customWords: [],
+      wordMode: 'normal',
+      categories: Object.keys(wordLists),
+      teamMode: false,
+      suddenDeath: false,
+      quickDraw: false,
+      hintsEnabled: true,
+      ...settings
+    },
+    currentRound: 0,
+    drawerOrder: [],
+    currentDrawerIndex: 0,
+    currentWord: null,
+    wordChoices: [],
+    drawStrokes: [],
+    timer: null,
+    chooseTimer: null,
+    hintTimer1: null,
+    hintTimer2: null,
+    timeLeft: 0,
+    totalTime: 80,
+    hintsRevealed: [],
+    roundStartTime: null,
+    roundScores: [],
+    usedWords: [],
+    teams: { red: [], blue: [] },
+    scoreHistory: [], // [{round, scores:[{id,score}]}] for graph
+  };
+  return id;
+}
+
+function addPlayer(room, sid, name, avatar) {
+  const player = {
+    id: sid,
+    name: (name || 'Player').substring(0, 20),
+    score: 0,
+    avatar: avatar || { color: `hsl(${Math.floor(Math.random()*360)},70%,60%)`, icon: '😀' },
+    team: null,
+    streak: 0,
+    powerUps: { revealLetter: 1, timeWarp: 1, bomb: 1 },
+    achievements: [],
+    isDrawing: false,
+    hasGuessed: false,
+    guessTime: null,
+    isSpectator: false,
+    wordsDrawn: 0,
+  };
+  room.players.push(player);
+  return player;
+}
+
+function getPlayer(room, sid) {
+  return room.players.find(p => p.id === sid) || room.spectators.find(p => p.id === sid);
+}
+
+function clearAllTimers(room) {
+  if (room.timer) { clearInterval(room.timer); room.timer = null; }
+  if (room.chooseTimer) { clearTimeout(room.chooseTimer); room.chooseTimer = null; }
+  if (room.hintTimer1) { clearTimeout(room.hintTimer1); room.hintTimer1 = null; }
+  if (room.hintTimer2) { clearTimeout(room.hintTimer2); room.hintTimer2 = null; }
+}
+
+function shuffle(arr) {
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+function getRoomData(room) {
+  return {
+    id: room.id,
+    host: room.host,
+    state: room.state,
+    settings: room.settings,
+    players: room.players,
+    spectators: room.spectators,
+    currentRound: room.currentRound,
+    totalRounds: room.settings.rounds,
+    teams: room.teams,
+  };
+}
+
+function broadcastPlayers(room) {
+  io.to(room.id).emit('playerUpdate', { players: room.players });
+}
+
+// ─── Game Flow ─────────────────────────────────────────────────────��─────────
+function startGame(room) {
+  room.state = 'playing';
+  room.currentRound = 1;
+  room.scoreHistory = [];
+  room.usedWords = [];
+  room.players.forEach(p => {
+    p.score = 0; p.streak = 0; p.achievements = [];
+    p.powerUps = { revealLetter: 1, timeWarp: 1, bomb: 1 };
+  });
+
+  if (room.settings.teamMode) assignTeams(room);
+
+  room.drawerOrder = shuffle(room.players.map(p => p.id));
+  room.currentDrawerIndex = 0;
+  startRound(room);
+}
+
+function assignTeams(room) {
+  room.teams = { red: [], blue: [] };
+  room.players.forEach((p, i) => {
+    p.team = i % 2 === 0 ? 'red' : 'blue';
+    room.teams[p.team].push(p.id);
+  });
+}
+
+function startRound(room) {
+  clearAllTimers(room);
+  room.players.forEach(p => { p.hasGuessed = false; p.isDrawing = false; p.guessTime = null; });
+  room.drawStrokes = [];
+  room.hintsRevealed = [];
+  room.roundScores = [];
+  room.currentWord = null;
+
+  // Find drawer, skip if missing
+  let drawerFound = false;
+  while (!drawerFound && room.currentDrawerIndex < room.drawerOrder.length) {
+    const drawerId = room.drawerOrder[room.currentDrawerIndex];
+    const drawer = room.players.find(p => p.id === drawerId);
+    if (drawer) { drawer.isDrawing = true; drawerFound = true; }
+    else room.currentDrawerIndex++;
+  }
+
+  if (!drawerFound) { nextTurn(room); return; }
+
+  const drawer = room.players.find(p => p.isDrawing);
+  const choices = getWords(room.settings, room.settings.wordChoices);
+  room.wordChoices = choices;
+  room.state = 'choosing';
+
+  io.to(room.id).emit('roundStart', {
+    round: room.currentRound,
+    totalRounds: room.settings.rounds,
+    drawer: { id: drawer.id, name: drawer.name, avatar: drawer.avatar },
+    players: room.players,
+  });
+
+  io.to(drawer.id).emit('chooseWord', { choices });
+
+  room.chooseTimer = setTimeout(() => {
+    if (room.state === 'choosing') {
+      wordChosen(room, choices[Math.floor(Math.random() * choices.length)]);
+    }
+  }, 15000);
+}
+
+function wordChosen(room, word) {
+  clearAllTimers(room);
+  room.currentWord = word;
+  room.usedWords.push(word);
+  room.state = 'drawing';
+
+  const drawTime = room.settings.quickDraw ? 20 : room.settings.drawTime;
+  room.timeLeft = drawTime;
+  room.totalTime = drawTime;
+  room.roundStartTime = Date.now();
+
+  const drawer = room.players.find(p => p.isDrawing);
+  const mask = hintMask(word, []);
+  const lengths = word.split(' ').map(w => w.length);
+
+  io.to(drawer.id).emit('wordChosen', { word, hint: mask, lengths, isDrawer: true });
+  socket_to_room_except(room.id, drawer.id, 'wordChosen', { word: null, hint: mask, lengths, isDrawer: false });
+
+  // Auto hints
+  if (room.settings.hintsEnabled) {
+    room.hintTimer1 = setTimeout(() => { if (room.state === 'drawing') revealHint(room); }, drawTime * 500);
+    room.hintTimer2 = setTimeout(() => { if (room.state === 'drawing') revealHint(room); }, drawTime * 750);
+  }
+
+  // Countdown
+  room.timer = setInterval(() => {
+    room.timeLeft--;
+    io.to(room.id).emit('timerUpdate', { timeLeft: room.timeLeft, totalTime: room.totalTime });
+    if (room.timeLeft <= 0) endRound(room);
+  }, 1000);
+}
+
+function socket_to_room_except(roomId, exceptId, event, data) {
+  io.to(roomId).except(exceptId).emit(event, data);
+}
+
+function revealHint(room) {
+  const word = room.currentWord;
+  if (!word) return;
+  const unrevealed = [];
+  word.split('').forEach((c, i) => { if (c !== ' ' && !room.hintsRevealed.includes(i)) unrevealed.push(i); });
+  if (unrevealed.length === 0) return;
+  const n = Math.max(1, Math.floor(unrevealed.length * 0.3));
+  const picks = shuffle([...unrevealed]).slice(0, n);
+  room.hintsRevealed.push(...picks);
+  const drawer = room.players.find(p => p.isDrawing);
+  const hint = hintMask(word, room.hintsRevealed);
+  socket_to_room_except(room.id, drawer?.id || '', 'hintUpdate', { hint, revealed: room.hintsRevealed });
+}
+
+function checkGuess(room, sid, text) {
+  if (!room.currentWord || room.state !== 'drawing') return 'ignore';
+  const player = room.players.find(p => p.id === sid);
+  if (!player || player.hasGuessed || player.isDrawing) return 'ignore';
+
+  const guess = text.trim().toLowerCase();
+  const answer = room.currentWord.toLowerCase();
+
+  if (guess === answer) {
+    const elapsed = (Date.now() - room.roundStartTime) / 1000;
+    const timeRatio = Math.max(0, 1 - elapsed / room.totalTime);
+    const baseScore = 200;
+    const timeBonus = Math.round(timeRatio * 300);
+    const firstBonus = room.roundScores.length === 0 ? 50 : 0;
+    const streakBonus = player.streak * 25;
+    const total = baseScore + timeBonus + firstBonus + streakBonus;
+
+    player.hasGuessed = true;
+    player.guessTime = elapsed;
+    player.score += total;
+    player.streak++;
+    player.wordsDrawn;
+
+    const drawer = room.players.find(p => p.isDrawing);
+    if (drawer) {
+      const drawerGain = Math.round(50 + (room.roundScores.length === 0 ? 0 : 10));
+      drawer.score += drawerGain;
+    }
+
+    room.roundScores.push({ id: sid, score: total, time: elapsed });
+    checkAchievements(room, player);
+
+    const nonDrawers = room.players.filter(p => !p.isDrawing && !p.isSpectator);
+    if (nonDrawers.every(p => p.hasGuessed)) setTimeout(() => endRound(room), 1500);
+
+    return { correct: true, score: total, streak: player.streak, firstBonus };
+  }
+
+  const dist = levenshtein(guess, answer);
+  if (dist <= 2 && guess.length > 2) return 'close';
+
+  if (room.settings.suddenDeath) {
+    player.score = Math.max(0, player.score - 15);
+    broadcastPlayers(room);
+  }
+  return 'wrong';
+}
+
+function checkAchievements(room, player) {
+  const unlocked = [];
+  const add = (id, name, desc) => {
+    if (!player.achievements.includes(id)) {
+      player.achievements.push(id);
+      unlocked.push({ id, name, desc });
+    }
+  };
+  if (player.guessTime < 8) add('speed_demon', '⚡ Speed Demon', 'Guessed in under 8 seconds!');
+  if (player.streak >= 3) add('on_fire', '🔥 On Fire', '3 correct guesses in a row!');
+  if (player.streak >= 5) add('unstoppable', '💎 Unstoppable', '5 in a row!');
+  if (room.roundScores.length === 1) add('first_blood', '🩸 First Blood', 'First to guess the word!');
+  if (room.hintsRevealed.length === 0 && player.guessTime < room.totalTime * 0.5)
+    add('no_hints', '🕵️ Sherlock', 'Guessed with zero hints revealed!');
+  if (unlocked.length > 0) io.to(player.id).emit('achievementUnlocked', unlocked);
+}
+
+function endRound(room) {
+  clearAllTimers(room);
+  if (room.state === 'intermission' || room.state === 'ended') return;
+  room.state = 'intermission';
+
+  const drawer = room.players.find(p => p.isDrawing);
+
+  // Picasso achievement
+  const nonDrawers = room.players.filter(p => !p.isDrawing && !p.isSpectator);
+  if (drawer && nonDrawers.length > 0 && nonDrawers.every(p => p.hasGuessed)) {
+    if (!drawer.achievements.includes('picasso')) {
+      drawer.achievements.push('picasso');
+      io.to(drawer.id).emit('achievementUnlocked', [{ id: 'picasso', name: '🎨 Picasso', desc: 'Everyone guessed your drawing!' }]);
+    }
+    drawer.score += 100; // bonus
+  }
+
+  // Record score history
+  room.scoreHistory.push({
+    round: room.currentRound,
+    drawerTurn: room.currentDrawerIndex,
+    scores: room.players.map(p => ({ id: p.id, name: p.name, score: p.score }))
+  });
+
+  io.to(room.id).emit('roundEnd', {
+    word: room.currentWord,
+    scores: room.players.map(p => ({
+      id: p.id, name: p.name, score: p.score, avatar: p.avatar,
+      roundGain: room.roundScores.find(r => r.id === p.id)?.score || 0,
+      guessTime: p.guessTime,
+    })),
+    drawStrokes: room.drawStrokes,
+    drawer: drawer ? { id: drawer.id, name: drawer.name } : null,
+    scoreHistory: room.scoreHistory,
+  });
+
+  room.timer = setTimeout(() => {
+    if (!rooms[room.id]) return;
+    nextTurn(room);
+  }, 7000);
+}
+
+function nextTurn(room) {
+  clearAllTimers(room);
+  room.currentDrawerIndex++;
+
+  if (room.currentDrawerIndex >= room.drawerOrder.length) {
+    room.currentRound++;
+    if (room.currentRound > room.settings.rounds) { endGame(room); return; }
+    room.drawerOrder = shuffle(room.players.map(p => p.id));
+    room.currentDrawerIndex = 0;
+  }
+
+  if (room.players.length < 2) {
+    room.state = 'waiting';
+    io.to(room.id).emit('gameAborted', { reason: 'Not enough players' });
+    return;
+  }
+  startRound(room);
+}
+
+function endGame(room) {
+  clearAllTimers(room);
+  room.state = 'ended';
+
+  const sorted = [...room.players].sort((a, b) => b.score - a.score);
+
+  // Victory achievement
+  if (sorted[0]) {
+    const winner = sorted[0];
+    if (!winner.achievements.includes('champion')) {
+      winner.achievements.push('champion');
+      io.to(winner.id).emit('achievementUnlocked', [{ id: 'champion', name: '👑 Champion', desc: 'You won the game!' }]);
+    }
+  }
+
+  io.to(room.id).emit('gameEnd', {
+    players: sorted.map((p, i) => ({
+      id: p.id, name: p.name, score: p.score,
+      rank: i + 1, achievements: p.achievements, avatar: p.avatar, streak: p.streak
+    })),
+    scoreHistory: room.scoreHistory,
+  });
+
+  setTimeout(() => { if (rooms[room.id]) delete rooms[room.id]; }, 60000);
+}
+
+// ─── Socket.IO ───────────────────────────────────────────────────────────────
+io.on('connection', (socket) => {
+
+  socket.on('createRoom', ({ name, avatar, settings }) => {
+    const id = createRoom(settings || {});
+    const room = rooms[id];
+    room.host = socket.id;
+    const player = addPlayer(room, socket.id, name, avatar);
+    socket.join(id);
+    socket.roomId = id;
+    socket.emit('roomCreated', { roomId: id, player, room: getRoomData(room) });
+  });
+
+  socket.on('joinRoom', ({ roomId, name, avatar, asSpectator }) => {
+    const code = (roomId || '').toUpperCase().trim();
+    const room = rooms[code];
+    if (!room) { socket.emit('joinError', { message: 'Room not found. Check the code!' }); return; }
+    if (!asSpectator && room.players.length >= room.settings.maxPlayers && room.state === 'waiting') {
+      socket.emit('joinError', { message: 'Room is full!' }); return;
+    }
+
+    socket.join(code);
+    socket.roomId = code;
+
+    let player;
+    if (asSpectator || room.state !== 'waiting') {
+      player = addPlayer(room, socket.id, name, avatar);
+      player.isSpectator = true;
+      room.players = room.players.filter(p => p.id !== socket.id); // remove from players
+      room.spectators.push(player);
+    } else {
+      player = addPlayer(room, socket.id, name, avatar);
+    }
+
+    socket.emit('roomJoined', { player, room: getRoomData(room) });
+    socket.to(code).emit('playerJoined', { player, players: room.players, spectators: room.spectators });
+  });
+
+  socket.on('joinRandom', ({ name, avatar }) => {
+    const available = Object.values(rooms).find(r =>
+      r.state === 'waiting' &&
+      r.players.length > 0 &&
+      r.players.length < r.settings.maxPlayers
+    );
+    if (available) {
+      socket.emit('joinRoom', {}); // trigger joinRoom flow with found room
+      const player = addPlayer(available, socket.id, name, avatar);
+      socket.join(available.id);
+      socket.roomId = available.id;
+      socket.emit('roomJoined', { player, room: getRoomData(available) });
+      socket.to(available.id).emit('playerJoined', { player, players: available.players });
+    } else {
+      const id = createRoom();
+      const room = rooms[id];
+      room.host = socket.id;
+      const player = addPlayer(room, socket.id, name, avatar);
+      socket.join(id);
+      socket.roomId = id;
+      socket.emit('roomCreated', { roomId: id, player, room: getRoomData(room) });
+    }
+  });
+
+  socket.on('startGame', () => {
+    const room = rooms[socket.roomId];
+    if (!room) return;
+    if (room.host !== socket.id) { socket.emit('gameError', { message: 'Only the host can start' }); return; }
+    if (room.players.length < 2) { socket.emit('gameError', { message: 'Need at least 2 players' }); return; }
+    startGame(room);
+  });
+
+  socket.on('chooseWord', ({ word }) => {
+    const room = rooms[socket.roomId];
+    if (!room || room.state !== 'choosing') return;
+    const player = room.players.find(p => p.id === socket.id);
+    if (!player?.isDrawing || !room.wordChoices.includes(word)) return;
+    wordChosen(room, word);
+  });
+
+  socket.on('draw', (data) => {
+    const room = rooms[socket.roomId];
+    if (!room || room.state !== 'drawing') return;
+    const player = room.players.find(p => p.id === socket.id);
+    if (!player?.isDrawing) return;
+    const stamped = { ...data, t: Date.now() - (room.roundStartTime || Date.now()) };
+    room.drawStrokes.push(stamped);
+    socket.to(socket.roomId).emit('draw', data);
+  });
+
+  socket.on('clearCanvas', () => {
+    const room = rooms[socket.roomId];
+    if (!room || room.state !== 'drawing') return;
+    const player = room.players.find(p => p.id === socket.id);
+    if (!player?.isDrawing) return;
+    room.drawStrokes = [{ type: 'clear', t: 0 }];
+    io.to(socket.roomId).emit('clearCanvas');
+  });
+
+  socket.on('guess', ({ text }) => {
+    const room = rooms[socket.roomId];
+    if (!room || !text) return;
+    const player = getPlayer(room, socket.id);
+    if (!player) return;
+
+    // Block drawer from revealing word in chat
+    if (player.isDrawing) {
+      socket.emit('chatMessage', { system: true, text: '🤫 You cannot chat while drawing!', type: 'warn' });
+      return;
+    }
+
+    const result = checkGuess(room, socket.id, text);
+
+    if (result === 'ignore') return;
+
+    if (result?.correct) {
+      socket.emit('correctGuess', { score: result.score, streak: result.streak, firstBonus: result.firstBonus });
+      io.to(socket.roomId).emit('chatMessage', {
+        system: true,
+        text: `🎉 ${player.name} guessed it! (+${result.score}pts${result.streak > 1 ? ` 🔥x${result.streak}` : ''})`,
+        type: 'correct'
+      });
+      broadcastPlayers(room);
+    } else if (result === 'close') {
+      socket.emit('chatMessage', { system: true, text: `🌡️ So close! Keep trying...`, type: 'close' });
+      io.to(socket.roomId).emit('chatMessage', { sender: player.name, text: '...', playerId: socket.id, type: 'guess' });
+    } else {
+      io.to(socket.roomId).emit('chatMessage', { sender: player.name, text, playerId: socket.id, type: 'guess' });
+    }
+  });
+
+  socket.on('chatMessage', ({ text }) => {
+    const room = rooms[socket.roomId];
+    if (!room || !text) return;
+    const player = getPlayer(room, socket.id);
+    if (!player) return;
+    // Only allow chat in non-drawing state or for spectators
+    if (room.state === 'drawing' && !player.isSpectator) {
+      // This goes through guess flow - ignore raw chat
+      return;
+    }
+    io.to(socket.roomId).emit('chatMessage', { sender: player.name, text: text.substring(0, 120), playerId: socket.id, type: 'chat' });
+  });
+
+  socket.on('usePowerUp', ({ type }) => {
+    const room = rooms[socket.roomId];
+    if (!room || room.state !== 'drawing') return;
+    const player = room.players.find(p => p.id === socket.id);
+    if (!player || player.isDrawing || !player.powerUps[type] || player.powerUps[type] <= 0) return;
+
+    player.powerUps[type]--;
+
+    if (type === 'revealLetter') {
+      revealHint(room);
+      io.to(socket.roomId).emit('chatMessage', { system: true, text: `🔍 ${player.name} revealed a letter!`, type: 'powerup' });
+    } else if (type === 'timeWarp') {
+      room.timeLeft = Math.min(room.timeLeft + 15, room.totalTime);
+      io.to(socket.roomId).emit('timerUpdate', { timeLeft: room.timeLeft, totalTime: room.totalTime });
+      io.to(socket.roomId).emit('chatMessage', { system: true, text: `⏰ ${player.name} warped time! +15s`, type: 'powerup' });
+    } else if (type === 'bomb') {
+      room.drawStrokes = [{ type: 'clear', t: Date.now() - room.roundStartTime }];
+      io.to(socket.roomId).emit('clearCanvas');
+      io.to(socket.roomId).emit('chatMessage', { system: true, text: `💣 ${player.name} dropped a BOMB! Canvas cleared!`, type: 'powerup' });
+    }
+
+    socket.emit('powerUpUsed', { type, remaining: player.powerUps });
+  });
+
+  socket.on('reaction', ({ emoji }) => {
+    const room = rooms[socket.roomId];
+    if (!room) return;
+    const player = getPlayer(room, socket.id);
+    io.to(socket.roomId).emit('reaction', { emoji, name: player?.name || 'Someone' });
+  });
+
+  socket.on('updateSettings', (settings) => {
+    const room = rooms[socket.roomId];
+    if (!room || room.host !== socket.id || room.state !== 'waiting') return;
+    Object.assign(room.settings, settings);
+    io.to(socket.roomId).emit('settingsUpdated', room.settings);
+  });
+
+  socket.on('kickPlayer', ({ playerId }) => {
+    const room = rooms[socket.roomId];
+    if (!room || room.host !== socket.id) return;
+    const target = io.sockets.sockets.get(playerId);
+    if (target) {
+      target.emit('kicked', { reason: 'You were kicked by the host' });
+      target.leave(socket.roomId);
+    }
+    room.players = room.players.filter(p => p.id !== playerId);
+    io.to(socket.roomId).emit('playerLeft', { playerId, players: room.players });
+  });
+
+  socket.on('requestReplay', () => {
+    // Allow replay of last round strokes - sent on roundEnd already
+  });
+
+  socket.on('disconnect', () => {
+    const room = rooms[socket.roomId];
+    if (!room) return;
+
+    const wasDrawing = room.players.find(p => p.id === socket.id)?.isDrawing;
+    room.players = room.players.filter(p => p.id !== socket.id);
+    room.spectators = room.spectators.filter(p => p.id !== socket.id);
+
+    if (room.players.length === 0 && room.spectators.length === 0) {
+      clearAllTimers(room);
+      delete rooms[socket.roomId];
+      return;
+    }
+
+    if (room.host === socket.id && room.players.length > 0) {
+      room.host = room.players[0].id;
+      io.to(room.host).emit('youAreHost');
+    }
+
+    io.to(socket.roomId).emit('playerLeft', { playerId: socket.id, players: room.players });
+
+    if (wasDrawing && (room.state === 'drawing' || room.state === 'choosing')) {
+      endRound(room);
+    }
+
+    if (room.players.length < 2 && room.state !== 'waiting' && room.state !== 'ended') {
+      clearAllTimers(room);
+      room.state = 'waiting';
+      io.to(socket.roomId).emit('gameAborted', { reason: 'Not enough players to continue' });
+    }
+  });
+});
+
+server.listen(PORT, '0.0.0.0', () => {
+  console.log(`🎨 Drawable running at http://localhost:${PORT}`);
+});

words.js

@@ -0,0 +1,71 @@
+module.exports = {
+  animals: [
+    'cat','dog','elephant','giraffe','penguin','dolphin','tiger','parrot',
+    'kangaroo','flamingo','octopus','cheetah','gorilla','panda','zebra',
+    'crocodile','chameleon','hedgehog','platypus','narwhal','sloth','axolotl',
+    'capybara','quokka','mantis shrimp','peacock','pelican','armadillo','pangolin'
+  ],
+  food: [
+    'pizza','sushi','hamburger','taco','spaghetti','pancakes','waffle',
+    'croissant','donut','avocado','strawberry','watermelon','pineapple',
+    'burrito','cheesecake','ramen','pretzel','cupcake','lasagna','fondue',
+    'baguette','churro','dumpling','falafel','gelato','mochi','baklava',
+    'ceviche','paella','tiramisu'
+  ],
+  objects: [
+    'umbrella','telescope','guitar','bicycle','lighthouse','compass','hourglass',
+    'magnifying glass','parachute','anchor','trophy','lantern','typewriter',
+    'binoculars','thermometer','calendar','backpack','microscope','skateboard',
+    'boomerang','periscope','harmonica','sextant','abacus','kazoo','trebuchet',
+    'gyroscope','kaleidoscope','protractor','metronome'
+  ],
+  nature: [
+    'volcano','rainbow','tornado','glacier','waterfall','desert','cactus',
+    'snowflake','lightning','mountain','coral reef','aurora','canyon','geyser',
+    'tsunami','avalanche','quicksand','tundra','mangrove','stalactite',
+    'fjord','monsoon','eclipse','meteor','geode','sinkhole','mesa','atoll',
+    'permafrost','bioluminescence'
+  ],
+  movies: [
+    'ghost','alien','matrix','titanic','inception','avatar','frozen','jumanji',
+    'batman','spiderman','mermaid','pirates','dinosaur','wizard','dragon',
+    'vampire','zombie','robot','spaceship','werewolf','mummy','superhero',
+    'ninja','samurai','cowboy','gladiator','astronaut','spy','detective','witch'
+  ],
+  sports: [
+    'basketball','volleyball','surfing','archery','gymnastics','wrestling',
+    'fencing','polo','curling','javelin','hurdles','bobsled','trampoline',
+    'skydiving','kayaking','rugby','lacrosse','badminton','cricket','handball',
+    'parkour','breakdancing','chess boxing','sumo','kabaddi','sepak takraw',
+    'disc golf','underwater hockey','toe wrestling','wife carrying'
+  ],
+  science: [
+    'atom','black hole','DNA','rocket','satellite','supernova','fossil',
+    'magnet','prism','laser','submarine','microscope','clone','hologram',
+    'wormhole','neutron star','quasar','antimatter','dark matter','neutrino',
+    'hadron','plasma','photon','entropy','relativity','quantum','singularity',
+    'nebula','pulsar','event horizon'
+  ],
+  places: [
+    'pyramid','eiffel tower','colosseum','statue of liberty','great wall',
+    'stonehenge','taj mahal','machu picchu','niagara falls','amazon rainforest',
+    'sahara','antarctica','bermuda triangle','area 51','alcatraz','pompeii',
+    'mount everest','mariana trench','angkor wat','chichen itza','petra',
+    'mount olympus','silicon valley','bermuda','dead sea','gobi desert',
+    'great barrier reef','yellowstone','grand canyon','venice'
+  ],
+  fantasy: [
+    'dragon','wizard','unicorn','phoenix','mermaid','griffin','centaur',
+    'minotaur','basilisk','kraken','leviathan','hydra','cerberus','cyclops',
+    'elf','dwarf','orc','hobbit','troll','goblin','fairy','vampire','werewolf',
+    'golem','sphinx','chimera','manticore','banshee','kitsune','tengu'
+  ],
+  technology: [
+    'smartphone','laptop','wifi','blockchain','artificial intelligence',
+    'virtual reality','drone','3d printer','self driving car','smartwatch',
+    'solar panel','wind turbine','electric car','robot arm','touchscreen',
+    'satellite dish','fiber optic','quantum computer','neural network','chatbot',
+    'cryptocurrency','hacker','data center','cloud','algorithm','pixel',
+    'circuit board','microchip','binary code','augmented reality'
+  ]
+};