WebsiteProjects/Liedkampf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Voting and Results screens to handle automatic song advances in bye rounds; update voting logic and remove submitter details

Browse Source
This commit is contained in:
Mathias Wagner 2025-04-24 16:37:52 +02:00
parent 22eca7d4e0
commit 50e245233c
2 changed files with 59 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/ResultsScreen.jsx
View File

@ -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">

63
client/src/components/VotingScreen.jsx
View File

@ -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 ? (