Fix screen issues
This commit is contained in:
parent
6f0dc86c82
commit
2a8811e9dc
2 changed files with 180 additions and 132 deletions
|
|
@ -254,38 +254,85 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
|
|||
</motion.div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center flex-1 text-center p-4 md:p-8">
|
||||
<motion.div
|
||||
initial={{ scale: 0.5 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', bounce: 0.6 }}
|
||||
className={`bg-white p-6 md:p-8 rounded-2xl md:rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] mb-4 md:mb-8 relative ${isPresenter ? 'ring-4 ring-yellow-400' : ''}`}
|
||||
>
|
||||
{isPresenter && (
|
||||
<div className="absolute -top-3 -right-3 bg-yellow-400 p-2 rounded-full shadow-lg">
|
||||
<Crown size={24} className="text-yellow-900" />
|
||||
<div className="flex flex-col items-center flex-1 text-center p-4 md:p-8 overflow-hidden">
|
||||
<div className="flex flex-col items-center shrink-0">
|
||||
<motion.div
|
||||
initial={{ scale: 0.5 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', bounce: 0.6 }}
|
||||
className={`bg-white p-5 md:p-8 rounded-2xl md:rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] mb-3 md:mb-6 relative ${isPresenter ? 'ring-4 ring-yellow-400' : ''}`}
|
||||
>
|
||||
{isPresenter && (
|
||||
<div className="absolute -top-3 -right-3 bg-yellow-400 p-2 rounded-full shadow-lg">
|
||||
<Crown size={24} className="text-yellow-900" />
|
||||
</div>
|
||||
)}
|
||||
{currentPlayer ? (
|
||||
<PlayerAvatar seed={currentPlayer.avatarSeed} size={48} className="md:w-20 md:h-20" />
|
||||
) : (
|
||||
<User size={48} strokeWidth={2.5} className="text-theme-primary md:w-20 md:h-20" />
|
||||
)}
|
||||
</motion.div>
|
||||
<h2 className="text-2xl md:text-5xl font-black mb-1 md:mb-4 font-display">
|
||||
{currentPlayer?.name || "You're in!"}
|
||||
</h2>
|
||||
{isPresenter ? (
|
||||
<div className="flex flex-col items-center gap-1 md:gap-2">
|
||||
<span className="bg-yellow-400 text-yellow-900 px-3 md:px-4 py-1 rounded-full font-bold text-xs md:text-sm flex items-center gap-2">
|
||||
<Crown size={14} className="md:w-4 md:h-4" />
|
||||
You are the Presenter
|
||||
</span>
|
||||
<p className="text-sm md:text-xl font-bold opacity-80">You can advance screens during the game</p>
|
||||
</div>
|
||||
)}
|
||||
{currentPlayer ? (
|
||||
<PlayerAvatar seed={currentPlayer.avatarSeed} size={60} className="md:w-20 md:h-20" />
|
||||
) : (
|
||||
<User size={60} strokeWidth={2.5} className="text-theme-primary md:w-20 md:h-20" />
|
||||
<p className="text-sm md:text-2xl font-bold opacity-80">Waiting for the host to start...</p>
|
||||
)}
|
||||
</motion.div>
|
||||
<h2 className="text-3xl md:text-5xl font-black mb-2 md:mb-4 font-display">
|
||||
{currentPlayer?.name || "You're in!"}
|
||||
</h2>
|
||||
{isPresenter ? (
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<span className="bg-yellow-400 text-yellow-900 px-4 py-1 rounded-full font-bold text-sm flex items-center gap-2">
|
||||
<Crown size={16} />
|
||||
You are the Presenter
|
||||
</span>
|
||||
<p className="text-lg md:text-xl font-bold opacity-80">You can advance screens during the game</p>
|
||||
</div>
|
||||
|
||||
{/* Player list */}
|
||||
<div className="mt-4 md:mt-6 flex-1 min-h-0 w-full max-w-md overflow-hidden flex flex-col">
|
||||
<div className="text-xs md:text-sm font-bold uppercase tracking-widest opacity-60 mb-2 md:mb-3">
|
||||
{players.length} Player{players.length !== 1 ? 's' : ''} Connected
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-lg md:text-2xl font-bold opacity-80">Waiting for the host to start...</p>
|
||||
)}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="flex flex-wrap gap-2 justify-center pb-20">
|
||||
<AnimatePresence>
|
||||
{players.map((player) => {
|
||||
const isCurrentPlayer = player.id === currentPlayerId;
|
||||
const isPlayerHost = player.id === 'host';
|
||||
const isPlayerPresenter = player.id === presenterId;
|
||||
return (
|
||||
<motion.div
|
||||
key={player.id}
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0, opacity: 0 }}
|
||||
className={`px-3 py-1.5 rounded-full font-bold text-sm flex items-center gap-2 ${
|
||||
isCurrentPlayer
|
||||
? 'bg-white text-theme-primary'
|
||||
: isPlayerHost
|
||||
? 'bg-yellow-400 text-black'
|
||||
: 'bg-white/20 text-white'
|
||||
}`}
|
||||
>
|
||||
{isPlayerPresenter && !isPlayerHost && (
|
||||
<Crown size={12} className="text-yellow-400" />
|
||||
)}
|
||||
<PlayerAvatar seed={player.avatarSeed} size={16} />
|
||||
<span className="max-w-[100px] truncate">{player.name}</span>
|
||||
{isPlayerHost && (
|
||||
<span className="text-[10px] bg-black/20 px-1.5 py-0.5 rounded-full">HOST</span>
|
||||
)}
|
||||
{isCurrentPlayer && !isPlayerHost && (
|
||||
<span className="text-[10px] bg-theme-primary/20 px-1.5 py-0.5 rounded-full">YOU</span>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{onLeaveGame && (
|
||||
<motion.button
|
||||
|
|
@ -293,7 +340,7 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
|
|||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
onClick={onLeaveGame}
|
||||
className="mt-8 bg-white/20 hover:bg-white/30 text-white px-6 py-3 rounded-full font-bold flex items-center gap-2 transition-all active:scale-95"
|
||||
className="fixed bottom-4 md:bottom-8 bg-white/20 hover:bg-white/30 text-white px-6 py-3 rounded-full font-bold flex items-center gap-2 transition-all active:scale-95"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
Leave Game
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue