diff --git a/multiplayerservice/server.js b/multiplayerservice/server.js index 2c65b07..a7c54d7 100644 --- a/multiplayerservice/server.js +++ b/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 diff --git a/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx b/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx index 65e66e4..365ef6c 100644 --- a/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx +++ b/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 = ({}) => { const [stage, setStage] = useState(1) const [partyCode, setPartyCode] = useState(""); const [users, setUsers] = useState([]); + const [questions, setQuestions] = useState([]); useEffect(() => { const newSocket = io(SERVER_URL); @@ -54,6 +57,13 @@ const GameMultiPlayer: FC = ({}) => { 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 = ({}) => { {stage === 1 && } {stage === 2 && } + {stage === 3 && } ) } diff --git a/webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx b/webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx index 9d54400..3ac1a33 100644 --- a/webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx +++ b/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 = ({socket, handleCurrentStage, partyCode, users}) => { - console.log(users) + const [isFetched, setFetched] = useState(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 (

Lobby - Multiplayer

@@ -33,7 +57,8 @@ const LobbyMultiPlayer: FC = ({socket, handleCurrentStage Loading questions... } */} - + {isFetched && } + {!isFetched && }
) diff --git a/webapp/src/components/game/multiplayer/QuestionsMultiPlayer.tsx b/webapp/src/components/game/multiplayer/QuestionsMultiPlayer.tsx new file mode 100644 index 0000000..dbde747 --- /dev/null +++ b/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 = ({socket,handleCurrentStage,questions}) => { + return
QuestionsMultiPlayer
+} + +export default QuestionsMultiPlayer \ No newline at end of file