Fix stuff
This commit is contained in:
parent
fc270d437f
commit
32696ad33d
13 changed files with 2194 additions and 110 deletions
83
components/DisconnectedScreen.tsx
Normal file
83
components/DisconnectedScreen.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { WifiOff, RefreshCw, LogOut, Loader2 } from 'lucide-react';
|
||||
|
||||
interface DisconnectedScreenProps {
|
||||
playerName: string;
|
||||
gamePin: string;
|
||||
isReconnecting: boolean;
|
||||
onReconnect: () => void;
|
||||
onGoHome: () => void;
|
||||
}
|
||||
|
||||
export const DisconnectedScreen: React.FC<DisconnectedScreenProps> = ({
|
||||
playerName,
|
||||
gamePin,
|
||||
isReconnecting,
|
||||
onReconnect,
|
||||
onGoHome,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen p-6 text-center">
|
||||
<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-md w-full"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, -10, 0] }}
|
||||
transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
|
||||
className="bg-orange-500 p-6 rounded-full inline-block mb-6 shadow-lg"
|
||||
>
|
||||
<WifiOff size={48} className="text-white" />
|
||||
</motion.div>
|
||||
|
||||
<h1 className="text-4xl font-black font-display mb-4">Connection Lost</h1>
|
||||
|
||||
<p className="text-xl opacity-80 mb-2">
|
||||
Hey <span className="font-bold text-yellow-300">{playerName}</span>!
|
||||
</p>
|
||||
<p className="text-lg opacity-70 mb-8">
|
||||
You got disconnected from game <span className="font-mono font-bold">{gamePin}</span>
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={onReconnect}
|
||||
disabled={isReconnecting}
|
||||
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 disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-3"
|
||||
>
|
||||
{isReconnecting ? (
|
||||
<>
|
||||
<Loader2 size={24} className="animate-spin" />
|
||||
Reconnecting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw size={24} />
|
||||
Reconnect
|
||||
</>
|
||||
)}
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={onGoHome}
|
||||
disabled={isReconnecting}
|
||||
className="w-full bg-white/20 text-white px-8 py-4 rounded-full text-xl font-bold hover:bg-white/30 transition-all disabled:opacity-50 flex items-center justify-center gap-3"
|
||||
>
|
||||
<LogOut size={24} />
|
||||
Abandon Game
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm opacity-50 mt-8">
|
||||
Your score will be preserved if you reconnect
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
82
components/HostReconnected.tsx
Normal file
82
components/HostReconnected.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Play, Users, X } from 'lucide-react';
|
||||
|
||||
interface HostReconnectedProps {
|
||||
quizTitle: string;
|
||||
currentQuestionIndex: number;
|
||||
totalQuestions: number;
|
||||
playerCount: number;
|
||||
onResume: () => void;
|
||||
onEndGame: () => void;
|
||||
}
|
||||
|
||||
export const HostReconnected: React.FC<HostReconnectedProps> = ({
|
||||
quizTitle,
|
||||
currentQuestionIndex,
|
||||
totalQuestions,
|
||||
playerCount,
|
||||
onResume,
|
||||
onEndGame,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen p-6 text-center">
|
||||
<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"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ rotate: -10 }}
|
||||
animate={{ rotate: 0 }}
|
||||
className="bg-green-500 p-6 rounded-full inline-block mb-6 shadow-lg"
|
||||
>
|
||||
<Play size={48} className="text-white ml-1" />
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<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}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm opacity-60 mb-6">
|
||||
Players will rejoin automatically when they reconnect
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<motion.button
|
||||
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"
|
||||
>
|
||||
<Play size={24} />
|
||||
Resume Game
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
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"
|
||||
>
|
||||
<X size={20} />
|
||||
End Game
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Player } from '../types';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Sparkles, User } from 'lucide-react';
|
||||
import { Sparkles, User, X } from 'lucide-react';
|
||||
import { PlayerAvatar } from './PlayerAvatar';
|
||||
|
||||
interface LobbyProps {
|
||||
|
|
@ -10,9 +10,10 @@ interface LobbyProps {
|
|||
gamePin: string | null;
|
||||
role: 'HOST' | 'CLIENT';
|
||||
onStart: () => void;
|
||||
onEndGame?: () => void;
|
||||
}
|
||||
|
||||
export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart }) => {
|
||||
export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart, onEndGame }) => {
|
||||
const isHost = role === 'HOST';
|
||||
const realPlayers = players.filter(p => p.id !== 'host');
|
||||
|
||||
|
|
@ -71,8 +72,17 @@ 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"
|
||||
className="fixed bottom-8 flex gap-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"
|
||||
>
|
||||
<X size={24} />
|
||||
End Game
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onStart}
|
||||
disabled={realPlayers.length === 0}
|
||||
|
|
|
|||
53
components/WaitingToRejoin.tsx
Normal file
53
components/WaitingToRejoin.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Clock } from 'lucide-react';
|
||||
|
||||
interface WaitingToRejoinProps {
|
||||
playerName: string;
|
||||
score: number;
|
||||
}
|
||||
|
||||
export const WaitingToRejoin: React.FC<WaitingToRejoinProps> = ({ playerName, score }) => {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen p-6 text-center">
|
||||
<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-md w-full"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
|
||||
className="bg-green-500 p-6 rounded-full inline-block mb-6 shadow-lg"
|
||||
>
|
||||
<Clock size={48} className="text-white" />
|
||||
</motion.div>
|
||||
|
||||
<h1 className="text-3xl font-black font-display mb-4">Welcome Back!</h1>
|
||||
|
||||
<p className="text-xl opacity-80 mb-2">
|
||||
<span className="font-bold text-yellow-300">{playerName}</span>
|
||||
</p>
|
||||
|
||||
<div className="bg-white/10 rounded-2xl p-4 mb-6">
|
||||
<p className="text-sm uppercase tracking-wide opacity-70 mb-1">Your Score</p>
|
||||
<p className="text-4xl font-black">{score.toLocaleString()}</p>
|
||||
</div>
|
||||
|
||||
<p className="text-lg opacity-70">
|
||||
Waiting for the current question to finish...
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
className="flex justify-center gap-2 mt-6"
|
||||
animate={{ opacity: [0.5, 1, 0.5] }}
|
||||
transition={{ repeat: Infinity, duration: 1.5 }}
|
||||
>
|
||||
<div className="w-3 h-3 bg-white rounded-full" />
|
||||
<div className="w-3 h-3 bg-white rounded-full" />
|
||||
<div className="w-3 h-3 bg-white rounded-full" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue