List incorrect reason as well

This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 08:04:11 -07:00
commit 2c7ca237a3
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
3 changed files with 21 additions and 4 deletions

View file

@ -11,6 +11,7 @@ interface RevealScreenProps {
newScore: number;
streak: number;
correctOption: AnswerOption;
selectedOption?: AnswerOption | null;
role: GameRole;
}
@ -20,6 +21,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
newScore,
streak,
correctOption,
selectedOption,
role
}) => {
const isHost = role === 'HOST';
@ -161,6 +163,14 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
transition={{ delay: 0.5, type: 'spring' }}
className="bg-black/30 backdrop-blur-md p-6 pb-12"
>
{selectedOption && selectedOption.reason && (
<div className="mb-4 pb-4 border-b border-white/20">
<p className="text-center text-sm font-bold uppercase tracking-widest mb-2 opacity-70">Why your answer was wrong</p>
<p className="text-center text-sm opacity-90 max-w-md mx-auto">
{selectedOption.reason}
</p>
</div>
)}
<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">