360 lines
13 KiB
TypeScript
360 lines
13 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Player, PointsBreakdown } from '../types';
|
|
import { motion, AnimatePresence, useSpring, useTransform, LayoutGroup } from 'framer-motion';
|
|
import { Loader2, Flame, Rocket, Zap, X, Crown, Medal, Trophy } from 'lucide-react';
|
|
import { PlayerAvatar, getAvatarColors } from './PlayerAvatar';
|
|
|
|
const AnimatedNumber: React.FC<{ value: number; duration?: number }> = ({ value, duration = 600 }) => {
|
|
const spring = useSpring(0, { duration });
|
|
const display = useTransform(spring, (latest) => Math.round(latest));
|
|
const [displayValue, setDisplayValue] = useState(0);
|
|
|
|
useEffect(() => {
|
|
spring.set(value);
|
|
const unsubscribe = display.on('change', (v) => setDisplayValue(v));
|
|
return () => unsubscribe();
|
|
}, [value, spring, display]);
|
|
|
|
return <span>{displayValue}</span>;
|
|
};
|
|
|
|
interface BonusBadgeProps {
|
|
points: number;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
color: string;
|
|
delay: number;
|
|
}
|
|
|
|
const BonusBadge: React.FC<BonusBadgeProps> = ({ points, label, icon, color, delay }) => (
|
|
<motion.div
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay, type: 'spring', stiffness: 500, damping: 15 }}
|
|
className={`flex items-center gap-1 px-2 py-1 rounded-full text-white font-bold text-sm ${color}`}
|
|
>
|
|
{icon}
|
|
<span>+{points}</span>
|
|
<span className="text-white/80">{label}</span>
|
|
</motion.div>
|
|
);
|
|
|
|
const PenaltyBadge: React.FC<{ points: number; delay: number }> = ({ points, delay }) => (
|
|
<motion.div
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay, type: 'spring', stiffness: 500, damping: 15 }}
|
|
className="flex items-center gap-1 px-2 py-1 rounded-full bg-red-500 text-white font-bold text-sm"
|
|
>
|
|
<X size={14} />
|
|
<span>-{points}</span>
|
|
</motion.div>
|
|
);
|
|
|
|
interface PlayerRowProps {
|
|
player: Player & { displayName: string };
|
|
maxScore: number;
|
|
rank: number;
|
|
currentScore: number;
|
|
phase: number;
|
|
baseDelay: number;
|
|
}
|
|
|
|
const PlayerRow: React.FC<PlayerRowProps> = ({ player, maxScore, rank, currentScore, phase, baseDelay }) => {
|
|
const breakdown = player.pointsBreakdown;
|
|
|
|
const barWidth = maxScore > 0 ? (currentScore / maxScore) * 100 : 0;
|
|
|
|
const isFirst = rank === 1;
|
|
const isSecond = rank === 2;
|
|
const isThird = rank === 3;
|
|
const isTop3 = rank <= 3;
|
|
|
|
let rankStyles = "bg-white border-gray-100";
|
|
let rankBadgeStyles = "bg-gray-100 text-gray-500";
|
|
|
|
if (isFirst) {
|
|
rankStyles = "bg-gradient-to-r from-yellow-50 to-amber-100 border-amber-300 shadow-lg scale-[1.02] z-10";
|
|
rankBadgeStyles = "bg-gradient-to-br from-yellow-400 to-amber-600 text-white shadow-sm";
|
|
} else if (isSecond) {
|
|
rankStyles = "bg-gradient-to-r from-gray-50 to-slate-100 border-slate-300 shadow-md z-0";
|
|
rankBadgeStyles = "bg-gradient-to-br from-slate-300 to-slate-500 text-white shadow-sm";
|
|
} else if (isThird) {
|
|
rankStyles = "bg-gradient-to-r from-orange-50 to-orange-100 border-orange-200 shadow-md z-0";
|
|
rankBadgeStyles = "bg-gradient-to-br from-orange-300 to-orange-500 text-white shadow-sm";
|
|
}
|
|
|
|
return (
|
|
<motion.div
|
|
layout
|
|
layoutId={player.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
layout: { type: "spring", stiffness: 300, damping: 30 },
|
|
opacity: { duration: 0.3 }
|
|
}}
|
|
className={`flex items-center gap-3 md:gap-4 p-3 md:p-4 rounded-xl md:rounded-2xl border-2 ${rankStyles}`}
|
|
>
|
|
<div className={`flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full font-black text-lg md:text-xl shrink-0 ${rankBadgeStyles}`}>
|
|
{rank}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0 flex flex-col gap-2">
|
|
<div className="flex items-center justify-between gap-3 w-full">
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div className="relative">
|
|
<PlayerAvatar seed={player.avatarSeed} size={isTop3 ? 40 : 32} />
|
|
{isFirst && (
|
|
<motion.div
|
|
initial={{ scale: 0, rotate: -45 }}
|
|
animate={{ scale: 1, rotate: -15 }}
|
|
transition={{ delay: 0.5, type: 'spring' }}
|
|
className="absolute -top-3 -left-2 drop-shadow-md"
|
|
>
|
|
<Crown size={24} className="fill-yellow-400 text-yellow-600" />
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
<span className={`font-black font-display truncate ${isTop3 ? 'text-xl' : 'text-lg'}`}>
|
|
{player.displayName}
|
|
</span>
|
|
</div>
|
|
<span className={`font-black font-display ${isTop3 ? 'text-3xl text-theme-primary' : 'text-2xl text-gray-700'}`}>
|
|
<AnimatedNumber value={currentScore} />
|
|
</span>
|
|
</div>
|
|
|
|
<div className="w-full h-8 md:h-10 bg-black/5 rounded-full overflow-hidden relative">
|
|
<motion.div
|
|
className="h-full rounded-full"
|
|
style={{ background: `linear-gradient(90deg, ${getAvatarColors(player.avatarSeed)[0]}, ${getAvatarColors(player.avatarSeed)[1]})` }}
|
|
initial={{ width: 0 }}
|
|
animate={{ width: `${Math.max(barWidth, 2)}%` }}
|
|
transition={{ duration: 0.6, delay: phase === 0 ? baseDelay + 0.1 : 0 }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2 w-full justify-start h-6">
|
|
<AnimatePresence mode='popLayout'>
|
|
{breakdown === null && (
|
|
<motion.span
|
|
key="no-answer"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ delay: baseDelay + 0.3 }}
|
|
className="text-gray-400 font-medium text-sm"
|
|
>
|
|
No answer
|
|
</motion.span>
|
|
)}
|
|
|
|
{breakdown && breakdown.penalty > 0 && phase >= 1 && (
|
|
<PenaltyBadge key="penalty" points={breakdown.penalty} delay={0} />
|
|
)}
|
|
|
|
{breakdown && breakdown.basePoints > 0 && phase >= 1 && (
|
|
<motion.div
|
|
key="base-points"
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ type: 'spring', stiffness: 500, damping: 15 }}
|
|
className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500 text-white font-bold text-xs md:text-sm"
|
|
>
|
|
<span>+{breakdown.basePoints}</span>
|
|
</motion.div>
|
|
)}
|
|
|
|
{breakdown && breakdown.streakBonus > 0 && phase >= 2 && (
|
|
<BonusBadge
|
|
key="streak"
|
|
points={breakdown.streakBonus}
|
|
label="Streak"
|
|
icon={<Flame size={12} />}
|
|
color="bg-amber-500"
|
|
delay={0}
|
|
/>
|
|
)}
|
|
|
|
{breakdown && breakdown.comebackBonus > 0 && phase >= 3 && (
|
|
<BonusBadge
|
|
key="comeback"
|
|
points={breakdown.comebackBonus}
|
|
label="Comeback"
|
|
icon={<Rocket size={12} />}
|
|
color="bg-blue-500"
|
|
delay={0}
|
|
/>
|
|
)}
|
|
|
|
{breakdown && breakdown.firstCorrectBonus > 0 && phase >= 4 && (
|
|
<BonusBadge
|
|
key="first-correct"
|
|
points={breakdown.firstCorrectBonus}
|
|
label="First!"
|
|
icon={<Zap size={12} />}
|
|
color="bg-yellow-500"
|
|
delay={0}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
interface ScoreboardProps {
|
|
players: Player[];
|
|
onNext: () => void;
|
|
isHost: boolean;
|
|
currentPlayerId: string | null;
|
|
}
|
|
|
|
interface AnimatedPlayerState extends Player {
|
|
displayName: string;
|
|
currentScore: number;
|
|
phase: number;
|
|
initialIndex: number;
|
|
}
|
|
|
|
export const Scoreboard: React.FC<ScoreboardProps> = ({ players, onNext, isHost, currentPlayerId }) => {
|
|
// Initialize players sorted by previousScore to start
|
|
const [animatedPlayers, setAnimatedPlayers] = useState<AnimatedPlayerState[]>(() => {
|
|
const playersWithMeta = players.map(p => ({
|
|
...p,
|
|
displayName: p.id === currentPlayerId ? `${p.name} (You)` : p.name,
|
|
currentScore: p.previousScore,
|
|
phase: 0,
|
|
}));
|
|
|
|
// Sort by previous score initially (descending)
|
|
// Add a secondary sort by ID to ensure stable sorting
|
|
return playersWithMeta
|
|
.sort((a, b) => (b.previousScore - a.previousScore) || a.id.localeCompare(b.id))
|
|
.map((p, index) => ({
|
|
...p,
|
|
initialIndex: index // Store the initial rank for staggered animation timing
|
|
}));
|
|
});
|
|
|
|
useEffect(() => {
|
|
const timers: NodeJS.Timeout[] = [];
|
|
|
|
// We use the initial state to set up the timers
|
|
// We can't use animatedPlayers in the dependency array or it will loop
|
|
// But we need a reference to the initial setup to schedule things.
|
|
// The state initializer runs once, so we need to reconstruct that list or trust the state is fresh on mount.
|
|
// However, inside useEffect, animatedPlayers might change if we include it in deps.
|
|
// We want to schedule based on the INITIAL state.
|
|
|
|
// Let's grab the initial list again to be safe and consistent with the initializer logic
|
|
const initialPlayers = players.map(p => ({
|
|
...p,
|
|
previousScore: p.previousScore,
|
|
pointsBreakdown: p.pointsBreakdown
|
|
})).sort((a, b) => (b.previousScore - a.previousScore) || a.id.localeCompare(b.id));
|
|
|
|
initialPlayers.forEach((player, initialIndex) => {
|
|
const breakdown = player.pointsBreakdown;
|
|
const baseDelay = initialIndex * 0.1;
|
|
|
|
// Helper to update state
|
|
const updatePlayerState = (phase: number, scoreToAdd: number) => {
|
|
setAnimatedPlayers(prev => {
|
|
const updated = prev.map(p => {
|
|
if (p.id !== player.id) return p;
|
|
return {
|
|
...p,
|
|
phase,
|
|
currentScore: p.currentScore + scoreToAdd
|
|
};
|
|
});
|
|
// Re-sort on every update
|
|
return updated.sort((a, b) => (b.currentScore - a.currentScore) || a.id.localeCompare(b.id));
|
|
});
|
|
};
|
|
|
|
if (!breakdown) return;
|
|
|
|
// Phase 1: Base Points + Penalty
|
|
// (baseDelay + 0.2)s
|
|
timers.push(setTimeout(() => {
|
|
const points = breakdown.basePoints - breakdown.penalty;
|
|
updatePlayerState(1, points);
|
|
}, (baseDelay + 0.2) * 1000));
|
|
|
|
// Phase 2: Streak
|
|
// (baseDelay + 0.8)s
|
|
if (breakdown.streakBonus > 0) {
|
|
timers.push(setTimeout(() => {
|
|
updatePlayerState(2, breakdown.streakBonus);
|
|
}, (baseDelay + 0.8) * 1000));
|
|
}
|
|
|
|
// Phase 3: Comeback
|
|
// (baseDelay + 1.2)s
|
|
if (breakdown.comebackBonus > 0) {
|
|
timers.push(setTimeout(() => {
|
|
updatePlayerState(3, breakdown.comebackBonus);
|
|
}, (baseDelay + 1.2) * 1000));
|
|
}
|
|
|
|
// Phase 4: First Correct
|
|
// (baseDelay + 1.6)s
|
|
if (breakdown.firstCorrectBonus > 0) {
|
|
timers.push(setTimeout(() => {
|
|
updatePlayerState(4, breakdown.firstCorrectBonus);
|
|
}, (baseDelay + 1.6) * 1000));
|
|
}
|
|
});
|
|
|
|
return () => timers.forEach(clearTimeout);
|
|
}, []); // Run once on mount
|
|
|
|
// Calculate max score based on FINAL scores (so the bar scale is consistent/correct relative to the winner)
|
|
const maxScore = Math.max(...players.map(p => p.score), 1);
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen p-4 md:p-8 overflow-hidden bg-theme-bg">
|
|
<header className="text-center mb-4 md:mb-8 shrink-0">
|
|
<h1 className="text-3xl md:text-5xl font-black text-white font-display drop-shadow-md">Scoreboard</h1>
|
|
</header>
|
|
|
|
<div className="flex-1 min-h-0 bg-white/95 backdrop-blur-sm rounded-2xl md:rounded-[3rem] shadow-[0_20px_50px_rgba(0,0,0,0.3)] p-4 md:p-8 text-gray-900 max-w-4xl w-full mx-auto relative z-10 border-4 md:border-8 border-white/50 overflow-y-auto custom-scrollbar">
|
|
<LayoutGroup>
|
|
<div className="space-y-3">
|
|
{animatedPlayers.map((player, index) => (
|
|
<PlayerRow
|
|
key={player.id}
|
|
player={player}
|
|
maxScore={maxScore}
|
|
rank={index + 1}
|
|
currentScore={player.currentScore}
|
|
phase={player.phase}
|
|
baseDelay={player.initialIndex * 0.1}
|
|
/>
|
|
))}
|
|
</div>
|
|
</LayoutGroup>
|
|
</div>
|
|
|
|
<div className="mt-4 md:mt-8 flex justify-center md:justify-end max-w-4xl w-full mx-auto shrink-0 z-20">
|
|
{isHost ? (
|
|
<button
|
|
onClick={onNext}
|
|
className="bg-white text-theme-primary px-8 md:px-12 py-3 md:py-4 rounded-xl md:rounded-2xl text-xl md:text-2xl font-black shadow-[0_8px_0_rgba(0,0,0,0.2)] hover:scale-105 active:shadow-none active:translate-y-[8px] transition-all flex items-center gap-2"
|
|
>
|
|
Next <Trophy size={24} />
|
|
</button>
|
|
) : (
|
|
<div className="flex items-center gap-2 md:gap-3 bg-white/10 px-4 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl backdrop-blur-md border-2 border-white/20 shadow-lg text-white">
|
|
<Loader2 className="animate-spin w-6 h-6 md:w-8 md:h-8" />
|
|
<span className="text-base md:text-xl font-bold">Waiting for host...</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|