2.5 KiB
2.5 KiB
✏️ 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.