Martin Dvorak
33967f9454
Ordering cards - Generation prompt now forbids dates, years, times, step numbers and ordinals in ordering items (spec + hard rules), and the server-side validation drops any ordering card whose items still contain them instead of shipping a giveaway. True/False - The 'false ✕' swipe label was permanently visible on the card: its opacity curve was inverted, so the clamp at rest was 1. Flipped the range (and tightened both ranges for the elastic drag) — each label now only fades in while swiping in that direction. Regenerate deck - Results screen gains a Regenerate deck button: rebuilds the activities from the deck's stored source notes, replaces the deck in storage (attempts/best score reset) and starts the fresh run from slide 1. - StudyFeed tracks the current deck so the header, export and messages use the regenerated title/activities. - Fixed a spurious 0% attempt recorded when a regenerated deck swapped in: scroll anchoring held the old results position, so the feed briefly reported 5/5 with zero answers. The scroll now resets before the new slides render, overflow-anchor is disabled on the feed, and a run with no answers is never recorded. Tests: new deck-fixes suite 15/15 (TF overlay at rest/drag, regenerate with loading state + storage reset, ordering guard drop/keep); retry 14/14, deck chrome 15/15, pwa 16/16, final-ux 12/12, security 8/8, contrast 20/20.
343 lines
13 KiB
TypeScript
343 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import { ActivityRenderer } from "@/components/activities";
|
|
import { celebrate } from "@/lib/confetti";
|
|
import { ApiError, generateDeck } from "@/lib/client-api";
|
|
import { materialiseActivities } from "@/lib/deck-ops";
|
|
import type { Activity, Deck } from "@/lib/schemas";
|
|
import { recordAttempt, upsertDeck } from "@/lib/storage";
|
|
import { cn } from "@/lib/utils";
|
|
import { BoltIcon, FlameIcon, XIcon } from "@/components/icons";
|
|
import { Button, ProgressBar } from "@/components/ui";
|
|
|
|
import { ResultsScreen } from "./ResultsScreen";
|
|
|
|
export type AttemptResult = { correct: boolean; userAnswer?: string };
|
|
|
|
export function StudyFeed({ deck }: { deck: Deck }) {
|
|
const [currentDeck, setCurrentDeck] = useState(deck);
|
|
const [queue, setQueue] = useState<Activity[]>(deck.activities);
|
|
const [index, setIndex] = useState(0);
|
|
const [results, setResults] = useState<Record<string, AttemptResult>>({});
|
|
const [xp, setXp] = useState(0);
|
|
const [streak, setStreak] = useState(0);
|
|
const [bestStreak, setBestStreak] = useState(0);
|
|
const [retryMode, setRetryMode] = useState(false);
|
|
const [regenerating, setRegenerating] = useState(false);
|
|
const [regenerateError, setRegenerateError] = useState<string | null>(null);
|
|
/** Bumped on every restart so the activity components remount fresh. */
|
|
const [runId, setRunId] = useState(0);
|
|
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const recordedRef = useRef(false);
|
|
|
|
const total = queue.length;
|
|
const slideCount = total + 1; // + results slide
|
|
|
|
const goTo = useCallback((target: number) => {
|
|
const container = scrollRef.current;
|
|
if (!container) return;
|
|
const clamped = Math.max(0, Math.min(target, slideCount - 1));
|
|
container.scrollTo({ top: clamped * container.clientHeight, behavior: "smooth" });
|
|
}, [slideCount]);
|
|
|
|
const next = useCallback(() => goTo(index + 1), [goTo, index]);
|
|
|
|
// Track which slide is visible (works for wheel, touch and programmatic scroll).
|
|
useEffect(() => {
|
|
const container = scrollRef.current;
|
|
if (!container) return;
|
|
let frame = 0;
|
|
const onScroll = () => {
|
|
cancelAnimationFrame(frame);
|
|
frame = requestAnimationFrame(() => {
|
|
const height = container.clientHeight || 1;
|
|
const current = Math.round(container.scrollTop / height);
|
|
setIndex((previous) => (previous === current ? previous : current));
|
|
});
|
|
};
|
|
container.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => {
|
|
container.removeEventListener("scroll", onScroll);
|
|
cancelAnimationFrame(frame);
|
|
};
|
|
}, []);
|
|
|
|
// Keyboard navigation.
|
|
useEffect(() => {
|
|
const onKey = (event: KeyboardEvent) => {
|
|
const target = event.target as HTMLElement | null;
|
|
if (target && (/^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName) || target.isContentEditable)) return;
|
|
if (event.metaKey || event.ctrlKey || event.altKey) return;
|
|
if (event.key === "ArrowDown" || event.key === "PageDown" || event.key === "j") {
|
|
event.preventDefault();
|
|
next();
|
|
} else if (event.key === "ArrowUp" || event.key === "PageUp" || event.key === "k") {
|
|
event.preventDefault();
|
|
goTo(index - 1);
|
|
} else if (event.key === "Home") {
|
|
event.preventDefault();
|
|
goTo(0);
|
|
} else if (event.key === "End") {
|
|
event.preventDefault();
|
|
goTo(slideCount - 1);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [goTo, index, next, slideCount]);
|
|
|
|
const finished = index >= total;
|
|
|
|
useEffect(() => {
|
|
if (!finished) return;
|
|
if (!retryMode && !recordedRef.current) {
|
|
recordedRef.current = true;
|
|
const answered = Object.values(results);
|
|
const correct = answered.filter((entry) => entry.correct).length;
|
|
const score = total > 0 ? (correct / total) * 100 : 0;
|
|
// Only a run with at least one answer counts. Without this, the scroll
|
|
// anchoring shift when a regenerated deck swaps in could fire a bogus
|
|
// 0% attempt before the feed had snapped back to the first slide.
|
|
if (answered.length > 0) {
|
|
recordAttempt(currentDeck.id, { scorePercent: score, correct, total });
|
|
void celebrate("big");
|
|
}
|
|
}
|
|
}, [finished, results, total, currentDeck.id, retryMode]);
|
|
|
|
const handleAnswered = useCallback(
|
|
(activity: Activity, correct: boolean, meta?: { userAnswer?: string }) => {
|
|
setResults((current) => {
|
|
if (current[activity.id]) return current; // first answer counts
|
|
return { ...current, [activity.id]: { correct, userAnswer: meta?.userAnswer } };
|
|
});
|
|
if (correct) {
|
|
const nextStreak = streak + 1;
|
|
setStreak(nextStreak);
|
|
setBestStreak((best) => Math.max(best, nextStreak));
|
|
setXp((value) => value + activity.xp);
|
|
if (nextStreak > 0 && nextStreak % 5 === 0) void celebrate("normal");
|
|
} else {
|
|
setStreak(0);
|
|
}
|
|
},
|
|
[streak],
|
|
);
|
|
|
|
const missed = useMemo(
|
|
() => queue.filter((activity) => !results[activity.id]?.correct),
|
|
[queue, results],
|
|
);
|
|
|
|
const correctCount = useMemo(
|
|
() => queue.filter((activity) => results[activity.id]?.correct).length,
|
|
[queue, results],
|
|
);
|
|
|
|
const restart = useCallback(
|
|
(activities: Activity[], retry: boolean) => {
|
|
setQueue(activities);
|
|
setResults({});
|
|
setStreak(0);
|
|
setRetryMode(retry);
|
|
recordedRef.current = retry; // don't overwrite the best score with a retry run
|
|
// A new run: remount every activity (fresh state) and jump to the top
|
|
// *before* the new slides render, so scroll anchoring can't hold the
|
|
// old results position.
|
|
const container = scrollRef.current;
|
|
if (container) container.scrollTop = 0;
|
|
setRunId((value) => value + 1);
|
|
setIndex(0);
|
|
},
|
|
[],
|
|
);
|
|
|
|
// Whenever a run starts (including the first render), snap back to slide 1.
|
|
useEffect(() => {
|
|
const container = scrollRef.current;
|
|
if (container) container.scrollTop = 0;
|
|
}, [runId]);
|
|
|
|
/** Rebuild the deck from its stored source notes and start it over. */
|
|
const regenerate = useCallback(async () => {
|
|
if (regenerating) return;
|
|
const source = currentDeck.sourceText?.trim();
|
|
if (!source) {
|
|
setRegenerateError("This deck has no stored source notes, so it can't be regenerated.");
|
|
return;
|
|
}
|
|
setRegenerating(true);
|
|
setRegenerateError(null);
|
|
try {
|
|
const { deck: generated } = await generateDeck({
|
|
text: source,
|
|
difficulty: currentDeck.difficulty,
|
|
language: currentDeck.language,
|
|
count: Math.max(8, currentDeck.activities.length),
|
|
});
|
|
const activities = materialiseActivities(generated.activities, currentDeck.difficulty);
|
|
const updated: Deck = {
|
|
...currentDeck,
|
|
title: generated.title || currentDeck.title,
|
|
subject: generated.subject ?? currentDeck.subject,
|
|
summary: generated.summary ?? currentDeck.summary,
|
|
language: generated.language ?? currentDeck.language,
|
|
activities,
|
|
attempts: 0,
|
|
bestScore: undefined,
|
|
updatedAt: Date.now(),
|
|
};
|
|
upsertDeck(updated);
|
|
setCurrentDeck(updated);
|
|
restart(activities, false);
|
|
} catch (error) {
|
|
setRegenerateError(error instanceof ApiError ? error.message : "Could not regenerate the deck.");
|
|
} finally {
|
|
setRegenerating(false);
|
|
}
|
|
}, [currentDeck, regenerating, restart]);
|
|
|
|
const progressValue = Math.min(index + 1, slideCount);
|
|
const progressMax = slideCount;
|
|
|
|
return (
|
|
<div className="frost-bg fixed inset-0 flex flex-col">
|
|
{/* Chrome ---------------------------------------------------- */}
|
|
<header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
|
|
<div className="study-chrome mx-auto max-w-xl space-y-1.5 rounded-2xl px-3 py-2">
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href="/"
|
|
aria-label="Back to your library"
|
|
className="grid size-9 shrink-0 place-items-center rounded-xl bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
|
|
>
|
|
<XIcon className="size-4" />
|
|
</Link>
|
|
<div className="min-w-0 flex-1">
|
|
<ProgressBar
|
|
value={progressValue}
|
|
max={progressMax}
|
|
label={`Activity ${progressValue} of ${progressMax}`}
|
|
/>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-1.5">
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center gap-1 rounded-xl px-2 py-1 text-xs font-extrabold transition",
|
|
streak >= 3
|
|
? "tint-peach"
|
|
: "bg-[var(--surface-sunken)] text-[var(--text-muted)]",
|
|
)}
|
|
title={`Answer streak: ${streak}`}
|
|
aria-label={`Answer streak: ${streak}`}
|
|
>
|
|
<FlameIcon className="size-3.5" />
|
|
{streak}
|
|
</span>
|
|
<span
|
|
className="inline-flex items-center gap-1 rounded-xl bg-[var(--surface-sunken)] px-2 py-1 text-xs font-extrabold text-[var(--text-muted)]"
|
|
title={`XP earned: ${xp}`}
|
|
aria-label={`XP earned: ${xp}`}
|
|
>
|
|
<BoltIcon className="size-3.5" />
|
|
{xp}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-[var(--text-muted)]">
|
|
<span className="min-w-0 truncate">{currentDeck.title}</span>
|
|
<span className="shrink-0">
|
|
{retryMode ? "Retry · " : ""}
|
|
{Math.min(index + 1, total)}/{total}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Feed ------------------------------------------------------ */}
|
|
<div
|
|
ref={scrollRef}
|
|
data-testid="study-feed"
|
|
className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain [overflow-anchor:none]"
|
|
>
|
|
{queue.map((activity, activityIndex) => (
|
|
<section
|
|
key={`${activity.id}-${runId}`}
|
|
aria-label={`Activity ${activityIndex + 1} of ${total}`}
|
|
className="flex h-full snap-start snap-always items-stretch justify-center overflow-y-auto overscroll-y-contain"
|
|
>
|
|
<div className="mx-auto flex min-h-full w-full max-w-xl flex-col gap-4 px-4 pb-24 pt-24 [justify-content:safe_center]">
|
|
<ActivityRenderer
|
|
activity={activity}
|
|
active={index === activityIndex}
|
|
language={currentDeck.language}
|
|
isLast={activityIndex === total - 1}
|
|
onAnswered={(correct, meta) => handleAnswered(activity, correct, meta)}
|
|
onNext={() => goTo(activityIndex + 1)}
|
|
/>
|
|
</div>
|
|
</section>
|
|
))}
|
|
|
|
<section
|
|
aria-label="Results"
|
|
className="h-full snap-start snap-always overflow-y-auto overscroll-y-contain"
|
|
>
|
|
<div className="mx-auto flex min-h-full w-full max-w-xl flex-col gap-4 px-4 pb-24 pt-24 [justify-content:safe_center]">
|
|
<ResultsScreen
|
|
deck={currentDeck}
|
|
xp={xp}
|
|
bestStreak={bestStreak}
|
|
total={total}
|
|
correct={correctCount}
|
|
missed={missed}
|
|
results={results}
|
|
retryMode={retryMode}
|
|
onRetryMissed={() => restart(missed, true)}
|
|
onRestart={() => restart(currentDeck.activities, false)}
|
|
onRegenerate={regenerate}
|
|
regenerating={regenerating}
|
|
regenerateError={regenerateError}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Swipe hint on the very first screen ----------------------- */}
|
|
<AnimatePresence>
|
|
{index === 0 && Object.keys(results).length === 0 ? (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
className="pointer-events-none absolute inset-x-0 bottom-6 z-20 flex justify-center sm:hidden"
|
|
>
|
|
<span className="rounded-full bg-frost-950/70 px-4 py-2 text-xs font-semibold text-white backdrop-blur">
|
|
Swipe up for the next activity ↑
|
|
</span>
|
|
</motion.div>
|
|
) : null}
|
|
</AnimatePresence>
|
|
|
|
{/* Desktop next/prev buttons --------------------------------- */}
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 hidden justify-center pb-4 sm:flex">
|
|
<div className="study-chrome pointer-events-auto flex items-center gap-2 rounded-2xl px-2 py-1.5">
|
|
<Button variant="ghost" size="sm" onClick={() => goTo(index - 1)} disabled={index === 0} aria-label="Previous activity">
|
|
↑
|
|
</Button>
|
|
<span className="px-2 text-xs font-semibold text-[var(--text)]">
|
|
{index + 1} / {slideCount}
|
|
</span>
|
|
<Button variant="ghost" size="sm" onClick={() => goTo(index + 1)} disabled={index >= slideCount - 1} aria-label="Next activity">
|
|
↓
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|