Assignment

[Everest-Gowthaman]

Pull Request Summary: Scribble — Multiplayer Drawing Game

Overview

Implementation of a full multiplayer drawing game ("Scribble") across 4 scenarios, transforming a project scaffold into a functional polling-based game with room setup, drawing, guessing, scoring, and result/restart lifecycle.

Tech Stack: Node.js + Express + TypeScript (backend), React 18 + Vite + TypeScript (frontend), Vitest (testing), Zod (validation)

Constraints: No WebSockets (HTTP polling only), no databases (in-memory), no authentication

---

Key Commits (Implementation Phase)

Commit	Description
01c0a43	Scenario 1 — Room Setup & Lobby: implement and analyse
6edd0e9	Scenario 2 — Game Start & Drawer Flow
c0be778	Scenario 3 — Gameplay Integration
8ca674c	Scenario 4 — Result Validation Implementation

---

Specs Created

Scenario	Directory	Summary
S1	specs/001-room-setup-lobby/	Room creation, joining, code validation, host assignment, lobby polling
S2	specs/002-game-start-drawer-flow/	Drawer assignment, deterministic word selection, name validation
S3	specs/003-gameplay-interaction/	Canvas drawing, guess submission (case-insensitive), scoring (100pts), scoreboard
S4	specs/004-result-restart-validation/	Result state (secret word, scores, guess history), host-only restart, state cleanup

Each spec directory includes: spec.md, plan.md, tasks.md, data-model.md, research.md, quickstart.md, checklists/, and for S4 additionally contracts/api.md.

---

Backend Implementation (backend/src/)

API Endpoints

Method	Route	Purpose	Scenario
POST	/rooms	Create a room, assign creator as host	S1
POST	/rooms/:code/join	Join an existing room by code	S1
GET	/rooms/:code?participantId=	Fetch room state (polling endpoint)	S1
POST	/rooms/:code/start	Start game (host-only, ≥2 players)	S2
POST	/rooms/:code/guess	Submit a guess (case-insensitive, empty rejected)	S3
POST	/rooms/:code/canvas	Update/persist canvas state (data URL)	S3
POST	/rooms/:code/restart	Restart round (host-only, requires finished state)	S4

Key Backend Files

File	Role
src/models/game.ts	Types: RoomStatus, Room, RoomSnapshot, Guess, Participant
src/services/roomStore.ts	Core logic: createRoom, joinRoom, startGame, submitGuess, updateCanvasState, restartRoom, toRoomSnapshot
src/api/rooms.ts	Route handlers with Zod validation
src/api/schemas.ts	Zod schemas for all request/response validation
src/seed/starterData.ts	Word list for deterministic word selection
src/services/roomStore.test.ts	Unit tests (8 tests)

API Contract (specs/004-result-restart-validation/contracts/api.md)

Documents the complete contract for the final endpoint (POST /rooms/:code/restart) including 200/403/409 response shapes.

---

Frontend Implementation (frontend/src/)

Pages & Components

File	Purpose	Scenario
pages/StartPage.tsx	Landing page with Create/Join links	S1
pages/CreateRoomPage.tsx	Name input, room creation	S1
pages/JoinRoomPage.tsx	Name + code input with pattern validation	S1
pages/LobbyPage.tsx	Participant list, host badge, host-only start button, polling	S1
pages/GamePage.tsx	Main game layout: canvas, guess form, scoreboard, result screen	S2-S4
components/Canvas.tsx	Drawing canvas with mouse/touch handlers, clear button	S3
components/GuessForm.tsx	Guess input with validation (trim, empty reject)	S3
components/Scoreboard.tsx	Score display sorted by value	S3
components/ResultScreen.tsx	Post-round result: secret word, sorted scores, guess history, host restart button	S4
components/RoomCodeBadge.tsx	Room code display component	S1
components/Card.tsx	Generic card container	scaffold
components/PageHeader.tsx	Page header	scaffold

State & API Layer

File	Role
state/roomStore.ts	Class-based store with useSyncExternalStore — actions: createRoom, joinRoom, fetchRoom, startGame, submitGuess, submitCanvasState, restartRoom
services/api.ts	API client — methods for all 7 endpoints, typed responses
services/api.test.ts	Frontend API tests (4 tests)

State Machine

lobby ──(host starts, ≥2 players)──▶ playing ──(round ends)──▶ finished ──(host restarts)──▶ lobby
  ▲                                                                                              │
  └──────────────────────────────────────────────────────────────────────────────────────────────┘

---

Commands Used

Development

# Backend
cd backend && npm run dev        # Start dev server on port 3001 (tsx watch)

# Frontend
cd frontend && npm run dev       # Start dev server on port 5173 (Vite)

Build & Test

# Backend
cd backend && npm run build      # TypeScript compilation (tsc -p tsconfig.json)
cd backend && npm test           # Run Vitest (8 tests)

# Frontend
cd frontend && npm run build     # tsc -b && vite build
cd frontend && npm test          # Run Vitest (4 tests)

Spec Kit Workflow (per scenario)

/speckit.specify      # Create feature specification
/speckit.checklist    # Validate requirements quality
/speckit.clarify      # Resolve ambiguities
/speckit.plan         # Create implementation plan
/speckit.tasks        # Decompose into tasks
/speckit.analyze      # Cross-artifact consistency check
/speckit.implement    # Execute implementation

---

Summary Statistics

Metric	Value
Scenarios implemented	4
Backend endpoints	7
Frontend pages	6
Frontend components	8
Backend unit tests	8 (all passing)
Frontend unit tests	4 (all passing)
Build status	Backend: ✅ clean, Frontend: ✅ clean
Spec artifacts	6 spec directories with full Spec Kit
Total implementation commits	4
Key files modified/added	~30

Contributor
Email: gowthaman.s@everest.engineering
Role:

• Product
• Developer