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];
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>
<motion.div
initial={{ opacity: 0, y: -50 }}
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
</motion.div>
@ -86,12 +86,12 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
initial={{ scale: 0, rotate: -10 }}
animate={{ scale: 1, rotate: 0 }}
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">
<ShapeIcon size={80} fill="currentColor" />
<div className="bg-black/20 p-3 md:p-6 rounded-full mb-3 md:mb-6">
<ShapeIcon className="w-10 h-10 md:w-20 md:h-20" fill="currentColor" />
</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}
</h1>
{correctOption.reason && (
@ -99,7 +99,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
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"
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}
</motion.p>
@ -112,10 +112,10 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
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
<ChevronRight size={28} strokeWidth={3} />
<ChevronRight className="w-5 h-5 md:w-7 md:h-7" strokeWidth={3} />
</motion.button>
)}
</div>