Compatibilizados los componentes de Vite a create e inicio en preguntas

webapp/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.3",

webapp/src/App.css

@@ -1,3 +1,11 @@
+body{
+  margin: 0;
+  background: #222;
+  font-family: system-ui;
+  display: grid;
+  place-content: center;
+}
+
 .App {
   text-align: center;
 }

webapp/src/App.js

@@ -5,14 +5,27 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
+import { Box} from "@chakra-ui/react";
+import { QuestionArea } from './components/QuestionArea';
 
 function App() {
   const [showLogin, setShowLogin] = useState(true);
 
   const handleToggleView = () => {
     setShowLogin(!showLogin);
   };
-
+  //  /**
+  return (
+    <>
+      <Box minH="100vh" minW="100vw" 
+      bgGradient="linear(to-t,#08313A,#107869)"
+      display="flex" justifyContent="center" alignItems="center">
+        <QuestionArea/>
+      </Box>
+    </>
+  );
+  // */
+  /**
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
@@ -33,6 +46,7 @@ function App() {
       </Typography>
     </Container>
   );
+  */
 }
 
 export default App;

webapp/src/components/AnswerButton.jsx

@@ -0,0 +1,20 @@
+import {Button} from '@chakra-ui/react'
+
+export function AnswerButton({text, colorFondo}){
+
+    return(
+        <Button 
+        bg={colorFondo}
+        color="#FCFAF0"
+        display="flex"
+        fontSize="1.3em"
+        borderRadius="15px"
+        transition="0.3s"
+        minHeight="4em"
+        _hover={{
+            transform:"scale(1.05)",
+        }}
+        >
+        {text}</Button>    
+    )
+}

webapp/src/components/AnswersBlock.jsx

@@ -0,0 +1,25 @@
+import { Box } from "@chakra-ui/react";
+import { AnswerButton } from './AnswerButton.jsx';
+
+export function AnswersBlock({ respuestas }){
+
+    const correcta = respuestas[0];
+    //Ordenar random
+    //Intercambiar el primer elemento con otro elemento aleatorio del array
+    const indiceAleatorio = Math.floor(Math.random() * (respuestas.length - 1));
+    const save = respuestas[0];
+    respuestas[0] = respuestas[indiceAleatorio];
+    respuestas[indiceAleatorio] = save;
+
+    console.log(correcta);
+
+    return(
+        <Box display="grid" flex="1" gridTemplateColumns="repeat(2,1fr)" 
+        gridColumnGap="2em" padding="4em" alignItems="center">
+            <AnswerButton text={respuestas[0]} colorFondo={"#A06AB4"}/>
+            <AnswerButton text={respuestas[1]} colorFondo={"#B5EECB"}/>
+            <AnswerButton text={respuestas[2]} colorFondo={"#FFD743"}/>
+            <AnswerButton text={respuestas[3]} colorFondo={"#D773A2"}/>
+        </Box>
+    )
+}

webapp/src/components/EnunciadoBlock.jsx

@@ -0,0 +1,12 @@
+import {Center } from "@chakra-ui/react";
+
+
+export function EnunciadoBlock({pregunta}){
+
+    return(
+        <Center borderBottom="0.1em solid #000" fontSize="1.5em" 
+        color="#FCFAF0" fontWeight="bolder"flex="2">
+            {pregunta}
+        </Center>
+    )
+}

webapp/src/components/QuestionArea.jsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Box} from "@chakra-ui/react";
+import { AnswersBlock } from './AnswersBlock.jsx';
+import { EnunciadoBlock } from './EnunciadoBlock.jsx';
+
+export function QuestionArea(){
+
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+    // Estado para almacenar los datos de la pregunta
+  const [questionData, setQuestionData] = useState(null);
+
+    // 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}/question`);
+          const data = await response.json();
+          setQuestionData(data); // Actualizar el estado con los datos de la pregunta obtenidos del servicio
+      } catch (error) {
+          console.error('Error fetching question data:', error);
+      }
+  };
+
+      // Llamar al servicio al cargar el componente (equivalente a componentDidMount)
+      useEffect(() => {
+        fetchQuestionData();
+    }, []); // El array vacío asegura que esto solo se ejecute una vez al montar el componente
+
+
+    const questionJson = {
+      "pregunta": "What is the capital of France?",
+      "correcta": "Paris",
+      "respuestasIncorrecta1": "London",
+      "respuestasIncorrecta2": "Berlin",
+      "respuestasIncorrecta3": "Madrid"
+    }
+
+    const respuestas = [questionJson.correcta,questionJson.respuestasIncorrecta1,questionJson.respuestasIncorrecta2,questionJson.respuestasIncorrecta3];
+
+
+    return(
+        <Box alignContent="center" bg="#0000004d" display="flex" flexDir="column"
+        maxH="80vh" maxW="70vW" minH="70vh" minW="60vW">
+          {questionJson ? ( // Verificar si se han obtenido los datos de la pregunta
+                <>
+                    <EnunciadoBlock pregunta={questionJson.pregunta}/> {/* Renderizar el enunciado de la pregunta */}
+                    <AnswersBlock respuestas={respuestas}/> {/* Renderizar las respuestas de la pregunta */}
+                </>
+            ) : (
+                <p>Cargando...</p> // Mensaje de carga mientras se obtienen los datos
+            )}
+        </Box>
+    )
+}

webapp/src/index.js

@@ -3,11 +3,15 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { ChakraProvider } from '@chakra-ui/react'
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>
   </React.StrictMode>
 );