Skip to content

feat: weekly tech-news quiz (arcade leaderboard game) - #6388

Open
tomeredlich wants to merge 26 commits into
mainfrom
claude/weekly-quiz-game-3483e1
Open

feat: weekly tech-news quiz (arcade leaderboard game)#6388
tomeredlich wants to merge 26 commits into
mainfrom
claude/weekly-quiz-game-3483e1

Conversation

@tomeredlich

@tomeredlich tomeredlich commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Weekly Tech News Quiz

A flag-gated (weekly_quiz, default off), web-only arcade trivia game about the week's tech news, skinned in the daily.dev purple.

Flow: feed banner → modal → arcade intro (logo, Start, week context + top sources, Share / Set weekly reminder, leaderboard) → 3-2-1 countdown → 10 questions (4 options, instant green/red feedback, auto-advance) → results (your placement + score + time, share-your-result image, challenge link).

Highlights

  • Intro shows the week date range and how much news it distils (N stories from M sources → K questions), with the week's top source logos.
  • Leaderboard with period tabs (Weekly / Monthly / All time); Monthly & All-time aggregate cumulative correct/total with the fastest single time. Reputation badges, "Fastest" + "Superstar" chips, a pinned "your rank" row, and internal scroll.
  • Standalone stopwatch timer (continuous wall-clock; answering never pauses it).
  • Results screen is achievement-focused: "You placed #N!" hero with avatar, big green Share your result button (generates a branded PNG), Challenge-your-team link, and a back arrow to the main screen.
  • One-shot per week: leave/refresh mid-quiz prompts a confirmation; intro locks with "Try again next week".
  • Sounds (lobby music, countdown, answer, correct, switch), the Play font, and the arcade CSS skin.
  • Full Storybook stories with mocked data (Features/WeeklyQuiz/Game).

🔗 Live preview (standalone, no feed)

https://claude-weekly-quiz-game-3483e1.preview.app.daily.dev/weekly-quiz-preview

This standalone page runs the quiz over demo mode (temporary scaffolding) so it's testable without the backend or the flag. Press X to reset and replay.

⚠️ Temporary demo scaffolding — remove before merge. demoMode.ts, the /weekly-quiz-preview page, the banner's demo enable, and the hook short-circuits fake the data because the backend GraphQL resolvers (weeklyQuizStatus, weeklyQuiz, weeklyQuizLeaderboard, submitWeeklyQuizResult) don't exist yet (client contract in packages/shared/src/features/weeklyQuiz/graphql.ts). The demo leaderboard also hardcodes real public daily.dev members (name/avatar/reputation) with synthetic quiz scores purely to make the preview look populated — this must be removed with the rest of the scaffolding.

Verification

  • pnpm --filter shared exec jest src/features/weeklyQuiz → 13 passing
  • node ./scripts/typecheck-strict-changed.js → clean
  • ESLint clean on the feature

🤖 Generated with Claude Code

Preview domain

https://claude-weekly-quiz-game-3483e1.preview.app.daily.dev

Adds the flag-gated Weekly Quiz feature (web-only): feed banner → modal
with an arcade intro, 3-2-1 countdown, stepped questions with instant
feedback and a standalone stopwatch, and a results screen. Includes the
leaderboard (period tabs, reputation, "Fastest"/"Superstar" chips, pinned
viewer rank), share popover, sounds, the "Play" font, and Storybook stories
with mocked data. Backend GraphQL resolvers are still pending; the client
contract is defined in graphql.ts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 29, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview Jul 29, 2026 3:19pm
storybook Building Building Preview Jul 29, 2026 3:19pm

Request Review

Lets the flag-gated, backend-less quiz be tested on a webapp preview:
appending ?weekly-quiz-demo=1 force-enables the banner and makes the
status/quiz/leaderboard hooks return sample/mock data instead of GraphQL
(sticky per session). Temporary — remove once the flag + backend are live.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
A feed-less preview route that opens the quiz modal over a blank page on
sample/mock data (demo mode). Closing (X) resets the run and reopens, so it
can be replayed freely. noindex/nofollow; temporary preview route.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The inner flex row lacked w-full; under the Modal's items-center wrapper it
collapsed to content width (~334px) inside the 74rem modal, squeezing both
panels and overlapping the leaderboard columns.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
74rem rendered too wide on the webapp; 52rem matches the Storybook layout
that was signed off.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…med in a black box

The surface provides its own gradient and rounding; the Modal's default
bg/border/shadow showed as a dark frame around it and behind the side controls.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…o board

The intro gated the pinned viewer row on alreadyPlayed, so a logged-in player
who hadn't played this week never saw their standing. viewerEntry is already
null for anon and for anyone without a standing, so the gate was redundant and
wrongly hid valid ranks. Dropped the showViewerRank prop entirely.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tomeredlich and others added 5 commits July 29, 2026 15:16
Shift the arcade surface, side controls, and banner from the warm-orange
gradient to the brand onion->cabbage purple so the quiz reads as part of the
app, not a standalone game. Keeps the green Start and warm reward accents for
contrast.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds startDate/endDate/storyCount/sourceCount to the quiz contract (+ sample,
query) and renders a date chip and a 'N stories from M sources, distilled into
K questions' line on the intro, so it's clear which week the quiz recaps and
how much news it condenses.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Lift faint text to higher-contrast whites (rank, time, inactive tabs), enlarge
the time column and award badges, and bold every player name so the dense
leaderboard is legible over the vivid surface.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds topSources to the quiz contract (+ sample, query) and renders a row of
source chips (logo + name) with a '+N more' count on the intro, so players see
which sources the week's questions are drawn from before they start.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
… link

- Rework the shareable result PNG to the daily.dev purple brand: glow, stat
  cards for score/time, a gold rank pill, and a self-explanatory tagline.
- Make the share-link popover reusable (title/description) and add a
  'Challenge your team' action on results that shares the quiz link.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tart

- Swap in the new daily.dev dog-mascot quiz logo (transparent PNG) and move the
  pulsing lightbulb glow to the bulb's new right/mid position.
- Show top sources as logos only (no names) with a '+N' count.
- Restyle the Start button from green to a purple->orange candy gradient to
  match the new surface.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tomeredlich and others added 3 commits July 29, 2026 16:12
Swap the placeholder source images for real production daily.dev source logos
and show 5 before the inline '+N', so the count sits on the same row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Lead the results with the player's own placement ('You placed #N!' + avatar and
a medal rank badge), shorten the leaderboard to a top-5 (full board lives on the
intro), and add a 'Back to main' button that returns to the intro via a new
game.backToIntro action.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Swap the fictional demo/mock names for real daily.dev members from the public
reputation leaderboard (real name/avatar/reputation; quiz scores stay
synthetic) so the preview looks like production during testing. TEMPORARY demo
scaffolding — removed with the rest when the real backend ships.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ard scroll

- Make Share / Weekly reminder equal-size horizontal buttons (icon beside label)
  with a slab shadow that presses on :active.
- Cap the intro leaderboard list at 60vh so it scrolls internally instead of
  growing the modal past the viewport.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tomeredlich and others added 2 commits July 29, 2026 17:23


- Expand the demo/mock leaderboard to 50 real daily.dev users so the list
  actually overflows and scrolls internally up to #50.
- Monthly/All-time now aggregate: cumulative correct/total across the period's
  quizzes (e.g. 40/40) with the fastest single time; weekly stays one quiz.
- Taller leaderboard rows to use the panel space; rename intro reminder button
  to 'Set weekly reminder'; give the Start button a tighter corner radius.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Results: replace the bottom 'Back to main' with a big icon-only back arrow
top-left, promote 'Share your result' to the arcade Start-button style (with
the idle pulse), and drop the leaderboard (the player's own placement is the
focus; the full board lives on the main screen).

Leaderboard: remove the window background and tab borders so rows sit flat on
the surface.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add an avocado-green arcade variant and apply it to the results share button,
keeping the Start button purple/orange.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tomeredlich and others added 2 commits July 29, 2026 18:04
- Drop the 60vh cap on the intro leaderboard list so it fills the panel height
  (no blank space below) and scrolls through all rows.
- Top-align the modal on the standalone /weekly-quiz-preview page so there's no
  large empty gap above it on the feed-less page.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…d names

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Shrink the logo and push the avatar, name, stat cards, rank pill, and tagline
clearly below it so nothing overlaps the (now ~square) logo art.

Co-Authored-By: Claude Opus 4.8 <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