Martin Dvorak
396da6528a
On a GPU-composited desktop the flipped card showed the question mirrored over the answer. Both faces are glass layers with backdrop-filter, and on some compositing paths the front's backface keeps rendering, so the pre-rotated back face and the mirrored front face both painted. - The faces are now painted by an explicit visibility swap driven by the animation's own rotation (onUpdate): the swap lands at the 90° edge-on moment, where it cannot be seen, so exactly one face is ever in the render tree — independent of backface-visibility and of the browser's 3D flattening rules. onAnimationComplete lands the swap for instant flips (reduced motion now skips the spring, matching the app's motion rules). - PromptCard takes an optional style so the face can carry the visibility. - phase-2 suite: the painted-face invariant at rest, flipped and flipped back, plus the answer reading inside the card (56 checks). - README: decision 53. SW -> freezmo-v39.
113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "framer-motion";
|
|
import { useState } from "react";
|
|
|
|
import { useI18n } from "@/lib/i18n";
|
|
import type { Activity } from "@/lib/schemas";
|
|
import { Button } from "@/components/ui";
|
|
|
|
import {
|
|
ActivityHeader,
|
|
FeedbackPanel,
|
|
Hint,
|
|
PromptCard,
|
|
QuestionText,
|
|
type ActivityComponentProps,
|
|
} from "./shared";
|
|
|
|
type FlashcardActivity = Extract<Activity, { type: "flashcard" }>;
|
|
|
|
export function Flashcard({ activity, onAnswered, onNext, isLast, nextLabel }: ActivityComponentProps<FlashcardActivity>) {
|
|
const { t } = useI18n();
|
|
const reduceMotion = useReducedMotion();
|
|
const [flipped, setFlipped] = useState(false);
|
|
const [result, setResult] = useState<boolean | null>(null);
|
|
/**
|
|
* Which face is painted. The swap happens at the 90° edge-on moment instead
|
|
* of relying on backface-visibility: a backdrop-filter layer (the card
|
|
* glass) keeps rendering its backface on some GPU/compositing paths, which
|
|
* showed the question mirrored over the answer.
|
|
*/
|
|
const [face, setFace] = useState<"front" | "back">("front");
|
|
|
|
const showFaceFor = (angle: number) => {
|
|
const next = angle > 90 && angle < 270 ? "back" : "front";
|
|
setFace((current) => (current === next ? current : next));
|
|
};
|
|
|
|
const settle = (correct: boolean) => {
|
|
if (result !== null) return;
|
|
setResult(correct);
|
|
onAnswered(correct);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ActivityHeader type="flashcard" topic={activity.topic} />
|
|
<Hint>{flipped ? t("flashcard.didYouKnow") : t("flashcard.tapToFlip")}</Hint>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setFlipped((value) => !value)}
|
|
className="group relative block w-full text-left [perspective:1400px]"
|
|
aria-label={flipped ? t("flashcard.flipBack") : t("flashcard.reveal")}
|
|
>
|
|
<motion.div
|
|
animate={{ rotateX: flipped ? 180 : 0 }}
|
|
transition={reduceMotion ? { duration: 0 } : { type: "spring", stiffness: 220, damping: 24 }}
|
|
onUpdate={(latest) => showFaceFor(Number(latest.rotateX ?? 0))}
|
|
onAnimationComplete={() => showFaceFor(flipped ? 180 : 0)}
|
|
className="relative min-h-56 w-full [transform-style:preserve-3d]"
|
|
>
|
|
<PromptCard
|
|
className="absolute inset-0 flex flex-col justify-center gap-3 group-hover:border-frost-300"
|
|
style={{ visibility: face === "front" ? "visible" : "hidden" }}
|
|
>
|
|
<span className="text-xs font-bold uppercase tracking-widest text-frost-600 dark:text-frost-200">
|
|
{t("flashcard.question")}
|
|
</span>
|
|
<QuestionText>{activity.front}</QuestionText>
|
|
<span className="mt-2 text-xs font-semibold text-frost-400 dark:text-frost-400">
|
|
{t("flashcard.tapFlip")}
|
|
</span>
|
|
</PromptCard>
|
|
|
|
<div className="[transform:rotateX(180deg)]" style={{ visibility: face === "back" ? "visible" : "hidden" }}>
|
|
<div className="card flex min-h-56 flex-col justify-center gap-3 px-5 py-6 sm:px-6">
|
|
<span className="text-xs font-bold uppercase tracking-widest text-frost-600 dark:text-frost-200">
|
|
{t("flashcard.answer")}
|
|
</span>
|
|
<p className="text-lg font-semibold leading-relaxed text-frost-950 dark:text-frost-50">
|
|
{activity.back}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</button>
|
|
|
|
{flipped && result === null ? (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Button variant="secondary" size="lg" onClick={() => settle(false)}>
|
|
{t("flashcard.notYet")}
|
|
</Button>
|
|
<Button variant="success" size="lg" onClick={() => settle(true)}>
|
|
{t("flashcard.knewIt")}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
|
|
{result !== null ? (
|
|
<FeedbackPanel
|
|
correct={result}
|
|
explanation={activity.explanation}
|
|
xp={activity.xp}
|
|
isLast={isLast}
|
|
nextLabel={nextLabel}
|
|
headline={result ? t("flashcard.frozenSolid") : t("flashcard.keepPile")}
|
|
onNext={onNext}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|