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

Initial commit

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 07:23:30 -07:00
commit c87ebf0a74
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
22 changed files with 4973 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

103
components/Lobby.tsx Normal file
View file

@ -0,0 +1,103 @@
import React from 'react';
import { Player } from '../types';
import { motion, AnimatePresence } from 'framer-motion';
import { User, Sparkles } from 'lucide-react';
interface LobbyProps {
quizTitle: string;
players: Player[];
gamePin: string | null;
role: 'HOST' | 'CLIENT';
onStart: () => void;
}
export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart }) => {
const isHost = role === 'HOST';
const realPlayers = players.filter(p => p.id !== 'host');
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 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-[#46178f] px-8 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-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>
<span className="font-bold">Live Lobby</span>
</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]">
<span>{realPlayers.length}</span>
<span className="text-sm font-bold opacity-80 uppercase">Players</span>
</div>
</header>
<main className="flex-1 flex flex-col items-center justify-center">
{isHost ? (
<>
<div className="flex flex-wrap gap-4 justify-center w-full max-w-6xl mb-12 min-h-[200px] 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>
<div className="text-3xl font-bold font-display">Waiting for players to join...</div>
</div>
)}
{realPlayers.map((player) => (
<motion.div
key={player.id}
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"
>
<div className={`p-2 rounded-full bg-gradient-to-br from-purple-400 to-blue-500 text-white`}>
<User size={20} />
</div>
{player.name}
</motion.div>
))}
</AnimatePresence>
</div>
<motion.div
initial={{ y: 50, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
className="fixed bottom-8"
>
<button
onClick={onStart}
disabled={realPlayers.length === 0}
className="bg-white text-[#46178f] 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"
>
Start Game
</button>
</motion.div>
</>
) : (
<div className="flex flex-col items-center justify-center h-full text-center p-8">
<motion.div
initial={{ scale: 0.5 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', bounce: 0.6 }}
className="bg-white text-[#46178f] p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] mb-8"
>
<User size={80} strokeWidth={2.5} />
</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>
</div>
)}
</main>
</div>
);
};