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

Fix incorrect on mobile

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-25 08:11:23 -07:00
commit 6f0dc86c82
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
1 changed files with 26 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

52
components/RevealScreen.tsx
View file

@ -133,7 +133,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
const ShapeIcon = SHAPES[correctOption.shape]; const ShapeIcon = SHAPES[correctOption.shape];
return ( return (
<div className={`flex flex-col items-center justify-center h-screen ${bgColor} text-white p-6 relative overflow-hidden transition-colors duration-500`}> <div className={`flex flex-col items-center justify-center h-screen ${bgColor} text-white p-4 md:p-6 relative overflow-hidden transition-colors duration-500`}>
{/* Dynamic Background Circles */} {/* Dynamic Background Circles */}
<motion.div <motion.div
@ -148,15 +148,15 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
transition={{ type: "spring", bounce: 0.6 }} transition={{ type: "spring", bounce: 0.6 }}
className="flex flex-col items-center z-10" className="flex flex-col items-center z-10"
> >
<div className="bg-white p-6 rounded-full shadow-[0_10px_0_rgba(0,0,0,0.2)] mb-8"> <div className="bg-white p-4 md:p-6 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] md:shadow-[0_10px_0_rgba(0,0,0,0.2)] mb-4 md:mb-8">
{isCorrect ? ( {isCorrect ? (
<Check size={80} className="text-[#22c55e]" strokeWidth={4} /> <Check className="w-12 h-12 md:w-20 md:h-20 text-[#22c55e]" strokeWidth={4} />
) : ( ) : (
<X size={80} className="text-[#ef4444]" strokeWidth={4} /> <X className="w-12 h-12 md:w-20 md:h-20 text-[#ef4444]" strokeWidth={4} />
)} )}
</div> </div>
<h1 className="text-6xl md:text-8xl font-black font-display mb-4 drop-shadow-lg text-center"> <h1 className="text-4xl md:text-8xl font-black font-display mb-2 md:mb-4 drop-shadow-lg text-center">
{isCorrect ? "Correct!" : "Incorrect"} {isCorrect ? "Correct!" : "Incorrect"}
</h1> </h1>
@ -167,32 +167,32 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
className="flex flex-col items-center" className="flex flex-col items-center"
> >
{isCorrect ? ( {isCorrect ? (
<div className="flex flex-col items-center gap-4 mb-8"> <div className="flex flex-col items-center gap-2 md:gap-4 mb-4 md: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"> <div className="bg-black/20 px-4 md:px-8 py-2 md:py-4 rounded-2xl md:rounded-3xl backdrop-blur-sm border-2 md:border-4 border-white/30 flex items-center gap-2 md:gap-4">
<span className="text-4xl font-black">+{pointsEarned}</span> <span className="text-2xl md:text-4xl font-black">+{pointsEarned}</span>
<span className="font-bold uppercase opacity-80">Points</span> <span className="text-sm md:text-base font-bold uppercase opacity-80">Points</span>
</div> </div>
{correctOption.reason && ( {correctOption.reason && (
<p className="text-center text-lg opacity-90 max-w-md bg-black/10 px-4 py-2 rounded-xl"> <p className="text-center text-sm md:text-lg opacity-90 max-w-md bg-black/10 px-3 md:px-4 py-2 rounded-xl">
{correctOption.reason} {correctOption.reason}
</p> </p>
)} )}
</div> </div>
) : ( ) : (
<div className="text-2xl font-bold opacity-90 mb-8 max-w-md text-center"> <div className="text-base md:text-2xl font-bold opacity-90 mb-4 md:mb-8 max-w-xs md:max-w-md text-center px-4">
Don't worry, you can catch up in the next round! Don't worry, you can catch up in the next round!
</div> </div>
)} )}
{/* Streak Indicator */} {/* Streak Indicator */}
{streak > 1 && isCorrect && ( {streak > 1 && isCorrect && (
<div className="flex items-center gap-2 text-yellow-200 font-black text-2xl animate-pulse"> <div className="flex items-center gap-2 text-yellow-200 font-black text-lg md:text-2xl animate-pulse">
<Flame fill="currentColor" /> <Flame className="w-5 h-5 md:w-6 md:h-6" fill="currentColor" />
<span>Answer Streak: {streak}</span> <span>Answer Streak: {streak}</span>
</div> </div>
)} )}
<div className="mt-8 bg-black/20 px-6 py-2 rounded-xl text-xl font-bold"> <div className="mt-4 md:mt-8 bg-black/20 px-4 md:px-6 py-2 rounded-xl text-base md:text-xl font-bold">
Total Score: <AnimatedCounter from={newScore - (pointsEarned || 0)} to={newScore} /> Total Score: <AnimatedCounter from={newScore - (pointsEarned || 0)} to={newScore} />
</div> </div>
</motion.div> </motion.div>
@ -201,31 +201,31 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
</motion.div> </motion.div>
{!isCorrect && ( {!isCorrect && (
<div className={`absolute bottom-0 left-0 right-0 overflow-hidden z-20 ${(isHost || isPresenter) ? 'pb-20' : ''}`}> <div className={`absolute bottom-0 left-0 right-0 overflow-hidden z-20 ${(isHost || isPresenter) ? 'pb-16 md:pb-20' : ''}`}>
<motion.div <motion.div
initial={{ y: "100%" }} initial={{ y: "100%" }}
animate={{ y: 0 }} animate={{ y: 0 }}
transition={{ delay: 0.5, type: 'spring' }} transition={{ delay: 0.5, type: 'spring' }}
className="bg-black/30 backdrop-blur-md p-6 pb-12" className="bg-black/30 backdrop-blur-md p-4 md:p-6 pb-8 md:pb-12"
> >
{selectedOption && selectedOption.reason && ( {selectedOption && selectedOption.reason && (
<div className="mb-4 pb-4 border-b border-white/20"> <div className="mb-3 md:mb-4 pb-3 md: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-xs md:text-sm font-bold uppercase tracking-widest mb-1 md:mb-2 opacity-70">Why your answer was wrong</p>
<p className="text-center text-sm opacity-90 max-w-md mx-auto"> <p className="text-center text-xs md:text-sm opacity-90 max-w-md mx-auto">
{selectedOption.reason} {selectedOption.reason}
</p> </p>
</div> </div>
)} )}
<p className="text-center text-sm font-bold uppercase tracking-widest mb-4 opacity-70">The correct answer was</p> <p className="text-center text-xs md:text-sm font-bold uppercase tracking-widest mb-2 md:mb-4 opacity-70">The correct answer was</p>
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-2 md:gap-3">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 md:gap-4">
<div className={`${COLORS[correctOption.color]} p-3 rounded-xl shadow-lg`}> <div className={`${COLORS[correctOption.color]} p-2 md:p-3 rounded-lg md:rounded-xl shadow-lg`}>
<ShapeIcon size={24} fill="currentColor" /> <ShapeIcon className="w-5 h-5 md:w-6 md:h-6" fill="currentColor" />
</div> </div>
<span className="text-2xl font-black">{correctOption.text}</span> <span className="text-xl md:text-2xl font-black">{correctOption.text}</span>
</div> </div>
{correctOption.reason && ( {correctOption.reason && (
<p className="text-center text-sm opacity-80 max-w-md mt-2"> <p className="text-center text-xs md:text-sm opacity-80 max-w-md mt-1 md:mt-2">
{correctOption.reason} {correctOption.reason}
</p> </p>
)} )}