45 lines
2.5 KiB
Markdown
45 lines
2.5 KiB
Markdown
# ✏️ 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
|
||
|
||
```bash
|
||
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.
|