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

Fix mobile host screen maybe

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

18
components/RevealScreen.tsx
View file

@ -71,13 +71,13 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
const colorClass = COLORS[correctOption.color]; const colorClass = COLORS[correctOption.color];
return ( return (
<div className="flex flex-col items-center justify-center h-screen bg-gray-900 text-white p-8 relative overflow-hidden"> <div className="flex flex-col items-center justify-center h-screen bg-gray-900 text-white p-4 md:p-8 relative overflow-hidden">
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 pointer-events-none"></div> <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 pointer-events-none"></div>
<motion.div <motion.div
initial={{ opacity: 0, y: -50 }} initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="text-4xl font-bold uppercase tracking-widest mb-12 opacity-80 relative z-10" className="text-lg md:text-4xl font-bold uppercase tracking-widest mb-4 md:mb-12 opacity-80 relative z-10"
> >
The correct answer is The correct answer is
</motion.div> </motion.div>
@ -86,12 +86,12 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
initial={{ scale: 0, rotate: -10 }} initial={{ scale: 0, rotate: -10 }}
animate={{ scale: 1, rotate: 0 }} animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", bounce: 0.5 }} transition={{ type: "spring", bounce: 0.5 }}
className={`${colorClass} p-12 rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.3)] flex flex-col items-center max-w-4xl w-full border-8 border-white/20 relative z-10`} className={`${colorClass} p-6 md:p-12 rounded-2xl md:rounded-[3rem] shadow-[0_10px_0_rgba(0,0,0,0.3)] md:shadow-[0_20px_0_rgba(0,0,0,0.3)] flex flex-col items-center max-w-4xl w-full border-4 md:border-8 border-white/20 relative z-10`}
> >
<div className="bg-black/20 p-6 rounded-full mb-6"> <div className="bg-black/20 p-3 md:p-6 rounded-full mb-3 md:mb-6">
<ShapeIcon size={80} fill="currentColor" /> <ShapeIcon className="w-10 h-10 md:w-20 md:h-20" fill="currentColor" />
</div> </div>
<h1 className="text-5xl md:text-7xl font-black font-display text-center drop-shadow-md leading-tight"> <h1 className="text-3xl md:text-7xl font-black font-display text-center drop-shadow-md leading-tight">
{correctOption.text} {correctOption.text}
</h1> </h1>
{correctOption.reason && ( {correctOption.reason && (
@ -99,7 +99,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.3 }} 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" className="mt-3 md:mt-6 text-base md:text-2xl text-center opacity-90 bg-black/20 px-4 md:px-6 py-2 md:py-4 rounded-xl md:rounded-2xl max-w-2xl"
> >
{correctOption.reason} {correctOption.reason}
</motion.p> </motion.p>
@ -112,10 +112,10 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }} transition={{ delay: 0.5 }}
onClick={onNext} onClick={onNext}
className="mt-12 bg-white text-gray-900 px-8 py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 relative z-10 cursor-pointer" className="mt-6 md:mt-12 bg-white text-gray-900 px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 relative z-10 cursor-pointer"
> >
Continue to Scoreboard Continue to Scoreboard
<ChevronRight size={28} strokeWidth={3} /> <ChevronRight className="w-5 h-5 md:w-7 md:h-7" strokeWidth={3} />
</motion.button> </motion.button>
)} )}
</div> </div>