diff --git a/docs/images/05_nivel_2.png b/docs/images/05_nivel_2.png index 76028af..2f6812c 100644 Binary files a/docs/images/05_nivel_2.png and b/docs/images/05_nivel_2.png differ diff --git a/webapp/src/components/Estilos/juego.css b/webapp/src/components/Estilos/juego.css index 28f2529..2aa49a0 100644 --- a/webapp/src/components/Estilos/juego.css +++ b/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 { diff --git a/webapp/src/components/Pages/Home.js b/webapp/src/components/Pages/Home.js index 9293b37..e8fcb19 100644 --- a/webapp/src/components/Pages/Home.js +++ b/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

Home

; + return ( + <> + +

WIQ_es05

+
+ + +
+
+ + ); }; export default Home; \ No newline at end of file diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js index 029e87d..e30ce60 100644 --- a/webapp/src/components/Pages/Juego.js +++ b/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,9 +52,15 @@ 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); @@ -43,25 +68,16 @@ const Juego = ({isLogged}) => { return ( <> - {respondido ? ( - <> - {victoria ? ( -

ACERTASTE

- ) : ( -

FALLASTE

- )} - - ) : (

{pregunta}

- - - - + + + +
+
- )} ); }; diff --git a/webapp/src/index.css b/webapp/src/index.css index 49e8693..0ddb49c 100644 --- a/webapp/src/index.css +++ b/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; +}