Skip to content

Assignment#137

Open
Everest-Gowthaman wants to merge 11 commits into
everest-engineering:mainfrom
Everest-Gowthaman:assignment
Open

Assignment#137
Everest-Gowthaman wants to merge 11 commits into
everest-engineering:mainfrom
Everest-Gowthaman:assignment

Conversation

@Everest-Gowthaman

@Everest-Gowthaman Everest-Gowthaman commented Jun 12, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Everest-Gowthaman @gowthaman-6clicks