Fix host
This commit is contained in:
parent
968d868c27
commit
2b3be6569f
1 changed files with 62 additions and 21 deletions
|
|
@ -1,57 +1,98 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Play, Users, X } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Play, Users, X, Wifi, WifiOff } from 'lucide-react';
|
||||
import { Player } from '../types';
|
||||
import { PlayerAvatar } from './PlayerAvatar';
|
||||
|
||||
interface HostReconnectedProps {
|
||||
quizTitle: string;
|
||||
currentQuestionIndex: number;
|
||||
totalQuestions: number;
|
||||
playerCount: number;
|
||||
players: Player[];
|
||||
onResume: () => void;
|
||||
onEndGame: () => void;
|
||||
connectedPlayerIds: string[];
|
||||
}
|
||||
|
||||
export const HostReconnected: React.FC<HostReconnectedProps> = ({
|
||||
quizTitle,
|
||||
currentQuestionIndex,
|
||||
totalQuestions,
|
||||
playerCount,
|
||||
players,
|
||||
onResume,
|
||||
onEndGame,
|
||||
connectedPlayerIds,
|
||||
}) => {
|
||||
const realPlayers = players.filter(p => p.id !== 'host');
|
||||
const connectedCount = connectedPlayerIds.length;
|
||||
const totalCount = realPlayers.length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
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
|
||||
initial={{ rotate: -10 }}
|
||||
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>
|
||||
|
||||
<h1 className="text-3xl font-black font-display mb-2">Game Restored</h1>
|
||||
<p className="text-xl opacity-80 mb-6">{quizTitle}</p>
|
||||
<h1 className="text-2xl md:text-3xl font-black font-display mb-1 md:mb-2">Game Restored</h1>
|
||||
<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="bg-white/10 rounded-2xl p-4">
|
||||
<p className="text-sm uppercase tracking-wide opacity-70 mb-1">Question</p>
|
||||
<p className="text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p>
|
||||
<div className="grid grid-cols-2 gap-3 md:gap-4 mb-4 md:mb-6">
|
||||
<div className="bg-white/10 rounded-2xl p-3 md:p-4">
|
||||
<p className="text-xs md:text-sm uppercase tracking-wide opacity-70 mb-1">Question</p>
|
||||
<p className="text-2xl md:text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p>
|
||||
</div>
|
||||
<div className="bg-white/10 rounded-2xl p-4">
|
||||
<p className="text-sm uppercase tracking-wide opacity-70 mb-1">Players</p>
|
||||
<p className="text-3xl font-black flex items-center justify-center gap-2">
|
||||
<Users size={24} />
|
||||
{playerCount}
|
||||
<div className="bg-white/10 rounded-2xl p-3 md:p-4">
|
||||
<p className="text-xs md:text-sm uppercase tracking-wide opacity-70 mb-1">Connected</p>
|
||||
<p className="text-2xl md:text-3xl font-black flex items-center justify-center gap-2">
|
||||
<Users size={20} className="md:w-6 md:h-6" />
|
||||
{connectedCount} / {totalCount}
|
||||
</p>
|
||||
</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
|
||||
</p>
|
||||
|
||||
|
|
@ -60,7 +101,7 @@ export const HostReconnected: React.FC<HostReconnectedProps> = ({
|
|||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
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} />
|
||||
Resume Game
|
||||
|
|
@ -70,7 +111,7 @@ export const HostReconnected: React.FC<HostReconnectedProps> = ({
|
|||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
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} />
|
||||
End Game
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue