From 7dbd2743d0a5775a8069ecedccbc30998c474e13 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Tue, 19 Mar 2024 10:44:54 +0100
Subject: [PATCH 01/11] =?UTF-8?q?A=C3=B1adiendo=20distintos=20parametros?=
 =?UTF-8?q?=20al=20ranking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 statsservice/model/stats-getter.js | 28 ++++++++++--
 statsservice/stats-service.js      |  2 +-
 webapp/src/pages/Stats/Stats.js    | 70 +++++++++++++++++++++---------
 3 files changed, 74 insertions(+), 26 deletions(-)

diff --git a/statsservice/model/stats-getter.js b/statsservice/model/stats-getter.js
index cf47411d..2e1981d8 100644
--- a/statsservice/model/stats-getter.js
+++ b/statsservice/model/stats-getter.js
@@ -58,16 +58,35 @@ class StatsForUser {
             ratioCorrect: newRatioCorrect,
             avgTime: newAvgTime
         };
-    }
+    };
 
-    async getRanking(gamemode) {
+    async getRanking(gamemode, filterBy) {
         try {
-            var stats = await Stats.find({gamemode:gamemode}).sort({ avgPoints: -1 }).limit(10);
+            let sortBy, displayField;
+    
+            switch (filterBy) {
+                case "avgPoints":
+                    sortBy = { avgPoints: -1 };
+                    displayField = "avgPoints";
+                    break;
+                case "totalPoints":
+                    sortBy = { totalPoints: -1 };
+                    displayField = "totalPoints";
+                    break;
+                case "ratioCorrect":
+                    sortBy = { ratioCorrect: -1 };
+                    displayField = "ratioCorrect";
+                    break;
+                default:
+                    return null;
+            }
+    
+            const stats = await Stats.find({ gamemode: gamemode }).sort(sortBy).limit(10);
     
             if (stats && stats.length > 0) {
                 return stats.map(stat => ({
                     username: stat.username,
-                    avgPoints: stat.avgPoints
+                    [displayField]: stat[displayField]
                 }));
             } else {
                 return null;
@@ -78,6 +97,7 @@ class StatsForUser {
         }
     }
     
+    
 }
 
 module.exports = StatsForUser;
diff --git a/statsservice/stats-service.js b/statsservice/stats-service.js
index 88ee82be..b0c3c2e9 100644
--- a/statsservice/stats-service.js
+++ b/statsservice/stats-service.js
@@ -88,7 +88,7 @@ app.get("/stats", async (req, res) => {
 
 app.get("/ranking", async (req, res) => {
   try {
-    var data = await statsGetter.getRanking(req.query.gamemode);
+    var data = await statsGetter.getRanking(req.query.gamemode,req.query.filterBy);
     res.json(data);
 
   } catch (error) {
diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
index c5560ce6..b63a6718 100644
--- a/webapp/src/pages/Stats/Stats.js
+++ b/webapp/src/pages/Stats/Stats.js
@@ -10,6 +10,7 @@ const Stats = () => {
   const [stats, setStats] = useState(null);
   const [ranking, setRanking] = useState(null);
   const [gamemode, setGamemode] = useState("clasico");
+  const [filterBy, setFilterby] = useState("avgPoints");
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
@@ -30,7 +31,7 @@ const Stats = () => {
 
   const fetchRanking = () => {
     setIsLoading(true);
-    fetch(gatewayUrl+`/ranking?gamemode=${gamemode}`)
+    fetch(gatewayUrl+`/ranking?gamemode=${gamemode}&filterBy=${filterBy}`)
       .then((response) => response.json())
       .then((data) => {
         setRanking(data);
@@ -62,6 +63,32 @@ const Stats = () => {
     fetchStats();
   };
 
+  const getDisplayedField = () => {
+    switch (filterBy) {
+        case "avgPoints":
+            return "Puntos promedio";
+        case "totalPoints":
+            return "Puntos totales";
+        case "ratioCorrect":
+            return "Ratio de aciertos";
+        default:
+            return "";
+    }
+  }
+
+const getDisplayValue = (stat) => {
+    switch (filterBy) {
+        case "avgPoints":
+            return stat.avgPoints.toFixed(2);
+        case "totalPoints":
+            return stat.totalPoints;
+        case "ratioCorrect":
+            return stat.ratioCorrect.toFixed(2);
+        default:
+            return "";
+    }
+}
+
   const getModeName = () => {
     if(gamemode=="clasico"){
       return "Clásico";    
@@ -176,26 +203,27 @@ const Stats = () => {
           </div>
         )}
         {ranking && ranking.length > 0 && (
-                <div>
-                    <h2>Ranking - Modo {getModeName()}</h2>
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Usuario</th>
-                                <th>Puntos promedio</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {ranking.map((stat, index) => (
-                                <tr key={index}>
-                                    <td>{stat.username}</td>
-                                    <td>{stat.avgPoints.toFixed(2)}</td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                </div>
-            )}
+        <div>
+          <h2>Ranking - Modo {getModeName()}</h2>
+          <table>
+            <thead>
+                <tr>
+                    <th>Usuario</th>
+                    <th>{getDisplayedField()}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {ranking.map((stat, index) => (
+                    <tr key={index}>
+                        <td>{stat.username}</td>
+                        <td>{getDisplayValue(stat)}</td>
+                    </tr>
+                ))}
+            </tbody>
+          </table>
+      </div>
+      )}
+
     </div>
     <Footer />
     </>

From b28c33127f2d03fcff9ff6f1e563c7cf389df922 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Tue, 19 Mar 2024 10:48:21 +0100
Subject: [PATCH 02/11] =?UTF-8?q?A=C3=B1adido=20combobox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Stats/Stats.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
index b63a6718..08e9a8f2 100644
--- a/webapp/src/pages/Stats/Stats.js
+++ b/webapp/src/pages/Stats/Stats.js
@@ -13,6 +13,11 @@ const Stats = () => {
   const [filterBy, setFilterby] = useState("avgPoints");
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [displayOptions, setDisplayOptions] = useState([
+    { value: "avgPoints", label: "Puntos promedio" },
+    { value: "totalPoints", label: "Puntos totales" },
+    { value: "ratioCorrect", label: "Ratio de aciertos" }
+  ]);
 
   const fetchStats = () => {
     setIsLoading(true);
@@ -205,6 +210,14 @@ const getDisplayValue = (stat) => {
         {ranking && ranking.length > 0 && (
         <div>
           <h2>Ranking - Modo {getModeName()}</h2>
+          <div>
+            <label htmlFor="displaySelector">Mostrar:</label>
+            <select id="displaySelector" onChange={handleDisplayChange}>
+                {displayOptions.map(option => (
+                    <option key={option.value} value={option.value}>{option.label}</option>
+                ))}
+            </select>
+        </div>
           <table>
             <thead>
                 <tr>

From 5c93b0798fe21e60c6accffc09ea4f2f436d5b6c Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Wed, 20 Mar 2024 12:47:01 +0100
Subject: [PATCH 03/11] Redodeado el tiempo restante

---
 webapp/src/pages/Clasico/Clasico.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index a1a83a32..93d0ad34 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -56,7 +56,8 @@ const JuegoPreguntas = () => {
   }, []);
 
   useEffect(() => {
-    setProgressPercent((tiempoRestante / SECS_PER_QUESTION) * 100);
+    const roundedProgressPercent = ((tiempoRestante / SECS_PER_QUESTION) * 100).toFixed(2);
+    setProgressPercent(roundedProgressPercent);
 
     const timer = setInterval(() => {
       setTiempoRestante((prevTiempo) =>

From 881de302497ceea582e67c775ddda12b678d6c2e Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Wed, 20 Mar 2024 12:47:14 +0100
Subject: [PATCH 04/11] Separado el Ranking a una vista aparte

---
 webapp/src/pages/Ranking/Ranking.js | 113 ++++++++++++++++++++++++++++
 webapp/src/pages/Stats/Stats.js     |  79 -------------------
 2 files changed, 113 insertions(+), 79 deletions(-)
 create mode 100644 webapp/src/pages/Ranking/Ranking.js

diff --git a/webapp/src/pages/Ranking/Ranking.js b/webapp/src/pages/Ranking/Ranking.js
new file mode 100644
index 00000000..730cd09c
--- /dev/null
+++ b/webapp/src/pages/Ranking/Ranking.js
@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from "react";
+
+const Ranking = ({ gatewayUrl, gamemode, filterBy, handleDisplayChange }) => {
+  const [ranking, setRanking] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [displayOptions] = useState([
+    { value: "avgPoints", label: "Puntos promedio" },
+    { value: "totalPoints", label: "Puntos totales" },
+    { value: "ratioCorrect", label: "Ratio de aciertos" }
+  ]);
+
+  const fetchRanking = () => {
+    setIsLoading(true);
+    fetch(`${gatewayUrl}/ranking?gamemode=${gamemode}&filterBy=${filterBy}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setRanking(data);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.error('Error al obtener el ranking:', error);
+        setError(error.message || 'Ha ocurrido un error al obtener el ranking');
+        setIsLoading(false);
+      });
+  };
+  
+  useEffect(() => {
+    fetchRanking();
+  }, [gamemode, filterBy]);
+
+  const getDisplayedField = () => {
+    switch (filterBy) {
+        case "avgPoints":
+            return "Puntos promedio";
+        case "totalPoints":
+            return "Puntos totales";
+        case "ratioCorrect":
+            return "Ratio de aciertos";
+        default:
+            return "";
+    }
+  };
+
+  const getDisplayValue = (stat) => {
+    switch (filterBy) {
+        case "avgPoints":
+            return stat.avgPoints.toFixed(2);
+        case "totalPoints":
+            return stat.totalPoints;
+        case "ratioCorrect":
+            return stat.ratioCorrect.toFixed(2);
+        default:
+            return "";
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div>
+        <h2>Cargando ...</h2>
+        <p>Se está consultando el ranking, espere unos instantes.</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div>
+        <h2>Error: {error}</h2>
+        <p>Ha ocurrido un error al obtener el ranking.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h2>Ranking - Modo {gamemode}</h2>
+      <div>
+        <label htmlFor="displaySelector">Mostrar:</label>
+        <select id="displaySelector" onChange={handleDisplayChange}>
+          {displayOptions.map(option => (
+            <option key={option.value} value={option.value}>{option.label}</option>
+          ))}
+        </select>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>Usuario</th>
+            <th>{getDisplayedField()}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {ranking && ranking.length > 0 ? (
+            ranking.map((stat, index) => (
+              <tr key={index}>
+                <td>{stat.username}</td>
+                <td>{getDisplayValue(stat)}</td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan="2">No hay datos disponibles</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Ranking;
diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
index 08e9a8f2..afa88a01 100644
--- a/webapp/src/pages/Stats/Stats.js
+++ b/webapp/src/pages/Stats/Stats.js
@@ -8,16 +8,9 @@ const Stats = () => {
 
   const [username, setUsername] = useState(localStorage.username);
   const [stats, setStats] = useState(null);
-  const [ranking, setRanking] = useState(null);
   const [gamemode, setGamemode] = useState("clasico");
-  const [filterBy, setFilterby] = useState("avgPoints");
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [displayOptions, setDisplayOptions] = useState([
-    { value: "avgPoints", label: "Puntos promedio" },
-    { value: "totalPoints", label: "Puntos totales" },
-    { value: "ratioCorrect", label: "Ratio de aciertos" }
-  ]);
 
   const fetchStats = () => {
     setIsLoading(true);
@@ -33,26 +26,10 @@ const Stats = () => {
         setIsLoading(false);
       });
   };
-
-  const fetchRanking = () => {
-    setIsLoading(true);
-    fetch(gatewayUrl+`/ranking?gamemode=${gamemode}&filterBy=${filterBy}`)
-      .then((response) => response.json())
-      .then((data) => {
-        setRanking(data);
-        setIsLoading(false);
-      })
-      .catch((error) => {
-        console.error('Error al obtener el ranking:', error);
-        setError(error.message || 'Ha ocurrido un error al obtener el ranking');
-        setIsLoading(false);
-      });
-  };
   
   useEffect(() => {
     const delayDebounceFn = setTimeout(() => {
       fetchStats();
-      fetchRanking();
       },2000);
   
       return () => clearTimeout(delayDebounceFn);
@@ -68,32 +45,6 @@ const Stats = () => {
     fetchStats();
   };
 
-  const getDisplayedField = () => {
-    switch (filterBy) {
-        case "avgPoints":
-            return "Puntos promedio";
-        case "totalPoints":
-            return "Puntos totales";
-        case "ratioCorrect":
-            return "Ratio de aciertos";
-        default:
-            return "";
-    }
-  }
-
-const getDisplayValue = (stat) => {
-    switch (filterBy) {
-        case "avgPoints":
-            return stat.avgPoints.toFixed(2);
-        case "totalPoints":
-            return stat.totalPoints;
-        case "ratioCorrect":
-            return stat.ratioCorrect.toFixed(2);
-        default:
-            return "";
-    }
-}
-
   const getModeName = () => {
     if(gamemode=="clasico"){
       return "Clásico";    
@@ -207,36 +158,6 @@ const getDisplayValue = (stat) => {
           </table>
           </div>
         )}
-        {ranking && ranking.length > 0 && (
-        <div>
-          <h2>Ranking - Modo {getModeName()}</h2>
-          <div>
-            <label htmlFor="displaySelector">Mostrar:</label>
-            <select id="displaySelector" onChange={handleDisplayChange}>
-                {displayOptions.map(option => (
-                    <option key={option.value} value={option.value}>{option.label}</option>
-                ))}
-            </select>
-        </div>
-          <table>
-            <thead>
-                <tr>
-                    <th>Usuario</th>
-                    <th>{getDisplayedField()}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {ranking.map((stat, index) => (
-                    <tr key={index}>
-                        <td>{stat.username}</td>
-                        <td>{getDisplayValue(stat)}</td>
-                    </tr>
-                ))}
-            </tbody>
-          </table>
-      </div>
-      )}
-
     </div>
     <Footer />
     </>

From 20452ff13eeb30443a6152610a861a3b53caa382 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Wed, 20 Mar 2024 13:06:33 +0100
Subject: [PATCH 05/11] =?UTF-8?q?Arreglando=20fallos=20y=20a=C3=B1adido=20?=
 =?UTF-8?q?link=20de=20ranking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/App.js                    | 2 ++
 webapp/src/pages/Clasico/Clasico.js  | 4 +---
 webapp/src/pages/Ranking/Ranking.css | 0
 3 files changed, 3 insertions(+), 3 deletions(-)
 create mode 100644 webapp/src/pages/Ranking/Ranking.css

diff --git a/webapp/src/App.js b/webapp/src/App.js
index dee6ef63..08eab810 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -5,6 +5,7 @@ import Clasico from "./pages/Clasico/Clasico.js";
 import Bateria from "./pages/Bateria/Bateria.js";
 import WrongRoute from "./pages/WrongRoute/WrongRoute.js";
 import Stats from "./pages/Stats/Stats.js";
+import Ranking from "./pages/Ranking/Ranking.js";
 import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ProtectedRoute } from "./routers/ProtectedRoute.js";
@@ -26,6 +27,7 @@ function App() {
           <Route path="/home/clasico" element={<Clasico />} />
           <Route path="/home/bateria" element={<Bateria />} />
           <Route path="/stats" element={<Stats />} />
+          <Route path="/ranking" element={<Ranking />} />
           <Route path="/config" element={<Config />} />
         </Route>
 
diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index 93d0ad34..48cdbb07 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -115,10 +115,8 @@ const JuegoPreguntas = () => {
     if (respuestaSeleccionada === preguntaActual.correcta) {
       setPuntuacion(puntuacion + 1);
       setPreguntasCorrectas(preguntasCorrectas + 1);
-      console.log("bien");
     } else {
       setPreguntasFalladas(preguntasFalladas + 1);
-      console.log("mal");
     }
     setTiempoTotal(tiempoTotal+tiempoRestante);
     setRespuestaSeleccionada(null);
@@ -223,7 +221,7 @@ const JuegoPreguntas = () => {
               </button>
           </div>
           
-          <div className="timer">Tiempo restante: {tiempoRestante}</div>
+          <div className="timer">Tiempo restante: {parseFloat(tiempoRestante).toFixed(2).toString()}</div>
           <div className="timer">
             Tiempo restante: {Math.floor(tiempoRestante)}
           </div>
diff --git a/webapp/src/pages/Ranking/Ranking.css b/webapp/src/pages/Ranking/Ranking.css
new file mode 100644
index 00000000..e69de29b

From 245f088d1033c1f09f077c60a0e3ac5bea9173fd Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Wed, 20 Mar 2024 13:28:05 +0100
Subject: [PATCH 06/11] Arreglos

---
 webapp/src/pages/Ranking/Ranking.js | 99 +++++++++++++++++++----------
 webapp/src/pages/Sobre/Sobre.js     |  3 +-
 2 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/webapp/src/pages/Ranking/Ranking.js b/webapp/src/pages/Ranking/Ranking.js
index 730cd09c..c9d0b935 100644
--- a/webapp/src/pages/Ranking/Ranking.js
+++ b/webapp/src/pages/Ranking/Ranking.js
@@ -1,18 +1,22 @@
 import React, { useState, useEffect } from "react";
 
-const Ranking = ({ gatewayUrl, gamemode, filterBy, handleDisplayChange }) => {
-  const [ranking, setRanking] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
+const Ranking = () => {
+  const gatewayUrl = process.env.GATEWAY_SERVICE_URL || "http://localhost:8000";
+
+  const [ranking, setRanking] = useState([]);
+  const [filterBy, setFilterBy] = useState("avgPoints");
   const [displayOptions] = useState([
     { value: "avgPoints", label: "Puntos promedio" },
     { value: "totalPoints", label: "Puntos totales" },
     { value: "ratioCorrect", label: "Ratio de aciertos" }
   ]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [gamemode, setGamemode] = useState("clasico");
 
   const fetchRanking = () => {
     setIsLoading(true);
-    fetch(`${gatewayUrl}/ranking?gamemode=${gamemode}&filterBy=${filterBy}`)
+    fetch(gatewayUrl + `/ranking?gamemode=${gamemode}&filterBy=${filterBy}`)
       .then((response) => response.json())
       .then((data) => {
         setRanking(data);
@@ -24,37 +28,55 @@ const Ranking = ({ gatewayUrl, gamemode, filterBy, handleDisplayChange }) => {
         setIsLoading(false);
       });
   };
-  
+
+  const getModeName = () => {
+    if(gamemode=="clasico"){
+      return "Clásico";    
+    }else if(gamemode=="bateria"){
+      return "Batería de sabios";
+    }
+    return gamemode;
+  };
+
   useEffect(() => {
     fetchRanking();
   }, [gamemode, filterBy]);
 
+  const handleDisplayChange = (event) => {
+    setFilterBy(event.target.value);
+  };
+
   const getDisplayedField = () => {
     switch (filterBy) {
-        case "avgPoints":
-            return "Puntos promedio";
-        case "totalPoints":
-            return "Puntos totales";
-        case "ratioCorrect":
-            return "Ratio de aciertos";
-        default:
-            return "";
+      case "avgPoints":
+        return "Puntos promedio";
+      case "totalPoints":
+        return "Puntos totales";
+      case "ratioCorrect":
+        return "Ratio de aciertos";
+      default:
+        return "";
     }
   };
 
   const getDisplayValue = (stat) => {
     switch (filterBy) {
-        case "avgPoints":
-            return stat.avgPoints.toFixed(2);
-        case "totalPoints":
-            return stat.totalPoints;
-        case "ratioCorrect":
-            return stat.ratioCorrect.toFixed(2);
-        default:
-            return "";
+      case "avgPoints":
+        return stat.avgPoints.toFixed(2);
+      case "totalPoints":
+        return stat.totalPoints;
+      case "ratioCorrect":
+        return stat.ratioCorrect.toFixed(2);
+      default:
+        return "";
     }
   };
 
+  const handleGamemodeChange = (mode) => {
+    setGamemode(mode);
+    fetchRanking();
+  };
+
   if (isLoading) {
     return (
       <div>
@@ -68,7 +90,7 @@ const Ranking = ({ gatewayUrl, gamemode, filterBy, handleDisplayChange }) => {
     return (
       <div>
         <h2>Error: {error}</h2>
-        <p>Ha ocurrido un error al obtener el ranking.</p>
+        <p>Ha ocurrido un error al obtener el ranking</p>
       </div>
     );
   }
@@ -84,6 +106,20 @@ const Ranking = ({ gatewayUrl, gamemode, filterBy, handleDisplayChange }) => {
           ))}
         </select>
       </div>
+      <div>
+        <button
+          className={gamemode === "clasico" ? "active" : ""}
+          onClick={() => handleGamemodeChange("clasico")}
+        >
+        Clásico
+        </button>
+        <button
+          className={gamemode === "bateria" ? "active" : ""}
+          onClick={() => handleGamemodeChange("bateria")}
+        >
+          Batería de sabios
+        </button>
+      </div>
       <table>
         <thead>
           <tr>
@@ -92,18 +128,12 @@ const Ranking = ({ gatewayUrl, gamemode, filterBy, handleDisplayChange }) => {
           </tr>
         </thead>
         <tbody>
-          {ranking && ranking.length > 0 ? (
-            ranking.map((stat, index) => (
-              <tr key={index}>
-                <td>{stat.username}</td>
-                <td>{getDisplayValue(stat)}</td>
-              </tr>
-            ))
-          ) : (
-            <tr>
-              <td colSpan="2">No hay datos disponibles</td>
+          {ranking.map((stat, index) => (
+            <tr key={index}>
+              <td>{stat.username}</td>
+              <td>{getDisplayValue(stat)}</td>
             </tr>
-          )}
+          ))}
         </tbody>
       </table>
     </div>
@@ -111,3 +141,4 @@ const Ranking = ({ gatewayUrl, gamemode, filterBy, handleDisplayChange }) => {
 };
 
 export default Ranking;
+
diff --git a/webapp/src/pages/Sobre/Sobre.js b/webapp/src/pages/Sobre/Sobre.js
index 54514024..17baee18 100644
--- a/webapp/src/pages/Sobre/Sobre.js
+++ b/webapp/src/pages/Sobre/Sobre.js
@@ -7,8 +7,7 @@ const Sobre = () => {
   const designers = [
     { name: 'Martín Cancio Barrera', id: 'UO287561', github: 'https://github.com/CANCI0' },
     { name: 'Iyán Fernández Riol', id: 'UO288231', github: 'https://github.com/iyanfdezz' },
-    { name: 'Rodrigo García Iglesias', id: 'UO276396', github: 'https://github.com/Rodrox11' },
-    { name: 'Alfredo Jirout Cid', id: 'UO288443', github: 'https://github.com/UO288443' }
+    { name: 'Rodrigo García Iglesias', id: 'UO276396', github: 'https://github.com/Rodrox11' }
   ];
 
   return (

From 09c488aa95f24d64ab959c7cf490c4238359fa74 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 21 Mar 2024 17:16:01 +0100
Subject: [PATCH 07/11] Ya se guarda el tiempo por pergunta

---
 webapp/src/pages/Bateria/Bateria.js | 10 ++++++----
 webapp/src/pages/Clasico/Clasico.js | 12 +++++++-----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/webapp/src/pages/Bateria/Bateria.js b/webapp/src/pages/Bateria/Bateria.js
index ff6a7a64..324ae408 100644
--- a/webapp/src/pages/Bateria/Bateria.js
+++ b/webapp/src/pages/Bateria/Bateria.js
@@ -54,7 +54,11 @@ const JuegoPreguntas = () => {
   useEffect(() => {
     if (tiempoRestante === 0) {
       setJuegoTerminado(true);
-
+      if(preguntasCorrectas+preguntasFalladas>0){
+        const preguntasTotales=preguntasCorrectas+preguntasFalladas;
+        const tMedio=180/preguntasTotales;
+        setTiempoMedio(tMedio);
+      }
       guardarPartida();
     }
     const timer = setInterval(() => {
@@ -64,9 +68,7 @@ const JuegoPreguntas = () => {
   }, [tiempoRestante]);
 
   const guardarPartida = async () => {
-    if(preguntasCorrectas+preguntasFalladas>0){
-      setTiempoMedio(180/(preguntasCorrectas+preguntasFalladas));
-    }
+    
     const username = localStorage.getItem("username");
     const newGame = {
       username: username,
diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index 48cdbb07..09b254f6 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -129,7 +129,9 @@ const JuegoPreguntas = () => {
     } else {
       setJuegoTerminado(true);
       if (preguntasCorrectas + preguntasFalladas > 0) {
-        setTiempoMedio(tiempoTotal / (preguntasCorrectas + preguntasFalladas));
+        const preguntasTotales=preguntasCorrectas+preguntasFalladas;
+        const tMedio=tiempoTotal/preguntasTotales;
+        setTiempoMedio(tMedio);
       }
       guardarPartida();
     }
@@ -214,7 +216,10 @@ const JuegoPreguntas = () => {
           </div>
           <div className="answer">
           <button
-                onClick={() => setTiempoRestante(0)}
+                onClick={() => {
+                  setTiempoTotal(tiempoTotal+tiempoRestante);
+                  setTiempoRestante(0);
+                }}
                 disabled={tiempoRestante === 0 || juegoTerminado}
               >
               Responder
@@ -222,9 +227,6 @@ const JuegoPreguntas = () => {
           </div>
           
           <div className="timer">Tiempo restante: {parseFloat(tiempoRestante).toFixed(2).toString()}</div>
-          <div className="timer">
-            Tiempo restante: {Math.floor(tiempoRestante)}
-          </div>
           <div className="points">Puntuación: {puntuacion}</div>
           <div className="progressBarContainer">
             <div

From e93d42d8c1387fb4121895a0797ff939b412fdf0 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 21 Mar 2024 17:16:21 +0100
Subject: [PATCH 08/11] =?UTF-8?q?A=C3=B1adido=20filtrado=20de=20ranking=20?=
 =?UTF-8?q?por=20tiempo=20medio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Ranking/Ranking.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/webapp/src/pages/Ranking/Ranking.js b/webapp/src/pages/Ranking/Ranking.js
index c9d0b935..9f89d11f 100644
--- a/webapp/src/pages/Ranking/Ranking.js
+++ b/webapp/src/pages/Ranking/Ranking.js
@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from "react";
+import Nav from "../../components/Nav/Nav.js";
+import Footer from "../../components/Footer/Footer.js";
 
 const Ranking = () => {
   const gatewayUrl = process.env.GATEWAY_SERVICE_URL || "http://localhost:8000";
@@ -8,7 +10,8 @@ const Ranking = () => {
   const [displayOptions] = useState([
     { value: "avgPoints", label: "Puntos promedio" },
     { value: "totalPoints", label: "Puntos totales" },
-    { value: "ratioCorrect", label: "Ratio de aciertos" }
+    { value: "ratioCorrect", label: "Ratio de aciertos" },
+    { value: "avgTime", label: "Tiempo por pregunta (s)" }
   ]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -53,7 +56,9 @@ const Ranking = () => {
       case "totalPoints":
         return "Puntos totales";
       case "ratioCorrect":
-        return "Ratio de aciertos";
+        return "Ratio de aciertos (%)";
+        case "avgTime":
+        return "Tiempo por pregunta (s)";
       default:
         return "";
     }
@@ -62,11 +67,13 @@ const Ranking = () => {
   const getDisplayValue = (stat) => {
     switch (filterBy) {
       case "avgPoints":
-        return stat.avgPoints.toFixed(2);
+        return Math.round(stat.avgPoints * 100) / 100;
       case "totalPoints":
         return stat.totalPoints;
       case "ratioCorrect":
-        return stat.ratioCorrect.toFixed(2);
+        return Math.round(stat.ratioCorrect * 100) / 100;
+        case "avgTime":
+        return Math.round(stat.avgTime * 100) / 100;
       default:
         return "";
     }
@@ -96,8 +103,10 @@ const Ranking = () => {
   }
 
   return (
+    <>
+    <Nav/>
     <div>
-      <h2>Ranking - Modo {gamemode}</h2>
+      <h2>Ranking - Modo {getModeName()}</h2>
       <div>
         <label htmlFor="displaySelector">Mostrar:</label>
         <select id="displaySelector" onChange={handleDisplayChange}>
@@ -137,6 +146,8 @@ const Ranking = () => {
         </tbody>
       </table>
     </div>
+    <Footer/>
+    </>
   );
 };
 

From ee4545609cdadac08e20fd74dfdcd7ed3e371d37 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 21 Mar 2024 17:25:25 +0100
Subject: [PATCH 09/11] Ya se puede filtrar por tiempo medio

---
 statsservice/model/stats-getter.js  | 4 ++++
 webapp/src/pages/Ranking/Ranking.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/statsservice/model/stats-getter.js b/statsservice/model/stats-getter.js
index 2e1981d8..04d2ccae 100644
--- a/statsservice/model/stats-getter.js
+++ b/statsservice/model/stats-getter.js
@@ -77,6 +77,10 @@ class StatsForUser {
                     sortBy = { ratioCorrect: -1 };
                     displayField = "ratioCorrect";
                     break;
+                    case "avgTime":
+                    sortBy = { avgTime: -1 };
+                    displayField = "avgTime";
+                    break;
                 default:
                     return null;
             }
diff --git a/webapp/src/pages/Ranking/Ranking.js b/webapp/src/pages/Ranking/Ranking.js
index 9f89d11f..4159c214 100644
--- a/webapp/src/pages/Ranking/Ranking.js
+++ b/webapp/src/pages/Ranking/Ranking.js
@@ -137,7 +137,7 @@ const Ranking = () => {
           </tr>
         </thead>
         <tbody>
-          {ranking.map((stat, index) => (
+          {ranking && ranking.map((stat, index) => (
             <tr key={index}>
               <td>{stat.username}</td>
               <td>{getDisplayValue(stat)}</td>

From 2772b56d6092edac4a13fb32b4fc1e407e445d9a Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 21 Mar 2024 18:55:52 +0100
Subject: [PATCH 10/11] =?UTF-8?q?Ya=20se=20guarda=20la=20=C3=BAltima=20pre?=
 =?UTF-8?q?gunta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Clasico/Clasico.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index 09b254f6..bb7fff29 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -112,34 +112,46 @@ const JuegoPreguntas = () => {
   };
 
   const handleSiguientePregunta = () => {
-    if (respuestaSeleccionada === preguntaActual.correcta) {
+    if (respuestaSeleccionada === preguntaActual.correcta) { 
+      const newCorrectQuestions=preguntasCorrectas+1;
       setPuntuacion(puntuacion + 1);
-      setPreguntasCorrectas(preguntasCorrectas + 1);
+      setPreguntasCorrectas(newCorrectQuestions);
+      console.log("bien")
     } else {
-      setPreguntasFalladas(preguntasFalladas + 1);
+      const newIncorrectQuestions=preguntasFalladas+1;
+      setPreguntasFalladas(newIncorrectQuestions);
+      console.log("mal")
     }
     setTiempoTotal(tiempoTotal+tiempoRestante);
     setRespuestaSeleccionada(null);
     setTiempoRestante(10);
     setProgressPercent(100);
 
-    if (indicePregunta + 1 < preguntas.length) {
+    if (indicePregunta+1 < preguntas.length) {
       setIndicePregunta(indicePregunta + 1);
       setPreguntaActual(preguntas[indicePregunta + 1]);
     } else {
       setJuegoTerminado(true);
       if (preguntasCorrectas + preguntasFalladas > 0) {
         const preguntasTotales=preguntasCorrectas+preguntasFalladas;
+        console.log(preguntasCorrectas);
+        console.log(preguntasFalladas);
         const tMedio=tiempoTotal/preguntasTotales;
         setTiempoMedio(tMedio);
+        
       }
-      guardarPartida();
     }
+    
     };
 
+    useEffect(() => {
+      if (juegoTerminado) {
+        guardarPartida();
+      }
+    }, [juegoTerminado]);
+
   const guardarPartida = async () => {
     
-
     //Now we store the game in the stats DB
     const username = localStorage.getItem("username");
     const newGame = {

From 436b27cbe99f49600087b6326aa0fe7b2185b330 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 21 Mar 2024 19:03:04 +0100
Subject: [PATCH 11/11] Ya se puede volver a filtrar por puntos de media

---
 webapp/src/pages/Ranking/Ranking.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/webapp/src/pages/Ranking/Ranking.js b/webapp/src/pages/Ranking/Ranking.js
index 4159c214..26dd624b 100644
--- a/webapp/src/pages/Ranking/Ranking.js
+++ b/webapp/src/pages/Ranking/Ranking.js
@@ -11,7 +11,8 @@ const Ranking = () => {
     { value: "avgPoints", label: "Puntos promedio" },
     { value: "totalPoints", label: "Puntos totales" },
     { value: "ratioCorrect", label: "Ratio de aciertos" },
-    { value: "avgTime", label: "Tiempo por pregunta (s)" }
+    { value: "avgTime", label: "Tiempo por pregunta (s)" },
+    { value: "avgPoints", label: "Reestablecer por defecto" }
   ]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -57,7 +58,7 @@ const Ranking = () => {
         return "Puntos totales";
       case "ratioCorrect":
         return "Ratio de aciertos (%)";
-        case "avgTime":
+      case "avgTime":
         return "Tiempo por pregunta (s)";
       default:
         return "";