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

Try fix mobile

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-14 16:34:59 -07:00
commit 560c974bf3
No known key found for this signature in database
GPG key ID: DDF6AF5B21B407D4
1 changed files with 23 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

35
components/Scoreboard.tsx
View file

@ -93,14 +93,21 @@ const PlayerRow: React.FC<PlayerRowProps> = ({ player, index, maxScore }) => {
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: baseDelay, duration: 0.4 }} transition={{ delay: baseDelay, duration: 0.4 }}
className="flex items-center gap-4 py-3" className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 py-3"
> >
<div className="flex items-center gap-3 w-48 shrink-0"> <div className="flex items-center justify-between md:justify-start gap-3 w-full md:w-48 md:shrink-0">
<div className="flex items-center gap-3 min-w-0">
<PlayerAvatar seed={player.avatarSeed} size={32} /> <PlayerAvatar seed={player.avatarSeed} size={32} />
<span className="font-black text-lg font-display truncate">{player.displayName}</span> <span className="font-black text-lg font-display truncate">{player.displayName}</span>
</div> </div>
<div className="md:hidden">
<span className="font-black text-2xl font-display">
<AnimatedNumber value={getDisplayScore()} />
</span>
</div>
</div>
<div className="flex-1 flex items-center gap-4"> <div className="w-full md:flex-1 flex items-center gap-4">
<div className="flex-1 h-12 bg-gray-100 rounded-full overflow-hidden relative"> <div className="flex-1 h-12 bg-gray-100 rounded-full overflow-hidden relative">
<motion.div <motion.div
className="h-full rounded-full" className="h-full rounded-full"
@ -111,14 +118,14 @@ const PlayerRow: React.FC<PlayerRowProps> = ({ player, index, maxScore }) => {
/> />
</div> </div>
<div className="w-20 text-right"> <div className="hidden md:block w-20 text-right">
<span className="font-black text-2xl font-display"> <span className="font-black text-2xl font-display">
<AnimatedNumber value={getDisplayScore()} /> <AnimatedNumber value={getDisplayScore()} />
</span> </span>
</div> </div>
</div> </div>
<div className="flex items-center gap-2 min-w-[280px] justify-start"> <div className="flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto md:min-w-[280px] justify-start">
<AnimatePresence> <AnimatePresence>
{breakdown === null && ( {breakdown === null && (
<motion.span <motion.span
@ -197,12 +204,12 @@ export const Scoreboard: React.FC<ScoreboardProps> = ({ players, onNext, isHost,
const maxScore = Math.max(...sortedPlayers.map(p => p.score), 1); const maxScore = Math.max(...sortedPlayers.map(p => p.score), 1);
return ( return (
<div className="flex flex-col h-screen p-8"> <div className="flex flex-col h-screen p-4 md:p-8">
<header className="text-center mb-8"> <header className="text-center mb-4 md:mb-8">
<h1 className="text-5xl font-black text-white font-display drop-shadow-md">Scoreboard</h1> <h1 className="text-3xl md:text-5xl font-black text-white font-display drop-shadow-md">Scoreboard</h1>
</header> </header>
<div className="flex-1 bg-white rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.2)] p-8 md:p-12 text-gray-900 max-w-5xl w-full mx-auto relative z-10 border-8 border-white/50 overflow-hidden"> <div className="flex-1 bg-white rounded-2xl md:rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.2)] p-4 md:p-12 text-gray-900 max-w-5xl w-full mx-auto relative z-10 border-4 md:border-8 border-white/50 overflow-hidden">
<div className="space-y-2"> <div className="space-y-2">
{sortedPlayers.map((player, index) => ( {sortedPlayers.map((player, index) => (
<PlayerRow key={player.id} player={player} index={index} maxScore={maxScore} /> <PlayerRow key={player.id} player={player} index={index} maxScore={maxScore} />
@ -210,18 +217,18 @@ export const Scoreboard: React.FC<ScoreboardProps> = ({ players, onNext, isHost,
</div> </div>
</div> </div>
<div className="mt-8 flex justify-end max-w-5xl w-full mx-auto"> <div className="mt-4 md:mt-8 flex justify-center md:justify-end max-w-5xl w-full mx-auto">
{isHost ? ( {isHost ? (
<button <button
onClick={onNext} onClick={onNext}
className="bg-white text-theme-primary px-12 py-4 rounded-2xl text-2xl font-black shadow-[0_8px_0_rgba(0,0,0,0.2)] hover:scale-105 active:shadow-none active:translate-y-[8px] transition-all" className="bg-white text-theme-primary px-8 md:px-12 py-3 md:py-4 rounded-xl md:rounded-2xl text-xl md:text-2xl font-black shadow-[0_8px_0_rgba(0,0,0,0.2)] hover:scale-105 active:shadow-none active:translate-y-[8px] transition-all"
> >
Next Next
</button> </button>
) : ( ) : (
<div className="flex items-center gap-3 bg-white/10 px-8 py-4 rounded-2xl backdrop-blur-md border-2 border-white/20"> <div className="flex items-center gap-2 md:gap-3 bg-white/10 px-4 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl backdrop-blur-md border-2 border-white/20">
<Loader2 className="animate-spin w-8 h-8" /> <Loader2 className="animate-spin w-6 h-6 md:w-8 md:h-8" />
<span className="text-xl font-bold">Waiting for host...</span> <span className="text-base md:text-xl font-bold">Waiting for host...</span>
</div> </div>
)} )}
</div> </div>