Problems of the creation service solved and added a more visual generation of questions

docker-compose.yml

@@ -11,7 +11,7 @@ services:
     networks:
       - mynetwork
 
-  creationervice:
+  creationservice:
     container_name: creationservice-${teamname:-defaultASW}
     image: ghcr.io/arquisoft/wiq_es2b/creationservice:latest
     profiles: ["dev", "prod"]
@@ -62,13 +62,15 @@ services:
       - mongodb
       - userservice
       - authservice
+      - creationservice
     ports:
       - "8000:8000"
     networks:
       - mynetwork
     environment:
       AUTH_SERVICE_URL: http://authservice:8002
       USER_SERVICE_URL: http://userservice:8001
+      CREATION_SERVICE_URL: http://creationservice:8005
 
   webapp:
     container_name: webapp-${teamname:-defaultASW}

gatewayservice/gateway-service.js

@@ -48,7 +48,6 @@ app.post('/adduser', async (req, res) => {
 
 app.post('/createquestion', async (req, res) => {
   try {
-    console.log('eyou');
     // Crea una peticion a la url (le llegará a creation-service.js) con la opcion /login 
     // y los parametros req.body
     const questionResponse = await axios.post(creationServiceUrl+'/createquestion', req.body);

questions/creationservice/creation-service.js

@@ -18,23 +18,26 @@ app.post('/createquestion', async (req, res) => {
   // TODO LO COMENTADO ES UN INTENTO DE HACER LAS QUERIES
   // PERO COMO SALTA UN ERROR ANTES, NO SE PRUEBA CON ELLAS
 
-  /*const sparqlQuery = 'SELECT DISTINCT ?country ?countryLabel ?capital ?capitalLabel WHERE { ?country wdt:P31 wd:Q6256. ?country wdt:P36 ?capital. SERVICE wikibase:label {bd:serviceParam wikibase:language "[AUTO_LANGUAGE],es".}}';
+  const sparqlQuery = 'SELECT DISTINCT ?country ?countryLabel ?capital ?capitalLabel WHERE { ?country wdt:P31 wd:Q6256. ?country wdt:P36 ?capital. SERVICE wikibase:label {bd:serviceParam wikibase:language "[AUTO_LANGUAGE],es".}}';
   const apiUrl = `https://query.wikidata.org/sparql?query=${encodeURIComponent(sparqlQuery)}`;
-  const headers = { "Accept": "application/json" };*/
+  const headers = { "Accept": "application/json" };
 
   try {
-
-    //const respuestaWikidata = await fetch(apiUrl, {headers});
-    //if (respuestaWikidata.ok) {
-      //const data = await respuestaWikidata.json();//obtengo los datos en json
-      //const numEles = data.results.bindings.length;
-      //const index = Math.floor(Math.random() * numEles);//index al azar
-      //result = data.results.bindings[index];
+    const respuestaWikidata = await fetch(apiUrl, {headers});
+    console.log(respuestaWikidata);
+    if (respuestaWikidata.ok) {
+      console.log('Entro al if');
+      const data = await respuestaWikidata.json();//obtengo los datos en json
+      const numEles = data.results.bindings.length;
+      const index = Math.floor(Math.random() * numEles);//index al azar
 
-      console.log(req);
+      res = data.results.bindings[index];
       // Hardcodeo el resultado para hacer pruebas
-      res.json({ token: 'asdf'});
-    //}
+      // res.json({ token: 'asdf'});
+    }else{
+      console.log('no entra al if');
+      console.log('la peticion tiene un status:' ,respuestaWikidata.status);
+    }
   } catch (error) {
     res.status(500).json({ error: 'Internal Server Error' });
   }

webapp/src/App.js

@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';  // Cambiado de Switch a Routes
 import AddUser from './components/AddUser';
 import Login from './components/Login';
-import Juego from './components/Juego';
+import Game from './components/Game';
+import HistoricalData from './components/HistoricalData';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
@@ -26,7 +27,8 @@ function App() {
         </Typography>
 
         <Routes>
-          <Route path="/juego" element={<Juego />} />
+          <Route path="/game" element={<Game />} />
+          <Route path="/historicaldata" element={<HistoricalData />} />
           <Route path="/" element={
             <>
               {showLogin ? <Login /> : <AddUser />}

webapp/src/components/Game.js

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { Container, Typography, TextField, Button, Snackbar, Paper } from '@mui/material';
 
 const Game = () => {
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const [askForQuestion, setAskForQuestion] = useState(false);
   const [pais, setpais] = useState('');
-  const [capital, setcapital] = useState('');
-
-  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  const [capitalCorrecta, setcapital] = useState('');
+  const [capitalIcnorrecta1, setcapitalIcnorrecta1] = useState('');
+  const [capitalIcnorrecta2, setcapitalIcnorrecta2] = useState('');
+  const [capitalIcnorrecta3, setcapitalIcnorrecta3] = useState('');
 
   // Esta es la llamada al servicio de generar las preguntas
   const  handleShowQuestion = async () => {
@@ -36,35 +38,51 @@ const Game = () => {
     if (respuestaWikidata.ok) {
     const data = await respuestaWikidata.json();
     const numEles = data.results.bindings.length;
-    const index = Math.floor(Math.random() * numEles);
-    const result = data.results.bindings[index];
+    const indexCapCorre = Math.floor(Math.random() * numEles);
+    const result = data.results.bindings[indexCapCorre];
     setpais(result.countryLabel.value);
     setcapital(result.capitalLabel.value);
+
+    const indexCapIncorre1 = Math.floor(Math.random() * numEles);
+    const indexCapIncorre2 = Math.floor(Math.random() * numEles);
+    const indexCapIncorre3 = Math.floor(Math.random() * numEles);
+    setcapitalIcnorrecta1(data.results.bindings[indexCapIncorre1].capitalLabel.value);
+    setcapitalIcnorrecta2(data.results.bindings[indexCapIncorre2].capitalLabel.value);
+    setcapitalIcnorrecta3(data.results.bindings[indexCapIncorre3].capitalLabel.value);
     } else {
       console.error("Error al realizar la consulta en Wikidata. Estado de respuesta:", respuestaWikidata.status);
     }
   }
 
   return (
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-      <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-        Esta sería la pagina del juego
-      </Typography>
+    <Container maxWidth="md" style={{ marginTop: '2rem' }}>
+      <Paper elevation={3} style={{ padding: '2rem', textAlign: 'center' }}>
+        <Typography variant="h4" gutterBottom>
+          Saber y Ganar Juego
+        </Typography>
+        <Typography variant="body1" paragraph>
+          Pregunta: ¿Cuál es la capital de {pais}?
+        </Typography>
+        {/* Botones de opción */}
+        <Button variant="outlined" style={{ margin: '0.5rem' }}>
+          {capitalCorrecta}
+        </Button>
+        <Button variant="outlined" style={{ margin: '0.5rem' }}>
+          {capitalIcnorrecta1}
+        </Button>
+        <Button variant="outlined" style={{ margin: '0.5rem' }}>
+          {capitalIcnorrecta2}
+        </Button>
+        <Button variant="outlined" style={{ margin: '0.5rem' }}>
+          {capitalIcnorrecta3}
+        </Button>
+      </Paper>
       <Button variant="contained" color="primary" onClick={handleShowQuestion}>
         Genera pregunta NO FUNCIONA AUNQUE DEBERIA
       </Button>
       <Button variant="contained" color="primary" onClick={deberiaIrEnelServicio}>
         Genera pregunta FUNCIONA
       </Button>
-      {askForQuestion ? (
-        <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-          Pais {pais} capital {capital}
-        </Typography>
-      ) : (
-        <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-          Dale al boton
-        </Typography>
-      ) }
     </Container>
   );
 };

webapp/src/components/HistoricalData.js

@@ -5,9 +5,9 @@ import { Container, Typography, TextField, Button, Snackbar } from '@mui/materia
 const HistoricalData = () => {
 
   return (
-    <div>
-        <h1>Esta sería la pagina del historico de partidas</h1>
-    </div>
+    <Typography variant="h4" gutterBottom>
+          Pagina del HistoricalData
+    </Typography>
   );
 };
 

webapp/src/components/Login.js

@@ -2,9 +2,8 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
-import Game from './Game';
+import { useNavigate } from 'react-router-dom';
 import HistoricalData from './HistoricalData';
-import App from '../App';
 
 const Login = () => {
   const [username, setUsername] = useState('');
@@ -15,8 +14,8 @@ const Login = () => {
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   // Declara las variables (izquierda) y el metodo que la modifica (derecha). Se inicializa a false (useState)
-  const [showGame, setShowGame] = useState(false);
   const [showHistoricalData, setShowHistoricaData] = useState(false);
+  const navigate = useNavigate();
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -41,25 +40,21 @@ const Login = () => {
   };
 
   const handleShowGame = () => {
-    setShowGame(true);
+    let path= '/Game';
+    navigate(path);
   };
 
   const handleShowHistoricalData = () => {
-    setShowHistoricaData(true);
+    let path= '/HistoricalData';
+    navigate(path);
   };
 
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       {/* Los operadores logicos funcionan de la manera: 
       condicion ? (lo que se hace si se cumple) : (lo que se hace si no se cumple) */}
       {loginSuccess ? (
-        showGame || showHistoricalData ? (
-          showGame ? (
-            <Game/>
-          ):(
-            <HistoricalData/>
-          )
-        ) : (
+
           <div>
             <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
               Hello {username}!
@@ -76,7 +71,7 @@ const Login = () => {
               Historico de partidas de jugador
             </Button>
           </div>
-        )
+
       ) : (
         <div>
           <Typography component="h1" variant="h5">