jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reason working

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 07:55:17 -07:00
commit 845e3ab3d6
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
4 changed files with 85 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

65
components/RevealScreen.tsx
View file

@ -65,6 +65,16 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
<h1 className="text-5xl md:text-7xl font-black font-display text-center drop-shadow-md leading-tight">
{correctOption.text}
</h1>
{correctOption.reason && (
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
className="mt-6 text-xl md:text-2xl text-center opacity-90 bg-black/20 px-6 py-4 rounded-2xl max-w-2xl"
>
{correctOption.reason}
</motion.p>
)}
</motion.div>
</div>
);
@ -110,9 +120,16 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
className="flex flex-col items-center"
>
{isCorrect ? (
<div className="bg-black/20 px-8 py-4 rounded-3xl backdrop-blur-sm border-4 border-white/30 flex items-center gap-4 mb-8">
<span className="text-4xl font-black">+{pointsEarned}</span>
<span className="font-bold uppercase opacity-80">Points</span>
<div className="flex flex-col items-center gap-4 mb-8">
<div className="bg-black/20 px-8 py-4 rounded-3xl backdrop-blur-sm border-4 border-white/30 flex items-center gap-4">
<span className="text-4xl font-black">+{pointsEarned}</span>
<span className="font-bold uppercase opacity-80">Points</span>
</div>
{correctOption.reason && (
<p className="text-center text-lg opacity-90 max-w-md bg-black/10 px-4 py-2 rounded-xl">
{correctOption.reason}
</p>
)}
</div>
) : (
<div className="text-2xl font-bold opacity-90 mb-8 max-w-md text-center">
@ -133,24 +150,34 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
</div>
</motion.div>
{!isCorrect && (
<motion.div
initial={{ y: 100 }}
animate={{ y: 0 }}
transition={{ delay: 0.5, type: 'spring' }}
className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-blur-md p-6 pb-12"
>
<p className="text-center text-sm font-bold uppercase tracking-widest mb-4 opacity-70">The correct answer was</p>
<div className="flex items-center justify-center gap-4">
<div className={`${COLORS[correctOption.color]} p-3 rounded-xl shadow-lg`}>
<ShapeIcon size={24} fill="currentColor" />
</div>
<span className="text-2xl font-black">{correctOption.text}</span>
</div>
</motion.div>
)}
</motion.div>
{!isCorrect && (
<div className="absolute bottom-0 left-0 right-0 overflow-hidden z-20">
<motion.div
initial={{ y: "100%" }}
animate={{ y: 0 }}
transition={{ delay: 0.5, type: 'spring' }}
className="bg-black/30 backdrop-blur-md p-6 pb-12"
>
<p className="text-center text-sm font-bold uppercase tracking-widest mb-4 opacity-70">The correct answer was</p>
<div className="flex flex-col items-center gap-3">
<div className="flex items-center gap-4">
<div className={`${COLORS[correctOption.color]} p-3 rounded-xl shadow-lg`}>
<ShapeIcon size={24} fill="currentColor" />
</div>
<span className="text-2xl font-black">{correctOption.text}</span>
</div>
{correctOption.reason && (
<p className="text-center text-sm opacity-80 max-w-md mt-2">
{correctOption.reason}
</p>
)}
</div>
</motion.div>
</div>
)}
</div>
);
};