💄 CSS cambiado de la app

Arquisoft · Apr 10, 2024 · 11f5964 · 11f5964
1 parent d0d3bb6
commit 11f5964
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 43 deletions.
diff --git 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
diff --git 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
@@ -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 = () => {
               <svg>
                 <circle cx="70" cy="70" r="70" />
                 <circle
-                  strokeDashoffset={440 - (percentageTime / 100) * 440}
+                  strokeDashoffset={(440 - (percentageTime / 100) * 440).toFixed(2)}
+
                   cx="70"
                   cy="70"
                   r="70"
@@ -417,7 +421,12 @@ const getQuestions = () => {
         </Typography>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center', marginTop: '2em' }}>
           {answerOptions.map((option, index) => (
-            <Button id={`button_${index}`} title="btnsPreg" key={index} variant="contained" color="primary" onClick={() => { stopTimer(); setIsTimerActive(false); handleAnswerClick(option, index);  }}>
+            <Button id={`button_${index}`} title="btnsPreg" key={index} variant="contained" color="primary" onClick={() => { 
+
+              stopTimer();
+              handleAnswerClick(option, index);
+
+              }}>
             {option}
           </Button>
 

diff --git a/webapp/src/components/MainPage.css b/webapp/src/components/MainPage.css
@@ -4,25 +4,43 @@ 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;
     height: 3rem;
 }
 
 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
@@ -34,7 +34,10 @@ const MainPage = () => {
 
             <div title='main-title'>
                 <Typography component="h1" className='main-title' variant="h5" sx={{ textAlign: 'center' }}>
-                    ¡Bienvenido a WIQ 2024!
+                    ¡Bienvenido a
+                </Typography>
+                <Typography component="h2" className='main-title animate__animated animate__backInLeft animate__tada' variant="h5" sx={{ textAlign: 'center' }}>
+                    WIQ 2024!
                 </Typography>
             </div>
 

diff --git a/webapp/src/components/Navbar.css 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
@@ -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 (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav className="navbar navbar-expand-lg">
       <div className="container">
         <Link className="navbar-brand" to="/">WIQ 2024</Link>
         <button className="navbar-toggler" type="button" onClick={toggleHistorialDropdown}>

diff --git a/webapp/src/index.css b/webapp/src/index.css
@@ -1,3 +1,10 @@
+html, body, main, #root {
+  background-color: #a5b8d4;
+  overflow: hidden;
+}
+
+
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -10,6 +10,7 @@ import HistoricalUserData from './components/HistoricalUserData';
 import RegisteredUsers from './components/RegisteredUsers';
 
 import './index.css';
+import 'animate.css';
 import 'bootstrap/dist/css/bootstrap.min.css';