diff --git a/client/src/components/LobbyScreen.jsx b/client/src/components/LobbyScreen.jsx index bc45fbc..c1f3a78 100644 --- a/client/src/components/LobbyScreen.jsx +++ b/client/src/components/LobbyScreen.jsx @@ -143,7 +143,7 @@ const LobbyScreen = () => { Abbrechen diff --git a/client/src/components/ResultsScreen.jsx b/client/src/components/ResultsScreen.jsx index a309ca3..747a009 100644 --- a/client/src/components/ResultsScreen.jsx +++ b/client/src/components/ResultsScreen.jsx @@ -9,42 +9,49 @@ const ResultsScreen = () => { const [showBattleHistory, setShowBattleHistory] = useState(false); const [confetti, setConfetti] = useState(true); - // Winner information + // Gewinner-Informationen const winner = lobby?.finalWinner; const winnerVideoId = getYouTubeId(winner?.youtubeLink); - // Confetti effect for winner celebration + // Konfetti-Effekt für die Siegerfeier useEffect(() => { if (confetti) { - // Create confetti animation + // Konfetti-Animation erstellen const createConfetti = () => { const confettiContainer = document.createElement('div'); confettiContainer.className = 'confetti'; - // Random position and color + // Zufällige Position, Größe und Farbe const left = Math.random() * 100; const colors = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d', '#43aa8b', '#577590']; const color = colors[Math.floor(Math.random() * colors.length)]; + const size = Math.random() * 0.7 + 0.3; // Zwischen 0.3 und 1rem + const rotation = Math.random() * 360; // Zufällige Rotation + const duration = Math.random() * 3 + 2; // Zwischen 2 und 5 Sekunden confettiContainer.style.left = `${left}%`; confettiContainer.style.backgroundColor = color; + confettiContainer.style.width = `${size}rem`; + confettiContainer.style.height = `${size * 0.6}rem`; + confettiContainer.style.transform = `rotate(${rotation}deg)`; + confettiContainer.style.animation = `confetti-fall ${duration}s linear forwards`; document.querySelector('.results-screen').appendChild(confettiContainer); - // Remove after animation + // Nach Animation entfernen setTimeout(() => { confettiContainer.remove(); - }, 5000); + }, duration * 1000); }; - // Create multiple confetti pieces + // Mehrere Konfetti-Stücke erstellen const confettiInterval = setInterval(() => { - for (let i = 0; i < 3; i++) { + for (let i = 0; i < 5; i++) { createConfetti(); } - }, 300); + }, 200); - // Stop confetti after some time + // Konfetti nach einiger Zeit stoppen setTimeout(() => { clearInterval(confettiInterval); setConfetti(false); @@ -56,7 +63,7 @@ const ResultsScreen = () => { } }, [confetti]); - // Get YouTube video ID from link + // YouTube-Video-ID aus Link extrahieren function getYouTubeId(url) { if (!url) return null; @@ -69,7 +76,7 @@ const ResultsScreen = () => { if (!winner) { return (
Submitted by: {winner.submittedByName}
+Eingereicht von: {winner.submittedByName}
{battle.song1.artist}
- {battle.song1Votes} votes + {battle.song1Votes} Stimmen{battle.song2.artist}
- {battle.song2Votes} votes + {battle.song2 ? ( +{battle.song2.artist}
+ {battle.song2Votes} Stimmen +Kein Gegner
+