From 50e245233c2acbdeaf8c331f3d353a03bf93742a Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Thu, 24 Apr 2025 16:37:52 +0200
Subject: [PATCH] Enhance Voting and Results screens to handle automatic song
 advances in bye rounds; update voting logic and remove submitter details

---
 client/src/components/ResultsScreen.jsx |  9 ++--
 client/src/components/VotingScreen.jsx  | 63 +++++++++++++++++++++----
 2 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/client/src/components/ResultsScreen.jsx b/client/src/components/ResultsScreen.jsx
index 69ce4b6..a309ca3 100644
--- a/client/src/components/ResultsScreen.jsx
+++ b/client/src/components/ResultsScreen.jsx
@@ -119,13 +119,16 @@ const ResultsScreen = () => {
           <div className="battles-list">
             {lobby?.battles?.map((battle, index) => {
               const isWinner = (battle.song1.id === battle.winner);
-              const song1VideoId = getYouTubeId(battle.song1.youtubeLink);
-              const song2VideoId = getYouTubeId(battle.song2.youtubeLink);
+              const song1VideoId = getYouTubeId(battle.song1?.youtubeLink);
+              const song2VideoId = battle.song2 ? getYouTubeId(battle.song2.youtubeLink) : null;
+              
+              // Handle bye rounds
+              const isByeRound = battle.bye === true || !battle.song2;
               
               return (
                 <div key={index} className="battle-item">
                   <div className="battle-header">
-                    <h4>Round {battle.round + 1}, Battle {index + 1}</h4>
+                    <h4>Round {battle.round + 1}, Battle {index + 1} {isByeRound ? "(Automatic Advance)" : ""}</h4>
                   </div>
                   
                   <div className="battle-songs">
diff --git a/client/src/components/VotingScreen.jsx b/client/src/components/VotingScreen.jsx
index 81c56a2..a827dcd 100644
--- a/client/src/components/VotingScreen.jsx
+++ b/client/src/components/VotingScreen.jsx
@@ -2,7 +2,7 @@
 import { useState, useEffect } from 'react';
 import { useGame } from '../context/GameContext';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faVoteYea, faTrophy, faMusic } from '@fortawesome/free-solid-svg-icons';
+import { faVoteYea, faTrophy, faMusic, faCheck } from '@fortawesome/free-solid-svg-icons';
 import YouTubeEmbed from './YouTubeEmbed';
 
 function VotingScreen() {
@@ -17,8 +17,11 @@ function VotingScreen() {
   // Check if player has already voted
   useEffect(() => {
     if (battle && battle.votes && currentPlayer) {
-      // Check if player's ID exists in votes map
-      setHasVoted(battle.votes.has(currentPlayer.id));
+      // Check if player's ID exists in votes object
+      // Since votes is sent as an object, not a Map
+      const votesObj = battle.votes || {};
+      setHasVoted(Object.prototype.hasOwnProperty.call(votesObj, currentPlayer.id) || 
+                  Object.keys(votesObj).includes(currentPlayer.id));
     } else {
       setHasVoted(false);
     }
@@ -49,13 +52,59 @@ function VotingScreen() {
     return (match && match[2].length === 11) ? match[2] : null;
   };
 
-  if (!battle || !battle.song1 || !battle.song2) {
+  if (!battle || !battle.song1) {
     return (
       <div className="voting-screen">
         <h2>Preparing the next battle...</h2>
       </div>
     );
   }
+  
+  // Handle "bye" rounds where a song advances automatically
+  if (battle.bye === true && battle.song1 && !battle.song2) {
+    const song1Id = getYouTubeId(battle.song1?.youtubeLink || '');
+    
+    return (
+      <div className="voting-screen">
+        <header className="voting-header">
+          <h1>
+            <FontAwesomeIcon icon={faTrophy} /> Automatic Advance
+          </h1>
+          <div className="round-info">
+            <span>Round {battle.round + 1}</span>
+          </div>
+        </header>
+        
+        <div className="bye-container">
+          <div className="song-card bye-winner">
+            <div className="song-spotlight"></div>
+            <div className="song-details">
+              <h3>{battle.song1.title}</h3>
+              <p>{battle.song1.artist}</p>
+              <div className="auto-advance-notice">
+                <p>This song automatically advances to the next round!</p>
+              </div>
+            </div>
+            
+            {song1Id ? (
+              <div className="video-container">
+                <YouTubeEmbed videoId={song1Id} />
+              </div>
+            ) : (
+              <div className="no-video">
+                <FontAwesomeIcon icon={faMusic} className="pulse-icon" />
+                <span>No video available</span>
+              </div>
+            )}
+          </div>
+        </div>
+        
+        <div className="voting-status">
+          <button className="btn primary" onClick={() => submitVote(battle.song1.id)}>Continue to Next Battle</button>
+        </div>
+      </div>
+    );
+  }
 
   const song1Id = getYouTubeId(battle.song1?.youtubeLink || '');
   const song2Id = getYouTubeId(battle.song2?.youtubeLink || '');
@@ -81,9 +130,6 @@ function VotingScreen() {
           <div className="song-details">
             <h3>{battle.song1.title}</h3>
             <p>{battle.song1.artist}</p>
-            <div className="song-submitter">
-              <small>Submitted by: {battle.song1.submittedByName}</small>
-            </div>
           </div>
           
           {song1Id ? (
@@ -125,9 +171,6 @@ function VotingScreen() {
           <div className="song-details">
             <h3>{battle.song2.title}</h3>
             <p>{battle.song2.artist}</p>
-            <div className="song-submitter">
-              <small>Submitted by: {battle.song2.submittedByName}</small>
-            </div>
           </div>
           
           {song2Id ? (