Ya funciona

Arquisoft · Feb 20, 2024 · 348c09b · 348c09b
1 parent e7d2996
commit 348c09b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 45 deletions.
diff --git a/webapp/src/pages/Clasico/Clasico.css b/webapp/src/pages/Clasico/Clasico.css
@@ -68,50 +68,21 @@ button{
   margin: 0;
 }
 
+/* HTML: <div class="loader"></div> */
 .loader {
-  width: 48px;
-  height: 48px;
+  width: 50px;
+  padding: 8px;
+  aspect-ratio: 1;
   border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  border: 3px solid;
-  border-color: #FFF #FFF transparent;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.loader::after {
-  content: '';  
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  border: 3px solid;
-  border-color: transparent #FF3D00 #FF3D00;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  animation: rotationBack 0.5s linear infinite;
-  transform-origin: center center;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
-
-@keyframes rotationBack {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
+  background: #25b09b;
+  --_m: 
+    conic-gradient(#0000 10%,#000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+          mask: var(--_m);
+  -webkit-mask-composite: source-out;
+          mask-composite: subtract;
+  animation: l3 1s infinite linear;
 }
+@keyframes l3 {to{transform: rotate(1turn)}}
 
diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
@@ -23,7 +23,7 @@ const JuegoPreguntas = () => {
       .then((response) => response.json())
       .then((data) => {
         setPreguntas(data);
-        setIsLoading(false);
+        //setIsLoading(false);
       })
       .catch((error) => {
         console.error('Error al obtener las preguntas:', error);
@@ -34,6 +34,7 @@ const JuegoPreguntas = () => {
   useEffect(() => {
     if (preguntas && preguntas.length > 0) {
       setPreguntaActual(preguntas[0]);
+      setIsLoading(false);
     }
   }, [preguntas]);
 
@@ -77,7 +78,7 @@ const JuegoPreguntas = () => {
   };
 
   const handleSiguientePregunta = () => {
-    if (respuestaSeleccionada === preguntaActual.respuestaCorrecta) {
+    if (respuestaSeleccionada === preguntaActual.correcta) {
       setPuntuacion(puntuacion + 1);
     }
     setRespuestaSeleccionada(null);