feat: weekly tech-news quiz (arcade leaderboard game) - #6388
Open
tomeredlich wants to merge 84 commits into
Open
feat: weekly tech-news quiz (arcade leaderboard game)#6388tomeredlich wants to merge 84 commits into
tomeredlich wants to merge 84 commits into
Conversation
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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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>
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>
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>
…k variants Rebuild the result image: header, level, score, username + avatar, the tier GIF frame (Giphy exports fine cross-origin), and leaderboard rank. Split into a createWeeklyQuizResultImage(params, variant) that returns a PNG data URL (1-4 layouts: GIF poster, centered card, split, ticket) with a download wrapper. Add a 'Share image (4 variants)' story to compare them. Drop the time chip from the results verdict. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…hare images Rasterise the daily.dev icon+wordmark SVG to white and draw it in the share image header (and centered layout) beside the game name; drop the dog mascot. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…r icon Wire the results Download button to share-image variant 2 (centered card) and remove the brand icon before 'Play at daily.dev' (now plain centered text; drops the now-unused brand asset). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…the share image Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…moves into the panel Add a bare (frameless) surface mode used by the results screen, and render the daily.dev logo as a header inside the first result panel instead of the shared top bar. Update the social share copy to 'I got X/Y ... what would you get?'. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Make the two result panels solid (bg-background-subtle) so they read on any backdrop, and remove the dark block that hugged the results in Storybook — the result now floats as self-contained cards (over the modal scrim in the app). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add createWeeklyQuizOgImage — a generic 1200x630 per-score card (daily.dev header, level, score, percentile, GIF, 'What would you get?') to serve as the shared link's og:image. Add a 'Social cards (per score)' story rendering all 11 outcomes (0..10). Share copy already updated to 'I got X/Y ... what would you get?'. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ne-liner, brand header top-left Redesign createWeeklyQuizOgImage to the simple tier card (per the mockup): a daily.dev + quiz-title header top-left, the GIF, then the level with its score-range pill and the one-liner. Drop the percentile, big score number and the 'what would you get' line (that lives in the share text). Render one card per level; the 'Social cards (per score)' story now shows the 6 levels. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add a 'Mobile welcome (3 layouts)' story with phone-framed concepts: stacked (mascot-led), CTA-first (Start above the fold), and immersive (hero + sticky Start). Exploration mockups. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…creens Add a 'Mobile screens' story with phone-framed countdown (purple count-in), question (timer + progress + four tiles) and final (verdict, GIF, share, leaderboard) mockups in the chosen Layout A style. Exploration mockups. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ong answer/verdict text Add the daily.dev top bar to the mobile question mock and let long answer tiles and the results verdict wrap (min-w-0 flex-1) instead of clipping. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
… mock Swap the placeholder text tiles for the actual SocialShareButton icons (Download, X, WhatsApp, Facebook, Reddit, LinkedIn) so the mobile final mock matches the web share row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Mirror the web results screen on the mobile final mock: the two floating panels, the verdict one-liner, the 'Had fun? Share it!' sticker, the challenge-a-friend link + copy, the weekly-reminder button, and the gold highlight on the player's own leaderboard row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…surface On mobile the quiz now fills the screen edge-to-edge with no card frame, and the mute + close controls move inside the top bar (above the mascot) instead of floating outside the card. Tablet+ keeps the centered card and the external side column. The modal drops the bottom-drawer treatment for a full-screen mobile surface. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
On mobile the date chip leaves the top bar (which now holds just the logo + mute + close) and sits centered above the intro title. Tablet+ keeps it on the top bar as before. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Paper rain covers the whole mobile screen: sheets spread edge to edge (not biased behind the mascot) and fall a full viewport height. - Countdown gets horizontal padding so its subtitle no longer touches the edges. - Results screen goes full-bleed on mobile like the intro — same layout, but the two panels drop their card chrome and outer padding and fill the screen; tablet+ keeps the floating cards. - Fix results horizontal overflow: min-w-0 on the surface (so the non-wrapping share row can't force it wider than the viewport) plus overflow-x-clip to contain the confetti drift. - Tighten the mascot-to-title gap on the mobile intro. - Storybook Results story now mirrors the full-bleed mobile wrapper + controls. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Multi-word names collapse to their first word on mobile so the rows stay compact; tablet+ keeps the full name. Single-word names render a single node. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The results brand header now uses the same markup as the intro's top bar — logo left, mute + close right in one justify-between row with matching padding and divider — instead of a logo-only header with the controls floating in an absolute overlay that didn't line up. Controls move into the header row (mobile) via a headerControls prop; desktop keeps the external side column. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The WhatsApp share previously sent only the bare link (getWhatsappShareLink dropped the text), so it surfaced the link's generic OG with no invite. Thread the optional text through so WhatsApp carries a real 'beat my score' invite before the link; direct callers that pass no text are unchanged. Also point the quiz share link at https://daily.dev for now — a resolvable URL with proper link-preview metadata — instead of the not-yet-live quiz path that returned a 'Page not found' preview. Reword the share text as a game invite. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Pre-render the same premade result card the Download button produces to a File on mount, and attach it via the Web Share API (navigator.share files) when the player uses the native Share button — so on mobile it lands as an actual photo in WhatsApp/etc. instead of a generic link-preview image. Falls back to the text + link share when file sharing is unsupported. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
SocialShareList gains an opt-in nativeShareFile prop: when set and the device can share files (mobile), the social buttons open the native share sheet with the image attached instead of the platform web intent (which can only carry text + link). Desktop and consumers that don't pass the prop are unchanged. The quiz results pass the premade result card so tapping WhatsApp/etc. on mobile sends the image as a photo. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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. Responsive: a centered card on desktop, full-bleed edge-to-edge on mobile.Flow: feed banner → modal → intro (logo, week context + top sources, Start, Share / Weekly reminder) → 3-2-1 countdown → 10 questions (4 options, instant green/red feedback, auto-advance) → results (developer "level" persona, score, share row, challenge link, leaderboard).
Intro
Results
Mobile
Sharing
navigator.share({ files })) — so it lands as a real image in WhatsApp/etc.generateResultImage.ts; Storybook "Share image" + "Social cards").🔗 Live preview (standalone, no feed)
https://claude-weekly-quiz-game-3483e1.preview.app.daily.dev/weekly-quiz-preview
Runs the quiz over demo mode (temporary scaffolding) so it's testable without the backend or the flag. Press X to reset and replay. Storybook:
Features/WeeklyQuiz/Game(intro, question, results, tiers/GIFs, share images, social cards, mobile screens).The backend GraphQL resolvers don't exist yet, so these fake the data and must be removed once the API + flag are live:
demoMode.ts(URL param?weekly-quiz-demo=1, sticky per session)/weekly-quiz-previewpage (packages/webapp/pages/weekly-quiz-preview.tsx,noindex)WeeklyQuizBannerBackend contract needed
Client-side definitions in
packages/shared/src/features/weeklyQuiz/graphql.ts+types.ts:weeklyQuizStatus— availability window, activeQuizId, per-week completionweeklyQuiz(quizId)— questions (4 options,correctOptionIdfor instant local feedback; recompute score server-side on submit)weeklyQuizLeaderboard(period)— ranked entries + the viewer's own ranksubmitWeeklyQuizResult({ quizId, answers, timeMs })— logged-in onlyFollow-ups (post-backend)
.../quiz?score=X) so the link preview shows the custom image.quizUrl(currentlyhttps://daily.dev) for the live quiz page.Reviewer heads-up
getShareLink/getWhatsappShareLinknow include the share text in WhatsApp shares (previously WhatsApp got the bare link). This is a small, backward-compatible change to a shared util, but it affects all WhatsApp shares app-wide, not just the quiz.Verification
pnpm --filter shared exec jest src/features/weeklyQuiz src/lib/share.spec.ts→ 26 passingnode ./scripts/typecheck-strict-changed.js→ clean🤖 Generated with Claude Code
Preview domain
https://claude-weekly-quiz-game-3483e1.preview.app.daily.dev