Skip to content

Add Collaborative Drawing minigame block - #236

Open
dconnenc wants to merge 4 commits into
mainfrom
collaborative-drawing-block
Open

dconnenc wants to merge 4 commits into
mainfrom
collaborative-drawing-block

Conversation

@dconnenc

Copy link
Copy Markdown
Owner

Summary

Adds a new Collaborative Drawing minigame block. Groups of audience members are shown a photo, each member redraws an assigned horizontal slice from memory, and the slices are stitched into a composite recreation shown back to everyone.

The block has two parts, decoupled in time (never shown concurrently; single-active-block model preserved):

  1. Photo intake — audience submits photos into a pool. Decoupled from the active segment via a participant-only, status-independent submit policy (mirrors the arithmetic pattern). ActiveStorage direct-upload, reusing the existing photo flow.
  2. Round — monitor tutorial → 10s countdown → per-device photo preview → slice marker → rotate-to-landscape draw surface → submit / auto-dispatch on time-out → composite reveal.

Architecture notes

  • Per-participant slice assignment is delivered via client submission_state (never a shared broadcast), pushed at round start with a new Broadcaster#broadcast_resubscribe_all. Composites are aggregate result data carried in the shared payload, like a leaderboard.
  • Assignment algorithm: subsection_count = clamp(ceil(participants / total_drawings), min, max), random photo pool, shuffled slot assignment. Surplus participants become spectators; shortfalls are logged.
  • Reuses DrawingCanvas (rebased onto the new cosmetics/flattened-image API; slices are stored as flattened images, and CompositeCanvas stacks them). Added a small submitSignal prop for time-out dispatch.
  • New models: ExperienceCollaborativeDrawingPhoto, ExperienceCollaborativeDrawingAssignment.

Testing

  • System spec spec/system/experiences/collaborative_drawing_block_spec.rb covers intake UI, photo pool → enabled round start, per-participant assignment delivery, monitor countdown, and composite reveal. Passing.
  • yarn typecheck clean. Storybook stories cover all states.

Follow-ups (intentionally scoped out — "we'll iterate")

  • The portrait→landscape transition is a lightweight motion animation into a square canvas; the polished box→fullscreen shared-element transition and true landscape slice aspect are follow-ups.
  • Monitor tutorial is a placeholder.

🤖 Generated with Claude Code

@dconnenc
dconnenc force-pushed the collaborative-drawing-block branch 2 times, most recently from ca7a9de to 3f5bd20 Compare August 21, 2026 14:26
Dillon Cassidy and others added 3 commits September 4, 2026 10:15
Groups of audience members are shown a photo, each redraws an assigned
horizontal slice from memory, and the slices are stitched into a composite
shown back to everyone.

- Photo intake decoupled from the active segment (participant-only, status-
  independent submit policy), collecting an ActiveStorage-backed pool.
- Round phase: monitor tutorial -> 10s countdown -> per-device photo preview ->
  slice marker -> rotate-to-landscape draw surface -> submit / auto-dispatch on
  time-out -> composite reveal.
- Per-participant slice assignment delivered via client submission state (never
  a shared broadcast); composites are aggregate result data like a leaderboard.
- Reuses DrawingCanvas (now aspect-aware + programmatic submit) and the photo
  direct-upload flow. New Create/Edit form, manage controls, and Storybook.
- System spec covers intake, assignment delivery, countdown, and reveal.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
While the round is running, the monitor now displays each team (group) in a
column, avatars ordered by their assigned slice, greyed out until the drawer
submits, alongside a running countdown for the drawing time.

- Serializes a per-group `board` (participant name, avatar, submitted) into the
  collaborative drawing payload for monitor/admin views only; avatars are public
  so it is safe on these shared streams. Updates live via the existing broadcast
  on each drawing submission.
- Monitor renders columns via the reused Avatar component; system spec asserts
  the board appears with the drawer during the draw window.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds a fast, browser-free orchestrator + visibility spec covering the
assignment algorithm, drawing submission, composite assembly, and the monitor
team board (including submitted-state transitions and its absence from the
participant payload). Drops the flaky real-time board assertion from the system
spec in favor of this coverage.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dconnenc
dconnenc force-pushed the collaborative-drawing-block branch from 3f5bd20 to 0370e53 Compare September 4, 2026 15:18
Queuing a Collaborative Drawing block now creates two decoupled, independently
sequenced blocks in the Manage UI: a photo intake (image upload) block and the
drawing round block. The round links to the intake via `intake_block_id` and
pulls its photo pool from it at round start; the two are opened separately so
collection is decoupled from the live drawing segment.

- Orchestrator#add_block! spins up the linked intake alongside the round;
  `open_immediately` opens the intake, the round stays queued.
- Assignment planner + response serialization read photos from the linked
  intake block; the round's `total` drives the Start-round gate.
- Manage controls (start/end/restart) only render on the round; the intake is
  driven by the normal present/close controls. Sidebar/timeline labels
  distinguish "Photo intake — <prompt>" from "Drawing round".
- Specs updated for the two-block model (service + system).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant