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

Fix host

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-25 08:54:04 -07:00
commit 2b3be6569f
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
1 changed files with 62 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

83
components/HostReconnected.tsx
View file

@ -1,57 +1,98 @@
import React from 'react'; import React from 'react';
import { motion } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Play, Users, X } from 'lucide-react'; import { Play, Users, X, Wifi, WifiOff } from 'lucide-react';
import { Player } from '../types';
import { PlayerAvatar } from './PlayerAvatar';
interface HostReconnectedProps { interface HostReconnectedProps {
quizTitle: string; quizTitle: string;
currentQuestionIndex: number; currentQuestionIndex: number;
totalQuestions: number; totalQuestions: number;
playerCount: number; players: Player[];
onResume: () => void; onResume: () => void;
onEndGame: () => void; onEndGame: () => void;
connectedPlayerIds: string[];
} }
export const HostReconnected: React.FC<HostReconnectedProps> = ({ export const HostReconnected: React.FC<HostReconnectedProps> = ({
quizTitle, quizTitle,
currentQuestionIndex, currentQuestionIndex,
totalQuestions, totalQuestions,
playerCount, players,
onResume, onResume,
onEndGame, onEndGame,
connectedPlayerIds,
}) => { }) => {
const realPlayers = players.filter(p => p.id !== 'host');
const connectedCount = connectedPlayerIds.length;
const totalCount = realPlayers.length;
return ( return (
<div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden"> <div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
<motion.div <motion.div
initial={{ scale: 0.8, opacity: 0 }} initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} animate={{ scale: 1, opacity: 1 }}
className="bg-white/10 backdrop-blur-md p-8 md:p-12 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-lg w-full" className="bg-white/10 backdrop-blur-md p-6 md:p-10 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-lg w-full"
> >
<motion.div <motion.div
initial={{ rotate: -10 }} initial={{ rotate: -10 }}
animate={{ rotate: 0 }} animate={{ rotate: 0 }}
className="bg-green-500 p-6 rounded-full inline-block mb-6 shadow-lg" className="bg-green-500 p-4 md:p-6 rounded-full inline-block mb-4 md:mb-6 shadow-lg"
> >
<Play size={48} className="text-white ml-1" /> <Play size={36} className="text-white ml-1 md:w-12 md:h-12" />
</motion.div> </motion.div>
<h1 className="text-3xl font-black font-display mb-2">Game Restored</h1> <h1 className="text-2xl md:text-3xl font-black font-display mb-1 md:mb-2">Game Restored</h1>
<p className="text-xl opacity-80 mb-6">{quizTitle}</p> <p className="text-base md:text-xl opacity-80 mb-4 md:mb-6">{quizTitle}</p>
<div className="grid grid-cols-2 gap-4 mb-8"> <div className="grid grid-cols-2 gap-3 md:gap-4 mb-4 md:mb-6">
<div className="bg-white/10 rounded-2xl p-4"> <div className="bg-white/10 rounded-2xl p-3 md:p-4">
<p className="text-sm uppercase tracking-wide opacity-70 mb-1">Question</p> <p className="text-xs md:text-sm uppercase tracking-wide opacity-70 mb-1">Question</p>
<p className="text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p> <p className="text-2xl md:text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p>
</div> </div>
<div className="bg-white/10 rounded-2xl p-4"> <div className="bg-white/10 rounded-2xl p-3 md:p-4">
<p className="text-sm uppercase tracking-wide opacity-70 mb-1">Players</p> <p className="text-xs md:text-sm uppercase tracking-wide opacity-70 mb-1">Connected</p>
<p className="text-3xl font-black flex items-center justify-center gap-2"> <p className="text-2xl md:text-3xl font-black flex items-center justify-center gap-2">
<Users size={24} /> <Users size={20} className="md:w-6 md:h-6" />
{playerCount} {connectedCount} / {totalCount}
</p> </p>
</div> </div>
</div> </div>
<p className="text-sm opacity-60 mb-6"> {/* Player list showing connection status */}
{realPlayers.length > 0 && (
<div className="bg-black/20 rounded-xl p-3 mb-4 md:mb-6 max-h-32 md:max-h-40 overflow-y-auto">
<div className="flex flex-wrap gap-2 justify-center">
<AnimatePresence>
{realPlayers.map((player) => {
const isConnected = connectedPlayerIds.includes(player.id);
return (
<motion.div
key={player.id}
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-sm font-bold ${
isConnected
? 'bg-green-500/30 text-green-200'
: 'bg-white/10 text-white/50'
}`}
>
{isConnected ? (
<Wifi size={12} className="text-green-400" />
) : (
<WifiOff size={12} className="text-white/40" />
)}
<PlayerAvatar seed={player.avatarSeed} size={16} />
<span className="max-w-[80px] truncate">{player.name}</span>
</motion.div>
);
})}
</AnimatePresence>
</div>
</div>
)}
<p className="text-xs md:text-sm opacity-60 mb-4 md:mb-6">
Players will rejoin automatically when they reconnect Players will rejoin automatically when they reconnect
</p> </p>
@ -60,7 +101,7 @@ export const HostReconnected: React.FC<HostReconnectedProps> = ({
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
onClick={onResume} onClick={onResume}
className="w-full bg-white text-theme-primary px-8 py-4 rounded-full text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] hover:shadow-[0_4px_0_rgba(0,0,0,0.2)] hover:translate-y-[2px] active:shadow-none active:translate-y-[6px] transition-all flex items-center justify-center gap-3" className="w-full bg-white text-theme-primary px-6 md:px-8 py-3 md:py-4 rounded-full text-lg md:text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] hover:shadow-[0_4px_0_rgba(0,0,0,0.2)] hover:translate-y-[2px] active:shadow-none active:translate-y-[6px] transition-all flex items-center justify-center gap-3"
> >
<Play size={24} /> <Play size={24} />
Resume Game Resume Game
@ -70,7 +111,7 @@ export const HostReconnected: React.FC<HostReconnectedProps> = ({
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
onClick={onEndGame} onClick={onEndGame}
className="w-full bg-white/20 text-white px-8 py-4 rounded-full text-lg font-bold hover:bg-white/30 transition-all flex items-center justify-center gap-2" className="w-full bg-white/20 text-white px-6 md:px-8 py-3 md:py-4 rounded-full text-base md:text-lg font-bold hover:bg-white/30 transition-all flex items-center justify-center gap-2"
> >
<X size={20} /> <X size={20} />
End Game End Game