98 lines
4.3 KiB
TypeScript
98 lines
4.3 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { Player } from '../types';
|
|
import { motion } from 'framer-motion';
|
|
import { Trophy, Medal, RotateCcw } from 'lucide-react';
|
|
import confetti from 'canvas-confetti';
|
|
import { PlayerAvatar } from './PlayerAvatar';
|
|
|
|
interface PodiumProps {
|
|
players: Player[];
|
|
onRestart: () => void;
|
|
}
|
|
|
|
export const Podium: React.FC<PodiumProps> = ({ players, onRestart }) => {
|
|
const sorted = [...players].sort((a, b) => b.score - a.score);
|
|
const winner = sorted[0];
|
|
const second = sorted[1];
|
|
const third = sorted[2];
|
|
|
|
useEffect(() => {
|
|
const duration = 3 * 1000;
|
|
const animationEnd = Date.now() + duration;
|
|
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
|
|
const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
|
|
|
|
const interval: any = setInterval(function() {
|
|
const timeLeft = animationEnd - Date.now();
|
|
if (timeLeft <= 0) return clearInterval(interval);
|
|
const particleCount = 50 * (timeLeft / duration);
|
|
confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
|
|
confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
|
|
}, 250);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col items-center justify-center p-4">
|
|
<h1 className="text-6xl font-black text-white mb-12 font-display drop-shadow-[0_5px_0_rgba(0,0,0,0.3)] tracking-wide">Podium</h1>
|
|
|
|
<div className="flex items-end justify-center gap-4 md:gap-8 mb-12 w-full max-w-4xl h-96">
|
|
{/* Second Place */}
|
|
{second && (
|
|
<motion.div
|
|
initial={{ height: 0 }}
|
|
animate={{ height: "60%" }}
|
|
transition={{ type: 'spring', bounce: 0.5, delay: 0.5 }}
|
|
className="w-1/3 bg-gray-200 rounded-t-[3rem] flex flex-col items-center justify-end p-6 relative border-x-4 border-t-4 border-white/50 shadow-xl"
|
|
>
|
|
<div className="absolute -top-20 flex flex-col items-center">
|
|
<span className="text-xl font-bold mb-2 text-white drop-shadow-md">{second.name}</span>
|
|
<PlayerAvatar seed={second.avatarSeed} size={40} />
|
|
</div>
|
|
<span className="text-3xl font-black text-gray-500 mb-4">{second.score}</span>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* First Place */}
|
|
{winner && (
|
|
<motion.div
|
|
initial={{ height: 0 }}
|
|
animate={{ height: "80%" }}
|
|
transition={{ type: 'spring', bounce: 0.6, delay: 1 }}
|
|
className="w-1/3 bg-yellow-400 rounded-t-[3rem] flex flex-col items-center justify-end p-6 relative z-10 shadow-2xl border-x-4 border-t-4 border-white/50"
|
|
>
|
|
<div className="absolute -top-28 flex flex-col items-center">
|
|
<span className="text-3xl font-bold mb-2 text-yellow-100 drop-shadow-md">{winner.name}</span>
|
|
<PlayerAvatar seed={winner.avatarSeed} size={56} className="ring-4 ring-yellow-300" />
|
|
</div>
|
|
<span className="text-5xl font-black text-yellow-900 mb-6">{winner.score}</span>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Third Place */}
|
|
{third && (
|
|
<motion.div
|
|
initial={{ height: 0 }}
|
|
animate={{ height: "40%" }}
|
|
transition={{ type: 'spring', bounce: 0.5, delay: 0 }}
|
|
className="w-1/3 bg-orange-400 rounded-t-[3rem] flex flex-col items-center justify-end p-6 relative border-x-4 border-t-4 border-white/50 shadow-xl"
|
|
>
|
|
<div className="absolute -top-20 flex flex-col items-center">
|
|
<span className="text-xl font-bold mb-2 text-white drop-shadow-md">{third.name}</span>
|
|
<PlayerAvatar seed={third.avatarSeed} size={40} />
|
|
</div>
|
|
<span className="text-3xl font-black text-orange-900 mb-4">{third.score}</span>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={onRestart}
|
|
className="flex items-center gap-3 bg-white text-theme-primary px-10 py-4 rounded-2xl text-2xl font-black hover:scale-105 transition shadow-[0_8px_0_rgba(0,0,0,0.2)] active:shadow-none active:translate-y-[8px]"
|
|
>
|
|
<RotateCcw size={28} /> Play Again
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|