Merge pull request #48 from Arquisoft/LaraFMz

Modificaciones front-end

webapp/src/components/Estilos/juego.css

@@ -1,31 +1,43 @@
-
+#botonSiguiente{
+    width: 200px;
+    padding: 10px 20px;
+    color: #ffffff; /* Color del texto */
+    background-color: #4CAF50; /* Color de fondo verde */
+    border: 2px solid #4CAF50; /* Borde verde */
+    }
 
 .button {
-
     padding: 20px 20px 20px 20px ; /* espacio entre borde y el texto dentro del boton */
-    border: 2px solid black; /* Color del borde */
+    border: 2px solid; /* Color del borde */
     font-weight: bold;
     border-radius: 5px; /* Borde redondeado */
     background-color: #613FBB; /* Color de fondo */
     margin-bottom: 10px;
     margin-left:-48px;
-    width: 500px; /* Ajusta el valor según el ancho deseado */
+    background-color: white;
+    width: 500px;
+  }
+
+  .button:disabled {
+    color:black;
   }
 
+
+
   #boton1{
-    background-color: #E14E4E; /* Color de fondo */
+    border: 6px solid #E14E4E;
   }
 
   #boton2{
-    background-color: #E1CB4E; /* Color de fondo */
+    border: 6px solid #CBBA2A; 
   }
 
   #boton3{
-    background-color: #4EE15E; /* Color de fondo */
+    border: 6px solid #05B92B; 
   }
 
   #boton4{
-    background-color: #4E8DE1; /* Color de fondo */
+    border: 6px solid #1948D9; 
   }
 
   body h2 {

webapp/src/components/Pages/Home.js

@@ -1,5 +1,28 @@
+// src/components/Login.js
+import React, { useState, useEffect } from 'react';
+import '../Estilos/juego.css';
+import { Container } from '@mui/material';
+
+function clickJugar() {
+  window.location.href = "game";
+}
+
+function clickEstadisticas() {
+  window.location.href = "stats";
+}
+
 const Home = () => {
-    return <h1>Home</h1>;
+  return (
+    <>
+      <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+        <h1> WIQ_es05 </h1>
+        <div className="button-container">
+          <button id="botonJugar" className="button" onClick={() => clickJugar()}> JUGAR</button>
+          <button id="botonEstadisticas" className="button" onClick={() => clickEstadisticas()}> ESTADÍSTICAS</button>
+         </div>
+      </Container>
+      </>
+  );
   };
 
   export default Home;

webapp/src/components/Pages/Juego.js

@@ -6,6 +6,7 @@ import { Container, Typography, TextField, Button, Snackbar } from '@mui/materia
 
 const Juego = ({isLogged}) => {
   const [pregunta, setPregunta] = useState("")
+  //Respuesta correcta
   const [resCorr, setResCorr] = useState("")
   const [resFalse, setResFalse] = useState([])
   const [respondido, setRespodido] = useState(false)
@@ -15,12 +16,30 @@ const Juego = ({isLogged}) => {
     //comprobara si la respuesta es correcta o no 
     setRespodido(true)
     if(respuesta == resCorr){
-      console.log("entro a respuesat correcta")
+      console.log("entro a respuesta correcta")
       setVictoria(true)
     }
     else{
       setVictoria(false)
     }
+
+    //Cambiar color de botones
+    const buttonContainer = document.querySelector('.button-container');
+    const buttons = buttonContainer.querySelectorAll('.button');
+    const botonEncontrado = Array.from(buttons).find((button) => {
+      button.disabled=true; //desactivamos todos los botones
+        if(button.textContent.trim()==respuesta.trim()){
+          //Si era la cambiamos color fondo a verde, si no a rojo
+          if(button.textContent.trim() == resCorr) {
+            button.style.backgroundColor = "#05B92B";
+            button.style.border = "6px solid #05B92B";
+          } else {
+            button.style.backgroundColor = "#E14E4E";
+            button.style.border = "6px solid #E14E4E";
+          }
+        }
+    });
+
   };
 
   async function CargarPregunta(pregunta, resCorr, resFalse){
@@ -33,35 +52,32 @@ const Juego = ({isLogged}) => {
           setResFalse(todo.answers)
         });
     }, []);
-    console.log(pregunta);
-    console.log(resCorr);
-    console.log(resFalse)
+    //console.log(pregunta);
+    //console.log(resCorr);
+    //console.log(resFalse)
+
+
+  }
+
+  function clickSiguiente() {
+    window.location.href = "game";
   }
 
   CargarPregunta(pregunta, resCorr, resFalse);
 
 
   return (
     <>
-    {respondido ? (
-      <>
-      {victoria ? (
-        <h2> ACERTASTE </h2>
-      ) : (
-        <h2> FALLASTE </h2>
-      )}
-      </>
-      ) : (
       <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
         <h2> {pregunta} </h2>
         <div className="button-container">
-          <button id="boton1" className="button" onClick={() => botonRespuesta(resFalse[1])}>{resFalse[1]}</button>
-          <button id="boton2" className="button" onClick={() => botonRespuesta(resFalse[2])}>{resFalse[2]}</button>
-          <button id="boton3" className="button" onClick={() => botonRespuesta(resFalse[0])}>{resFalse[0]}</button>
-          <button id="boton4" className="button" onClick={() => botonRespuesta(resFalse[3])}>{resFalse[3]}</button>
+          <button id="boton1" className="button" onClick={() => botonRespuesta(resFalse[1])}> {resFalse[1]}</button>
+          <button id="boton2" className="button" onClick={() => botonRespuesta(resFalse[2])}> {resFalse[2]}</button>
+          <button id="boton3" className="button" onClick={() => botonRespuesta(resFalse[0])}> {resFalse[0]}</button>
+          <button id="boton4" className="button" onClick={() => botonRespuesta(resFalse[3])}> {resFalse[3]}</button>
         </div>
+        <button id="botonSiguiente" className="button" onClick={() =>clickSiguiente()} > SIGUIENTE</button>
       </Container>
-      )}
       </>
   );
 };

webapp/src/index.css

@@ -22,3 +22,8 @@ body{
   background-color: #8A6FD6 ;
 }
 
+body h1{
+  font-family: 'Verdana';
+  text-align: center; /* Centra el texto */
+  margin-bottom: 30px;
+}