From 11f59643c65e717774a51d0ed4c68049f9188edc Mon Sep 17 00:00:00 2001 From: coral2742 Date: Thu, 11 Apr 2024 01:06:02 +0200 Subject: [PATCH] :lipstick: CSS cambiado de la app --- questions/creationservice/creation-service.js | 2 +- webapp/package-lock.json | 6 ++ webapp/package.json | 1 + webapp/src/components/Game.js | 77 +++++++++++-------- webapp/src/components/MainPage.css | 31 ++++++-- webapp/src/components/MainPage.js | 5 +- webapp/src/components/Navbar.css | 25 ++++++ webapp/src/components/Navbar.js | 3 +- webapp/src/index.css | 7 ++ webapp/src/index.js | 1 + 10 files changed, 115 insertions(+), 43 deletions(-) create mode 100644 webapp/src/components/Navbar.css diff --git a/questions/creationservice/creation-service.js b/questions/creationservice/creation-service.js index 1243145c..ca4c1c3a 100644 --- a/questions/creationservice/creation-service.js +++ b/questions/creationservice/creation-service.js @@ -24,7 +24,7 @@ var randomQuerySelector; // Array of the possible queries var queries = ['SELECT DISTINCT ?questionObject ?questionObjectLabel ?answer ?answerLabel WHERE { ?questionObject wdt:P31 wd:Q6256. ?questionObject wdt:P36 ?answer. SERVICE wikibase:label {bd:serviceParam wikibase:language "[AUTO_LANGUAGE],es".}}']; // Array of the possible questions -var questions = ["¿Cual es la capital de "]; +var questions = ["¿Cuál es la capital de "]; // Recieves the information of the query and select wich data use on the question function getQuestionInfo(info){ diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 87eed15b..f4ac511d 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -14,6 +14,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", + "animate.css": "^4.1.1", "axios": "^1.6.5", "bootstrap": "^5.3.3", "react": "^18.2.0", @@ -6591,6 +6592,11 @@ "ajv": "^6.9.1" } }, + "node_modules/animate.css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" + }, "node_modules/ansi-align": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index 5cffdeed..0b85e3cd 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -9,6 +9,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", + "animate.css": "^4.1.1", "axios": "^1.6.5", "bootstrap": "^5.3.3", "react": "^18.2.0", diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js index 1418ba46..233032d4 100644 --- a/webapp/src/components/Game.js +++ b/webapp/src/components/Game.js @@ -56,17 +56,21 @@ const Game = () => { const [openDialog, setOpenDialog] = useState(false); const handleDialogOpen = () => { + setIsTimerActive(false); setOpenDialog(true); }; - + const handleDialogClose = () => { + setIsTimerActive(true); setOpenDialog(false); + runTimer(); }; + const runTimer = () => { // Calcular el tiempo restante para el temporizador const remainingTime = time; - setTime(remainingTime); // Establecer el tiempo restante + setTime(remainingTime); setIsTimerActive(true); }; @@ -82,27 +86,27 @@ const Game = () => { + useEffect(() => { const id = setInterval(() => { - if (isTimerActive) { // Solo decrementa el tiempo si el temporizador está activo - setTime((prev) => { - if (prev > 0) { - return prev - 1; - } else { - // Se acabó el tiempo - setTimedOut(true); - const buttons = document.querySelectorAll('button[title="btnsPreg"]'); - buttons.forEach(button => { - button.disabled = true; - button.onmouse = null; - }); - } - }); - } + setTime(prev => { + if (prev > 0) { + return prev - 1; + } else { + setTimedOut(true); + const buttons = document.querySelectorAll('button[title="btnsPreg"]'); + buttons.forEach(button => { + button.disabled = true; + button.onmouse = null; + }); + clearInterval(id); // Clear the interval when the time runs out + } + }); }, 1000); - - return () => clearInterval(id); - }, [isTimerActive, setIsTimerActive]); + + return () => clearInterval(id); // Clear the interval on component unmount + }, [isTimerActive, isTimedOut]); + // Calcular el porcentaje de tiempo transcurrido para el círculo del temporizador @@ -122,6 +126,7 @@ const Game = () => { const restartTimer = () => { setTime(20); // Reiniciar el tiempo a 20 segundos setIsTimerActive(true); + setTimedOut(false); }; @@ -146,7 +151,7 @@ const Game = () => { setTimeout(() => { finishGame(); setFinished(true); - }, 4000); + }, 1000); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [correctCounter]); @@ -164,6 +169,8 @@ const Game = () => { // This method will call the create question service const handleShowQuestion = async () => { try{ + setIsTimerActive(false); + // It makes a petition to the api and store the response const response = await axios.get(`${apiEndpoint}/createquestion`, { }); // Extract all the info of the response and store it @@ -188,22 +195,23 @@ const Game = () => { incrementQuestion(); - // Poner temporizador a 20 segundos - restartTimer(); - setTimedOut(false); + }catch (error){ console.error('Error:', error); } + // Poner temporizador a 20 segundos + restartTimer(); + } // Method that checks if the answer clicked is the correct one const handleAnswerClick = (option, index) => { - // parar el temporizador - stopTimer(); + // Detener el temporizador + setIsTimerActive(false); // Almacenar la opción seleccionada por el usuario en gameUserOptions setGameUserOptions(prevUserOptions => [...prevUserOptions, option]); @@ -224,8 +232,6 @@ const Game = () => { const buttonIdCorrect = `button_${correctIndex}`; const correctButton = document.getElementById(buttonIdCorrect); - console.log("BOTON A COMPROBAR: " + correctButton.textContent); - if (correctButton.textContent === correctOption) { correctButton.style.backgroundColor = "rgba(79, 141, 18, 0.726)"; } @@ -240,7 +246,6 @@ const Game = () => { button.onmouse = null; }); - decrementQuestionsToAnswer(); if (!isGameFinished()) { @@ -341,14 +346,12 @@ const getQuestions = () => { useEffect(() => { - if (isTimedOut) { + if (isTimedOut && !isFinished) { // mostrar la respuesta correcta for (let correctIndex = 0; correctIndex < 4; correctIndex++){ const buttonIdCorrect = `button_${correctIndex}`; const correctButton = document.getElementById(buttonIdCorrect); - console.log("BOTON A COMPROBAR: " + correctButton.textContent); - if (correctButton.textContent === correctOption) { correctButton.style.backgroundColor = "rgba(79, 141, 18, 0.726)"; } @@ -399,7 +402,8 @@ const getQuestions = () => { {
{answerOptions.map((option, index) => ( - diff --git a/webapp/src/components/MainPage.css b/webapp/src/components/MainPage.css index ac5acec7..dee8e995 100644 --- a/webapp/src/components/MainPage.css +++ b/webapp/src/components/MainPage.css @@ -4,16 +4,34 @@ div[title="main"] { } div[title="main-title"] > h1 { - margin: 2rem; + margin: 1.5rem; color: rgb(24, 46, 63); font-size: 3rem; - font-weight: 600; + font-weight: 400; +} + +div[title="main-title"] > h2 { + margin: -2rem; + color: #4c8dbf; + font-size: 4rem; + font-weight: bold; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + + +@keyframes slide { + from { + transform: translateX(0px); + } + to { + transform: translateX(20px); + } } div[title="main"]>button:hover { background-color: rgb(189, 216, 255); - color: rgb(0, 125, 254); + color: #007dfe; font-weight: 600; width: auto; font-size: 1em; @@ -21,8 +39,8 @@ div[title="main"]>button:hover { } div[title="main"]>button{ - background-color: rgb(0, 125, 254); - color: rgb(189, 216, 255); + background-color: #0155B7; + color: white; font-weight: 600; width: auto; font-size: 1em; @@ -39,8 +57,9 @@ div[title="main"]>button{ } .img-container img { - width: 100%; + width: 75%; height: auto; + animation: slide 3s ease infinite alternate; } @media (min-width: 768px) { diff --git a/webapp/src/components/MainPage.js b/webapp/src/components/MainPage.js index 45edc11d..9d076d21 100644 --- a/webapp/src/components/MainPage.js +++ b/webapp/src/components/MainPage.js @@ -34,7 +34,10 @@ const MainPage = () => {
- ¡Bienvenido a WIQ 2024! + ¡Bienvenido a + + + WIQ 2024!
diff --git a/webapp/src/components/Navbar.css b/webapp/src/components/Navbar.css new file mode 100644 index 00000000..8323e580 --- /dev/null +++ b/webapp/src/components/Navbar.css @@ -0,0 +1,25 @@ +.nav-link { + color: #4c8dbf; + font-weight: 400; +} + +.nav-link:hover { + color: #BCC3C5; + font-weight: 400; +} + +.navbar-brand { + color: #0c3667; + font-weight: 900; + font-size: 2rem; +} + +nav, .dropdown-menu, .dropdown-item { + background-color: #4c8dbf; + border: none; +} + + +.dropdown-item { + color: #4c8dbf; +} diff --git a/webapp/src/components/Navbar.js b/webapp/src/components/Navbar.js index cf1a9df5..661a54dd 100644 --- a/webapp/src/components/Navbar.js +++ b/webapp/src/components/Navbar.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { Link } from 'react-router-dom'; +import './Navbar.css'; const Navbar = () => { const [historialDropdownOpen, setHistorialDropdownOpen] = useState(false); @@ -9,7 +10,7 @@ const Navbar = () => { }; return ( -