✏️ SKRIBBLE — a skribbl.io clone

A full multiplayer drawing & guessing game in TypeScript. No assets — all graphics (avatars, icons, logo), sounds (WebAudio synth), and animations are generated in code.

Run it

npm install
npm run build     # compiles server (tsc) + client (esbuild)
npm start         # http://localhost:3000

Open http://localhost:3000 in multiple browser windows/tabs (or share your LAN IP) to play. PORT=8080 npm start to change the port.

Features

• Public & private rooms — quick-join public lobby browser, or create private rooms with a 4-letter room code
• Nicknames & procedural cartoon avatars (shuffle to randomize)
• Lobby chat + host-editable game settings: rounds (2–8), draw time (30–180 s), max players (2–12), public/private, custom words (+ custom-only mode)
• Turn-based drawing: drawer picks 1 of 3 random words (15 s to choose)
• Live canvas: only the current drawer can draw (enforced server-side)
  • 26 colors, 4 brush sizes, eraser, flood-fill bucket, clear canvas, undo
  • smooth quadratic-interpolated strokes, real-time stroke streaming to all players
• Guessing via chat: correct guesses are hidden from other players, close guesses are flagged ("X is close!"), the answer is stripped from chat while drawing
• Scoring: guessers earn more points the faster they guess (with order bonus decay); the drawer earns points for every correct guess (+ bonus if everyone guesses)
• Multiple rounds (everyone draws once per round), round banners, turn-end word reveal with point recap, countdown clock with ticking, letter hints revealed over time
• Scoreboard sorted live with ✅ guessed marks, ✏️ drawer mark, 👑 host, typing indicators
• Join/leave handling: host migration, drawer-leave turn skip, mid-game join sync (full canvas op log), inactive players kicked after 2.5 min, host can kick players
• End-game leaderboard with podium, medals and confetti, then back to lobby
• Synthesized sound effects (guesses, joins, ticks, fanfares) with mute toggle

Project layout

src/shared/    protocol types + word list (shared client/server)
src/server/    Node HTTP static server + ws game rooms (game.ts)
src/client/    browser client: net, canvas engine, UI, avatars, sfx
public/        index.html, style.css, bundle.js (built)
test/          headless ws integration tests (node test/sim.js, sim2.js)

Keyboard shortcuts: B brush, E eraser, F fill, Ctrl+Z undo.