Fix UI jank a bit
This commit is contained in:
parent
73c7d3efed
commit
3d6081823c
18 changed files with 193 additions and 87 deletions
|
|
@ -11,23 +11,25 @@ interface LobbyProps {
|
|||
role: 'HOST' | 'CLIENT';
|
||||
onStart: () => void;
|
||||
onEndGame?: () => void;
|
||||
currentPlayerId?: string | null;
|
||||
}
|
||||
|
||||
export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart, onEndGame }) => {
|
||||
export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart, onEndGame, currentPlayerId }) => {
|
||||
const isHost = role === 'HOST';
|
||||
const realPlayers = players.filter(p => p.id !== 'host');
|
||||
const currentPlayer = currentPlayerId ? players.find(p => p.id === currentPlayerId) : null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen p-6">
|
||||
<header className="flex flex-col md:flex-row justify-between items-center bg-white/10 p-6 rounded-[2rem] backdrop-blur-md mb-8 gap-6 border-4 border-white/20 shadow-xl">
|
||||
<div className="flex flex-col h-screen p-4 md:p-6 overflow-hidden">
|
||||
<header className="flex flex-col md:flex-row justify-between items-center bg-white/10 p-4 md:p-6 rounded-2xl md:rounded-[2rem] backdrop-blur-md mb-4 md:mb-8 gap-3 md:gap-6 border-4 border-white/20 shadow-xl shrink-0">
|
||||
<div className="flex flex-col items-center md:items-start">
|
||||
<span className="text-white/80 font-bold uppercase tracking-widest text-sm mb-1">Game PIN</span>
|
||||
<div className="text-5xl md:text-6xl font-black bg-white text-theme-primary px-8 py-2 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] tracking-wider">
|
||||
<span className="text-white/80 font-bold uppercase tracking-widest text-xs md:text-sm mb-1">Game PIN</span>
|
||||
<div className="text-4xl md:text-6xl font-black bg-white text-theme-primary px-6 md:px-8 py-1 md:py-2 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] tracking-wider">
|
||||
{gamePin}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-center hidden md:block">
|
||||
<div className="text-3xl font-black font-display mb-2">{quizTitle}</div>
|
||||
<div className="inline-flex items-center gap-2 bg-[#00000040] px-4 py-1 rounded-full">
|
||||
<div className="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
|
||||
|
|
@ -35,23 +37,23 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 px-6 py-3 rounded-2xl font-black text-2xl flex flex-col items-center min-w-[120px]">
|
||||
<div className="bg-white/20 px-4 md:px-6 py-2 md:py-3 rounded-xl md:rounded-2xl font-black text-xl md:text-2xl flex flex-col items-center min-w-[100px] md:min-w-[120px]">
|
||||
<span>{realPlayers.length}</span>
|
||||
<span className="text-sm font-bold opacity-80 uppercase">Players</span>
|
||||
<span className="text-xs md:text-sm font-bold opacity-80 uppercase">Players</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex flex-col items-center justify-center">
|
||||
<main className="flex-1 flex flex-col items-center justify-center overflow-hidden min-h-0">
|
||||
{isHost ? (
|
||||
<>
|
||||
<div className="flex flex-wrap gap-4 justify-center w-full max-w-6xl mb-12 min-h-[200px] content-start">
|
||||
<div className="flex flex-wrap gap-3 md:gap-4 justify-center w-full max-w-6xl pb-24 md:pb-28 overflow-y-auto content-start">
|
||||
<AnimatePresence>
|
||||
{realPlayers.length === 0 && (
|
||||
<div className="flex flex-col items-center opacity-60 mt-12">
|
||||
<div className="bg-white/10 p-6 rounded-full mb-4 animate-bounce">
|
||||
<Sparkles size={48} />
|
||||
<div className="flex flex-col items-center opacity-60 mt-8 md:mt-12">
|
||||
<div className="bg-white/10 p-4 md:p-6 rounded-full mb-4 animate-bounce">
|
||||
<Sparkles size={36} className="md:w-12 md:h-12" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold font-display">Waiting for players to join...</div>
|
||||
<div className="text-xl md:text-3xl font-bold font-display text-center px-4">Waiting for players to join...</div>
|
||||
</div>
|
||||
)}
|
||||
{realPlayers.map((player) => (
|
||||
|
|
@ -60,7 +62,7 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
|
|||
initial={{ scale: 0, rotate: -10 }}
|
||||
animate={{ scale: 1, rotate: 0 }}
|
||||
exit={{ scale: 0, opacity: 0 }}
|
||||
className="bg-white text-black px-6 py-3 rounded-full font-black text-xl shadow-[0_4px_0_rgba(0,0,0,0.2)] flex items-center gap-3 border-b-4 border-gray-200"
|
||||
className="bg-white text-black px-4 md:px-6 py-2 md:py-3 rounded-full font-black text-base md:text-xl shadow-[0_4px_0_rgba(0,0,0,0.2)] flex items-center gap-2 md:gap-3 border-b-4 border-gray-200"
|
||||
>
|
||||
<PlayerAvatar seed={player.avatarSeed} size={20} />
|
||||
{player.name}
|
||||
|
|
@ -72,38 +74,45 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
|
|||
<motion.div
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
className="fixed bottom-8 flex gap-4"
|
||||
className="fixed bottom-4 md:bottom-8 flex gap-2 md:gap-4 px-4"
|
||||
>
|
||||
{onEndGame && (
|
||||
<button
|
||||
onClick={onEndGame}
|
||||
className="bg-white/20 text-white px-8 py-5 rounded-full text-xl font-bold hover:bg-white/30 active:scale-95 transition-all flex items-center gap-2"
|
||||
className="bg-white/20 text-white px-4 md:px-8 py-3 md:py-5 rounded-full text-base md:text-xl font-bold hover:bg-white/30 active:scale-95 transition-all flex items-center gap-2"
|
||||
>
|
||||
<X size={24} />
|
||||
End Game
|
||||
<X size={20} className="md:w-6 md:h-6" />
|
||||
<span className="hidden md:inline">End Game</span>
|
||||
<span className="md:hidden">End</span>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onStart}
|
||||
disabled={realPlayers.length === 0}
|
||||
className="bg-white text-theme-primary px-16 py-5 rounded-full text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2"
|
||||
className="bg-white text-theme-primary px-8 md:px-16 py-3 md:py-5 rounded-full text-xl md:text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2"
|
||||
>
|
||||
Start Game
|
||||
Start
|
||||
</button>
|
||||
</motion.div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center p-8">
|
||||
<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 text-theme-primary p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] mb-8"
|
||||
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"
|
||||
>
|
||||
<User size={80} strokeWidth={2.5} />
|
||||
{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" />
|
||||
)}
|
||||
</motion.div>
|
||||
<h2 className="text-5xl font-black mb-4 font-display">You're in!</h2>
|
||||
<p className="text-2xl font-bold opacity-80">See your name on the big screen?</p>
|
||||
<h2 className="text-3xl md:text-5xl font-black mb-2 md:mb-4 font-display">
|
||||
{currentPlayer?.name || "You're in!"}
|
||||
</h2>
|
||||
<p className="text-lg md:text-2xl font-bold opacity-80">Waiting for the host to start...</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue