45 domande immagini categorie

Scoprimi/public/css/login.css

@@ -29,6 +29,21 @@
   transition: transform 0.2s ease-in-out, border-color 0.2s;
 }
 
+/* Stile delle immagini */
+
+.image-question {
+  width: calc(50% - 0.5rem);
+  /* Occupano metà della larghezza, meno il margine */
+  height: 50%;
+  /* Imposta l'altezza al 50% del contenitore */
+  margin-bottom: 1rem;
+  /* Margine inferiore per lo spazio tra le righe */
+  object-fit: cover;
+  /* Ritaglia l'immagine per riempire il contenitore */
+  border-radius: 10px;
+  /* Arrotonda i bordi delle immagini */
+}
+
 /* Hover su immagini */
 .image-thumbnail:hover {
   transform: scale(1.1);
@@ -38,4 +53,13 @@
 /* Immagine selezionata */
 .selected {
   border: 3px solid var(--tertiary-color);
+}
+
+.elegant-background-images {
+  display: flex;
+  flex-wrap: wrap;
+  /* Permette alle immagini di andare a capo */
+  justify-content: space-between;
+  /* Spazio tra le immagini */
+  /* Margine attorno al contenitore */
 }

Scoprimi/src/components/game/Game.tsx

@@ -9,6 +9,8 @@ import PlayerList from './PlayerList';
 import { useSession } from '../../contexts/SessionContext';
 import Results from './Results';
 import { GameStates, useGameState } from '../../contexts/GameStateContext';
+import ImageList from './ImageList';
+import { QuestionMode } from '../../../../Server/src/data/Question';
 
 const Game: React.FC = () => {
   const [question, setQuestion] = useState<string>('');
@@ -23,10 +25,12 @@ const Game: React.FC = () => {
   const [resetSelection, setResetSelection] = useState<boolean>(false);
   const [buttonClicked, setButtonClicked] = useState<boolean>(false); // Nuovo stato per il bottone
   const [playersWhoVoted, setPlayersWhoVoted] = useState<string[]>([]); //non è come il server, questo è un array e bona
+  const [questionImages, setQuestionImages] = useState<string[]>([]);
 
   const { currentLobby, currentPlayer, setCurrentLobby } = useSession();
-  const { actualState, transitionTo } = useGameState();
+  const { actualState, transitionTo, fromQuestionToResponse, fromNextQuestionToQuestion } = useGameState();
   const navigate = useNavigate();
+  const [isPhoto, setIsPhoto] = useState<boolean>(false);
 
   // Questo viene fatto solo 1 volta e amen
   useEffect(() => {
@@ -36,20 +40,21 @@ const Game: React.FC = () => {
 
   useEffect(() => {
     socket.on(c.SEND_QUESTION, ({ question, players, images }: QuestionData) => {
-      console.log('ciaoooo');
       console.log(question, players, images);
       setClicked(false);
       setIsTimerActive(true);
-      setQuestion(question);
+      setQuestion(question.text);
       setPlayers(players);
       setImages(images);
       setResetSelection(false);
       setButtonClicked(false);
       setPlayersWhoVoted([]);
-      // TODO controlla tipo di domanda (metto generic perche ora ho solo questo)
-      transitionTo(GameStates.GENERICQUESTION);
+      fromNextQuestionToQuestion(question.mode);
+      setQuestionImages(question.images);
+      // TODO fix veloce per 2 pagine di show_result
+      setIsPhoto(question.mode === QuestionMode.Photo);
     });
-  }, [transitionTo]);
+  }, [fromNextQuestionToQuestion]);
 
 
   useEffect(() => {
@@ -109,8 +114,10 @@ const Game: React.FC = () => {
     setClicked(true);
     setIsTimerActive(false);
     socket.emit(c.VOTE, { lobbyCode: currentLobby, voter: currentPlayer, vote: player });
+    fromQuestionToResponse();
   };
 
+
   const handleNextQuestion = () => {
     setResetSelection(true);
     setButtonClicked(true); // Cambia lo stato del bottone
@@ -121,37 +128,48 @@ const Game: React.FC = () => {
   const handleTimeUp = () => {
     if (!clicked) {
       socket.emit(c.VOTE, { lobbyCode: currentLobby, voter: currentPlayer, vote: '' });
-      transitionTo(GameStates.GENERICRESPONSE);
+      fromQuestionToResponse();
     }
     setIsTimerActive(false);
   };
 
+  function getRandomInt(min: number, max: number) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  const selectPlayer = () => players.at(getRandomInt(0, players.length - 1));
 
   // Render delle page
   switch (actualState) {
 
-    // case GameStates.NEXTQUESTION:
-    //   break;
-    // case GameStates.GENERICRESPONSE:
-    //   break;
-    case GameStates.PERCULARE:
+    case GameStates.MOCK:
       break;
+    case GameStates.WHORESPONSE:
     case GameStates.WHOQUESTION:
-      break;
+      return (
+        <div className="paginator">
+          <Question question={question} selectedPlayer={selectPlayer} />
+          <div className='inline'>
+            <div className='label-container'>
+              <p>Scegli un giocatore</p>
+            </div>
+            <Timer duration={25} onTimeUp={handleTimeUp} isActive={isTimerActive} />
+          </div>
+          <ImageList images={questionImages} onVote={handleVote} disabled={clicked} resetSelection={resetSelection} />
+        </div>
+      );
     case GameStates.THEMEQUESTION:
       break;
     case GameStates.THEMERESPONSE:
       break;
-    case GameStates.WHORESPONSE:
-      break;
     case GameStates.THEMERESULTFINAL:
       break;
 
-    case GameStates.GENERICQUESTION:
-    case GameStates.GENERICRESPONSE:
+    case GameStates.STANDARDQUESTION:
+    case GameStates.STANDARDRESPONSE:
       return (
         <div className="paginator">
-          <Question question={question} />
+          <Question question={question} selectedPlayer={selectPlayer} />
           <div className='inline'>
             <div className='label-container'>
               <p>Scegli un giocatore</p>
@@ -170,15 +188,21 @@ const Game: React.FC = () => {
         <div className="paginator">
           <div className="result-message text-center">
             {mostVotedPerson === '' ? (<h3>Pareggio!</h3>) : (<h3>Persona più votata</h3>)}
-            <img
-              src={playerImages[mostVotedPerson]}
-              alt={mostVotedPerson}
-              className="winnerImage"
-            />
-            <p>{mostVotedPerson}</p>
+            {!isPhoto ?
+              <img
+                src={playerImages[mostVotedPerson]}
+                alt={mostVotedPerson}
+                className="winnerImage"
+              /> :
+              <img
+                src={mostVotedPerson}
+                alt={mostVotedPerson.substring(mostVotedPerson.lastIndexOf('/') + 1).split('.')[0]}
+                className="winnerImage"
+              />}
+            <p>{mostVotedPerson.substring(mostVotedPerson.lastIndexOf('/') + 1).split('.')[0]}</p>
           </div>
           <div className='elegant-background image-container fill scrollable'>
-            <Results mostVotedPerson={mostVotedPerson} playerImages={playerImages} voteRecap={voteRecap} />
+            <Results mostVotedPerson={mostVotedPerson} playerImages={playerImages} voteRecap={voteRecap} isPhoto={isPhoto} />
           </div>
           <div className="d-flex justify-content-center align-items-center">
             <button

Scoprimi/src/components/game/ImageList.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+
+interface ImageListProps {
+  images: string[];
+  onVote: (player: string) => void;
+  disabled: boolean;
+  resetSelection: boolean;
+}
+
+const ImageList: React.FC<ImageListProps> = ({ images, onVote, disabled, resetSelection }) => {
+  const [clicked, setClicked] = useState(false);
+
+  useEffect(() => {
+    if (resetSelection) {
+      setClicked(false);
+    }
+  }, [resetSelection]);
+
+  const handlePlayerClick = (imageUrl: string) => {
+    if (!disabled) {
+      onVote(imageUrl);
+    }
+  };
+
+  return (
+    <div className='elegant-background-images fill'>
+      {images.map((imageUrl, index) => (
+        <img
+          key={index}
+          src={imageUrl}
+          className='image-question'
+          alt={`image-${index}`}
+          onClick={() => handlePlayerClick(imageUrl)}
+          style={{ cursor: clicked || disabled ? 'not-allowed' : 'pointer', opacity: clicked || disabled ? 0.5 : 1 }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ImageList;

Scoprimi/src/components/game/PlayerList.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { GameStates, useGameState } from '../../contexts/GameStateContext';
 
 interface PlayerListProps {
   players: string[]
@@ -12,7 +11,6 @@ interface PlayerListProps {
 
 const PlayerList: React.FC<PlayerListProps> = ({ players, images, onVote, disabled, resetSelection, playersWhoVoted }) => {
   const [selectedPlayer, setSelectedPlayer] = useState<string | null>(null);
-  const { transitionTo } = useGameState();
   useEffect(() => {
     if (resetSelection) {
       setSelectedPlayer(null); // Resetta la selezione quando `resetSelection` è vero
@@ -23,7 +21,6 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, images, onVote, disabl
     if (!disabled) {
       setSelectedPlayer(player);
       onVote(player);
-      transitionTo(GameStates.GENERICRESPONSE);
     }
   };
 

Scoprimi/src/components/game/Question.tsx

@@ -2,11 +2,14 @@ import React from 'react';
 
 interface QuestionProps {
   question: string;
+  selectedPlayer: () => string;
 }
 
-const Question: React.FC<QuestionProps> = ({ question }) => (
+const placeholderChar = '$';
+
+const Question: React.FC<QuestionProps> = ({ question, selectedPlayer }) => (
   <div id="questionContainer">
-    <h4 id="question">{question}</h4>
+    <h4 id="question">{question.replace(placeholderChar, selectedPlayer)}</h4>
   </div>
 );
 

Scoprimi/src/components/game/Results.tsx

@@ -4,9 +4,14 @@ interface ResultsProps {
   voteRecap: { [key: string]: string };
   playerImages: { [key: string]: string };
   mostVotedPerson: string;
+  isPhoto: boolean;
 }
 
-const Results: React.FC<ResultsProps> = ({ voteRecap, playerImages, mostVotedPerson }) => (
+const todoShitFunction = (votestring: string) =>
+  votestring.substring(votestring.lastIndexOf('/') + 1).split('.')[0];
+
+
+const Results: React.FC<ResultsProps> = ({ voteRecap, playerImages, mostVotedPerson, isPhoto }) => (
   <div id="resultsContainer" className="text-center">
     <div id="resultMessageContainer">
       {
@@ -25,7 +30,7 @@ const Results: React.FC<ResultsProps> = ({ voteRecap, playerImages, mostVotedPer
                     <span
                       className={`status-pill-vote ${mostVotedPerson === vote ? 'my-bg-success' : 'my-bg-error'}`}
                     >
-                      {vote}
+                      {isPhoto ? todoShitFunction(vote) : vote}
                     </span>
                   </div>
                 )}