From 8d52916dd5366142d5f697c2570a245cc2c007f2 Mon Sep 17 00:00:00 2001 From: Santiago Date: Thu, 22 Feb 2024 01:41:06 +0100 Subject: [PATCH] Creada la interfaz de preguntas y definida (se puede cambiar) la api de questionservice --- api_interfaces/api_questionservice.txt | 13 +++ users/authservice/package-lock.json | 6 +- users/userservice/package-lock.json | 6 +- webapp/src/components/Login.js | 2 + webapp/src/components/game/Game.js | 100 +++++++++++++++++++++ webapp/src/components/game/example_data.js | 8 ++ 6 files changed, 129 insertions(+), 6 deletions(-) create mode 100644 api_interfaces/api_questionservice.txt create mode 100644 webapp/src/components/game/Game.js create mode 100644 webapp/src/components/game/example_data.js diff --git a/api_interfaces/api_questionservice.txt b/api_interfaces/api_questionservice.txt new file mode 100644 index 0000000..ad891f2 --- /dev/null +++ b/api_interfaces/api_questionservice.txt @@ -0,0 +1,13 @@ +petición HTTP GET getquestion +devuelve json -> {question: string, answers: answer[]} + +------------------------------------------- +answer: {answer: string, correct: boolean} + +EJEMPLO +const example_data = {question: 'pregunta ejemplo', answers: [ + {answer: 'respuesta correcta', correct: true}, + {answer: 'respuesta incorrecta1', correct: false}, + {answer: 'respuesta incorrecta2', correct: false}, + {answer: 'respuesta incorrecta3', correct: false} +]}; \ No newline at end of file diff --git a/users/authservice/package-lock.json b/users/authservice/package-lock.json index e0ceb0b..0716101 100644 --- a/users/authservice/package-lock.json +++ b/users/authservice/package-lock.json @@ -2788,9 +2788,9 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/ip": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", - "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", + "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==", "devOptional": true }, "node_modules/ipaddr.js": { diff --git a/users/userservice/package-lock.json b/users/userservice/package-lock.json index f21b26c..5988507 100644 --- a/users/userservice/package-lock.json +++ b/users/userservice/package-lock.json @@ -2786,9 +2786,9 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/ip": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", - "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", + "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==", "devOptional": true }, "node_modules/ipaddr.js": { diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js index 0ad6268..35ce305 100644 --- a/webapp/src/components/Login.js +++ b/webapp/src/components/Login.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import axios from 'axios'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; +import Game from './game/Game.js'; const Login = () => { const [username, setUsername] = useState(''); @@ -43,6 +44,7 @@ const Login = () => { Your account was created on {new Date(createdAt).toLocaleDateString()}. + ) : (
diff --git a/webapp/src/components/game/Game.js b/webapp/src/components/game/Game.js new file mode 100644 index 0000000..18acaf4 --- /dev/null +++ b/webapp/src/components/game/Game.js @@ -0,0 +1,100 @@ +// Importa React, useState para manejar el estado, axios para hacer solicitudes HTTP, y componentes de Material UI para la interfaz. +import React, { useState } from 'react'; +import axios from 'axios'; +import { Container, Typography, Button, Box, Paper, Snackbar } from '@mui/material'; +import MuiAlert from '@mui/material/Alert'; +import exampleData from './example_data.js'; + +// Define el endpoint de la API, utilizando una variable de entorno o un valor predeterminado. +const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; + +const Game = () => { + + const [question, setQuestion] = useState(''); + const [answers, setAnswers] = useState([]); + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState(''); + const [snackbarSeverity, setSnackbarSeverity] = useState('success'); + const handleSnackbarClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + setSnackbarOpen(false); + }; + + const handleAnswerButtonClick = (correct) => { + if (correct) { + setSnackbarMessage('Respuesta correcta'); + setSnackbarSeverity('success'); + fetchQuestionAndAnswers(); + } else { + setSnackbarMessage('Respuesta incorrecta'); + setSnackbarSeverity('error'); + } + setSnackbarOpen(true); + }; + + // Función para llamar al questionservice y obtener la pregunta y las respuestas + const fetchQuestionAndAnswers = async () => { + try { + const response = await axios.get(`${apiEndpoint}/getquestion`); + // Almacena la pregunta y las respuestas en los estado. + setQuestion(response.data.question); + setAnswers(response.data.answers); + // setQuestion(exampleData.question); + // setAnswers(exampleData.answers); + } catch (error) { + // Manejo básico de errores: imprime el error en la consola. + console.error('Error fetching question and answers', error); + } + }; + + // Renderiza el componente. + return ( + + + Generate Question and Answers + + + + + {/* Muestra la pregunta y las respuesta si existen */} + {question && ( + + Question: + {question} + + )} + {answers && answers.map((answer, index) => ( +
+ +
+ ))} + + + {snackbarMessage} + + + + ); +}; + +// Exporta el componente para su uso en otras partes de la aplicación. +export default Game; \ No newline at end of file diff --git a/webapp/src/components/game/example_data.js b/webapp/src/components/game/example_data.js new file mode 100644 index 0000000..4b5e3ef --- /dev/null +++ b/webapp/src/components/game/example_data.js @@ -0,0 +1,8 @@ +const example_data = {question: 'pregunta ejemplo', answers: [ + {answer: 'respuesta correcta', correct: true}, + {answer: 'respuesta incorrecta1', correct: false}, + {answer: 'respuesta incorrecta2', correct: false}, + {answer: 'respuesta incorrecta3', correct: false} +]}; + +export default example_data; \ No newline at end of file