Skip to content

feat: roulette spinner auto-select on the results page - #12

Merged
MichaelJShepherd merged 1 commit into
mainfrom
feat/results-roulette-spinner
Jun 9, 2026
Merged

feat: roulette spinner auto-select on the results page#12
MichaelJShepherd merged 1 commit into
mainfrom
feat/results-roulette-spinner

Conversation

@MichaelJShepherd

@MichaelJShepherd MichaelJShepherd commented Jun 9, 2026

Copy link
Copy Markdown
Owner

Summary

Implements TODO task 12 (roulette / spinner selection) as an optional "Can't decide? Spin for me 🎲" control on the results page, rather than a separate spinner screen. Manual selection remains the primary path.

  • The highlight travels across the existing 3–5 result cards with a decelerating step sequence (spin-plan.ts, ease-in cubic delays), landing on a random pick in ~2–3s — inside the brand kit's 2–4s spinner window — and pulses the active card with the previously unused book-spin keyframe.
  • On landing, an aria-live panel announces the chosen book with This is the one! (reuses the existing selection tracking + confirmation flow) and Spin again.
  • prefers-reduced-motion skips the animation entirely and reveals the result instantly.
  • The spin control only appears when there is more than one pick; cards are disabled mid-spin.
  • TODO.md task 12 moved to Done; the spec's as-built section updated accordingly.

Screenshots

Mid-spin Landed (accept / respin) Accepted
Results page mid-spin with the Spinning… button disabled and the highlight moving across the cards Spin landed: panel announces the chosen book with This is the one! and Spin again buttons, winning card highlighted Confirmation screen showing the accepted book with Enjoy the read
Reduced motion — instant reveal (7ms, no roulette animation) With prefers-reduced-motion, the spin result panel appears instantly

Screenshots are hosted on the chore/pr-12-screenshots branch (not for merging); delete it once this PR is closed if you don't mind the images going blank here.

Test plan

  • 7 new unit tests for the spin schedule (spin-plan.spec.ts): lands on target, advances one card at a time, delays never decrease, total duration stays within 2–4s for 2–5 picks — all 21 frontend tests pass
  • Production build clean
  • Verified in a real browser (Puppeteer): full import→quiz→results flow, spin resolves in ~2.6s to a single book, respin works, accept reaches the confirmation screen, and reduced-motion emulation reveals instantly

https://claude.ai/code/session_01T3Bf7bT36EKqybyL4X2uKQ

Adds a 'Spin for me' option over the 3-5 result cards: the highlight
travels across the picks with a decelerating 2-4s step sequence
(spin-plan.ts), lands on a random book, and offers accept/respin.
Accepting reuses the existing selection tracking and confirmation
screen. Falls back to an instant reveal under prefers-reduced-motion,
and puts the previously unused book-spin pulse to work on the
highlighted card. Completes TODO task 12.

https://claude.ai/code/session_01T3Bf7bT36EKqybyL4X2uKQ
@MichaelJShepherd
MichaelJShepherd changed the base branch from development to main June 9, 2026 18:55
@MichaelJShepherd
MichaelJShepherd merged commit 13c3d44 into main Jun 9, 2026
3 of 4 checks passed
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.

2 participants