Pedro v2

docs/src/06_runtime_view.adoc

@@ -32,13 +32,10 @@ image::06-loginSecuencia.png["Login secuence diagram image"]
 
 === Request a question
 
-image::06-nextQuestion.png["NextQuestion secuence diagram image"] 
-
-1. The user asks for a new question
-2. The app redirects that request to the QuestionGenerator
-3. The QuestionGenerator generates a heather for the question
-4. The QuestionGenerator requests the correct answer to WikiData
-5. WikiData sends that answer data
-6. The QuestionGenerator builds the question with the answer and wrong options
-7. The built question is sent to the app
-8. The app shows the question to the User
+image::06-generateQuestion.png["NextQuestion secuence diagram image"] 
+
+1. The QuestionService wants to generate a question
+2. It requests all the necesary info to build a question to WikiData
+3. WikiData responds with the requested data
+4. The QuestionService builds the question with the data recieved
+5. Finally the QuestionService writes the new question in the QuestionsDB

docs/src/07_deployment_view.adoc

@@ -6,11 +6,11 @@ ifndef::imagesdir[:imagesdir: ../images]
 == Deployment View
 
 
-image::07-diagramaDespliegue.png["Building Block general diagram"] 
+image::07-diagramaDespliegue.PNG["Building Block general diagram"] 
 
 Basically when a user wants to use the application, using his web browser
-he can connect to the application server where the web app will use some
-services also alocated there such as the QuestionGenerator or the LoginManager.
-Also these services make use of the WikiData API and database and also of 
-a database unique for the application to save things as player statistics
-or info of them.
+he can connect to the application server that is a VM in hosted in Azure
+orientated to microservices. That means that all the modules inside it
+are dockerized in a container. The QuestionGenerator interacts with WikiData
+throught their API and we have also two MongoDB databases one for users
+and another to store questions.

webapp/src/components/AnswersBlock.jsx

@@ -8,6 +8,14 @@ export function AnswersBlock({ respuestas, correcta }){
 
     let respuestasCopy = respuestas;
 
+    //Colores de los botones para que tengan orden random
+    const colorsArray = ["#FFD743","#D773A2","#07BB9C","#A06AB4"];
+    //Baraja con algoritmo de Fisher-Yates los colores
+    for (let i = colorsArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [colorsArray[i], colorsArray[j]] = [colorsArray[j], colorsArray[i]];
+    }
+
     useEffect(() => {
         //Baraja con algoritmo de Fisher-Yates
         for (let i = respuestasCopy.length - 1; i > 0; i--) {
@@ -30,7 +38,7 @@ export function AnswersBlock({ respuestas, correcta }){
     return (
         <Box display="grid" flex="1" gridTemplateColumns="repeat(2,1fr)" gridColumnGap="2em" padding="4em" alignItems="center">
             {respuestasAleatorizadas.map((respuesta, index) => (
-                <AnswerButton key={index} text={respuesta} colorFondo={"#A06AB4"} onClick={() => handleButtonClick(respuesta)} />
+                <AnswerButton key={index} text={respuesta} colorFondo={colorsArray[index]} onClick={() => handleButtonClick(respuesta)} />
             ))}
         </Box>
     );

webapp/src/components/Login.js

@@ -86,6 +86,9 @@ const Login = ({ startGame }) => {
               {error && (
                 <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
               )}
+              <Button variant="contained" color="primary" onClick={handleButtonClick}>
+                Empieza el juego
+              </Button>
             </div>
           )}
         </Container>

webapp/src/components/QuestionArea.jsx

@@ -13,15 +13,16 @@ export function QuestionArea(){
   const [respuestas, setRespuestas] = useState([]);
   // Estado que almacena la correcta
   const [correcta, setCorrecta] = useState();
-/**
+
     // Función para llamar al servicio y obtener los datos de la pregunta
   const fetchQuestionData = async () => {
       try {          
           // Llamada al servicio para obtener los datos de la pregunta (aquí asumiendo que el servicio devuelve un JSON)
           const response = await axios.get(`${apiEndpoint}/getQuestion`);
           const data = response.data;
           setQuestionData(data); // Actualizar el estado con los datos de la pregunta obtenidos del servicio
-
+          //Meto la correcta
+          setCorrecta(data.correcta);
           //calcular respuestas 
           const respuestasArray = [data.correcta, data.respuestasIncorrecta1, data.respuestasIncorrecta2, data.respuestasIncorrecta3];
           setRespuestas(respuestasArray);
@@ -35,8 +36,8 @@ export function QuestionArea(){
       useEffect(() => {
         fetchQuestionData();
     }, []); // El array vacío asegura que esto solo se ejecute una vez al montar el componente
-*/
 
+/** PARA DEPURACIÓN Y LOCAL
 useEffect(() => {
   const dataDev = {
     "pregunta": "What is the capital of France?",
@@ -56,9 +57,7 @@ useEffect(() => {
   setRespuestas(respuestasDev);
   setCorrecta(correctaDev);
 }, []);
-
-    //const respuestas = [questionJson.correcta,questionJson.respuestasIncorrecta1,questionJson.respuestasIncorrecta2,questionJson.respuestasIncorrecta3];
-
+*/
 
     return(
         <Box alignContent="center" bg="#0000004d" display="flex" flexDir="column"