broadcast generated questions to the lobby

multiplayerservice/server.js

@@ -40,6 +40,10 @@ const updateLobbyUsers = (lobbyCode) => {
   io.to(lobbyCode).emit('lobbyUsers', Object.values(lobby[lobbyCode]));
 };
 
+const broadcastQuestions = (partyCode, questions) => {
+  io.to(partyCode).emit('questionsUpdated', questions);
+};
+
 io.on('connection', socket => {
   console.log('Client connected');
 
@@ -69,6 +73,12 @@ io.on('connection', socket => {
     }
   });
 
+  socket.on('updateQuestions', (partyCode, questions) => {
+    console.log('here')
+    // Broadcast questions to all users in the specified party
+    broadcastQuestions(partyCode, questions);
+  });
+
   socket.on('disconnect', () => {
     console.log('Client disconnected');
     // Remove the user from the lobby when they disconnect

webapp/src/components/game/multiplayer/GameMultiPlayer.tsx

@@ -3,6 +3,8 @@ import io from 'socket.io-client';
 import MenuMultiplayer from './MenuMultiplayer';
 import { Container } from '@mui/material';
 import LobbyMultiPlayer from './LobbyMultiPlayer';
+import { Question4Answers } from '../singleplayer/GameSinglePlayer';
+import QuestionsMultiPlayer from './QuestionsMultiPlayer';
 
 interface GameMultiPlayerProps {
 
@@ -29,6 +31,7 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = ({}) => {
   const [stage, setStage] = useState<number>(1)
   const [partyCode, setPartyCode] = useState<string>("");
   const [users, setUsers] = useState<UserPlayer[]>([]);
+  const [questions, setQuestions] = useState<Question4Answers[]>([]);
 
   useEffect(() => {
     const newSocket = io(SERVER_URL);
@@ -54,6 +57,13 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = ({}) => {
     newSocket.on('partyNotFound', () => {
       console.log('Party not found');
     });
+
+    newSocket.on('questionsUpdated', (questions: Question4Answers[]) => {
+      console.log('questions recieved from server')
+      console.log(questions);
+      setQuestions(questions);
+      setStage(3);
+    })
 
     return () => {
       newSocket.close();
@@ -72,6 +82,7 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = ({}) => {
     <Container sx={{ mt: 9 }}>
       {stage === 1 && <MenuMultiplayer socket={socket} handleCurrentStage={handleCurrentStage} handlePartyCode={handlePartyCode}/>}
       {stage === 2 && <LobbyMultiPlayer socket={socket} handleCurrentStage={handleCurrentStage} partyCode={partyCode} users={users}/>}
+      {stage === 3 && <QuestionsMultiPlayer socket={socket} handleCurrentStage={handleCurrentStage} questions={questions}/>}
     </Container>
   )
 }

webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx

@@ -1,6 +1,7 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { SocketProps, UserPlayer } from './GameMultiPlayer';
 import '../LobbyGame.scss';
+import axios from 'axios';
 
 interface LobbyMultiPlayerProps {
     socket: SocketProps;
@@ -11,7 +12,30 @@ interface LobbyMultiPlayerProps {
 
 const LobbyMultiPlayer: FC<LobbyMultiPlayerProps> = ({socket, handleCurrentStage, partyCode, users}) => {
 
-  console.log(users)
+  const [isFetched, setFetched] = useState<boolean>(true);
+
+  const fetchQuestions = async () => {
+    setFetched(false)
+    const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+    try {
+      console.log(users)
+      const requestData = {
+        players: users.map((user) => ({uuid: user.uuid}))
+      }
+      console.log("requestData")
+      console.log(requestData)
+      const response = await axios.post(`${apiEndpoint}/createGame`, requestData);
+
+      console.log("Juego creado")
+      console.log(response.data)
+      socket.emit('updateQuestions', partyCode, response.data);
+      setFetched(true);
+    } catch (error) {
+      console.error('Error al obtener las preguntas:', error);
+    }
+  };
+
   return (
     <div className='lobby-container'>
       <h2 className='lobby-title'>Lobby - Multiplayer</h2>
@@ -33,7 +57,8 @@ const LobbyMultiPlayer: FC<LobbyMultiPlayerProps> = ({socket, handleCurrentStage
             Loading questions...
         </button>} */}
         <button className="start-game-button" onClick={() => handleCurrentStage(3)}>Exit</button>
-        <button className="start-game-button" onClick={() => handleCurrentStage(3)}>Start game</button>
+        {isFetched && <button className="start-game-button" onClick={fetchQuestions}>Start game</button>}
+        {!isFetched && <button className="start-game-button"  disabled>Loading questions ...</button>}
       </div>
     </div>
   )

webapp/src/components/game/multiplayer/QuestionsMultiPlayer.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import { SocketProps } from './GameMultiPlayer';
+import { Question4Answers } from '../singleplayer/GameSinglePlayer';
+
+interface QuestionsMultiPlayerProps {
+    socket: SocketProps;
+    handleCurrentStage: (n: number) => void
+    questions: Question4Answers[]
+}
+
+const QuestionsMultiPlayer: FC<QuestionsMultiPlayerProps> = ({socket,handleCurrentStage,questions}) => {
+  return <div>QuestionsMultiPlayer</div>
+}
+
+export default QuestionsMultiPlayer