60 classifica

Scoprimi/src/components/finalresults/FinalResults.tsx

@@ -9,25 +9,20 @@ const FinalResults: React.FC = () => {
 
   // Ordinamento con tipizzazione
   const sortedResults = Object.entries(finalResults)
-    .sort(([, a], [, b]) => b.score - a.score); // Ordina per punteggio decrescente
+    .sort(([, a], [, b]) => b.score - a.score);
 
-  // Verifica se finalResults è definito
   if (!finalResults) {
     return <div className="text-center mt-5">Nessun risultato disponibile.</div>;
   }
 
-  // Estrai i primi 3 risultati per il podio
   const podium = sortedResults.slice(0, 3);
 
-  // Scambia le posizioni 0 e 1
   if (podium.length > 1) {
     [podium[0], podium[1]] = [podium[1], podium[0]];
   }
 
   const otherPlayers = sortedResults.slice(3);
 
-  // Controlla se ci sono punteggi uguali nel podio
-
   let sameScore1And2 = false;
   let sameScore2And3 = false;
   let sameScore1And3 = false;
@@ -38,7 +33,10 @@ const FinalResults: React.FC = () => {
     sameScore1And3 = podium[0][1].score === podium[2]?.[1]?.score;
   }
 
-  // Verifica se tutti e tre i punteggi sono uguali
+  console.log('sameScore1And2:', sameScore1And2);
+  console.log('sameScore2And3:', sameScore2And3);
+  console.log('sameScore1And3:', sameScore1And3);
+
   const allScoresEqual = sameScore1And2 && sameScore2And3;
 
   return (
@@ -48,27 +46,39 @@ const FinalResults: React.FC = () => {
 
         <div className='podium' style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', width: '100%' }}>
           {podium.map(([player, { score, image }], index) => {
-            // Imposta la stessa altezza se i punteggi sono uguali
             let heightStyle;
             if (allScoresEqual) {
-              heightStyle = { height: '7vh' }; // Tutti i punteggi uguali
+              heightStyle = { height: '7vh' };
             } else if (sameScore1And2 && index <= 1) {
-              heightStyle = { height: '7vh' }; // Primo e secondo posto uguali
+              heightStyle = { height: '7vh' };
             } else if (sameScore2And3 && index >= 1) {
-              heightStyle = { height: '6vh' }; // Secondo e terzo posto uguali
+              heightStyle = { height: '6vh' };
             } else if (sameScore1And2 && sameScore1And3 && index !== 1) {
-              heightStyle = { height: '7vh' }; // Primo secondo terzo posto uguali
+              heightStyle = { height: '7vh' };
             } else {
-              // Differenzia l'altezza se non ci sono pareggi
               heightStyle = index === 0 ? { height: '7vh' } : index === 1 ? { height: '8vh' } : { height: '6vh' };
             }
 
-            const backgroundColors = {
-              1: '#cda434', // Oro
-              0: '#8a9597', // Argento
-              2: '#cd7f32', // Bronzo
-            };
-            const backgroundColor = backgroundColors[index];
+            let backgroundColor;
+
+            // Assegna i colori in base alle condizioni
+            if (allScoresEqual) {
+              backgroundColor = '#cda434'; // Tutti oro
+            } else if (sameScore1And2 && !sameScore2And3) {
+              backgroundColor = index <= 1 ? '#cda434' : '#cd7f32'; // Primi due oro, terzo bronzo
+            } else if (sameScore2And3 && !sameScore1And2) {
+              // Se secondo e terzo hanno lo stesso punteggio, entrambi argento
+              backgroundColor = index === 0 ? '#cda434' : '#8a9597'; // Primo oro, secondo e terzo argento
+            } else {
+              // Altrimenti, applica i colori predefiniti
+              const backgroundColors = {
+                1: '#cda434', // Oro
+                0: '#8a9597', // Argento
+                2: '#cd7f32', // Bronzo
+              };
+              backgroundColor = backgroundColors[index];
+            }
+
             return (
               <div
                 key={player}

Scoprimi/src/components/game/Game.tsx

@@ -131,7 +131,7 @@ const Game: React.FC = () => {
 
   const handleTimeUp = () => {
     if (!clicked) {
-      socket.emit(c.VOTE, { lobbyCode: currentLobby, voter: currentPlayer, vote: '' });
+      socket.emit(c.VOTE, { lobbyCode: currentLobby, voter: currentPlayer, vote: null });
       fromQuestionToResponse();
     }
     setIsTimerActive(false);
@@ -155,12 +155,6 @@ const Game: React.FC = () => {
           </div>
           <ImageList images={
             questionImages
-            // [
-            //   'https://i.ibb.co/bRbrYT2/toilet.png',
-            //   'https://i.ibb.co/4ZZRWx7/pizza.jpg',
-            //   'https://i.ibb.co/C0dmy9V/pizza-cat.jpgg',
-            //   'https://i.ibb.co/ch2818j/dog.jpg'
-            // ]
           } onVote={handleVote} disabled={clicked} resetSelection={resetSelection} />
         </div>
       );
@@ -193,7 +187,7 @@ const Game: React.FC = () => {
       return (
         <div className="paginator">
           <div className="result-message text-center">
-            {mostVotedPerson === '' ? (<h3>Pareggio!</h3>) : (<h3>Persona più votata</h3>)}
+            {mostVotedPerson === '' ? (<h3>Pareggio!</h3>) : (<h3>Scelta più votata:</h3>)}
             {!isPhoto ?
               <img
                 src={playerImages[mostVotedPerson]}

Scoprimi/src/components/game/ImageList.tsx

@@ -17,8 +17,9 @@
   }, [resetSelection]);
 
   const handlePlayerClick = (imageUrl: string) => {
-    if (!disabled) {
+    if (!disabled && !clicked) {
       onVote(imageUrl);
+      setClicked(true);
     }
   };
 
@@ -31,7 +32,11 @@
           className='image-question'
           alt={`image-${index}`}
           onClick={() => handlePlayerClick(imageUrl)}
-          style={{ cursor: clicked || disabled ? 'not-allowed' : 'pointer', opacity: clicked || disabled ? 0.5 : 1 }}
+          style={{
+            cursor: clicked || disabled ? 'not-allowed' : 'pointer',
+            opacity: clicked || disabled ? 0.5 : 1,
+            filter: clicked ? 'grayscale(100%)' : 'none' // Applica il bianco e nero se l'immagine è stata cliccata
+          }}
         />
       ))}
     </div>

Server/src/socket.ts

@@ -293,20 +293,21 @@ export function setupSocket(io: any) {
         return;
       }
 
-      if (Object.keys(thisGame.players).includes(data.vote) || data.vote === '' || data.vote.startsWith('https')) {
+      if (Object.keys(thisGame.players).includes(data.vote) || data.vote === null || data.vote.startsWith('https')) {
         thisGame.castVote(data.voter, data.vote);
         console.log('Data: ', thisGame.getWhatPlayersVoted());
         io.to(data.lobbyCode).emit(c.PLAYERS_WHO_VOTED, { players: thisGame.getWhatPlayersVoted() });
       }
 
 
       if (thisGame.didAllPlayersVote()) {
-        console.log('Tutti i giocatori hanno votato');
         const players = thisGame.players;
         const voteRecap = thisGame.getWhatPlayersVoted();
         const playerImages = thisGame.getImages();
         const mostVotedPerson = thisGame.getMostVotedPerson();
-        thisGame.resetWhatPlayersVoted()
+        thisGame.resetWhatPlayersVoted();
+        console.log('Tutti i giocatori hanno votato: ', voteRecap);
+
         io.to(data.lobbyCode).emit(c.SHOW_RESULTS, { players, voteRecap, playerImages, mostVotedPerson });
       }
     });