+
+
+
+ Weekly quiz
+
+
+ {hasPlayed
+ ? 'You already played — see how you rank!'
+ : 'This week in tech news — were you paying attention?'}
+
+
+
+
+
+ Get ready…
+
+
+ {SEQUENCE[index]}
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizIntro.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizIntro.tsx
new file mode 100644
index 00000000000..e6fa4fa3560
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizIntro.tsx
@@ -0,0 +1,252 @@
+import type { MouseEvent, ReactElement } from 'react';
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyType,
+} from '../../../components/typography/Typography';
+import { BellIcon, CalendarIcon, ShareIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import {
+ ProfilePicture,
+ ProfileImageSize,
+} from '../../../components/ProfilePicture';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { WeeklyQuizScoreboard } from './WeeklyQuizScoreboard';
+import { WeeklyQuizSharePopover } from './WeeklyQuizSharePopover';
+import { WeeklyQuizPeriod } from '../types';
+import type { WeeklyQuiz } from '../types';
+import type { UseWeeklyQuizAudio } from '../hooks/useWeeklyQuizAudio';
+import styles from '../WeeklyQuiz.module.css';
+
+const LOGO_URL = '/logos/weekly-quiz-logo.png';
+
+// How many source logos the intro shows before collapsing the rest into "+N".
+// Kept low so the "+N" pill sits inline on the same row as the logos.
+const SHOWN_SOURCES = 5;
+
+interface WeeklyQuizIntroProps {
+ quiz: WeeklyQuiz | undefined;
+ isLoading: boolean;
+ onStart: () => void;
+ audio?: UseWeeklyQuizAudio;
+ // Locked out for the week — already played (server flag or a spent local run).
+ alreadyPlayed?: boolean;
+}
+
+// "Jul 20–26, 2026" from the quiz's inclusive ISO date range. Parsed from parts
+// (not new Date(iso)) so the label doesn't shift a day across timezones.
+const formatWeekRange = (start: string, end: string): string => {
+ const parse = (iso: string): Date => {
+ const [y, m, d] = iso.split('-').map(Number);
+ return new Date(y, m - 1, d);
+ };
+ const s = parse(start);
+ const e = parse(end);
+ const month = (date: Date): string =>
+ date.toLocaleDateString('en-US', { month: 'short' });
+ const year = e.getFullYear();
+ return s.getMonth() === e.getMonth()
+ ? `${month(s)} ${s.getDate()}–${e.getDate()}, ${year}`
+ : `${month(s)} ${s.getDate()} – ${month(e)} ${e.getDate()}, ${year}`;
+};
+
+// Landing screen: two separated floating panels — left holds the logo, the
+// arcade Start button and social actions; right holds the leaderboard. Stacks
+// on mobile, side-by-side from tablet up.
+export const WeeklyQuizIntro = ({
+ quiz,
+ isLoading,
+ onStart,
+ audio,
+ alreadyPlayed = false,
+}: WeeklyQuizIntroProps): ReactElement => {
+ const { user } = useAuthContext();
+ const [period, setPeriod] = useState
+ setIsShareOpen(false)} />
+ )}
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizModal.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizModal.tsx
new file mode 100644
index 00000000000..f16240374ab
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizModal.tsx
@@ -0,0 +1,159 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect } from 'react';
+import type { ModalProps } from '../../../components/modals/common/Modal';
+import { Modal } from '../../../components/modals/common/Modal';
+import { usePrompt } from '../../../hooks/usePrompt';
+import { useWeeklyQuizStatus } from '../hooks/useWeeklyQuizStatus';
+import { useWeeklyQuiz } from '../hooks/useWeeklyQuiz';
+import { useWeeklyQuizGame, WeeklyQuizPhase } from '../hooks/useWeeklyQuizGame';
+import { useWeeklyQuizAudio } from '../hooks/useWeeklyQuizAudio';
+import { useWeeklyQuizPlayed } from '../hooks/useWeeklyQuizPlayed';
+import { WeeklyQuizIntro } from './WeeklyQuizIntro';
+import { WeeklyQuizCountdown } from './WeeklyQuizCountdown';
+import { WeeklyQuizQuestion } from './WeeklyQuizQuestion';
+import { WeeklyQuizResults } from './WeeklyQuizResults';
+import { WeeklyQuizSideControls } from './WeeklyQuizSideControls';
+import styles from '../WeeklyQuiz.module.css';
+
+// The Weekly Quiz overlay: an intro (welcome text + scoreboard + start), a
+// 3-2-1 countdown, the stepped question flow, and the results. State lives in
+// useWeeklyQuizGame; audio (looping music + countdown beeps) lives in
+// useWeeklyQuizAudio, shared across phases and toggled by the header button.
+function WeeklyQuizModal({
+ onRequestClose,
+ ...props
+}: ModalProps): ReactElement {
+ const { status } = useWeeklyQuizStatus();
+ const quizId = status?.activeQuizId;
+ const { quiz, isPending } = useWeeklyQuiz(quizId);
+ const game = useWeeklyQuizGame(quiz);
+ const audio = useWeeklyQuizAudio();
+ const { showPrompt } = usePrompt();
+ const { hasPlayed, markPlayed } = useWeeklyQuizPlayed(quizId);
+
+ const { phase } = game;
+ const { startMusic, stopMusic } = audio;
+ // The quiz is live once the player leaves the intro (countdown + questions).
+ const isInProgress =
+ phase === WeeklyQuizPhase.Countdown || phase === WeeklyQuizPhase.Question;
+ // A one-shot per week: the server flag, or the local commitment we persist the
+ // moment they start. Either one locks the intro's Start button.
+ const alreadyPlayed = hasPlayed || !!status?.hasCompletedThisWeek;
+
+ // Background music is lobby ambiance: it plays on the intro and results
+ // screens (autoplay is allowed — the modal opens from a click) and stops
+ // during the countdown + questions so gameplay sound effects aren't competing
+ // with the loop. The modal unmount fully releases it (handled in
+ // useWeeklyQuizAudio).
+ useEffect(() => {
+ if (phase === WeeklyQuizPhase.Intro || phase === WeeklyQuizPhase.Results) {
+ startMusic();
+ } else {
+ stopMusic();
+ }
+ }, [phase, startMusic, stopMusic]);
+
+ // Spend the attempt as soon as the player commits (leaves the intro). Persists
+ // right away, so a refresh mid-quiz can't hand them a fresh run.
+ useEffect(() => {
+ if (phase !== WeeklyQuizPhase.Intro) {
+ markPlayed();
+ }
+ }, [phase, markPlayed]);
+
+ // Guard a page refresh / tab close while the quiz is live with the browser's
+ // native "leave site?" prompt. The attempt is already spent, so leaving just
+ // means forfeiting the run.
+ useEffect(() => {
+ if (!isInProgress) {
+ return undefined;
+ }
+ const handler = (event: BeforeUnloadEvent): void => {
+ event.preventDefault();
+ // Required for Chrome to actually show the native leave prompt.
+ // eslint-disable-next-line no-param-reassign
+ event.returnValue = '';
+ };
+ window.addEventListener('beforeunload', handler);
+ return () => window.removeEventListener('beforeunload', handler);
+ }, [isInProgress]);
+
+ // Intercept every in-app close route (X, Esc, overlay) while the quiz is live
+ // to confirm the player really means to forfeit their one run. Void-returning
+ // so it drops straight into onRequestClose / onClick handler slots.
+ const handleRequestClose = useCallback(
+ (event: React.MouseEvent | React.KeyboardEvent): void => {
+ if (!isInProgress) {
+ onRequestClose?.(event);
+ return;
+ }
+ showPrompt({
+ title: 'Leave the quiz?',
+ description:
+ "You only get one run this week. If you leave now your quiz is over — you won't be able to start it again.",
+ okButton: { title: 'Leave quiz' },
+ cancelButton: { title: 'Keep playing' },
+ }).then((confirmed) => {
+ if (confirmed) {
+ onRequestClose?.(event);
+ }
+ });
+ },
+ [isInProgress, onRequestClose, showPrompt],
+ );
+
+ return (
+
+
+ {/* Padding enlarges the mouse-tracked hover box beyond the logo art
+ so the 3D tilt reacts over a more generous area. */}
+
+
+
+
+ {alreadyPlayed ? (
+
+
+ {isShareOpen && (
+
+ {/* Padding enlarges the mouse-tracked hover box beyond the logo art
+ so the 3D tilt reacts over a more generous area. */}
+
+
+ 
+ {/* Glow sits over the logo's lightbulb (right side, mid-height). */}
+
+
+
+
+
+ {alreadyPlayed ? (
+
+
+
+ Try again next week!
+
+
+ ) : (
+
+ )}
+
+ {/* Which week + how much news it distils — makes it clear the quiz
+ recaps the week that just ended, not an older one. */}
+ {quiz && (
+
+
+
+ {quiz.storyCount} stories from {quiz.sourceCount} sources,
+ distilled into {questionCount} questions.
+
+ {quiz.topSources.length > 0 && (
+
+ )}
+
+ {/* Share + weekly reminder, always available. (Challenge-a-friend is
+ stashed for now.) */}
+
+ {quiz.topSources.slice(0, SHOWN_SOURCES).map((source) => (
+ 
+ ))}
+ {quiz.sourceCount > SHOWN_SOURCES && (
+
+ +{quiz.sourceCount - SHOWN_SOURCES}
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {phase === WeeklyQuizPhase.Intro && (
+
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizResults.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizResults.tsx
new file mode 100644
index 00000000000..764fe243128
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizResults.tsx
@@ -0,0 +1,286 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyTag,
+ TypographyType,
+} from '../../../components/typography/Typography';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { AuthTriggers } from '../../../lib/auth';
+import {
+ Button,
+ ButtonSize,
+ ButtonVariant,
+} from '../../../components/buttons/Button';
+import { ArrowIcon, BellIcon, UserShareIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import {
+ ProfilePicture,
+ ProfileImageSize,
+} from '../../../components/ProfilePicture';
+import { WeeklyQuizSharePopover } from './WeeklyQuizSharePopover';
+import { formatElapsed } from './WeeklyQuizTimer';
+import { useSubmitWeeklyQuiz } from '../hooks/useSubmitWeeklyQuiz';
+import { useWeeklyQuizLeaderboard } from '../hooks/useWeeklyQuizLeaderboard';
+import { generateWeeklyQuizResultImage } from '../generateResultImage';
+import { isWeeklyQuizDemo } from '../demoMode';
+import type { WeeklyQuizGameResult } from '../hooks/useWeeklyQuizGame';
+import type { UseWeeklyQuizAudio } from '../hooks/useWeeklyQuizAudio';
+import { WeeklyQuizPeriod } from '../types';
+import styles from '../WeeklyQuiz.module.css';
+
+interface WeeklyQuizResultsProps {
+ quizId: string;
+ result: WeeklyQuizGameResult;
+ audio?: UseWeeklyQuizAudio;
+ // Return to the intro ("main"), which shows the full leaderboard.
+ onBackToMain: () => void;
+}
+
+const buildMessage = (correct: number, total: number): string => {
+ const ratio = total === 0 ? 0 : correct / total;
+ if (ratio === 1) {
+ return 'Flawless — you were paying attention this week!';
+ }
+ if (ratio >= 0.6) {
+ return 'Nicely done. You know your tech news.';
+ }
+ if (ratio >= 0.3) {
+ return 'Not bad — a few slipped past you.';
+ }
+ return 'Tough week? There is always next week.';
+};
+
+// Final screen: a back arrow to the main screen, then the player's own result
+// as the hero (placement + score + time) and the share/reminder actions. The
+// full leaderboard lives on the main screen, not here. Logged-in players'
+// results are submitted once on arrival (and again if an anonymous player signs
+// in from here).
+export const WeeklyQuizResults = ({
+ quizId,
+ result,
+ onBackToMain,
+}: WeeklyQuizResultsProps): ReactElement => {
+ const { user, showLogin } = useAuthContext();
+ const { submit } = useSubmitWeeklyQuiz();
+ // Local-only until the reminder subscription is wired to the backend.
+ const [reminderSet, setReminderSet] = useState(false);
+ const [isChallengeOpen, setIsChallengeOpen] = useState(false);
+ const submittedRef = useRef(false);
+ // Rank comes from this week's board (the quiz just finished).
+ const { leaderboard, viewerEntry } = useWeeklyQuizLeaderboard(
+ WeeklyQuizPeriod.Weekly,
+ );
+
+ // The player's rank — pinned viewer row when out of the top list, otherwise
+ // their in-list row.
+ const rank =
+ viewerEntry?.rank ??
+ leaderboard.find((entry) => entry.isCurrentUser)?.rank ??
+ null;
+
+ // Renders the result as a shareable PNG and downloads it. Target may change
+ // later (native share sheet / upload); for now it saves locally.
+ const handleShareResult = (): void => {
+ generateWeeklyQuizResultImage({
+ name: user?.name || user?.username || 'You',
+ imageUrl: user?.image,
+ correctCount: result.correctCount,
+ totalQuestions: result.totalQuestions,
+ timeLabel: formatElapsed(result.timeMs),
+ rank,
+ logoUrl: '/logos/weekly-quiz-logo.png',
+ }).catch(() => undefined);
+ };
+
+ // Submit once we have an authenticated player — either immediately (already
+ // logged in) or right after they sign in from the prompt below. Skipped in
+ // demo mode (no backend to submit to).
+ useEffect(() => {
+ if (!user || submittedRef.current || isWeeklyQuizDemo()) {
+ return;
+ }
+
+ submittedRef.current = true;
+ submit({
+ quizId,
+ answers: result.answers,
+ timeMs: result.timeMs,
+ }).catch(() => {
+ // Allow a retry if the submission failed.
+ submittedRef.current = false;
+ });
+ }, [user, submit, quizId, result]);
+
+ return (
+
+
+ Question {questionNumber} of {totalQuestions}
+
+
+
+
+
+
+
+
+
+ {question.prompt}
+
+
+
+
+ {question.options.map((option, index) => (
+
+
+ {/* Big icon-only back arrow to the main screen, top-left. */}
+
+
+ setIsChallengeOpen(false)}
+ />
+ )}
+
+ {!user && (
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizScoreboard.spec.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizScoreboard.spec.tsx
new file mode 100644
index 00000000000..4e9cb4cee36
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizScoreboard.spec.tsx
@@ -0,0 +1,122 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { WeeklyQuizScoreboard } from './WeeklyQuizScoreboard';
+import { useWeeklyQuizLeaderboard } from '../hooks/useWeeklyQuizLeaderboard';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { WeeklyQuizPeriod } from '../types';
+
+jest.mock('../hooks/useWeeklyQuizLeaderboard');
+jest.mock('../../../contexts/AuthContext');
+
+const mockLeaderboard = jest.mocked(useWeeklyQuizLeaderboard);
+const mockAuth = jest.mocked(useAuthContext);
+const showLogin = jest.fn();
+
+const renderScoreboard = () => {
+ const queryClient = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+ return render(
+
+ {/* Achievement first: the player's own placement is the hero, with their
+ avatar and a medal-style rank badge. Only when we know their rank. */}
+ {rank && user && (
+
+ {buildMessage(result.correctCount, result.totalQuestions)}
+
+
+
+ {/* Primary action: share, styled and animated like the Start button. */}
+
+
+ {/* Secondary actions. */}
+
+
+ You placed #{rank}!
+
+
+ )}
+ {/* Score and time carry equal weight — two matching stat circles. */}
+
+
+
+
+
+
+ {result.correctCount}/{result.totalQuestions}
+
+
+ Correct
+
+
+
+
+ {formatElapsed(result.timeMs)}
+
+
+ Time
+
+
+
+
+
+
+
+ {isChallengeOpen && (
+
+
+ Log in to save your score and claim your spot
+
+
+
+ )}
+
+
+ {entry.name}
+
+
+ {isFastest && (
+
+
+ 
+
+ Leaderboard
+
+
+ {/* Browser-style tabs sitting on top of the leaderboard "window": the
+ active tab shares the window's background so it reads as connected. */}
+
+
+
+
+ {periodTabs.map((tab) => {
+ const isActive = period === tab.value;
+ return (
+
+ );
+ })}
+
+
+
+ {!showBoard ? (
+
+ No scores yet — be the first to play!
+
+ )}
+ {!isPending && leaderboard.length > 0 && (
+
+
+
+ ) : (
+ <>
+ {isPending && (
+ -
+ {[1, 2, 3, 4].map((rank) => (
+
- + + + + + ))} +
+
+ Log in to see the scoreboard
+
+
+
+
+
+
+ )}
+ {!isPending && leaderboard.length === 0 && (
+ -
+ {visibleLeaderboard.map((entry) => (
+
+
+ )}
+
+ )}
+
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSideControls.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSideControls.tsx
new file mode 100644
index 00000000000..fe045081354
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSideControls.tsx
@@ -0,0 +1,63 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+ VolumeIcon,
+ VolumeLowIcon,
+ VolumeOffIcon,
+ MiniCloseIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { WeeklyQuizAudioLevel } from '../hooks/useWeeklyQuizAudio';
+import styles from '../WeeklyQuiz.module.css';
+
+interface WeeklyQuizSideControlsProps {
+ level: WeeklyQuizAudioLevel;
+ onCycleSound: () => void;
+ onClose: (event: React.MouseEvent
+
+
+
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+ event.target.select()}
+ className="min-w-0 flex-1 rounded-10 bg-white px-3 py-2 text-black typo-footnote"
+ />
+ }
+ onClick={copy}
+ >
+ {copied ? 'Copied' : 'Copy'}
+
+
+
+
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizTimer.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizTimer.tsx
new file mode 100644
index 00000000000..538429ad9ed
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizTimer.tsx
@@ -0,0 +1,48 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyType,
+} from '../../../components/typography/Typography';
+import { TimerIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+
+interface WeeklyQuizTimerProps {
+ elapsedMs: number;
+ isPaused: boolean;
+}
+
+export const formatElapsed = (elapsedMs: number): string => {
+ const totalSeconds = Math.floor(elapsedMs / 1000);
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};
+
+// The running total timer. Ticks up while the player is thinking and freezes
+// (dimmed) while feedback is on screen, so reading feedback never costs time.
+export const WeeklyQuizTimer = ({
+ elapsedMs,
+ isPaused,
+}: WeeklyQuizTimerProps): ReactElement => {
+ return (
+
+
+ {formatElapsed(elapsedMs)}
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/demoMode.ts b/packages/shared/src/features/weeklyQuiz/demoMode.ts
new file mode 100644
index 00000000000..a18cd3ae8d1
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/demoMode.ts
@@ -0,0 +1,475 @@
+import { sampleWeeklyQuiz } from './sampleWeeklyQuiz';
+import { WeeklyQuizPeriod } from './types';
+import type { WeeklyQuizLeaderboardEntry, WeeklyQuizStatus } from './types';
+
+// TEMPORARY demo scaffolding so the flag-gated, backend-less quiz can be tested
+// on a webapp preview: append `?weekly-quiz-demo=1` to any URL. It flips the
+// feature on and the data hooks return the sample/mock content below instead of
+// hitting GraphQL. Sticky for the session so it survives feed navigation.
+// Remove once the backend + flag are live.
+const DEMO_PARAM = 'weekly-quiz-demo';
+const STORAGE_KEY = 'weekly_quiz_demo';
+
+export const isWeeklyQuizDemo = (): boolean => {
+ if (typeof window === 'undefined') {
+ return false;
+ }
+ try {
+ if (new URLSearchParams(window.location.search).has(DEMO_PARAM)) {
+ window.sessionStorage.setItem(STORAGE_KEY, '1');
+ return true;
+ }
+ return window.sessionStorage.getItem(STORAGE_KEY) === '1';
+ } catch {
+ return false;
+ }
+};
+
+// Turn demo mode on programmatically (used by the standalone preview page).
+export const enableWeeklyQuizDemo = (): void => {
+ if (typeof window === 'undefined') {
+ return;
+ }
+ try {
+ window.sessionStorage.setItem(STORAGE_KEY, '1');
+ } catch {
+ // Ignore storage failures (private mode, etc.).
+ }
+};
+
+export const demoStatus: WeeklyQuizStatus = {
+ isActive: true,
+ activeQuizId: sampleWeeklyQuiz.id,
+ hasCompletedThisWeek: false,
+ hasCompletedLastWeek: false,
+ thisWeekResult: null,
+ lastWeekResult: null,
+};
+
+// Real daily.dev members pulled from the public reputation leaderboard, used
+// only so the preview looks populated for testing. Names/avatars/reputation are
+// their real public profile data; the quiz scores/times below are synthetic
+// (there's no live quiz backend yet). TEMPORARY — remove with the rest of the
+// demo scaffolding once the real leaderboard ships.
+const DEMO_USERS = [
+ {
+ id: '9aDj6fGmy',
+ name: 'Bobby Iliev',
+ username: 'bobbyiliev',
+ reputation: 73820,
+ image: 'https://avatars3.githubusercontent.com/u/21223421?v=4',
+ },
+ {
+ id: 'HXYbbGcBO38Rfv7RrCBdA',
+ name: 'Randy',
+ username: 'randy',
+ reputation: 68700,
+ image:
+ 'https://media.daily.dev/image/upload/s--UjV4-KkB--/f_auto/v1708097210/avatars/avatar_HXYbbGcBO38Rfv7RrCBdA',
+ },
+ {
+ id: 'XDCZD-PHG',
+ name: 'Ole-Martin',
+ username: 'ombratteng',
+ reputation: 65250,
+ image: 'https://avatars.githubusercontent.com/u/1681525?v=4',
+ },
+ {
+ id: 'iaC4JsBU0lV8wBsc85fSh',
+ name: 'Joud Awad',
+ username: 'joudawad',
+ reputation: 61520,
+ image:
+ 'https://media.daily.dev/image/upload/s--dOB9RaXY--/f_auto/v1773320801/avatars/avatar_iaC4JsBU0lV8wBsc85fSh?_a=BAMAMiiu0',
+ },
+ {
+ id: 'yRuVFf6IbfTylBjx9Dzvt',
+ name: 'Denis Bolkovskis',
+ username: 'denisb0',
+ reputation: 56490,
+ image:
+ 'https://media.daily.dev/image/upload/s--PGCuYx85--/f_auto,q_auto/v1/avatars/avatar_yRuVFf6IbfTylBjx9Dzvt',
+ },
+ {
+ id: 'pWEhX8JhjnUQB2l4CNVSW',
+ name: 'OrcDev',
+ username: 'orcdev',
+ reputation: 54710,
+ image: 'https://avatars.githubusercontent.com/u/7549148?v=4',
+ },
+ {
+ id: 'WVJSfJtDe63PxQFAsmXFO',
+ name: 'Anja P',
+ username: 'anjapcodes',
+ reputation: 50790,
+ image:
+ 'https://media.daily.dev/image/upload/s--M_c0s8Ky--/f_auto/v1721658650/avatars/avatar_WVJSfJtDe63PxQFAsmXFO',
+ },
+ {
+ id: 'JUNiIGCV-',
+ name: 'Chris Bongers',
+ username: 'dailydevtips',
+ reputation: 49255,
+ image:
+ 'https://media.daily.dev/image/upload/s--9gxFz1e7--/f_auto/v1705902590/avatars/avatar_JUNiIGCV-?_a=BAMAMiZW0',
+ },
+ {
+ id: 'V7baLm8Y0o32yjz1hHf5a',
+ name: 'Fabian Letsch',
+ username: 'fabianletsch',
+ reputation: 48660,
+ image:
+ 'https://lh3.googleusercontent.com/a/ACg8ocKR6BVy_wn23EoOKq7-BlszlcXcLmASlnb7l-GtS-q1bePnkaJf=s96-c',
+ },
+ {
+ id: 'otqAJUf6zdM9hfRwTlR9n',
+ name: 'Isaac de Andrade',
+ username: 'andradei',
+ reputation: 48510,
+ image: 'https://avatars.githubusercontent.com/u/2653546?v=4',
+ },
+ {
+ id: '29TCpY2hJR72V3BlxPXzX',
+ name: 'Daniel',
+ username: 'akkitto',
+ reputation: 47830,
+ image:
+ 'https://media.daily.dev/image/upload/s--FtwJqX4c--/f_auto/v1754900041/avatars/avatar_29TCpY2hJR72V3BlxPXzX?_a=BAMClqZW0',
+ },
+ {
+ id: 'IXalnaxWMtGrFtZ6XDX4U',
+ name: 'Kirill Kurko',
+ username: 'kkurko',
+ reputation: 31350,
+ image: 'https://avatars.githubusercontent.com/u/58859242?v=4',
+ },
+ {
+ id: 'G85JhYcDxAg024Omc8Rlp',
+ name: 'Damien seguy',
+ username: 'damienseguy',
+ reputation: 30390,
+ image:
+ 'https://media.daily.dev/image/upload/s--nPbjKqol--/f_auto,q_auto/v1698422671/avatars/avatar_G85JhYcDxAg024Omc8Rlp',
+ },
+ {
+ id: 'eCYKGSsVlzKQY1G7NxkJc',
+ name: 'Friedrich WT',
+ username: 'friedrich',
+ reputation: 30070,
+ image: 'https://avatars.githubusercontent.com/u/136119888?v=4',
+ },
+ {
+ id: '5zahWGRIGj4Y3VQ3jIlBS',
+ name: 'Debajyati Dey',
+ username: 'debajyatidey',
+ reputation: 29900,
+ image: 'https://avatars.githubusercontent.com/u/127122455?v=4',
+ },
+ {
+ id: 'Qz65P1nVw3Bu6C5YwaZgA',
+ name: 'Peter Mrożek',
+ username: 'petermrozek',
+ reputation: 29845,
+ image:
+ 'https://media.daily.dev/image/upload/s--pBfYX68K--/f_auto/v1769247960/avatars/avatar_Qz65P1nVw3Bu6C5YwaZgA?_a=BAMAMiiu0',
+ },
+ {
+ id: 'bu452DQxxXbGcj178k2RJ',
+ name: 'Tessa van der Heijden',
+ username: 'tvdheijden',
+ reputation: 29550,
+ image:
+ 'https://media.daily.dev/image/upload/s--efFpmmNm--/f_auto/v1705569455/avatars/avatar_bu452DQxxXbGcj178k2RJ',
+ },
+ {
+ id: 'dR92D50hh',
+ name: 'George',
+ username: 'feketegy',
+ reputation: 27520,
+ image:
+ 'https://media.daily.dev/image/upload/s--YeiBYVuL--/f_auto/v1743758421/avatars/avatar_dR92D50hh',
+ },
+ {
+ id: 'WXcnVdXbQljWuHJCBcViw',
+ name: 'Divyesh Vekariya',
+ username: 'divyesh_vekariya',
+ reputation: 27320,
+ image:
+ 'https://media.daily.dev/image/upload/s--RDCl1xsD--/f_auto/v1728905544/avatars/avatar_WXcnVdXbQljWuHJCBcViw',
+ },
+ {
+ id: '9pqnrpoJdg1CfgqIBuMCl',
+ name: 'Hadil Ben Abdallah',
+ username: 'hadilbenabdallah',
+ reputation: 26580,
+ image:
+ 'https://media.daily.dev/image/upload/s--npVXQBAk--/f_auto/v1726134205/avatars/avatar_9pqnrpoJdg1CfgqIBuMCl',
+ },
+ {
+ id: 'g4ZJecDKXrCh6bYVK1iyV',
+ name: 'Szymon Omieciński',
+ username: 'simon125q',
+ reputation: 25520,
+ image:
+ 'https://media.daily.dev/image/upload/s--ZNKkeUvQ--/f_auto/v1762695887/avatars/avatar_g4ZJecDKXrCh6bYVK1iyV?_a=BAMAK+ZW0',
+ },
+ {
+ id: 'cmPs2DO0hyj5zVizDLJDZ',
+ name: 'Mouad Dadda',
+ username: 'mouad_dadda',
+ reputation: 22540,
+ image:
+ 'https://media.daily.dev/image/upload/s--qvecFxpC--/f_auto/v1746013117/avatars/avatar_cmPs2DO0hyj5zVizDLJDZ',
+ },
+ {
+ id: 'zyFqB01G2vXeC6aJycktp',
+ name: 'Ezpie',
+ username: 'ezpie',
+ reputation: 22300,
+ image: 'https://avatars.githubusercontent.com/u/104765117?v=4',
+ },
+ {
+ id: 'sDzCovimjL',
+ name: 'TheCoverLiker',
+ username: 'thecoverliker',
+ reputation: 20940,
+ image:
+ 'https://media.daily.dev/image/upload/v1681623072/avatars/avatar_sDzCovimjL.jpg',
+ },
+ {
+ id: 'SOwG1kJqf6HK6TkGmZH45',
+ name: 'Daniel',
+ username: 'daniel8000',
+ reputation: 20900,
+ image:
+ 'https://media.daily.dev/image/upload/s--F_RltCZK--/f_auto/v1738746891/avatars/avatar_SOwG1kJqf6HK6TkGmZH45',
+ },
+ {
+ id: '5cQvIZKr5tDFDotVDjulg',
+ name: 'Jacob B. Bonde',
+ username: 'byteoutlaw',
+ reputation: 20895,
+ image:
+ 'https://media.daily.dev/image/upload/s--veTChHK7--/f_auto/v1733220070/avatars/avatar_5cQvIZKr5tDFDotVDjulg',
+ },
+ {
+ id: 'Su5HqluAE4wLRb1naHjtv',
+ name: 'Serdarcan Buyukdereli',
+ username: 'serdarbuyukdereli',
+ reputation: 20380,
+ image:
+ 'https://media.daily.dev/image/upload/s--tTV8hAPq--/f_auto/v1778701721/avatars/avatar_Su5HqluAE4wLRb1naHjtv?_a=BAMAMiWQ0',
+ },
+ {
+ id: 'SEMcvjKuE',
+ name: 'Kevin',
+ username: 'kyoukhana',
+ reputation: 20115,
+ image: 'https://avatars2.githubusercontent.com/u/756849?v=4',
+ },
+ {
+ id: 'N403VFK9lAHNRwlSAhl1h',
+ name: 'Phillippe Michel Weir',
+ username: 'a_meb_a',
+ reputation: 19980,
+ image:
+ 'https://media.daily.dev/image/upload/s--BwH-uTMq--/f_auto/v1740136991/avatars/avatar_N403VFK9lAHNRwlSAhl1h',
+ },
+ {
+ id: 'iWZFqWGzJuZ3TMf4ZW9aZ',
+ name: 'Anmol Baranwal',
+ username: 'anmolbaranwal',
+ reputation: 19650,
+ image: 'https://avatars.githubusercontent.com/u/74038190?v=4',
+ },
+ {
+ id: 'CuJEPTEsDJlaKzfXt7xfz',
+ name: 'Dickson A.',
+ username: 'fabidick22',
+ reputation: 19000,
+ image: 'https://avatars.githubusercontent.com/u/8176821?v=4',
+ },
+ {
+ id: 'umWZ9aQAng34qk5aaJl2q',
+ name: 'Lars Faye | Confident Coding',
+ username: 'confidentcoding',
+ reputation: 18970,
+ image:
+ 'https://media.daily.dev/image/upload/s--OGZu5DEc--/f_auto/v1772569630/avatars/avatar_umWZ9aQAng34qk5aaJl2q?_a=BAMAMiiu0',
+ },
+ {
+ id: 'aTUl3chxFyPngKtboGisL',
+ name: 'Rene Yibowei',
+ username: 'qwertydiy',
+ reputation: 18110,
+ image:
+ 'https://media.daily.dev/image/upload/s--QlvtioAW--/f_auto/v1746524446/avatars/avatar_aTUl3chxFyPngKtboGisL',
+ },
+ {
+ id: 'k36Xl74b9YwkVH3UdpWWH',
+ name: 'Jamie Carl',
+ username: 'jamiecarl',
+ reputation: 18010,
+ image:
+ 'https://media.daily.dev/image/upload/s--6HKK4uxD--/f_auto/v1774926661/avatars/avatar_k36Xl74b9YwkVH3UdpWWH?_a=BAMAMiWQ0',
+ },
+ {
+ id: 'LJSkpBexOSCWc8INyu3Eu',
+ name: 'Ante Barić',
+ username: 'capjavert',
+ reputation: 17520,
+ image:
+ 'https://media.daily.dev/image/upload/v1679300599/avatars/avatar_LJSkpBexOSCWc8INyu3Eu.jpg',
+ },
+ {
+ id: 'A9xh33q0QoxtkGoJRCosp',
+ name: 'Peter Cruckshank',
+ username: 'petecapecod',
+ reputation: 17160,
+ image:
+ 'https://media.daily.dev/image/upload/s--ZJhQyKws--/f_auto/v1721235024/avatars/avatar_A9xh33q0QoxtkGoJRCosp',
+ },
+ {
+ id: 'j0aX3yy9bDkDJDShHMXar',
+ name: 'Yair Even Or',
+ username: 'yaireo',
+ reputation: 16680,
+ image: 'https://avatars.githubusercontent.com/u/845031?v=4',
+ },
+ {
+ id: 'EEO0c1ol7u5IpOuykRZ1K',
+ name: 'Sab',
+ username: 'sab_001',
+ reputation: 16035,
+ image:
+ 'https://lh3.googleusercontent.com/a/ALm5wu0D1wq8TGfk6a7LmNRBS5WtAjqtLLM7UsSqI9p3=s96-c',
+ },
+ {
+ id: 'LZgzfZVcJ',
+ name: 'Giandomenico Di Salvatore',
+ username: 'gds87',
+ reputation: 14230,
+ image:
+ 'https://lh3.googleusercontent.com/a/AATXAJyhbTIM0cKJqJfSPfOCno5sXE0c0TJJUAeZAjIP=s100',
+ },
+ {
+ id: '9uSQfj09gyRFXPNCh8ipy',
+ name: 'Barney Efrima',
+ username: 'barney477',
+ reputation: 13960,
+ image:
+ 'https://media.daily.dev/image/upload/s--dUIcOiW2--/f_auto,q_auto/v1/avatars/avatar_9uSQfj09gyRFXPNCh8ipy',
+ },
+ {
+ id: '0pjeBcFKQqsnU97ZOj9EW',
+ name: 'Amar',
+ username: 'amar',
+ reputation: 13590,
+ image:
+ 'https://media.daily.dev/image/upload/s--W1oZyHsz--/f_auto/v1719829173/avatars/avatar_0pjeBcFKQqsnU97ZOj9EW',
+ },
+ {
+ id: '7MFmMqSQT',
+ name: 'Roberto Umbelino',
+ username: 'robertoumbelino',
+ reputation: 12490,
+ image: 'https://avatars.githubusercontent.com/u/17939056?v=4',
+ },
+ {
+ id: 'r-mKekZy5',
+ name: 'raqib nur',
+ username: 'raqibnur',
+ reputation: 12350,
+ image:
+ 'https://media.daily.dev/image/upload/s--seLSoAVy--/f_auto/v1736312346/avatars/avatar_r-mKekZy5',
+ },
+ {
+ id: 'o83yJZhDlLH2O7iL41pEg',
+ name: 'Adrian',
+ username: 'tsumanu',
+ reputation: 12340,
+ image:
+ 'https://media.daily.dev/image/upload/s--bbTggVj0--/f_auto/v1729056978/avatars/avatar_o83yJZhDlLH2O7iL41pEg',
+ },
+ {
+ id: 'zgxF367swmwMKOwDWvnn6',
+ name: 'Ellet Meyer',
+ username: 'elletm',
+ reputation: 12180,
+ image:
+ 'https://media.daily.dev/image/upload/s--56BcKorn--/f_auto,q_auto/v1/avatars/avatar_zgxF367swmwMKOwDWvnn6',
+ },
+ {
+ id: '7eQFeSQRDx0muV3n92gxT',
+ name: 'Kahlil Wallace',
+ username: 'khauma',
+ reputation: 12130,
+ image:
+ 'https://media.daily.dev/image/upload/s--QvppE9Ip--/f_auto/v1767378558/avatars/avatar_7eQFeSQRDx0muV3n92gxT?_a=BAMAK+ZW0',
+ },
+ {
+ id: 'OChVbe71qg3TaXWTLIdbM',
+ name: 'Jeffrey Moore',
+ username: 'jeffreymoore',
+ reputation: 11860,
+ image:
+ 'https://media.daily.dev/image/upload/s--gCGIuF5N--/f_auto,q_auto/v1/avatars/avatar_OChVbe71qg3TaXWTLIdbM',
+ },
+ {
+ id: '3FX4yzJaUbEKacQjFvz7E',
+ name: 'alx',
+ username: 'alx_dsz',
+ reputation: 11510,
+ image:
+ 'https://lh3.googleusercontent.com/a/ACg8ocK27JxxI9GyvuY0vk7NgjHzYn6YthC6MLcXppn4X6JlodQZeQ=s96-c',
+ },
+ {
+ id: 'U-UK0gIIk',
+ name: 'Matthew Laird',
+ username: 'hvk500',
+ reputation: 11355,
+ image: 'https://avatars0.githubusercontent.com/u/14907718?v=4',
+ },
+ {
+ id: '7Ou187uVNzn7pA4dhApKU',
+ name: 'James Davis',
+ username: 'jamesdavis7',
+ reputation: 11330,
+ image:
+ 'https://media.daily.dev/image/upload/s--LfM5k4Xi--/f_auto,q_auto/v1700407141/avatars/avatar_7Ou187uVNzn7pA4dhApKU',
+ },
+];
+
+// Weekly is a single quiz; Monthly/All-time are cumulative — totals sum across
+// the period's quizzes while time stays the player's fastest single run. These
+// factors fake that aggregation for the demo so the tabs show, e.g., 40/40.
+const QUIZZES_PER_PERIOD: Record
+
+ );
+};
+
+// Remounting PreviewGame on close resets the whole game (phase, timer, audio)
+// back to the intro — the preview's "play again" affordance. `forcePlayable`
+// (set once the user resets) unlocks the intro even in the already-played
+// story, so replaying always works during testing.
+const WeeklyQuizGamePreview = (): React.ReactElement => {
+ const [resetKey, setResetKey] = useState(0);
+ const [forcePlayable, setForcePlayable] = useState(false);
+ return (
+
+
+ {phase === WeeklyQuizPhase.Intro && (
+
+
+ {children}
+
+