Scribble lab

[jyothiperla26]

Summary

This PR delivers a complete, playable multiplayer Scribble game on the starter scaffold. It implements all four lab scenarios—room setup and lobby, game start and drawer roles, interactive drawing and guessing, and result with host restart—using HTTP polling only, in-memory storage, and strict TypeScript validation.

The work follows the project constitution and Spec Kit workflow: discovery notes, constitution, distributed scenario specs under specs/, incremental tasks, granular commits, and a reflection report.

Out of scope (per lab): WebSockets, databases, authentication, drawer rotation, multi-round play, and random word packs.

Key Features & Changes

1. Room Management & Lobby (Scenario 1 — specs/001-room-setup-lobby/)

• Host tracking: Room creator’s participantId stored as hostId on create.
• Join validation: Trimmed, non-empty player names via Zod; room codes normalized to uppercase; clear 404 for unknown codes.
• Sync: 2s HTTP polling on LobbyPage (replaces manual-only refresh).
• Permissions: “Start Game” visible only to host; disabled until ≥2 players.

2. Game Start & Drawer Flow (Scenario 2 — specs/002-game-start-drawer/)

• Role assignment: Host becomes drawer on start; guessers identified via viewerRole in snapshots.
• Word privacy: secretWord masked in toRoomSnapshot for non-drawers; revealed to drawer only while playing.
• Deterministic word: starterWords[sum(ASCII(roomCode)) % length] from seed list.
• Auto-navigation: Poll-driven redirect from /lobby → /game when status becomes playing.
• API: POST /rooms/:code/start (host-only).

3. Interactive Drawing & Guessing (Scenario 3 — specs/003-gameplay-interaction/)

• HTML5 canvas: Replaced placeholder <div> with interactive drawing on GamePage.
• Coordinate scaling: Logical canvas 800×500 mapping so strokes align with the cursor across responsive layout.
• Synced strokes: Vector Line JSON (color, width, points) posted on stroke end and clear; guessers refresh via 2s polling.
• Guessing: GuessForm wired to backend; trim + case-insensitive match; empty guesses rejected.
• Scoring: Correct guess → +100, guess logged, status → result.
• APIs: POST /rooms/:code/draw, POST /rooms/:code/guess.

4. Result & Restart (Scenario 4 — specs/004-result-restart/)

• Result state: secretWord revealed to all when status is result; scoreboard and guess history via Scoreboard / ResultPanel.
• Host restart: POST /rooms/:code/restart clears canvas, guesses, and scores; preserves participants; status → lobby.
• Auto-navigation: Poll-driven redirect from /game → /lobby after restart.

Foundation & Fixes

• API base URL: Removed erroneous /bug suffix in frontend/src/services/api.ts.
• Models: Extended Room / RoomSnapshot with gameplay fields.
• Validation: Empty names no longer coerced to "Player"; whitespace-only input rejected.

Spec Kit & Documentation

Artifact	Location
Discovery notes	discovery-notes.md
Constitution	speckit.constitution, .specify/memory/constitution.md
Feature index + contracts	specs/001-scribble-game/
Per-scenario spec/plan/tasks	specs/001-room-setup-lobby/ … specs/004-result-restart/
Reflection	reflection.md
Requirements checklist	specs/001-scribble-game/checklists/requirements.md

Technical Integrity

• Tests: 13 backend unit tests (roomStore.test.ts, schemas.test.ts).
• Constraints: No WebSockets, no DB, no auth; in-memory room store; ~2s polling on lobby and game pages.
• Commits: Phased commits aligned to tasks (API fix → models → scenarios 1–4 → reflection/docs).

Verification Steps

1. Start backend (cd backend && npm run dev) and frontend (cd frontend && npm run dev).
2. Open two browser tabs.
3. Tab 1: Create room → lobby. Tab 2: Join with code → confirm Tab 1 list updates within ~2s.
4. Host: Start game (≥2 players) → both on /game; drawer sees word, guesser does not.
5. Drawer: Draw and clear canvas → guesser sees updates after poll.
6. Guesser: Submit correct guess (case-insensitive) → result (+100); word revealed to all.
7. Host: Restart → both return to lobby; players kept; round state cleared.
8. Run cd backend && npm run test (expect 13 passing).
9. Optional: npm run build in backend/ and frontend/.

Contributor

• Email: jyothi.perla@everest.engineering
• Role:
  • Product
  • Developer