Create Ending

State reset after rounds
Fix MusicSlider.jsx
2025-03-01 18:07:38 +01:00 · 2025-03-01 17:39:25 +01:00 · 2025-03-01 17:34:24 +01:00 · 2025-03-01 17:22:59 +01:00 · 2025-03-01 17:17:00 +01:00 · 2025-03-01 16:56:11 +01:00
16 changed files with 1481 additions and 163 deletions
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@ -5,6 +5,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faDrum, faGuitar, faHeadphones, faMusic} from "@fortawesome/free-solid-svg-icons";
 import Home from "@/pages/Home";
 import WaitingRoom from "@/pages/WaitingRoom";
+import Ending from "@/pages/Ending";

 const App = () => {
    const {currentState} = useContext(StateContext);
@ -63,6 +64,7 @@ const App = () => {
            {currentState === "WaitingRoom" && <WaitingRoom />}
            {currentState === "Home" && <Home />}
            {currentState === "Game" && <Game />}
+            {currentState === "Ending" && <Ending />}
        </>
    )
 }
--- a/client/src/pages/Ending/Ending.jsx
+++ b/client/src/pages/Ending/Ending.jsx
@ -0,0 +1,72 @@
+import { useEffect, useState, useContext } from "react";
+import { StateContext } from "@/common/contexts/StateContext";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrophy, faMedal, faAward, faHome, faCrown } from "@fortawesome/free-solid-svg-icons";
+import "./styles.sass";
+
+export const Ending = () => {
+    const { setCurrentState } = useContext(StateContext);
+    const [finalScores, setFinalScores] = useState([]);
+    
+    useEffect(() => {
+        const savedData = JSON.parse(localStorage.getItem('finalScores') || '{"scores":{}}');
+        const sortedScores = Object.entries(savedData.scores)
+            .map(([userId, data]) => ({
+                id: userId,
+                name: data.name,
+                score: data.score
+            }))
+            .sort((a, b) => b.score - a.score);
+        setFinalScores(sortedScores);
+    }, []);
+
+    const getPlayerIcon = (index) => {
+        switch(index) {
+            case 0: return <FontAwesomeIcon icon={faTrophy} className="gold" />;
+            case 1: return <FontAwesomeIcon icon={faMedal} className="silver" />;
+            case 2: return <FontAwesomeIcon icon={faAward} className="bronze" />;
+            default: return <FontAwesomeIcon icon={faCrown} className="normal" />;
+        }
+    };
+
+    const handleReturnHome = () => {
+        localStorage.removeItem('finalScores');
+        setCurrentState("Home");
+    };
+
+    return (
+        <div className="ending-page">
+            <div className="background-overlay">
+                <div className="rotating-gradient"></div>
+            </div>
+            
+            <div className="ending-content">
+                <h1>Spiel beendet!</h1>
+                <div className="final-scores">
+                    <h2>Endstand</h2>
+                    <div className="leaderboard">
+                        {finalScores.map((player, index) => (
+                            <div 
+                                key={player.id} 
+                                className={`leaderboard-entry ${index < 3 ? `top-${index + 1}` : ''}`}
+                            >
+                                <div className="rank-icon">
+                                    {getPlayerIcon(index)}
+                                </div>
+                                <div className="player-info">
+                                    <span className="player-name">{player.name}</span>
+                                    <span className="player-score">{player.score} Punkte</span>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                
+                <button className="return-home" onClick={handleReturnHome}>
+                    <FontAwesomeIcon icon={faHome} />
+                    Zurück zum Hauptmenü
+                </button>
+            </div>
+        </div>
+    );
+};
--- a/client/src/pages/Ending/index.js
+++ b/client/src/pages/Ending/index.js
@ -0,0 +1 @@
+export {Ending as default} from "./Ending.jsx";
--- a/client/src/pages/Ending/styles.sass
+++ b/client/src/pages/Ending/styles.sass
@ -0,0 +1,128 @@
+@import "@/common/styles/colors"
+
+.ending-page
+  height: 100vh
+  width: 100vw
+  display: flex
+  justify-content: center
+  align-items: center
+  position: relative
+  
+  .ending-content
+    text-align: center
+    z-index: 2
+    animation: float-up 0.8s ease-out
+    
+    h1
+      font-size: 48pt
+      color: $white
+      margin-bottom: 40px
+      background: linear-gradient(135deg, $yellow, $pink)
+      -webkit-background-clip: text
+      background-clip: text
+      -webkit-text-fill-color: transparent
+      animation: title-shimmer 3s infinite alternate ease-in-out
+    
+    .final-scores
+      background: rgba(255, 255, 255, 0.1)
+      backdrop-filter: blur(10px)
+      border-radius: 20px
+      padding: 30px
+      margin-bottom: 30px
+      border: 1px solid rgba(255, 255, 255, 0.2)
+      
+      h2
+        color: $white
+        margin-bottom: 20px
+        font-size: 24pt
+      
+      .leaderboard
+        display: flex
+        flex-direction: column
+        gap: 15px
+        
+        .leaderboard-entry
+          display: flex
+          align-items: center
+          padding: 15px 20px
+          background: rgba(255, 255, 255, 0.05)
+          border-radius: 15px
+          transition: all 0.3s ease
+          border: 1px solid rgba(255, 255, 255, 0.1)
+          
+          &:hover
+            transform: translateY(-2px)
+            background: rgba(255, 255, 255, 0.1)
+          
+          &.top-1
+            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1))
+            border-color: rgba(255, 215, 0, 0.3)
+            transform: scale(1.05)
+            
+            .rank-icon
+              color: #FFD700
+              filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5))
+          
+          &.top-2
+            background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(192, 192, 192, 0.1))
+            border-color: rgba(192, 192, 192, 0.3)
+            
+            .rank-icon
+              color: #C0C0C0
+              filter: drop-shadow(0 0 10px rgba(192, 192, 192, 0.5))
+          
+          &.top-3
+            background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(205, 127, 50, 0.1))
+            border-color: rgba(205, 127, 50, 0.3)
+            
+            .rank-icon
+              color: #CD7F32
+              filter: drop-shadow(0 0 10px rgba(205, 127, 50, 0.5))
+          
+          .rank-icon
+            font-size: 24pt
+            margin-right: 20px
+            
+          .player-info
+            flex: 1
+            display: flex
+            justify-content: space-between
+            align-items: center
+            
+            .player-name
+              color: $white
+              font-size: 18pt
+              
+            .player-score
+              color: $yellow
+              font-size: 16pt
+              font-weight: bold
+    
+    .return-home
+      padding: 15px 30px
+      background: linear-gradient(135deg, $purple, $blue)
+      border: none
+      border-radius: 12px
+      color: $white
+      font-size: 16pt
+      cursor: pointer
+      transition: all 0.3s ease
+      display: flex
+      align-items: center
+      gap: 10px
+      margin: 0 auto
+      
+      &:hover
+        transform: translateY(-3px)
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4)
+        
+      svg
+        font-size: 18pt
+
+@keyframes float-up
+  0%
+    opacity: 0
+    transform: translateY(30px)
+  100%
+    opacity: 1
+    transform: translateY(0)
--- a/client/src/pages/Game/Game.jsx
+++ b/client/src/pages/Game/Game.jsx
@ -1,5 +1,6 @@
 import "./styles.sass";
 import {SocketContext} from "@/common/contexts/SocketContext";
+import {StateContext} from "@/common/contexts/StateContext";
 import {useContext, useState, useEffect, useRef, useCallback} from "react";
 import MusicSlider from "@/pages/Game/components/MusicSlider";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
@ -10,15 +11,14 @@ import {
    faClock,
    faCrown,
    faPaperPlane,
-    faCheckCircle,
-    faVolumeUp,
-    faStepForward
+    faCheckCircle
 } from "@fortawesome/free-solid-svg-icons";
 import { fetchPlaylistSongs } from "@/services/youtubeService.js";
 import YouTubePlayer from "../../components/YouTubePlayer/YouTubePlayer";

 export const Game = () => {
    const {send, on, socket, connected, connect} = useContext(SocketContext);
+    const {setCurrentState} = useContext(StateContext);

    useEffect(() => {
        if (!connected) {
@ -69,9 +69,14 @@ export const Game = () => {
            },
            "song-selected": setCurrentSong,
            "round-started": (data) => {
-                setRound(data.round);
-                setPhase("composing");
-                setTimeLeft(data.timeRemaining);
+                requestAnimationFrame(() => {
+                    setPhase("composing");
+                    setRound(data.round);
+                    setTimeLeft(data.timeRemaining);
+                    setSelectedSong(null);
+                    setHasGuessed(false);
+                    setGuessResult(null);
+                });
            },
            "guessing-phase-started": (data) => {
                console.log("Guessing phase started:", data);
@ -130,7 +135,7 @@ export const Game = () => {
                if (phase === "composing") {
                    console.log("Received frequency update:", data.frequency);
                    setFrequency(data.frequency);
-                    setComposerIsPlaying(data.isPlaying); // Make sure isPlaying is handled
+                    setComposerIsPlaying(data.isPlaying);
                }
            },
            "phase-changed": (data) => {
@ -153,6 +158,10 @@ export const Game = () => {
                console.log("Received song options early:", data);
                setSongOptions(data.songOptions || []);
            },
+            "game-ended": (finalData) => {
+                setCurrentState("Ending");
+                localStorage.setItem('finalScores', JSON.stringify(finalData));
+            },
        };

        const cleanupFunctions = Object.entries(eventHandlers).map(
@ -165,7 +174,7 @@ export const Game = () => {
        }

        return () => cleanupFunctions.forEach(cleanup => cleanup());
-    }, [socket, on, send, role, currentSong, phase, connected, connectedUsers]);
+    }, [socket, on, send, role, currentSong, phase, connected, connectedUsers, setCurrentState, round]);

    useEffect(() => {
        if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
@ -229,6 +238,14 @@ export const Game = () => {
        }
    }, [allSongs, songOptions]);

+    useEffect(() => {
+        if (phase === 'composing') {
+            setSelectedSong(null);
+            setHasGuessed(false);
+            setGuessResult(null);
+        }
+    }, [phase]);
+
    const handleFrequencyChange = useCallback((newFrequency, isPlaying) => {
        setFrequency(newFrequency);
        setComposerIsPlaying(isPlaying);
@ -268,10 +285,8 @@ export const Game = () => {
    }, [selectedSong, send, phase]);
    
    const handleNextRound = useCallback(() => {
-        send("next-round");
-        setSelectedSong(null);
-        setGuessResult(null);
        setTimeLeft(0);
+        send("next-round");
    }, [send]);

    const handlePlayerReady = useCallback(() => {
--- a/client/src/pages/Game/components/MusicSlider/MusicSlider.jsx
+++ b/client/src/pages/Game/components/MusicSlider/MusicSlider.jsx
@ -1,6 +1,21 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import "./styles.sass";

+const frequencyToNote = (frequency) => {
+  const A4 = 440;
+  const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+
+  const halfSteps = Math.round(12 * Math.log2(frequency / A4));
+
+  const A4Index = notes.indexOf('A');
+  let noteIndex = (A4Index + halfSteps) % 12;
+  if (noteIndex < 0) noteIndex += 12;
+
+  const octave = 4 + Math.floor((halfSteps + A4Index) / 12);
+  
+  return `${notes[noteIndex]}${octave}`;
+};
+
 export const MusicSlider = ({ isReadOnly, onFrequencyChange, frequency: externalFrequency, composerIsPlaying }) => {
  const [audioContext, setAudioContext] = useState(null);
  const [oscillator, setOscillator] = useState(null);
@ -187,6 +202,25 @@ export const MusicSlider = ({ isReadOnly, onFrequencyChange, frequency: external
    return `${Math.max(0, Math.min(pos, 100))}%`;
  };

+  const getMouthSize = () => {
+    const minSize = 30;
+    const maxSize = 60;
+    const freqRange = 880;
+    const sizeRange = maxSize - minSize;
+    const relativeFreq = frequency.current - 220;
+    const size = minSize + (relativeFreq / freqRange) * sizeRange;
+    return Math.max(minSize, Math.min(maxSize, size));
+  };
+
+  const shouldShowNoteMarker = () => {
+    if (!isReadOnly) return isDragging.current;
+    return composerIsPlaying;
+  };
+
+  if (isReadOnly && !composerIsPlaying) {
+    return null;
+  }
+
  return (
    <div className="otamatone-container">
      <div className="otamatone">
@ -195,22 +229,32 @@ export const MusicSlider = ({ isReadOnly, onFrequencyChange, frequency: external
            <div className="eye left-eye"></div>
            <div className="eye right-eye"></div>
          </div>
-          <div className="otamatone-mouth"></div>
+          <div 
+            className="otamatone-mouth"
+            style={{
+              width: `${getMouthSize()}px`,
+              height: `${getMouthSize()}px`
+            }}
+          ></div>
        </div>
-        <div 
-          ref={sliderRef}
-          className={`otamatone-neck ${!isReadOnly ? 'interactive' : ''}`}
-          style={{ cursor: isReadOnly ? 'default' : 'pointer' }}
-        >
-          <div
-            className={`frequency-indicator ${isReadOnly ? 'read-only' : ''} ${composerIsPlaying ? 'active' : ''}`}
-            style={{ left: getFrequencyPosition() }}
+        {(!isReadOnly || composerIsPlaying) && (
+          <div 
+            ref={sliderRef}
+            className={`otamatone-neck ${!isReadOnly ? 'interactive' : ''}`}
+            style={{ cursor: isReadOnly ? 'default' : 'pointer' }}
          >
-            <div className="note-marker">
-              {(!isReadOnly && isDragging.current) && Math.round(frequency.current)}
+            <div
+              className={`frequency-indicator ${isReadOnly ? 'read-only' : ''} ${composerIsPlaying ? 'active' : ''}`}
+              style={{ left: getFrequencyPosition() }}
+            >
+              {shouldShowNoteMarker() && (
+                <div className="note-marker">
+                  {frequencyToNote(frequency.current)}
+                </div>
+              )}
            </div>
          </div>
-        </div>
+        )}
      </div>
    </div>
  );
--- a/client/src/pages/Game/components/MusicSlider/styles.sass
+++ b/client/src/pages/Game/components/MusicSlider/styles.sass
@ -104,10 +104,23 @@
 .note-marker
  position: absolute
  top: -50px
-  font-size: 32pt
+  font-size: 24pt
  color: $white
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.7)
  font-weight: bold
+  font-family: 'Arial', sans-serif
+  background: rgba(0, 0, 0, 0.6)
+  padding: 2px 8px
+  border-radius: 8px
+  backdrop-filter: blur(5px)
+  min-width: 60px
+  text-align: center
+  animation: note-pop 0.2s ease-out
+  opacity: 1
+  
+  .read-only &
+    background: rgba(0, 0, 0, 0.8)
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4)

 .otamatone-face
  width: 140px
@ -169,10 +182,11 @@
  border-radius: 50%
  position: absolute
  bottom: 30px
-  width: 30px
-  height: 30px
-  transition: all 0.3s ease
-  animation: mouth-pulse 5s infinite alternate ease-in-out
+  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+  transform-origin: center center
+
+  &.active
+    animation: mouth-pulse 0.5s infinite alternate ease-in-out

@keyframes blink
  0%, 90%, 100%
@ -200,4 +214,14 @@
    opacity: 0
  100%
    transform: translateY(0)
+    opacity: 1
+
+@keyframes note-pop
+  0%
+    transform: scale(0.8)
+    opacity: 0.5
+  50%
+    transform: scale(1.1)
+  100%
+    transform: scale(1)
    opacity: 1
--- a/client/src/pages/WaitingRoom/WaitingRoom.jsx
+++ b/client/src/pages/WaitingRoom/WaitingRoom.jsx
@ -15,14 +15,17 @@ export const WaitingRoom = () => {
    const [isHost, setIsHost] = useState(false);
    const [username, setUsername] = useState("");
    const [copied, setCopied] = useState(false);
+    const [playlists, setPlaylists] = useState({});
+    const [votes, setVotes] = useState({});
+    const [selectedPlaylist, setSelectedPlaylist] = useState(null);
    const messageEndRef = useRef(null);

    useEffect(() => {
-        // Check if the user is a host and get other initial data
        send("check-host-status");
        send("get-user-info");
        send("get-room-users");
        send("get-room-code");
+        send("get-playlist-options");

        const handleHostStatus = (status) => {
            setIsHost(status.isHost);
@ -72,7 +75,39 @@ export const WaitingRoom = () => {
            setCurrentState("Game");
        };

-        // Register event listeners
+        const handlePlaylistOptions = (options) => {
+            const playlistsWithVotes = { ...options };
+            Object.keys(playlistsWithVotes).forEach(genre => {
+                const playlistId = playlistsWithVotes[genre].id;
+                playlistsWithVotes[genre].votes = votes[playlistId]?.length || 0;
+            });
+            setPlaylists(playlistsWithVotes);
+        };
+
+        const handleVotesUpdated = (newVotes) => {
+            console.log('Received updated votes:', newVotes);
+            setVotes(newVotes);
+
+            setPlaylists(current => {
+                const updated = { ...current };
+                Object.keys(updated).forEach(genre => {
+                    const playlistId = updated[genre].id;
+                    updated[genre].votes = newVotes[playlistId]?.length || 0;
+                });
+                return updated;
+            });
+
+            Object.entries(newVotes).forEach(([playlistId, voters]) => {
+                if (voters.includes(socket.id)) {
+                    setSelectedPlaylist(playlistId);
+                }
+            });
+        };
+
+        const handleRoomJoined = (code) => {
+            setRoomCode(code);
+        };
+
        const cleanupHostStatus = on("host-status", handleHostStatus);
        const cleanupUserInfo = on("user-info", handleUserInfo);
        const cleanupRoomUsers = on("room-users", handleRoomUsers);
@ -82,8 +117,10 @@ export const WaitingRoom = () => {
        const cleanupUserDisconnected = on("user-disconnected", handleUserDisconnected);
        const cleanupChatMessage = on("chat-message", handleChatMessage);
        const cleanupGameStarted = on("game-started", handleGameStarted);
+        const cleanupPlaylistOptions = on("playlist-options", handlePlaylistOptions);
+        const cleanupVotesUpdated = on("playlist-votes-updated", handleVotesUpdated);
+        const cleanupRoomJoined = on("room-joined", handleRoomJoined);

-        // Add welcome message
        setMessages([{
            system: true,
            text: "Welcome to the waiting room! Waiting for others to join..."
@ -99,6 +136,9 @@ export const WaitingRoom = () => {
            cleanupUserDisconnected();
            cleanupChatMessage();
            cleanupGameStarted();
+            cleanupPlaylistOptions();
+            cleanupVotesUpdated();
+            cleanupRoomJoined();
        };
    }, [on, send, socket, setCurrentState]);

@ -125,7 +165,6 @@ export const WaitingRoom = () => {
    };

    const handleLeaveRoom = () => {
-        // Disconnect from the current room
        if (socket) {
            socket.disconnect();
        }
@ -138,7 +177,61 @@ export const WaitingRoom = () => {
        setTimeout(() => setCopied(false), 2000);
    };

-    const minPlayersToStart = 1; // Set your minimum players requirement here
+    const handleVote = (playlistId) => {
+        setSelectedPlaylist(playlistId);
+        send("vote-playlist", { playlistId });
+    };
+
+    const getVoteCount = (playlistId) => {
+        return votes[playlistId]?.length || 0;
+    };
+
+    const renderPlaylistSection = () => (
+        <div className="playlist-section">
+            <div className="section-header">
+                <h2>Choose a Playlist</h2>
+                <p className="vote-info">Most voted playlist will be used for the game</p>
+            </div>
+            <div className="playlists-grid">
+                {Object.entries(playlists).map(([genre, playlist]) => (
+                    <div 
+                        key={playlist.id}
+                        className={`playlist-card ${selectedPlaylist === playlist.id ? 'selected' : ''}`}
+                        onClick={() => handleVote(playlist.id)}
+                    >
+                        <div className="playlist-thumbnail">
+                            <img src={playlist.thumbnail.url} alt={playlist.title} />
+                            <div className="playlist-overlay">
+                                <div className="vote-count">
+                                    <span className="count">{getVoteCount(playlist.id)}</span>
+                                    <span className="vote-label">votes</span>
+                                </div>
+                                {selectedPlaylist === playlist.id && (
+                                    <div className="your-vote">Your Vote</div>
+                                )}
+                            </div>
+                        </div>
+                        <div className="playlist-info">
+                            <h3>{genre.toUpperCase()}</h3>
+                            <div className="playlist-details">
+                                <span>{playlist.songCount} songs</span>
+                                <div className="vote-percentage-bar">
+                                    <div 
+                                        className="fill"
+                                        style={{ 
+                                            width: `${(getVoteCount(playlist.id) / Math.max(1, users.length)) * 100}%`
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+
+    const minPlayersToStart = 1;
    const canStartGame = isHost && users.length >= minPlayersToStart;

    return (
@ -153,78 +246,84 @@ export const WaitingRoom = () => {
                    <span>Zurück zur Startseite</span>
                </button>
                <h1>Warteraum</h1>
-                <div className="room-code-container">
-                    <div className="room-code" onClick={copyRoomCode}>
-                        Code: <span className="code">{roomCode}</span> 
-                        <FontAwesomeIcon icon={copied ? faCheck : faCopy} className={copied ? "copied" : ""} />
+                {roomCode && (
+                    <div className="room-code-container">
+                        <div className="room-code" onClick={copyRoomCode}>
+                            Code: <span className="code">{roomCode}</span> 
+                            <FontAwesomeIcon icon={copied ? faCheck : faCopy} className={copied ? "copied" : ""} />
+                        </div>
+                        <div className="copy-hint">{copied ? "Kopiert!" : "Klicken zum Kopieren"}</div>
                    </div>
-                    <div className="copy-hint">{copied ? "Kopiert!" : "Klicken zum Kopieren"}</div>
-                </div>
+                )}
            </div>
            
-            <div className="waiting-room-content">
-                <div className="users-panel">
-                    <div className="panel-header">
-                        <FontAwesomeIcon icon={faUsers} />
-                        <h2>Spieler ({users.length})</h2>
-                    </div>
-                    <div className="users-list">
-                        {users.length === 0 ? (
-                            <div className="no-users">Keine Spieler im Raum</div>
-                        ) : (
-                            users.map((user) => (
-                                <div key={user.id} className={`user-item ${user.creator ? 'host' : ''}`}>
-                                    {user.name} {user.creator && <span className="host-badge">Host</span>}
-                                </div>
-                            ))
-                        )}
-                    </div>
-                    {isHost && (
-                        <div className="game-controls">
-                            <button 
-                                className={`start-game-button ${canStartGame ? '' : 'disabled'}`}
-                                onClick={handleStartGame}
-                                disabled={!canStartGame}
-                            >
-                                <FontAwesomeIcon icon={faPlayCircle} />
-                                Spiel starten
-                            </button>
-                            {!canStartGame && users.length < minPlayersToStart && (
-                                <div className="start-hint">Mindestens {minPlayersToStart} Spieler benötigt</div>
+            <div className="waiting-room-layout">
+                {renderPlaylistSection()}
+                
+                <div className="bottom-section">
+                    <div className="users-panel">
+                        <div className="panel-header">
+                            <FontAwesomeIcon icon={faUsers} />
+                            <h2>Spieler ({users.length})</h2>
+                        </div>
+                        <div className="users-list">
+                            {users.length === 0 ? (
+                                <div className="no-users">Keine Spieler im Raum</div>
+                            ) : (
+                                users.map((user) => (
+                                    <div key={user.id} className={`user-item ${user.creator ? 'host' : ''}`}>
+                                        {user.name} {user.creator && <span className="host-badge">Host</span>}
+                                    </div>
+                                ))
                            )}
                        </div>
-                    )}
-                </div>
-
-                <div className="chat-panel">
-                    <div className="panel-header">
-                        <FontAwesomeIcon icon={faMessage} />
-                        <h2>Chat</h2>
-                    </div>
-                    <div className="chat-messages">
-                        {messages.map((message, index) => (
-                            <div key={index} className={`message ${message.system ? 'system-message' : ''}`}>
-                                {message.system ? (
-                                    <span className="message-text system">{message.text}</span>
-                                ) : (
-                                    <>
-                                        <span className="message-sender">{message.sender}:</span>
-                                        <span className="message-text">{message.text}</span>
-                                    </>
+                        {isHost && (
+                            <div className="game-controls">
+                                <button 
+                                    className={`start-game-button ${canStartGame ? '' : 'disabled'}`}
+                                    onClick={handleStartGame}
+                                    disabled={!canStartGame}
+                                >
+                                    <FontAwesomeIcon icon={faPlayCircle} />
+                                    Spiel starten
+                                </button>
+                                {!canStartGame && users.length < minPlayersToStart && (
+                                    <div className="start-hint">Mindestens {minPlayersToStart} Spieler benötigt</div>
                                )}
                            </div>
-                        ))}
-                        <div ref={messageEndRef}></div>
+                        )}
                    </div>
-                    <div className="chat-input">
-                        <input
-                            type="text"
-                            value={inputValue}
-                            onChange={(e) => setInputValue(e.target.value)}
-                            onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
-                            placeholder="Gib eine Nachricht ein..."
-                        />
-                        <button onClick={handleSendMessage}>Senden</button>
+
+                    <div className="chat-panel">
+                        <div className="panel-header">
+                            <FontAwesomeIcon icon={faMessage} />
+                            <h2>Chat</h2>
+                        </div>
+                        <div className="chat-messages">
+                            {messages.map((message, index) => (
+                                <div key={index} className={`message ${message.system ? 'system-message' : ''}`}>
+                                    {message.system ? (
+                                        <span className="message-text system">{message.text}</span>
+                                    ) : (
+                                        <>
+                                            <span className="message-sender">{message.sender}:</span>
+                                            <span className="message-text">{message.text}</span>
+                                        </>
+                                    )}
+                                </div>
+                            ))}
+                            <div ref={messageEndRef}></div>
+                        </div>
+                        <div className="chat-input">
+                            <input
+                                type="text"
+                                value={inputValue}
+                                onChange={(e) => setInputValue(e.target.value)}
+                                onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+                                placeholder="Gib eine Nachricht ein..."
+                            />
+                            <button onClick={handleSendMessage}>Senden</button>
+                        </div>
                    </div>
                </div>
            </div>
--- a/client/src/pages/WaitingRoom/styles.sass
+++ b/client/src/pages/WaitingRoom/styles.sass
@ -102,10 +102,11 @@
    width: 100%
    max-width: 1200px
    gap: 30px
-    height: calc(100vh - 180px)
+    height: calc(100vh - 140px)
    z-index: 2
    position: relative
    animation: float-up 1.2s ease-out
+    overflow: hidden

    .users-panel,
    .chat-panel
@ -130,6 +131,7 @@
        flex-grow: 1
        overflow-y: auto
        padding: 15px
+        min-height: 0
        
        &::-webkit-scrollbar
          width: 6px
@ -222,6 +224,7 @@
      width: 70%
      display: flex
      flex-direction: column
+      height: 100%
      
      .chat-messages
        flex-grow: 1
@ -229,6 +232,7 @@
        padding: 15px
        display: flex
        flex-direction: column
+        min-height: 0
        
        &::-webkit-scrollbar
          width: 8px
@ -330,6 +334,362 @@
      font-size: 1.4rem
      margin: 0

+.playlist-section
+  background: rgba(20, 20, 30, 0.6)
+  backdrop-filter: blur(10px)
+  border-radius: 15px
+  padding: 25px
+  animation: float-up 0.8s ease-out
+  border: 1px solid rgba(255, 255, 255, 0.1)
+  transition: all 0.3s ease
+  
+  &:hover
+    border-color: rgba(255, 255, 255, 0.2)
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)
+  
+  .section-header
+    background: rgba(30, 30, 40, 0.95)
+    padding: 20px
+    border-radius: 12px
+    margin: -25px -25px 25px -25px
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
+    text-align: center
+    
+    h2
+      margin: 0
+      font-size: 24px
+      color: $white
+      display: flex
+      align-items: center
+      justify-content: center
+      gap: 10px
+      
+      &:before, &:after
+        content: ""
+        height: 1px
+        width: 50px
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
+    
+    .vote-info
+      color: rgba(255, 255, 255, 0.6)
+      font-size: 14px
+      margin-top: 5px
+
+  .playlists-grid
+    display: grid
+    grid-template-columns: repeat(3, 1fr)
+    gap: 20px
+    padding: 5px
+    
+    @media (max-width: 1200px)
+      grid-template-columns: repeat(2, 1fr)
+    
+    @media (max-width: 768px)
+      grid-template-columns: 1fr
+
+.playlist-card
+  background: rgba(255, 255, 255, 0.05)
+  border-radius: 12px
+  overflow: hidden
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+  cursor: pointer
+  border: 1px solid rgba(255, 255, 255, 0.1)
+  
+  &:hover
+    transform: translateY(-5px)
+    background: rgba(255, 255, 255, 0.08)
+    border-color: rgba(255, 255, 255, 0.2)
+    
+    .playlist-overlay
+      opacity: 1
+  
+  &.selected
+    background: rgba($yellow, 0.1)
+    border-color: rgba($yellow, 0.3)
+    box-shadow: 0 0 30px rgba($yellow, 0.15)
+    
+    .playlist-overlay
+      opacity: 1
+      background: rgba(0, 0, 0, 0.4)
+      
+    .your-vote
+      transform: translateY(0)
+      opacity: 1
+    
+    .playlist-info h3
+      color: $yellow
+
+  .playlist-thumbnail
+    position: relative
+    width: 100%
+    padding-top: 56.25%
+    
+    img
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      object-fit: cover
+    
+    .playlist-overlay
+      position: absolute
+      inset: 0
+      background: rgba(0, 0, 0, 0.3)
+      opacity: 0
+      transition: all 0.3s ease
+      display: flex
+      flex-direction: column
+      justify-content: center
+      align-items: center
+      
+      .vote-count
+        background: rgba(20, 20, 30, 0.85)
+        padding: 12px 20px
+        border-radius: 15px
+        text-align: center
+        border: 1px solid rgba(255, 255, 255, 0.2)
+        backdrop-filter: blur(5px)
+        
+        .count
+          font-size: 28px
+          font-weight: bold
+          color: $yellow
+          display: block
+          text-shadow: 0 0 10px rgba($yellow, 0.5)
+        
+        .vote-label
+          font-size: 12px
+          color: rgba(255, 255, 255, 0.7)
+      
+      .your-vote
+        position: absolute
+        bottom: 15px
+        background: $yellow
+        color: rgba(0, 0, 0, 0.8)
+        padding: 8px 16px
+        border-radius: 20px
+        font-weight: bold
+        font-size: 12px
+        transform: translateY(20px)
+        opacity: 0
+        transition: all 0.3s ease
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
+
+  .playlist-info
+    padding: 15px
+    background: rgba(20, 20, 30, 0.4)
+    border-top: 1px solid rgba(255, 255, 255, 0.05)
+    
+    h3
+      color: $white
+      margin-bottom: 8px
+      font-size: 18px
+      transition: color 0.3s ease
+    
+    .playlist-details
+      display: flex
+      flex-direction: column
+      gap: 8px
+      
+      span
+        color: rgba(255, 255, 255, 0.6)
+        font-size: 13px
+      
+      .vote-percentage-bar
+        height: 4px
+        background: rgba(255, 255, 255, 0.1)
+        border-radius: 2px
+        overflow: hidden
+        
+        .fill
+          height: 100%
+          background: linear-gradient(90deg, $yellow, rgba($yellow, 0.5))
+          box-shadow: 0 0 10px rgba($yellow, 0.3)
+          transition: width 0.3s ease
+
+.bottom-section
+  display: flex
+  gap: 30px
+  width: 100%
+  min-height: 0
+  height: 300px
+  margin-top: 20px
+  
+  .users-panel
+    height: 100%
+    display: flex
+    flex-direction: column
+    background: rgba(20, 20, 30, 0.6)
+    border-radius: 15px
+    border: 1px solid rgba(255, 255, 255, 0.1)
+    overflow: hidden
+    transition: all 0.3s ease
+    
+    &:hover
+      border-color: rgba(255, 255, 255, 0.2)
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)
+    
+    .panel-header
+      background: rgba(30, 30, 40, 0.95)
+      padding: 20px
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1)
+      
+      h2
+        font-size: 20px
+        display: flex
+        align-items: center
+        gap: 10px
+        
+        svg
+          color: $yellow
+          filter: drop-shadow(0 0 8px rgba($yellow, 0.4))
+    
+    .users-list
+      padding: 15px
+      flex: 1
+      overflow-y: auto
+      min-height: 0
+      
+      .user-item
+        background: rgba(255, 255, 255, 0.05)
+        margin-bottom: 10px
+        padding: 12px 15px
+        border-radius: 10px
+        transition: all 0.3s ease
+        border: 1px solid rgba(255, 255, 255, 0.05)
+        
+        &:hover
+          transform: translateY(-2px)
+          background: rgba(255, 255, 255, 0.08)
+          border-color: rgba(255, 255, 255, 0.1)
+        
+        &.host
+          background: rgba($yellow, 0.1)
+          border-color: rgba($yellow, 0.3)
+          
+          .host-badge
+            background: $yellow
+            color: #000
+            font-size: 12px
+            padding: 4px 8px
+            border-radius: 20px
+            font-weight: bold
+    
+    .game-controls
+      padding: 15px
+      background: rgba(20, 20, 30, 0.4)
+      border-top: 1px solid rgba(255, 255, 255, 0.05)
+      
+      .start-game-button
+        width: 100%
+        padding: 12px
+        background: linear-gradient(135deg, $purple, $blue)
+        border-radius: 10px
+        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+        
+        &:not(.disabled):hover
+          transform: translateY(-2px)
+          filter: brightness(1.1)
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
+  
+  .chat-panel
+    flex: 1
+    height: 100%
+    background: rgba(20, 20, 30, 0.6)
+    border-radius: 15px
+    border: 1px solid rgba(255, 255, 255, 0.1)
+    display: flex
+    flex-direction: column
+    overflow: hidden
+    transition: all 0.3s ease
+    
+    &:hover
+      border-color: rgba(255, 255, 255, 0.2)
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)
+    
+    .panel-header
+      background: rgba(30, 30, 40, 0.95)
+      padding: 20px
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1)
+      
+      h2
+        font-size: 20px
+        display: flex
+        align-items: center
+        gap: 10px
+        
+        svg
+          color: $blue
+          filter: drop-shadow(0 0 8px rgba($blue, 0.4))
+    
+    .chat-messages
+      flex: 1
+      padding: 20px
+      overflow-y: auto
+      display: flex
+      flex-direction: column
+      gap: 10px
+      min-height: 0
+      
+      .message
+        max-width: 85%
+        padding: 10px 15px
+        border-radius: 12px
+        background: rgba(255, 255, 255, 0.05)
+        border: 1px solid rgba(255, 255, 255, 0.05)
+        transition: all 0.3s ease
+        
+        &:hover
+          background: rgba(255, 255, 255, 0.08)
+          border-color: rgba(255, 255, 255, 0.1)
+          transform: translateY(-1px)
+        
+        .message-sender
+          color: $yellow
+          font-weight: 600
+          margin-right: 8px
+        
+        &.system-message
+          align-self: center
+          background: rgba(0, 0, 0, 0.2)
+          font-style: italic
+          color: rgba(255, 255, 255, 0.6)
+          padding: 8px 16px
+          border-radius: 20px
+    
+    .chat-input
+      padding: 15px
+      background: rgba(20, 20, 30, 0.4)
+      border-top: 1px solid rgba(255, 255, 255, 0.05)
+      display: flex
+      gap: 10px
+      
+      input
+        flex: 1
+        background: rgba(0, 0, 0, 0.2)
+        border: 1px solid rgba(255, 255, 255, 0.1)
+        border-radius: 8px
+        padding: 12px 15px
+        color: $white
+        transition: all 0.3s ease
+        
+        &:focus
+          border-color: rgba($blue, 0.5)
+          box-shadow: 0 0 15px rgba($blue, 0.1)
+          background: rgba(0, 0, 0, 0.3)
+      
+      button
+        padding: 12px 20px
+        background: linear-gradient(135deg, $purple, $blue)
+        border-radius: 8px
+        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+        
+        &:hover
+          transform: translateY(-2px)
+          filter: brightness(1.1)
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
+
@keyframes pop
  0%
    transform: scale(1)
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
  },
  "dependencies": {
    "express": "^4.21.2",
+    "googleapis": "^146.0.0",
    "socket.io": "^4.8.1"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -11,6 +11,9 @@ importers:
      express:
        specifier: ^4.21.2
        version: 4.21.2
+      googleapis:
+        specifier: ^146.0.0
+        version: 146.0.0
      socket.io:
        specifier: ^4.8.1
        version: 4.8.1
@ -37,6 +40,10 @@ packages:
    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
    engines: {node: '>= 0.6'}

+  agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
+    engines: {node: '>= 14'}
+
  ansi-regex@5.0.1:
    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
    engines: {node: '>=8'}
@ -55,10 +62,16 @@ packages:
  balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
  base64id@2.0.0:
    resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==}
    engines: {node: ^4.5.0 || >= 5.9}

+  bignumber.js@9.1.2:
+    resolution: {integrity: sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==}
+
  binary-extensions@2.3.0:
    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
    engines: {node: '>=8'}
@ -74,6 +87,9 @@ packages:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
    engines: {node: '>=8'}

+  buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
  bytes@3.1.2:
    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
    engines: {node: '>= 0.8'}
@ -165,6 +181,9 @@ packages:
    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
    engines: {node: '>= 0.4'}

+  ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
  ee-first@1.1.1:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}

@ -214,6 +233,9 @@ packages:
    resolution: {integrity: sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==}
    engines: {node: '>= 0.10.0'}

+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
  fill-range@7.1.1:
    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
    engines: {node: '>=8'}
@ -238,6 +260,14 @@ packages:
  function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}

+  gaxios@6.7.1:
+    resolution: {integrity: sha512-LDODD4TMYx7XXdpwxAVRAIAuB0bzv0s+ywFonY46k126qzQHT9ygyoa9tncmOiQmmDrik65UYsEkv3lbfqQ3yQ==}
+    engines: {node: '>=14'}
+
+  gcp-metadata@6.1.1:
+    resolution: {integrity: sha512-a4tiq7E0/5fTjxPAaH4jpjkSv/uCaU2p5KC6HVGrvl0cDjA8iBZv4vv1gyzlmK0ZUKqwpOyQMKzZQe3lTit77A==}
+    engines: {node: '>=14'}
+
  get-caller-file@2.0.5:
    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
    engines: {node: 6.* || 8.* || >= 10.*}
@ -254,10 +284,30 @@ packages:
    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
    engines: {node: '>= 6'}

+  google-auth-library@9.15.1:
+    resolution: {integrity: sha512-Jb6Z0+nvECVz+2lzSMt9u98UsoakXxA2HGHMCxh+so3n90XgYWkq5dur19JAJV7ONiJY22yBTyJB1TSkvPq9Ng==}
+    engines: {node: '>=14'}
+
+  google-logging-utils@0.0.2:
+    resolution: {integrity: sha512-NEgUnEcBiP5HrPzufUkBzJOD/Sxsco3rLNo1F1TNf7ieU8ryUzBhqba8r756CjLX7rn3fHl6iLEwPYuqpoKgQQ==}
+    engines: {node: '>=14'}
+
+  googleapis-common@7.2.0:
+    resolution: {integrity: sha512-/fhDZEJZvOV3X5jmD+fKxMqma5q2Q9nZNSF3kn1F18tpxmA86BcTxAGBQdM0N89Z3bEaIs+HVznSmFJEAmMTjA==}
+    engines: {node: '>=14.0.0'}
+
+  googleapis@146.0.0:
+    resolution: {integrity: sha512-NewqvhnBZOJsugCAOo636O0BGE/xY7Cg/v8Rjm1+5LkJCjcqAzLleJ6igd5vrRExJLSKrY9uHy9iKE7r0PrfhQ==}
+    engines: {node: '>=14.0.0'}
+
  gopd@1.2.0:
    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
    engines: {node: '>= 0.4'}

+  gtoken@7.1.0:
+    resolution: {integrity: sha512-pCcEwRi+TKpMlxAQObHDQ56KawURgyAf6jtIY046fJ5tIv3zDe/LEIubckAO8fj6JnAxLdmWkUfNyulQ2iKdEw==}
+    engines: {node: '>=14.0.0'}
+
  has-flag@3.0.0:
    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
    engines: {node: '>=4'}
@ -278,6 +328,10 @@ packages:
    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
    engines: {node: '>= 0.8'}

+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
  iconv-lite@0.4.24:
    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
    engines: {node: '>=0.10.0'}
@ -312,6 +366,19 @@ packages:
    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
    engines: {node: '>=0.12.0'}

+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  json-bigint@1.0.0:
+    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
+
+  jwa@2.0.0:
+    resolution: {integrity: sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==}
+
+  jws@4.0.0:
+    resolution: {integrity: sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==}
+
  lodash@4.17.21:
    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}

@ -356,6 +423,15 @@ packages:
    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
    engines: {node: '>= 0.6'}

+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
  nodemon@3.1.9:
    resolution: {integrity: sha512-hdr1oIb2p6ZSxu3PB2JWWYS7ZQ0qvaZsc3hK8DR8f02kRzc8rjYmxAIvdz+aYC+8F2IjNaB7HMcSDg8nQpJxyg==}
    engines: {node: '>=10'}
@ -511,6 +587,9 @@ packages:
    resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
    hasBin: true

+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
  tree-kill@1.2.2:
    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
    hasBin: true
@ -532,14 +611,27 @@ packages:
    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
    engines: {node: '>= 0.8'}

+  url-template@2.0.8:
+    resolution: {integrity: sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw==}
+
  utils-merge@1.0.1:
    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
    engines: {node: '>= 0.4.0'}

+  uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+
  vary@1.1.2:
    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
    engines: {node: '>= 0.8'}

+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
  wrap-ansi@7.0.0:
    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
    engines: {node: '>=10'}
@ -585,6 +677,8 @@ snapshots:
      mime-types: 2.1.35
      negotiator: 0.6.3

+  agent-base@7.1.3: {}
+
  ansi-regex@5.0.1: {}

  ansi-styles@4.3.0:
@ -600,8 +694,12 @@ snapshots:

  balanced-match@1.0.2: {}

+  base64-js@1.5.1: {}
+
  base64id@2.0.0: {}

+  bignumber.js@9.1.2: {}
+
  binary-extensions@2.3.0: {}

  body-parser@1.20.3:
@ -630,6 +728,8 @@ snapshots:
    dependencies:
      fill-range: 7.1.1

+  buffer-equal-constant-time@1.0.1: {}
+
  bytes@3.1.2: {}

  call-bind-apply-helpers@1.0.2:
@ -720,6 +820,10 @@ snapshots:
      es-errors: 1.3.0
      gopd: 1.2.0

+  ecdsa-sig-formatter@1.0.11:
+    dependencies:
+      safe-buffer: 5.2.1
+
  ee-first@1.1.1: {}

  emoji-regex@8.0.0: {}
@ -796,6 +900,8 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  extend@3.0.2: {}
+
  fill-range@7.1.1:
    dependencies:
      to-regex-range: 5.0.1
@ -821,6 +927,26 @@ snapshots:

  function-bind@1.1.2: {}

+  gaxios@6.7.1:
+    dependencies:
+      extend: 3.0.2
+      https-proxy-agent: 7.0.6
+      is-stream: 2.0.1
+      node-fetch: 2.7.0
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  gcp-metadata@6.1.1:
+    dependencies:
+      gaxios: 6.7.1
+      google-logging-utils: 0.0.2
+      json-bigint: 1.0.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
  get-caller-file@2.0.5: {}

  get-intrinsic@1.3.0:
@ -845,8 +971,50 @@ snapshots:
    dependencies:
      is-glob: 4.0.3

+  google-auth-library@9.15.1:
+    dependencies:
+      base64-js: 1.5.1
+      ecdsa-sig-formatter: 1.0.11
+      gaxios: 6.7.1
+      gcp-metadata: 6.1.1
+      gtoken: 7.1.0
+      jws: 4.0.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  google-logging-utils@0.0.2: {}
+
+  googleapis-common@7.2.0:
+    dependencies:
+      extend: 3.0.2
+      gaxios: 6.7.1
+      google-auth-library: 9.15.1
+      qs: 6.13.0
+      url-template: 2.0.8
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  googleapis@146.0.0:
+    dependencies:
+      google-auth-library: 9.15.1
+      googleapis-common: 7.2.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
  gopd@1.2.0: {}

+  gtoken@7.1.0:
+    dependencies:
+      gaxios: 6.7.1
+      jws: 4.0.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
  has-flag@3.0.0: {}

  has-flag@4.0.0: {}
@ -865,6 +1033,13 @@ snapshots:
      statuses: 2.0.1
      toidentifier: 1.0.1

+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.3
+      debug: 4.3.7(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
  iconv-lite@0.4.24:
    dependencies:
      safer-buffer: 2.1.2
@ -889,6 +1064,23 @@ snapshots:

  is-number@7.0.0: {}

+  is-stream@2.0.1: {}
+
+  json-bigint@1.0.0:
+    dependencies:
+      bignumber.js: 9.1.2
+
+  jwa@2.0.0:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jws@4.0.0:
+    dependencies:
+      jwa: 2.0.0
+      safe-buffer: 5.2.1
+
  lodash@4.17.21: {}

  math-intrinsics@1.1.0: {}
@ -917,6 +1109,10 @@ snapshots:

  negotiator@0.6.3: {}

+  node-fetch@2.7.0:
+    dependencies:
+      whatwg-url: 5.0.0
+
  nodemon@3.1.9:
    dependencies:
      chokidar: 3.6.0
@ -1107,6 +1303,8 @@ snapshots:

  touch@3.1.1: {}

+  tr46@0.0.3: {}
+
  tree-kill@1.2.2: {}

  tslib@2.8.1: {}
@ -1122,10 +1320,21 @@ snapshots:

  unpipe@1.0.0: {}

+  url-template@2.0.8: {}
+
  utils-merge@1.0.1: {}

+  uuid@9.0.1: {}
+
  vary@1.1.2: {}

+  webidl-conversions@3.0.1: {}
+
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
  wrap-ansi@7.0.0:
    dependencies:
      ansi-styles: 4.3.0
--- a/server/controller/game.js
+++ b/server/controller/game.js
@ -14,6 +14,9 @@ const gameStates = {};

 const initializeGameState = (roomId) => {
    if (!gameStates[roomId]) {
+        const selectedPlaylist = roomController.getWinningPlaylist(roomId);
+        console.log(`Initializing game with winning playlist: ${selectedPlaylist}`);
+        
        gameStates[roomId] = {
            round: 0,
            phase: 'waiting',
@ -29,6 +32,7 @@ const initializeGameState = (roomId) => {
                guessing: 10
            },
            lastFrequency: 440,
+            selectedPlaylist: selectedPlaylist,
        };

        const users = roomController.getRoomUsers(roomId);
@ -40,6 +44,8 @@ const initializeGameState = (roomId) => {
    return gameStates[roomId];
 };

+const MAX_ROUNDS = 5;
+
 const startNewRound = async (roomId) => {
    const gameState = gameStates[roomId];
    if (!gameState) return false;
@ -48,6 +54,11 @@ const startNewRound = async (roomId) => {
    if (users.length < 2) return false;

    gameState.round += 1;
+
+    if (gameState.round > MAX_ROUNDS) {
+        return { gameEnd: true, finalScores: gameState.scores };
+    }
+
    gameState.phase = 'composing';
    gameState.guessResults = {};
    gameState.roundStartTime = Date.now();
@ -79,10 +90,10 @@ const determineNextComposer = (roomId, gameState, users) => {
    return users[(currentIndex + 1) % users.length].id;
 };

-// Then modify the selectSongAndOptions function to use the shuffle:
 const selectSongAndOptions = async (gameState) => {
  try {
-    const availableIds = await youtubeService.getAvailableSongIds();
+    console.log(`Fetching songs from playlist: ${gameState.selectedPlaylist}`);
+    const availableIds = await youtubeService.getAvailableSongIds(gameState.selectedPlaylist);
    
    if (!availableIds || availableIds.length === 0) {
      console.error("No song IDs available for selection");
@ -102,7 +113,6 @@ const selectSongAndOptions = async (gameState) => {
      count++;
    }

-    // Shuffle the song options to randomize the position of the correct answer
    gameState.songOptions = shuffleArray(Array.from(optionIds).map(id => ({ id })));
    
    return true;
@ -214,6 +224,27 @@ const getGameState = (roomId) => {
    return gameStates[roomId] || null;
 };

+const getFinalScores = (roomId) => {
+    const gameState = gameStates[roomId];
+    if (!gameState) return null;
+
+    const users = roomController.getRoomUsers(roomId);
+    const finalScores = {};
+    
+    Object.entries(gameState.scores).forEach(([userId, score]) => {
+        const user = users.find(u => u.id === userId);
+        finalScores[userId] = {
+            score: score,
+            name: user?.name || "Player"
+        };
+    });
+
+    return {
+        scores: finalScores,
+        lastRound: gameState.round
+    };
+};
+
 module.exports = {
    initializeGameState,
    startNewRound,
@ -229,5 +260,7 @@ module.exports = {
    getSelectedSong,
    cleanupGameState,
    getCurrentComposer,
-    getGameState
+    getGameState,
+    getFinalScores,
+    MAX_ROUNDS
 };
--- a/server/controller/room.js
+++ b/server/controller/room.js
@ -1,3 +1,5 @@
+const youtubeService = require('../services/youtubeService');
+
 let cleanupGameState;

 const setCleanupGameState = (cleanupFunction) => {
@ -10,19 +12,41 @@ module.exports.roomExists = (roomId) => rooms[roomId] !== undefined;

 module.exports.isRoomOpen = (roomId) => rooms[roomId] && rooms[roomId].state === 'waiting';

-module.exports.connectUserToRoom = (roomId, user) => {
+const initializeRoom = async (roomId, user) => {
+    try {
+        const randomPlaylists = await youtubeService.getRandomPlaylists(3);
+        rooms[roomId] = {
+            members: [{...user, creator: true}],
+            settings: {},
+            state: 'waiting',
+            playlistVotes: {},
+            selectedPlaylist: null,
+            availablePlaylists: randomPlaylists
+        };
+    } catch (error) {
+        console.error("Error initializing room playlists:", error);
+        rooms[roomId] = {
+            members: [{...user, creator: true}],
+            settings: {},
+            state: 'waiting',
+            playlistVotes: {},
+            selectedPlaylist: null,
+            availablePlaylists: {
+                seventies: youtubeService.PLAYLISTS.seventies
+            }
+        };
+    }
+};
+
+module.exports.connectUserToRoom = async (roomId, user) => {
    roomId = roomId.toUpperCase();
    if (rooms[roomId]) {
        rooms[roomId].members.push({...user, creator: false});
    } else {
-        rooms[roomId] = {
-            members: [{...user, creator: true}], 
-            settings: {},
-            state: 'waiting'
-        };
+        await initializeRoom(roomId, user);
    }
    console.log(`User ${user.name} connected to room ${roomId}`);
-}
+};

 module.exports.getUserRoom = (userId) => {
    for (const roomId in rooms) {
@ -82,7 +106,6 @@ module.exports.disconnectUser = (userId) => {

        if (memberIndex !== -1) {
            if (room.members[memberIndex].creator && room.members.length > 1) {
-                // Transfer host status to the next user
                room.members[1].creator = true;
            }

@ -132,4 +155,74 @@ module.exports.getUserName = (userId) => {
        }
    }
    return null;
+};
+
+module.exports.voteForPlaylist = (roomId, userId, playlistId) => {
+    if (!rooms[roomId]) return false;
+    
+    const room = rooms[roomId];
+    if (room.state !== 'waiting') return false;
+
+    if (!room.playlistVotes) {
+        room.playlistVotes = {};
+    }
+
+    Object.entries(room.playlistVotes).forEach(([pid, voters]) => {
+        room.playlistVotes[pid] = voters.filter(id => id !== userId);
+    });
+
+    if (!room.playlistVotes[playlistId]) {
+        room.playlistVotes[playlistId] = [];
+    }
+    room.playlistVotes[playlistId].push(userId);
+    
+    console.log(`Updated votes for room ${roomId}:`, room.playlistVotes);
+    return true;
+};
+
+module.exports.getPlaylistVotes = (roomId) => {
+    return rooms[roomId]?.playlistVotes || {};
+};
+
+module.exports.getWinningPlaylist = (roomId) => {
+    const room = rooms[roomId];
+    if (!room || !room.playlistVotes) {
+        console.log(`No votes found for room ${roomId}, using default playlist`);
+        return room.availablePlaylists[Object.keys(room.availablePlaylists)[0]];
+    }
+    
+    let maxVotes = 0;
+    let winningPlaylist = null;
+    
+    console.log(`Calculating winning playlist for room ${roomId}`);
+    console.log('Current votes:', room.playlistVotes);
+    
+    Object.entries(room.playlistVotes).forEach(([playlistId, voters]) => {
+        console.log(`Playlist ${playlistId} has ${voters.length} votes`);
+        if (voters.length > maxVotes) {
+            maxVotes = voters.length;
+            winningPlaylist = playlistId;
+        }
+    });
+    
+    if (!winningPlaylist) {
+        console.log('No winning playlist found, using first available');
+        winningPlaylist = room.availablePlaylists[Object.keys(room.availablePlaylists)[0]];
+    }
+    
+    console.log(`Selected winning playlist: ${winningPlaylist}`);
+    return winningPlaylist;
+};
+
+module.exports.getAvailablePlaylists = (roomId) => {
+    return rooms[roomId]?.availablePlaylists || {};
+};
+
+module.exports.updateAvailablePlaylists = (roomId, newPlaylists) => {
+    if (rooms[roomId]) {
+        rooms[roomId].availablePlaylists = newPlaylists;
+        rooms[roomId].playlistVotes = {};
+        return true;
+    }
+    return false;
 };
--- a/server/handler/connection.js
+++ b/server/handler/connection.js
@ -109,6 +109,23 @@ module.exports = (io) => (socket) => {
        io.to(roomId).emit('round-results', results);
    };

+    const handleNextRound = async (roomId) => {
+        try {
+            const result = await gameController.startNewRound(roomId);
+            
+            if (result.gameEnd) {
+                const finalData = gameController.getFinalScores(roomId);
+                io.to(roomId).emit('game-ended', finalData);
+                return;
+            }
+
+            handleRoundStart(roomId);
+        } catch (error) {
+            console.error("Error starting next round:", error);
+            socket.emit("error", { message: "Failed to start next round due to an error" });
+        }
+    };
+
    socket.on("disconnect", () => {
        const roomId = roomController.getUserRoom(socket.id);
        if (roomId) {
@ -117,7 +134,7 @@ module.exports = (io) => (socket) => {
        }
    });

-    socket.on("join-room", ({roomId, name}) => {
+    socket.on("join-room", async ({roomId, name}) => {
        if (currentRoomId) return socket.emit("already-in-room", currentRoomId);
        
        roomId = roomId.toString().toUpperCase();
@ -128,14 +145,35 @@ module.exports = (io) => (socket) => {
            }
            
            currentUser = {id: socket.id, name: name.toString()};
-            roomController.connectUserToRoom(roomId, currentUser);
+            await roomController.connectUserToRoom(roomId, currentUser);
            socket.join(roomId);

            const users = roomController.getRoomUsers(roomId);
-            io.to(roomId).emit("room-users-update", users);
-            socket.to(roomId).emit("user-connected", currentUser);
-            
+            const votes = roomController.getPlaylistVotes(roomId);
+            const availablePlaylists = roomController.getAvailablePlaylists(roomId);
+
            socket.emit("room-joined", roomId);
+            socket.emit("room-users", users);
+            socket.emit("playlist-votes-updated", votes);
+
+            try {
+                const details = await youtubeService.getPlaylistDetails(availablePlaylists);
+                Object.keys(details).forEach(genre => {
+                    const playlistId = details[genre].id;
+                    details[genre].votes = votes[playlistId]?.length || 0;
+                });
+                socket.emit("playlist-options", details);
+            } catch (error) {
+                console.error("Error sending playlist details to new user:", error);
+                socket.emit("error", { 
+                    message: "Failed to load playlists",
+                    details: error.message
+                });
+            }
+
+            socket.to(roomId).emit("user-connected", currentUser);
+            io.to(roomId).emit("room-users-update", users);
+            
            currentRoomId = roomId;
        } else {
            socket.emit("room-not-found", roomId);
@ -277,17 +315,7 @@ module.exports = (io) => (socket) => {
            return socket.emit("error", { message: "At least 2 players are required" });
        }
        
-        try {
-            const success = await gameController.startNewRound(roomId);
-            if (success) {
-                handleRoundStart(roomId);
-            } else {
-                socket.emit("error", { message: "Failed to start next round" });
-            }
-        } catch (error) {
-            console.error("Error starting next round:", error);
-            socket.emit("error", { message: "Failed to start next round due to an error" });
-        }
+        await handleNextRound(roomId);
    });
    
    socket.on("get-current-frequency", () => {
@ -301,11 +329,58 @@ module.exports = (io) => (socket) => {

    socket.on("get-playlist-songs", async () => {
        try {
-            const songs = await youtubeService.fetchPlaylistSongs();
+            const roomId = roomController.getUserRoom(socket.id);
+            if (!roomId) {
+                throw new Error("User not in a room");
+            }
+            
+            const gameState = gameController.getGameState(roomId);
+            const playlistId = gameState?.selectedPlaylist || null;
+            
+            console.log(`Fetching songs for playlist ${playlistId}`);
+            const songs = await youtubeService.fetchPlaylistSongs(playlistId);
            socket.emit("playlist-songs", { songs });
        } catch (error) {
            console.error("Error sending playlist songs:", error);
-            socket.emit("playlist-songs", { songs: youtubeService.getDefaultSongs() });
+            socket.emit("playlist-songs", { songs: [] });
+        }
+    });
+
+    socket.on("get-playlist-options", async () => {
+        try {
+            const roomId = roomController.getUserRoom(socket.id);
+            if (!roomId) {
+                throw new Error("User not in a room");
+            }
+
+            const availablePlaylists = roomController.getAvailablePlaylists(roomId);
+            const details = await youtubeService.getPlaylistDetails(availablePlaylists);
+            
+            if (Object.keys(details).length === 0) {
+                const newPlaylists = await youtubeService.getRandomPlaylists(3);
+                const newDetails = await youtubeService.getPlaylistDetails(newPlaylists);
+
+                roomController.updateAvailablePlaylists(roomId, newPlaylists);
+                socket.emit("playlist-options", newDetails);
+            } else {
+                socket.emit("playlist-options", details);
+            }
+        } catch (error) {
+            console.error("Error fetching playlist options:", error);
+            socket.emit("error", { 
+                message: "Failed to load playlists",
+                details: error.message
+            });
+        }
+    });
+
+    socket.on("vote-playlist", ({ playlistId }) => {
+        const roomId = roomController.getUserRoom(socket.id);
+        if (!roomId) return;
+        
+        if (roomController.voteForPlaylist(roomId, socket.id, playlistId)) {
+            const votes = roomController.getPlaylistVotes(roomId);
+            io.to(roomId).emit("playlist-votes-updated", votes);
        }
    });
 };
--- a/server/index.js
+++ b/server/index.js
@ -21,8 +21,14 @@ const roomController = require('./controller/room');
 const gameController = require('./controller/game');
 roomController.setCleanupGameState(gameController.cleanupGameState);

-// Handle socket connections
-io.on("connection", require("./handler/connection")(io));
+io.on("connection", (socket) => {
+  try {
+    require("./handler/connection")(io)(socket);
+  } catch (error) {
+    console.error('Error handling socket connection:', error);
+    socket.emit('error', { message: 'Internal server error' });
+  }
+});

 server.on('error', (error) => {
  console.error('Server error:', error);
--- a/server/services/youtubeService.js
+++ b/server/services/youtubeService.js
@ -1,23 +1,94 @@
-const YOUTUBE_API_KEY = process.env.YOUTUBE_API_KEY;
-const PLAYLIST_ID = "PLmXxqSJJq-yXrCPGIT2gn8b34JjOrl4Xf";
+const { google } = require('googleapis');
+const youtube = google.youtube('v3');
+
+const YOUTUBE_API_KEY = process.env.YOUTUBE_API_KEY;
+
+const PLAYLISTS = {
+  seventies: 'PLmXxqSJJq-yXrCPGIT2gn8b34JjOrl4Xf',
+  eighties: 'PLmXxqSJJq-yUvMWKuZQAB_8yxnjZaOZUp',
+  nineties: 'PLmXxqSJJq-yUF3jbzjF_pa--kuBuMlyQQ',
+  pop: 'PLxA687tYuMWhkqYjvAGtW_heiEL4Hk_Lx',
+  dance: 'PL64E6BD94546734D8'
+};
+
+let validatedPlaylists = {};
+const VALIDATION_TTL = 3600000; // 1 hour
+
+const validatePlaylist = async (playlistId) => {
+  try {
+    const response = await youtube.playlists.list({
+      key: API_KEY,
+      part: 'snippet,contentDetails',
+      id: playlistId
+    });
+
+    if (!response.data.items || response.data.items.length === 0) {
+      console.log(`Playlist ${playlistId} not found or empty`);
+      return false;
+    }
+
+    validatedPlaylists[playlistId] = {
+      timestamp: Date.now(),
+      valid: true
+    };
+    return true;
+  } catch (error) {
+    console.error(`Failed to validate playlist ${playlistId}:`, error);
+    return false;
+  }
+};
+
+const validateAndCleanPlaylists = async () => {
+  const now = Date.now();
+  const validPlaylistIds = [];
+
+  for (const [genre, playlistId] of Object.entries(PLAYLISTS)) {
+    if (validatedPlaylists[playlistId] && 
+        (now - validatedPlaylists[playlistId].timestamp) < VALIDATION_TTL) {
+      if (validatedPlaylists[playlistId].valid) {
+        validPlaylistIds.push([genre, playlistId]);
+      }
+      continue;
+    }
+
+    const isValid = await validatePlaylist(playlistId);
+    if (isValid) {
+      validPlaylistIds.push([genre, playlistId]);
+    } else {
+      console.log(`Removing invalid playlist: ${genre} (${playlistId})`);
+      delete PLAYLISTS[genre];
+    }
+  }
+
+  return validPlaylistIds;
+};
+
+const API_KEY = process.env.YOUTUBE_API_KEY;
+
+const cachedSongsByPlaylist = {};

-let cachedSongs = null;
-let lastFetchTime = 0;
 const CACHE_TTL = 3600000; // 1 hour

 /**
 * Fetches songs from YouTube playlist and returns them
 */
-const fetchPlaylistSongs = async () => {
+const fetchPlaylistSongs = async (playlistId = null) => {
+  if (!playlistId) {
+    console.warn("No playlist ID provided, using default");
+    playlistId = PLAYLISTS.eighties;
+  }
+
  const now = Date.now();
-  if (cachedSongs && cachedSongs.length > 0 && (now - lastFetchTime) < CACHE_TTL) {
-    console.log("Returning cached YouTube songs:", cachedSongs.length);
-    return cachedSongs;
+  if (cachedSongsByPlaylist[playlistId] && 
+      cachedSongsByPlaylist[playlistId].songs.length > 0 && 
+      (now - cachedSongsByPlaylist[playlistId].timestamp) < CACHE_TTL) {
+    console.log(`Using cached songs for playlist ${playlistId}`);
+    return cachedSongsByPlaylist[playlistId].songs;
  }
  
  try {
-    console.log("Fetching songs from YouTube API...");
-    const playlistUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&maxResults=50&playlistId=${PLAYLIST_ID}&key=${YOUTUBE_API_KEY}`;
+    console.log(`Fetching fresh songs from YouTube API for playlist ${playlistId}...`);
+    const playlistUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&maxResults=50&playlistId=${playlistId}&key=${YOUTUBE_API_KEY}`;
    const response = await fetch(playlistUrl);
    const data = await response.json();
    
@ -27,7 +98,6 @@ const fetchPlaylistSongs = async () => {
    }
    
    if (!data.items || !data.items.length) {
-      console.error("No items found in YouTube playlist");
      throw new Error("No songs found in the playlist");
    }

@ -36,36 +106,122 @@ const fetchPlaylistSongs = async () => {
      youtubeId: item.contentDetails.videoId,
      title: item.snippet.title,
      artist: item.snippet.videoOwnerChannelTitle || "Unknown Artist",
-      coverUrl: item.snippet.thumbnails.high?.url || item.snippet.thumbnails.default?.url || 
-                "https://place-hold.it/500x500/333/fff?text=No%20Thumbnail",
+      coverUrl: item.snippet.thumbnails.high?.url || item.snippet.thumbnails.default?.url,
+      playlistId: playlistId
    }));

-    cachedSongs = songs;
-    lastFetchTime = now;
-    console.log("Fetched and cached YouTube songs:", songs.length);
+    cachedSongsByPlaylist[playlistId] = {
+      songs,
+      timestamp: now
+    };
    
    return songs;
  } catch (error) {
-    console.error("Error fetching YouTube playlist:", error);
-    
-    if (cachedSongs && cachedSongs.length > 0) {
-      console.log("Using last cached songs due to API error");
-      return cachedSongs;
-    }
-
-    return [{
-      id: 1,
-      title: "Could not load songs",
-      artist: "API Error",
-      coverUrl: "https://place-hold.it/500x500/f00/fff?text=Error",
-      youtubeId: "dQw4w9WgXcQ"
-    }];
+    console.error(`Error fetching YouTube playlist ${playlistId}:`, error);
+    return cachedSongsByPlaylist[playlistId]?.songs || getDefaultSongs();
  }
 };

-const getAvailableSongIds = async () => {
-  const songs = await fetchPlaylistSongs();
+const getAvailableSongIds = async (playlistId) => {
+  const songs = await fetchPlaylistSongs(playlistId);
  return songs.map(song => song.id);
 };

-module.exports = {fetchPlaylistSongs, getAvailableSongIds};
+async function getPlaylistDetails(availablePlaylists = null) {
+  try {
+    const playlistsToUse = availablePlaylists || await getRandomPlaylists(3);
+    const details = {};
+    const validationPromises = [];
+
+    for (const [genre, playlistId] of Object.entries(playlistsToUse)) {
+      validationPromises.push(
+        youtube.playlists.list({
+          key: API_KEY,
+          part: 'snippet,contentDetails',
+          id: playlistId
+        }).then(response => {
+          if (response.data.items?.[0]) {
+            const playlist = response.data.items[0];
+            details[genre] = {
+              id: playlistId,
+              title: playlist.snippet.title,
+              description: playlist.snippet.description,
+              thumbnail: playlist.snippet.thumbnails.maxres || playlist.snippet.thumbnails.high,
+              songCount: playlist.contentDetails.itemCount,
+              votes: 0
+            };
+          } else {
+            console.warn(`Playlist not found: ${genre} (${playlistId})`);
+          }
+        }).catch(error => {
+          console.error(`Error fetching playlist ${playlistId}:`, error);
+        })
+      );
+    }
+
+    await Promise.all(validationPromises);
+
+    if (Object.keys(details).length === 0) {
+      const response = await youtube.playlists.list({
+        key: API_KEY,
+        part: 'snippet,contentDetails',
+        id: PLAYLISTS.seventies
+      });
+
+      if (response.data.items?.[0]) {
+        const playlist = response.data.items[0];
+        details.seventies = {
+          id: PLAYLISTS.seventies,
+          title: playlist.snippet.title,
+          description: playlist.snippet.description,
+          thumbnail: playlist.snippet.thumbnails.maxres || playlist.snippet.thumbnails.high,
+          songCount: playlist.contentDetails.itemCount,
+          votes: 0
+        };
+      }
+    }
+
+    if (Object.keys(details).length === 0) {
+      throw new Error("No valid playlists found");
+    }
+
+    return details;
+  } catch (error) {
+    console.error('Error fetching playlist details:', error);
+    throw error;
+  }
+}
+
+const getRandomPlaylists = async (count = 3) => {
+  try {
+    const allPlaylists = Object.entries(PLAYLISTS);
+    if (allPlaylists.length === 0) {
+      throw new Error("No playlists configured");
+    }
+
+    const shuffled = [...allPlaylists].sort(() => Math.random() - 0.5);
+    const selected = shuffled.slice(0, Math.min(count, allPlaylists.length));
+    
+    const result = {};
+    for (const [genre, playlistId] of selected) {
+      result[genre] = playlistId;
+    }
+    
+    return result;
+  } catch (error) {
+    console.error("Error getting random playlists:", error);
+    return {
+      seventies: PLAYLISTS.seventies
+    };
+  }
+};
+
+module.exports = {
+  fetchPlaylistSongs,
+  getAvailableSongIds,
+  PLAYLISTS,
+  getPlaylistDetails,
+  getRandomPlaylists,
+  validateAndCleanPlaylists,
+  validatePlaylist
+};
Author	SHA1	Message	Date
Mathias Wagner	032ebc2368	Create Ending All checks were successful Publish Docker image / Push Docker image to Docker Hub (push) Successful in 1m36s Details	2025-03-01 18:07:38 +01:00
Mathias Wagner	09fb1e3938	State reset after rounds	2025-03-01 17:39:25 +01:00
Mathias Wagner	f9447b3deb	Fix MusicSlider.jsx	2025-03-01 17:34:24 +01:00
Mathias Wagner	7996905f30	Fix display bug	2025-03-01 17:22:59 +01:00
Mathias Wagner	2ea81493ba	Fix vote bug	2025-03-01 17:17:00 +01:00
Mathias Wagner	9901c1a49e	Add playlists	2025-03-01 16:56:11 +01:00
Mathias Wagner	195980032c	Fix playlist bug	2025-03-01 16:39:13 +01:00
Mathias Wagner	a1193ea87f	Update WaitingRoom design	2025-03-01 16:26:36 +01:00
Mathias Wagner	251879a1e1	Update WaitingRoom design	2025-03-01 16:21:29 +01:00
Mathias Wagner	aa10b5b2cc	Add custom playlists	2025-03-01 16:11:01 +01:00
				`@ -0,0 +1 @@`
				`export {Ending as default} from "./Ending.jsx";`