Por cierto, que he hecho cositas, ¿os acordáis que ayer estuvimos haciendo los combates de la velada?
Bueno, pues estuvimos haciendo así, que salieron listado, lo he arreglado un poquito, de forma que ahora...
¡Hostia! Que he cerrado el servidor, claro, si cierro el servidor, pues entonces peta la página, ¿eh?
Entonces, os enseño un poquito alguna cosita nueva que hemos hecho, que está bastante chula.
Bueno, pues total, que ahora ya aparecen así, he separado por una parte la imagen y esto...
Alguno me ha quedado más alto que el otro, por eso este sale más arriba, este más abajo, ya lo ajustaré un poquito, ¿vale?
Pero le dais, ¿y veis? Hace ese efecto solo el título.
Y ahora sale difuminado el combate, que es una cosa que comentamos ayer justamente.
¿Os acordáis que dijimos, bueno, que solo salga esto? Yo creo que ahora queda mejor que ayer.
No sé qué os parece, pero creo que queda mucho mejor que ayer.
Y ahora la idea, la idea será, porque todavía me faltan cosas por hacer, pero hoy lo vamos a poner con el inicio de sesión,
es que cuando bajemos para abajo va a hacer una animación esto con el scroll y debajo aparecerá la imagen de los dos luchadores.
Y al lado de cada luchador vamos a tener su información, como para que veamos una comparativa de peso, de altura y todo este tipo de cosas.
Pero yo creo que ha quedado mejor que ayer, ¿verdad? Que ayer estuvimos hablando de esto.
Y cuando bajemos para arriba, bueno, ya me entendéis, ya me entendéis.
Pero ha quedado bien con el vídeo y eso, y lo he recortado el vídeo.
He recortado el vídeo para que al final, porque alguien me avisó, me dijo, oye, al final aparecen unas letras que son un poco molestas.
Bueno, pues lo hemos arreglado, ¿vale?
Así que mejor el vídeo.
Sí, yo creo que mejor el vídeo así, como más difuminado con las esquinillas.
Que si alguien quiere saber cómo ha hecho el efecto, la verdad es que lo he hecho con el típico truco que hicimos este de poner un...
No, un degradado no, un blur, dos vídeos, tenemos dos vídeos.
Un vídeo delante y otro detrás con un efecto blur.
Y la verdad es que queda bastante bien porque así hace ese efecto que tiene YouTube que está bastante chulo.
Y que le da que se integre súper bien.
Y luego lo puedes seguir haciendo pequeño y la verdad es que tampoco queda tan mal.
Porque total, pues se verá más pequeño el vídeo y ya está.
Lo que me falta es la parte de abajo, ¿vale?
Pero bueno, espero que os guste más que el que hicimos ayer.
Que creo que ha quedado bastante bien.
Y además está chulo el tema este, ¿no?
De que se mueva solo el título.
El del rey de la pista me ha fastidiado porque tiene una sombra la imagen.
Lo tengo que arreglar.
Pero yo que sé, los demás sí que han quedado bastante bien.
Los demás sí que han quedado bastante bien.
Tengo que mirar el tema de las sombritas.
Porque ves que hay algunos que tienen como una sombra rara.
Pues lo tengo que arreglar.
Pero por lo demás han quedado bastante chulo, ¿eh?
Se podrían bajar un poco las letras para darle protagonismo al vídeo.
La idea es eso.
Que al hacer scroll se mueva.
O sea, la idea es que cuando haga scroll se irá moviendo para abajo, ¿eh?
Lo miraríamos, ¿eh?
Lo miraríamos.
Así que, bueno.
Le echaremos un vistazo todavía.
Pero por ahora tenemos esto.
Antes me ha preguntado alguien para buenos recursos para el tema del SEO.
¿Vale?
Alguien me ha dicho, oye, ¿me recomiendas recursos para SEO?
El mejor recurso es de Google.
El mejor recurso es el de Google.
Y es que tenéis un canal de YouTube que se llama Google Search Central.
Que esto es una mina de oro de información que tiene de Google.
Que te explica.
Mira, por ejemplo, ¿qué es el crawling?
Pues te lo explica.
Tiene contenido también en diferentes idiomas.
Pero es que además te explica truquillos y todo.
Te dice, mira, ¿cómo reindexar?
¿Cómo hacer cuando tienes una página antigua y tienes una nueva?
¿Cómo puedes empezar con los datos estructurados?
Todo, todo, todo es de SEO.
Y es oficial de Google.
O sea, todos los tips y consejos que te dan aquí es que son la clave.
Y tienen algunos muy chulos.
Muy, muy chulos.
Mira, a ver, por ejemplo.
Search, Control, Dynamic, Rendering.
Tienen cosas muy avanzadas.
A ver si sale.
Este, Dynamic Rendering for JavaScript Web Apps.
Esto es de hace cuatro años.
Are you building a single page app?
Y aún así, este vídeo es tremendo para entender muchas veces cómo funciona el SEO
cuando no estás haciendo server-side rendering, por ejemplo.
Y te explica, oye, ¿por qué tarda tanto en aparecer en el crawler?
No sé qué.
¿Por qué se tiene que renderizar?
Está tremendo.
Os lo recomiendo muchísimo porque ya te digo que es el mejor.
El mejor.
Lo único malo, pues que está en inglés.
Pero bueno, así entendéis.
Así aprendéis.
Es súper complicado el tema del SEO.
Mira, pues el chico nube.
Yo te digo que este está súper bien.
Ah, os quiero dar las gracias a mucha gente.
Porque una cosa, mucha, mucha, mucha gente se ha puesto a colaborar y ha hecho cosas muy
interesantes como, por ejemplo, a ver, si vamos a, creo que peldaños.
Pues que nos han puesto los entrenamientos de cada luchador de forma que se puede ver aquí
y también las declaraciones.
Así que muchas gracias a todos y a todas los que habéis participado porque habéis hecho
que todos o casi toda la gente que hace combate que tenga el entrenamiento, si es que lo ha publicado,
y también las declaraciones.
Y la verdad, es impresionante, ¿eh?
Porque así se ve mucho mejor la página que aquí tengamos las declaraciones.
Nos apostamos los cinturones de la velada porque el tuyo no te lo mereces.
Es que me encanta porque le que estén las declaraciones.
Entonces, de hecho, os quería preguntar y proponer una cosa.
A ver qué os parece, ¿eh?
Es una idea un poco tal.
Viendo la página del combate de la gente, me he dado cuenta que esta parte de aquí está
un poco...
A ver, ¿cómo os lo explico?
El alias ya aparece aquí.
El país aparece ya aquí.
La edad sí que es interesante, pero la podríamos poner en el alcance porque el alcance no tenemos
ni idea cuál es el alcance y es una información que no vamos a conseguir.
No vamos a conseguir el alcance porque es una información.
El alcance básicamente es cuánto le mide el brazo para que te dé en toda la cabeza, ¿no?
Entonces, la idea sería que la edad la moveríamos aquí y aquí en este huequecito,
aquí en este hueco, estoy pensando que estaría interesante poner las declaraciones.
¿Sabes?
Como subir las declaraciones y ponerlas más bien aquí en esta parte, en esta parte de aquí.
No sé cómo lo veis, pero es como que estoy pensando, lo puedo probar para ver cómo quedaría,
pero es que a mí toda esta parte, excepto la de rival, pero la de rival la podríamos
hacer un poco diferente o la podríamos mover o la podríamos dejar donde está, pero más
no caben.
Ya, hay gente que dice que no caben y puede ser, ¿no?
Pero si la hacemos más pequeñita y quitamos lo de ver clip, o sea, la idea sería poner
solo las frases y ya está.
Porque quitar lo de ver clip, poner solo las frases y que quede como más nada más entrar
que aparezcan aquí lo que han dicho los boxeadores.
Entonces, porque, no sé, creo que le daría como un toque más canalla todavía nada más
entrar.
Aquí queda un poco raro, ¿no?
Aquí esto y además que es información que ya está como repetida.
No sé, un Figma y votamos, vale.
Lo miraríamos en Figma.
O si no es lo que dicen, que podríamos colocar una, la que fuese la más picante,
la más bestia, ¿no?
La más bestia que queda aquí.
O incluso podríamos poner una y que vaya rotando, ¿sabes?
Que vaya rotando.
En lugar de ponerlas aquí, podemos ir poniendo que vaya rotando cada vez, que vayan poniendo,
que vaya apareciendo y desapareciendo una y otra, una detrás de otra.
La podríamos mirar.
Lo haré así, ¿vale?
Os lo enseñaré a ver cómo queda.
Porque ya os digo, es que la información como me parece que es, primero que la del alcance
es mentira y por lo tanto esta podemos poner la edad.
Y lo demás es que me parece que está repetida ya, ¿no?
Y ya está.
Esa es mejor, vale.
Pues lo intentaremos y ya me decís a ver qué os parece, ¿ok?
Ahí yo pondría las redes.
Aquí a la izquierda, bueno, podría ser otra opción.
Poner las redes.
Podría ser, ¿no?
Puedes poner el texto de la info en el color y estilo diferente.
Parecía a las letras de abajo.
Puedes poner el texto de la info en el color.
Es que estas letras, si las utilizan mucho, es un poco rollo, ¿eh?
Está mejor a cómo está actual.
Vale, vale.
Mojiwara.
Lo tendré en cuenta.
Vale.
Venga, vamos a ver las PRs antes de empezar a toquetear nosotros con la autentificación.
Que le vamos a añadir inicio de sesión para empezar con el tema de los pronósticos.
¿Vale?
Y vamos a ver por dónde nos habíamos quedado.
Por aquí.
Vale.
Me había quedado...
Este está interesante que es para reutilizar el hover.
El efecto este subrayado.
Que está bastante bien.
Pero...
Pero...
Claro.
Hay que tener en cuenta las cosas y lo vamos a dejar al lado.
Este está muy chulo que básicamente soluciona una cosa que teníamos.
Mira.
Os lo voy a enseñar.
Este lo que hace es que los clips le da la vuelta y aparece el vídeo.
A ver qué os parece.
Mira.
Haces así.
Ah, le tienes que dar un click.
Bueno, en este caso no sé por qué peta.
Debe ser porque el...
Ah, pues lo he visto funcionando antes.
Os juro que lo he visto funcionando.
No sé si es porque la URL está mal.
A ver aquí.
A ver si funciona en este.
A ver.
Mira, aquí sí.
Y lo que sale es el vídeo.
Habría que arreglar el vídeo para que tenga autoplay y todo esto.
No hay chance de que pierda.
Pero está bastante bien porque aparece directamente ahí.
O sea, esto estaba bien de que le puedes dar play y ya puedes reproducir directamente el clip.
La verdad es que esta idea me ha parecido muy chula.
Al menos no es.
Toca modificar los clips a embeds.
Bueno, pero en principio, yo por lo que veo aquí, porque ves que pone card front, no sé qué.
A ver aquí.
Y claro, lo único malo es que como podéis ver, el iframe aparece desde...
O sea, se está renderizando desde el principio.
Esto es un poco rollo porque fijaos que si yo entro a la página...
Estos son cosas que hay que tener en cuenta a veces porque si no, se lía parda.
Pero fijaos todo lo que carga.
19 megas.
¿Por qué?
Porque aunque no lo veamos, aquí se están cargando los vídeos.
Y aunque el usuario no los vea, pues ya veis, tenemos 19 megas de página ahí que se están cargando.
Para que veáis la diferencia, si entramos a la página de YoSoyPlex, ahora que no carga, pues fijaos que es 600k, 1,2 megas.
O sea, la diferencia es muy brutal, porque aquí está cargando 19 megas.
Solo porque los vídeos están ahí.
Lo ideal sería cargar los vídeos bajo demanda.
Que cuando le demos click, pues básicamente que se cargue el iframe.
Sí, los iframes pesan mucho.
Los iframes de YouTube son lo peor del mundo.
O sea, los iframes de YouTube son un agujero negro donde te exprimen la vida, básicamente.
Y es asqueroso la de cosas que te llegan a cargar.
Especialmente, y lo digo para que lo tengáis en cuenta, especialmente si encima ponéis que cargue los tweets, las cookies.
Es que todo lo que veis, y eso que fijaos que ha bloqueado un montón de scripts y de trackers.
Si esto lo desactivo, es que igual es más.
Bueno, claro, es menos, pero porque no le he dado a reproducir a uno.
Si le doy a reproducir, entonces es que ya debe ser.
Hostia, no me lo deja reproducir ahí.
No hay chance de que pierda.
¿Por qué?
Pero bueno, que la diferencia es un montón.
Y fijaos que ahí, al menos, había bloqueado un montón de scripts.
Pero es que fijaos todo el JavaScript, imágenes, es una locura.
Es una locura.
O sea, no son 19 megas.
Eso ha sido reproduciendo el vídeo, pero aún así son 10 megas, que son 9 megas más, que es un montón.
Es un montón.
Bueno, pues esto me lo tendría que mirar.
De hecho, se lo voy a comentar.
La idea pinta muy bien, pero tendríamos que hacer alguna forma que no cargue los iframes desde el principio.
Por ejemplo, usando JavaScript y algo como el Lite YouTube que usamos en la Home.
¿Vale?
Eso vamos a dejar por aquí.
Y vamos con el siguiente.
Vamos con el siguiente.
Quitamos esto.
Este era clips show rival o rivals according to number.
Vale, esto es que es verdad.
Porque ahora sale rivales.
O sea, ahora, por ejemplo, si vamos a la página y entramos a un detalle, pone rival y pone slash es.
Y queda raro.
Y en esta PR, vamos a ver lo que está haciendo.
Básicamente, si hay más de un rival, pone rivales.
Y si solo hay uno, pues, bueno, tiene sentido.
Y lo vamos a poner para que quede mucho mejor.
Porque es verdad que queda un poco raro el poner con la barra esa.
Eliminar lógica redundante para la reselección del boxer.
Vale, este tiene sentido porque la solución que esto básicamente, os comento, ¿veis?
Es todo este código.
¿Qué es lo que pasa?
Que alguien ha puesto este código aquí para que nada más entrar, para que nada más entrar en la página, ya te aparezca los versus.
Si este código lo quitamos y aceptamos esta PR, el problema que vamos a tener es que no van a salir, fijaos, visit preview y tal, no van a salir.
No van a salir.
¿Ves?
No sale los oponentes desde el principio.
Que debería salir así.
Así debería salir desde el principio.
¿Vale?
Es con el versus aquí.
Pero en cambio, si quitamos ese código, no aparece el versus.
La primera vez que entramos, no aparece el versus.
Entonces, ¿tiene sentido eliminar la lógica redundante?
Sí, pero la idea sería conseguir esto de otra forma.
Necesitamos que la primera vez que se renderiza, aparezca la información del versus.
Porque si no, tenemos que pasar por encima para que realmente aparezca el versus.
¿Vale?
Así que ese sería el problema.
Por ahora la voy a dejar porque tendríamos que hacer esto, pero tendríamos que hacer de otra forma.
¿Vale?
Give a specific order to boxers.
¿Vale?
El ordenar los boxeadores.
¿Vale?
Estos antes y después.
Ah, lo que ha hecho es poner a los versus en cada sitio.
Bueno, tiene sentido.
¿Os parece que lo ordenemos así?
¿De que pongamos a los boxeadores que se vean entre ellos?
Por ejemplo, aquí tenemos a el Mariana y están contra el Plex.
Shell out, pues contra virus.
O sea, que estén ordenados.
Yo creo que sí que tiene sentido, ¿no?
Creo que puede quedar bastante bien para que se vea ahí uno en contra del otro.
¿Sí?
Queda mejor.
Vale, pues ya está.
Pues ordenados.
Vamos a mergear esto.
A ver.
Esta tiene que ser una PR de reordenar cosas.
Vale.
Vale, pues venga, la vamos a ordenar y ya está.
La ordenamos y ya está.
Muy bien.
Vamos con la siguiente.
Actualizar los imports del boxer type.
Corrige las importaciones para el tipo boxer.
Vale, esto es porque sacamos los types.
Vale, este ya no está.
Este import type boxer.
Vale.
Vale, esto es para que utilice types en lugar de las constantes.
Venga, este sí que lo hacemos.
Venga, más.
Scroll carrusel.
Carrusel deportivo.
Esto es de Alejandra, que es una de las personas que contratamos con InfoJob.
Para que nos eche una mano.
Y ha añadido un indicador en el carrusel.
Vale, porque el tema es que en la página web de la velada, cuando se hace pequeñito,
que todavía habría que ajustar alguna cosita, pero cuando se hace pequeñito, a ver si soy capaz de enseñároslo,
cuando se hace pequeño, tú vas...
¡Hostia!
¡Hostia, se ha roto!
Se ha roto esto.
Se ha roto.
Porque esto lo que debería hacer es que con el...
Con Intersection Observer, pues esto se ha roto.
Esto antes funcionaba.
A ver.
Ah, sí que funciona.
Pero cuando lo hemos cambiado...
Pero ves, con Intersection Observer lo que haces es que tú vas cambiando,
puedes ir para adelante y para atrás, y entonces puedes ir viendo los luchadores.
¿Vale?
Que esto está bastante bien.
Pero qué raro, ¿no?
Que no funcione desde el principio.
Eso habría que arreglarlo también, ¿eh?
Habría que arreglarlo también.
A ver qué ha hecho Alejandra para...
El indicador.
Mira, ha puesto como un indicador.
Hostia, le ha puesto ahí muchos estilos ahí en línea y tal.
Pero bueno, al menos...
Al menos parece que tendríamos un indicador.
Tendríamos que mirar que esto solo se ejecute en móvil.
Que no necesitamos que esté también ejecutándose ahí constantemente.
A ver, vamos a ver esto.
Vale, ahí está el indicador.
Hostia, lo que pasa es que es un indicador un poco raro, ¿no?
No sé si se entiende el indicador.
¿Cómo lo veis?
¿Lo entendéis?
¿Cómo lo veis el indicador?
¿Os gusta?
¿Os gusta el indicador?
No me gusta.
Es que no termino de...
Es como que no termino de entender...
O sea, me gusta que haya el indicador.
Pero es verdad que lo veo un poco raro.
¿Sabes?
Como que no termino de...
Se supone que indica el scroll.
Pero...
Creo que debería ir de izquierda a derecha.
Sí, es que está raro, ¿verdad?
Debería ser mejor un tipo carrusel con los puntos.
Claro, lo que pasa es que puntos...
Pensa que hay 22 puntos.
Es un indicador de progreso, pero se va para los lados.
Ya, pero parece que se está completando una barra de carga.
Sí, es un poco raro.
Es un poco raro.
No sé si me termina de convencer.
La verdad es que...
Alejandra ha hecho lo que ha podido.
Porque la verdad es que yo no le di muy buenas indicaciones.
¿Vale?
Pero es verdad que no me termina de convencer.
Porque la idea era tener algún indicador.
No creo que haga falta indicador.
Yo creo que algún indicador estaría bien.
Porque no todo el mundo...
A ver, yo lo he hecho con la máxima cariño, ¿no?
De que se entienda, de que puede seguir scrolleando.
Pero no sé si todo el mundo lo entiende.
¿Sabes?
Entonces creo que puede estar bien que tenga algún tipo de indicador.
Pero creo que este no me termina de ver que tenga la utilidad, ¿no?
O sea, que tenga un indicador lo veo claramente.
Pero este le comentaré a ver si se nos ocurre alguna cosa.
Pero muchas gracias, Alejandra.
Porque con lo poco que le he dicho, al menos ha sacado algo ahí.
He agregado algunos efectos para la página convencional.
Utiliza el componente Glow y crear un group para realizar el group hover.
A ver, esto es ahora.
¡Ojo!
¡Ojo!
¿Qué os parece?
Hombre, está bonito.
Está potente, ¿eh?
A ver, vamos a verlo en funcionamiento.
Lo malo del efecto Glow este, lo malo del efecto Glow, es que peta bastante.
Hostia, lo que pasa es que me parece que tres a lo mejor es demasiado, ¿no?
Yo creo que tendría que ser de dos mejor que de tres.
Tres como que quedan demasiado pequeñitos.
Demasiado pequeñitos.
Lo malo del efecto Glow es que al menos en algunas páginas...
O sea, en algunos navegadores he visto que petardea bastante.
Y las cars, no sé si al final lo que hace es que quede un poco ahí encorsetado.
No sé si es porque quedan muy pequeñitos.
Pero, ¿ves?
En Safari es que petardea, tío.
En Safari petardea.
Es que petardea un montón.
Petardea un montón.
Petardea demasiado.
Va a...
Va a trompicones.
Y fíjate que estoy con una ordena en condiciones.
Es el efecto Glow este que, no sé, en Chrome funciona súper bien.
Pero en Safari no del todo bien.
Entonces, está guay la idea.
Creo que a lo mejor tendría que ser de dos más que de tres.
Porque creo que queda como demasiado pequeño.
Pero es que peta demasiado.
Peta demasiado.
Y en Safari, en Firefox también.
La intención de este cambio es que el combate se le cambie.
¿Vale?
Insaster versus Amablis y Alana.
¿Vale?
Bueno, este tiene buena pinta.
Vamos a ver por qué peta esto.
Ah, claro.
Porque los boxeadores aquí.
¿Y por qué peta esto?
Insaster.
¿Qué cambio ha hecho en el Boxers?
¿Qué cambio ha hecho en el Boxers?
Claro, ha cambiado.
Versus...
No es seguro.
A ver, aquí no estoy probando excusas.
Claro, el Boxers este lo podía haber dejado tal cual.
No sé si por qué lo ha hecho.
Ah, encima aquí un cambio.
Esto es mejor.
En lugar de tener if tan concretos dentro del render, que fuese, incluso prefiero que sea un flag dentro de los boxeadores, que no que tengamos aquí este tipo de chequeos tan a manija.
¿Vale?
Y formatear los rivales.
Se cambió la visualización.
¿Vale?
Dice, se cambió la visualización de los boxeadores.
Y dice...
Vale, esto es para solo poner cuando...
Para que no ponga esta barra.
Pero claro, esta barra debería ser necesaria a veces, ¿no?
Porque dependiendo cómo te quede visualmente...
Vamos a verlo aquí.
No, aquí no.
Tiene que ser uno que tenga muchos como este.
Vale.
Claro.
¿Ves?
Entonces aquí, ¿qué?
Te quedas sin barra.
No tiene sentido.
Esto no es tan fácil.
Porque, ¿ves?
Ahí ahora de repente hay una barra.
O sea, es una PR pensada solo para desktop.
Entonces esta no la puedo envergear.
No tiene sentido.
Porque si no, no quedaría en muchos sitios bien.
Bueno, pues ya hemos revisado las PRs.
Vamos a hacer la autenticación.
Vamos a utilizar AuthAstro.
Y os voy a explicar.
El tema es que en la velada tenemos una sección que se llama pronósticos.
Y en los pronósticos, la idea es que la gente pueda iniciar sesión.
Y al iniciar sesión, ellos puedan elegir votar por los ganadores de cada uno de los combates.
Entonces, esto es la cosa que vamos a empezar a hacer ahora.
Vamos a, primero, iniciar sesión.
Luego vamos a tener que tener una base de datos.
Backend.
Para que la gente pueda votar.
Y finalmente, la idea final será que la gente pueda compartir sus votos en redes sociales.
Y que se genere una imagen.
O sea, esto va a ser brutal.
Porque así, pues la gente podrá compartir las redes sociales.
Este es mi pronóstico para la velada.
¿Vale?
Y lo haremos.
Entonces, ¿qué es lo que vamos a utilizar para cada cosa?
Para iniciar sesión, vamos a utilizar AuthAstro.
¿Vale?
Esto es un paquete que está muy chulo.
Es la forma más fácil para añadir sesión.
Y está basado, si no me equivoco.
Porque, espérate.
A ver, si no me equivoco.
Tú, tú, tú, tú.
Pues, está NextAuth.
¿Vale?
Utiliza NextAuth.
No utiliza Lucía.
Yo estaba pensando en utilizar Lucía, que también es una alternativa.
Que está bastante bien.
Pero NextAuth, al final, normalmente me da menos problemas.
Y las veces que he utilizado con Astro, me ha funcionado mucho mejor.
El problema de Lucía, además, es que desde que han pasado la versión 3,
hay unos cambios un poco rarunos.
En los que hay que instalar dependencias aparte y tal.
Que a mí, personalmente, no me ha terminado de gustar.
Así que, para este caso, vamos a utilizar NextAuth, que funciona con Astro, gracias a este paquete.
Y es súper fácil.
Y a nosotros ya nos va bien y tenemos que escribir mucho menos código.
Porque si miráis, Lucía, el problema es que hay que hacer un setup del MyDellware.
A mí me parece demasiado código a mano que hay que meter en un montón de sitios.
Y AuthAustro nos lo simplifica un montón.
Así que, vamos a utilizar AuthAustro.
Y lo mejor es que, además, si TTT tiene esto, que con un solo comando ya te inicia un montón de cosas, configuraciones y tal.
Así que, mejor que mejor.
npx astro y vamos a poner addAuthAustro.
Ejecutamos este comando y nos debería preguntar un montón de cosas.
No es oficial, lo sabemos.
Nos dice thirdPartyPackages.
Esto es lo que va a añadir, addAustro y authCore.
Decimos que sí.
Ah, hace un pool de master.
Ahora lo hago.
Gracias.
El pool.
Ahora lo hago.
Gracias.
Vale, vale.
Ya, ya, ya.
Pool, pool.
Vale.
Y esto es lo que nos dice que va a modificar.
Fijaos que me va a añadir esta línea.
Y en las integraciones me va a añadir Auth.
Así.
¿Vale?
Le digo que sí.
Me hago un pool de master para que no tengamos ningún problema.
¿Vale?
Y ya está.
Está haciendo el restart.
Y en principio con esto no deberíamos ver ningún cambio.
O sea, todo debería funcionar exactamente igual.
Perfecto.
Vamos al código.
Y vámonos por aquí.
Y aquí podemos ver, bueno, ha hecho unos cambios innecesarios.
Pero el cambio importante es este.
Que este auth me lo ha dejado ahí.
Que yo lo voy a subir.
Lo voy a subir aquí.
Voy a subirlo aquí.
¿Vale?
No hace falta este de abajo.
Y en las integraciones me ha añadido este auth.
¿Vale?
Además he formateado ahora.
Por eso se ve en algún cambio más.
Y en el package, además, voy a aprovechar para quitar los carrots.
Vamos a quitar los carrots.
Tú, tú, tú.
Y ya que estamos aquí, voy a mirar a ver si hay algunas versiones nuevas.
Tú, tú, tú.
A ver qué tal.
Hostia.
Auth core 0.28.0.
Vale.
Por ahora voy a utilizar...
Voy a dejar el carrot.
Porque seguramente...
Auth core...
A ver qué versión me ha instalado.
Un momento.
A ver qué versión he instalado.
0.18.6.
Claro, porque aunque tenga el carrot, cuando son versiones 0.0, no he instalado las nuevas.
Vale.
Por ahora vamos a dejar la 0.18.
Pero más adelante probaremos a ver si la 0.28 sigue funcionando bien.
Vamos a actualizar Astro.
Con la 4.5.8.
Vale.
Astro Vercell.
Vamos a decirle esto.
Este plugin también.
A ver si mejora algo.
Vale.
Y Bit Plugin.
Vale.
Pues con esto vamos a reinstalar las dependencias nuevas para que las tengamos actualizadas.
Y así ya subimos estos cambios a producción.
Vale.
Y pasamos así a tenerlo todo actualizado.
¿Qué extensión es esa?
Esta extensión se llama Version Lens y es la hostia.
Es la hostia porque detecta básicamente las versiones que tengas de cada paquete.
Y te dice si la tienes que actualizar o no.
Y con un solo clic pues la actualizas.
¿Vale?
Bueno, vamos a ver que todo funcione.
Vale.
Parece que sí, que funciona bien.
Perfecto.
Vale.
No se ha roto nada.
Vale.
Pues venga.
Vamos a subir estos cambios.
Vamos a Add Astro Out and Upgrade some dependencies.
¿Vale?
Vale.
Ya tenemos lo más importante que es la dependencia.
Ahora lo que necesitaríamos es crear la configuración de la autenticación.
Así que vamos a crear un archivo en la raíz que se llama auth.config.
No sé si es JS o creo que es JS.
Es que hay veces que puede ser MJS y tal.
Vale.
¿Veis?
Aquí hay un ejemplo.
Aquí hay un ejemplo.
¿Veis que pone create your auth configuration en la raíz de tu proyecto?
Vale.
Pues aquí tendríamos un ejemplo.
En este caso yo no vamos a utilizar GitHub.
Vamos a utilizar Twitch.
¿Vale?
Vamos a utilizar Twitch.
Y aquí en lugar de GitHub vamos a poner Twitch.
Y aquí en lugar de Gijaclient vamos a poner TwitchClientID.
Y en lugar de GijaclientSecret, TwitchClientSecret.
¿Vale?
Esta es la información que necesita.
Tanto el ClientID como el ClientSecret.
Vale.
Esta es la configuración mínima que necesitamos.
Si nos vamos a Twitch.dev, creo que es.
No.
Hubiera sido buenísimo que tuviesen ese Twitch.
Ah, dev.twitch.tv.
Yo voy a utilizar unos que ya tengo creados, pero te voy a explicar cómo se crean y lo que tienes que tener en cuenta.
¿Vale?
O bueno, puedo crear unos porque, ¿ves?
Iba a utilizar los de los SESLAN.
Que como puedes ver, ya teníamos creados unos.
Venga, vamos a crear unos nuevos.
Que total.
Vamos a poner aquí.
De hecho, dejadme un momento que voy a revisar la configuración de los SESLAN para hacerlo exactamente igual.
Porque la que hicimos de los SESLAN funcionó bien.
Entonces, para no liarla, vamos a hacerlo exactamente igual.
¿Vale?
Entonces, tendríamos aquí, esto sería la velada web y tenemos que ponerle URL de redireccionamiento de OAuth.
Aquí ya nos lo dice.
Dice, los OAuth providers te piden un callback URL.
¿Qué significa este callback URL?
Esto básicamente es que cuando inicias la sesión en Twitch, te va a ir a tu página, a un endpoint, para verificar e iniciar la sesión.
Entonces, necesitamos aquí decirle que vaya justamente a esto.
API barra out barra callback barra provider.
Pues el provider nuestro sería Twitch.
Y aquí le tenemos que decir nuestra página donde tiene que funcionar.
Que va a ser HTTP barra barra localhost 4, 3, 2, 1 barra API no sé qué, no sé cuánto.
Esto básicamente es para asegurarnos, para asegurarnos que funciona en local.
Pero además de local, también vamos a crear que funcione en producción.
Así que vamos a poner aquí que también funcione en barra y quitamos esto y ponemos lavelada.es.
Normalmente, lo ideal sería tener una aplicación para desarrollo y una aplicación para producción.
En este caso no es tan importante, lo vamos a dejar así.
Pero podríamos tener una que fuese barra dev y otra que fuese barra prod.
¿Vale?
Para tener una de cada uno.
Pero bueno, esto también a mí me facilita para que en local pueda ir viendo vuestros votos y que todo vaya bien y cambiar y todo esto.
¿Vale?
Seleccionar una categoría, Website Integration.
Y aquí el tipo de cliente, como va a ser para iniciar sesión y autentificación, no es en la parte del cliente, no es en JavaScript, sino que va a ser en el servidor.
Le vamos a poner que sea confidencial.
¿Vale?
Y con esto ya lo tendríamos.
Ahora le debería dar a crear lo que pasa.
Vale.
Es que por un momento pensaba que a lo mejor salía el secreto.
El secreto.
Y no quiero que veáis el secreto.
¿Vale?
Ahora voy a asegurarme que no salga el secreto.
Vale, tengo que darle.
Vale, no pasa nada.
Vale, perfecto.
Entonces, una vez que estamos aquí, veis que me ha creado la velada, web, no sé qué.
Pues le damos a administrar.
Y en administrar tendría la ID del cliente, que esto ya os lo puedo poner por aquí.
Vamos a crear un .env, .env por aquí.
Le voy a llamar .env.local.
¿Vale?
Y aquí tendríamos el Twitch Client ID y esto lo utilizamos aquí.
Twitch Client ID y lo utilizamos aquí.
Y nos faltaría el secreto.
Que este sí que es importante que no lo filtreis.
No lo filtreis.
No lo filtreis.
No, no, pero en serio.
No lo filtreis.
No, lo filtreis.
Que la podéis liar pardísima con esto.
De hecho, voy a intentar que no se filtre el mío.
¿Vale?
A ver si lo consigo.
A ver si lo consigo y no la lío.
Entonces, lo que tenemos que hacer es volver a la página de Twitch, darle al botón de nuevo secreto,
te genera el secreto del cliente, te lo copias.
Y te vas luego a, básicamente, a la variable de entorno, al .env.
Y ahí lo copias.
¿Vale?
Entonces, una vez que lo copias, ya lo puedes utilizar.
Como no la quiero liar parda, y fíjate que está el .env.local y esto lo subiría a producción,
lo que vamos a hacer en el gitignore es poner el .env y el .env.local.
¿Vale?
Y ahora ya no debería aparecer.
Vamos a añadir ignore.env.env.local.
¿Vale?
Lo ponemos aquí.
Y ya está.
Entonces, ya no deberíamos tener ningún problema de que subamos sin querer el .env.
Lo que sí que podemos hacer, y esto a veces es útil, es hacer el .env.demo.
Que esto, pues, se puede poner para que la gente sepa cuáles son las variables de entorno que tienen que utilizar.
¿Vale?
Tu client ID, tu secret ID, e incluso le podéis poner algún comentario para indicarle dónde lo tiene que sacar.
¡Uh!
¡No!
No pasa nada, no pasa nada.
Se puede volver a generar.
¿Qué hago lo ha dicho?
Lo he hecho lo he hecho.
Ya está, ya está.
Tenéis que darle otra vez a nuevo secreto y ya está, no pasa nada.
No pasa nada.
No pasa nada, no pasa nada.
Le dais a nuevo secreto y se quita el anterior.
Pero es un poco rollo, ¿vale?
Venga, voy a ver si soy capaz de no liquear nada, ¿vale?
Voy a ver si soy capaz de no liquear nada.
Vale, ya está.
Cago en la leche.
Pero bueno, no pasa nada.
Le podéis dar al botón de nuevo secreto y elimina el anterior y ya está, ¿vale?
No pasa nada, no pasa nada.
¡Ay, la leche!
Bueno, a ver, voy a asegurarme que la variable...
Vale, ya está.
Bueno, pues ya lo tendríamos, ¿vale?
Ya lo tendríamos.
Ahora es nuestro secreto.
Ahora es nuestro secreto.
¡Ay, qué risa!
Bueno, esto pasa hasta en las mejores familias.
Entonces, ya tendríamos la configuración mínima que deberíamos tener.
Ya vamos a añadir el .ef, pero todavía hay dos variables de entorno que tengo que añadir, ¿vale?
Hay una variable de entorno.
Esto habría que sacarlo del def.twitch.tv.
Sacar de...
Vale, hay una variable de entorno que es outsecret, que esto básicamente hay que generar un hash aleatorio.
Esto sirve para básicamente la codificación del token que vamos a estar generando al usuario.
Para así que sea como una palabra clave, como una semilla que nos va a permitir codificar y hashear toda esa información y que nadie sepa cómo decodificarla, ¿vale?
Es como la llave de maestra.
Entonces, claro, tú aquí puedes poner lo que tú quieras, pero es algo que solo puedes saber tú.
Porque si alguien tuviese acceso a esta palabra secreta, entonces sería capaz de hacerse pasar por cualquier usuario.
Porque sería capaz de generar, hashear cualquier cookie o cualquier token con su información, con la información que quiera.
Entonces, esta es importante que ahora la generaré.
Y os voy a enseñar cómo generarla, que es bastante interesante.
Y luego tendríamos esta, que esto es necesario en algunos servidores.
En algunos casos es necesario ponerlo a true por servidores.
Entonces, creo que Netlify, si no me equivoco, en Vercel no es necesario.
Pero bueno, lo voy a poner porque total tampoco hace daño, ¿vale?
Pero básicamente esto también es un tema de que no te dé un problema de seguridad, hacer la autentificación del host y todo esto.
Entonces, para generar el hash tenéis dos formas de hacerlo.
Uno, la hacker, que está bastante bien.
La hacker es utilizar OpenSSL, el random menos hexadecimal y 32 creo.
Esto.
Y esto, ya ves que cada vez que lo ejecutas te da uno, ¿vale?
Entonces, puedes utilizar el que os dé la gana.
Puedes utilizar el que más os guste.
Y esto lo que se está generando es un hash único, totalmente irrepetible, se supone, para que lo podáis poner.
Y podéis ponerlo aquí y ya está.
Ya tenéis la llave secreta que va a permitir que vas a hashear.
Y otra cosa, si no queréis hacerlo hacker, pues tenéis esta.
Entréis a esta URL y como podéis ver, ya se está generando una ID única, random, que también os puede servir.
Cualquiera de las dos está bien, ¿vale?
En este caso, pues yo voy a generar unas cuantas para que...
Y voy a utilizar una de ellas.
Esta mismo.
¿Vale?
Y la voy a poner en mi variable de entorno.
Importante, de nuevo, esta variable es importante que no se os escape, que no la pongáis.
Es tan importante como un password.
Porque ya os digo, si alguien es capaz de acceder a ese hash, va a ser capaz de hacerse pasar por cualquier usuario.
Así que tenedlo en cuenta, ¿vale?
Vale, pues yo ya lo he puesto y ya lo tendríamos.
La del gato en el teclado es buenísimo.
¿Versel guarda esa clave?
¿La de la URL?
La de esta no.
La de la URL no, obviamente.
Supongo que te refieres a esta.
No, esto es una aplicación que está puesta aquí en Versel.
Pero no guarda esta clave.
No la guarda porque, básicamente, podrías estar generando un millón y no va a guardar un millón de claves.
Además, es imposible saber si realmente se está utilizando o no, ¿no?
Lo que sí que es importante es que luego en Versel tendremos que añadir las variables de entorno.
Eso sí que lo haremos, ¿no?
¿Cómo le pasa esa producción después de esas claves?
Luego lo hacemos.
No os preocupéis, que vamos a ver cómo lo haríamos, ¿vale?
Muestra otra vez cómo generarla.
Pues la podéis generar aquí o la podéis generar aquí.
Podéis ejecutar esto.
Bueno, esto dependiendo, obviamente, del...
Yo os recomiendo más esta, primero, porque es mucho más larga.
Segundo, porque es totalmente local y porque no diréis que hay ningún problema.
Es posible que en Windows no lo podáis ejecutar, pero en todos los sistemas hay algo similar.
Si no este, pues habrá un comando similar.
En Linux estoy bastante seguro que os van a utilizar, ¿vale?
O sea, que os va a funcionar sin ningún problema.
Ya tendríamos todas las variables de entorno.
Bueno, pues ahora sí, por fin, vamos a crear nuestra página pronósticos.
Vamos a crear nuestra página pronósticos.astro.
Y aquí por ahora vamos a empezar a asegurarnos que vamos a poder iniciar sesión.
Así que vamos a crear nuestro layout con el layout.astro.
Aquí vamos a poner layout, el title.
Pronostica los ganadores de la velada 4.
Vale.
Vota a tus boxeadores favoritos.
No.
Vota...
¿Cómo le decimos esto?
Vota por tu favorito.
No.
Decide o participa en el concurso.
Bueno, más que el concurso participa, participa votando a los boxeadores que crees que ganarán sus combates.
Bueno, ya lo arreglaremos, ¿eh?
Participa...
Bueno, esto ya te has flipado aquí, Hacopilot.
Aquí te han lanzado al vacío.
Básicamente te han lanzado al vacío.
Bueno, por ahora vamos a hacer para que esto más o menos tenga algún sentido.
No voy a complicarme mucho con el layout.
Luego nos preocupamos de esto.
Por ahora voy a poner un botón de login, ¿vale?
Que sea iniciar sesión y uno de logout, que sea cerrar sesión, ¿vale?
Cerrar sesión.
Vamos a justify center, item center.
Vale.
Entonces ya teníamos el iniciar sesión y cerrar sesión.
Vamos a poner un script.
Y aquí ya podemos importar el sync in y el sync out de...
Bueno, lo interesante de esto es que además lo podemos hacer...
Que sea con un import dinámico.
Await import auth astro.
Vale.
Ahora no está.
No sale.
A ver.
Vámonos para aquí.
Vamos por aquí.
Etetetet.
Config.
Bueno, mira, pues, joder, se lo llevas a ver, me lo copio.
Se lo llevas a ver, me lo copio.
Vale.
Barra client.
Vamos a importar aquí también import.
Vamos a importar aquí el DOM utils este.
¿Cómo era?
Utils.
Hostia.
A veces no me pilla los simpors porque se queda tonto el editor.
Ojalá esto lo arreglen algún día porque es muy molesto que cada vez que creas un archivo...
Vale.
Pues no slip.
DOM selector.
¿Vale?
Y aquí vamos a tener el login con el login y el logout con el barra logout.
¿Vale?
Y cuando el login hacemos un click, pues vamos a hacer un sync in y en el logout vamos a hacer un logout.
¿Vale?
Vamos a hacer un sync out.
Vale.
Tipo promesa no se puede asignar al tipo this.
Pero aquí tengo una wait del import, ¿no?
¿Por qué me dice el tipo promesa?
Me dice no se puede asignar el tipo event.
A ver, lo que sí que puede ser es que esto sea tal.
Ah, bueno, claro.
Esto no funciona así.
¿Por qué no le gusta esto?
A ver, pues lo ejecuto así y ya está.
¿Vale?
Vale, ya está.
Vale.
Pues venga, vamos a ver si la página pronósticos ya aparece eso.
Localhost 4.3.2.1 barra pronósticos.
¿Vale?
Vale.
Sale ahí un poco regulinchis, pero al menos sale.
Voy a poner text white por ahora.
Vale.
Obviamente no es el mejor.
Flexcall.
A lo menos que se hagan los botones.
Vale.
Pronósticos.
Iniciar sesión.
Cerrar sesión.
Sesión.
Hostia, lo he puesto dos veces.
El sesión, sesión.
Vale.
Iniciar sesión.
Le damos clic.
Y peta.
Ah, vale.
Tenemos un problema.
Bueno, no es un problema, pero es una cosa que sabíamos que iba a llegar.
Sabíamos que iba a llegar.
Vamos a necesitar que ahora el astro.config lo teníamos en híbrido.
Vamos a tener que sea servidor.
¿Por qué es servidor?
Porque ahora vamos a necesitar crear endpoints.
Vamos a empezar a tener un backend.
¿Vale?
Entonces, necesitamos que nuestro astro pase a tener backend.
Y en todo caso ahora lo que deberíamos hacer es decirle que las páginas que queremos que sean estáticas las tendríamos que indicar.
¿Vale?
En lugar de ser ahora una página estática por defecto, claro, ahora necesitamos que tenga un backend, que tenga endpoints.
Y por lo tanto le vamos a decir que el output sea servidor y si queremos que una página sea estática tenemos que indicarlo de forma más granular.
¿Vale?
Entonces ese es el problemilla que lo tenemos que hacer.
Para analíticas de Vercell debería ser server.
No, para las analíticas de Vercell tendría que ser híbrido en todo caso.
¿Vale?
Entonces vamos a tener que sea servidor y ya está.
Y luego ya arreglaremos todo lo demás.
A ver, iniciar sesión.
Y me ha dejado fatal.
Vamos a ver por qué me ha dejado todo fatal.
Vamos a ver.
Bueno, es que igualmente ha petado por lo mismo.
Y aquí ya he cambiado el output, ¿no?
¿Vale?
A ver, iniciar sesión.
Ahora sí.
Vale.
Esto no es necesario.
¿Veis que ahora me sale un botón Singing with Twitch?
Esto no tiene sentido porque ahora veréis cómo lo arreglamos.
Pero se supone que debería dar y me debería devolver.
Vale, le dice sí.
Permito que me conozcan.
Y vuelve a la misma página.
Parece que no hemos logrado nada.
Parece que todo funciona exactamente igual.
Pero no es así.
Vamos a ver.
Vamos a hacer cositas.
Lo primero, el Singing, cada vez que le demos, ¿veis que me aparece esto?
Para arreglar esto, lo que tenemos que hacer es decirle directamente con qué nos queremos loggear.
Entonces vamos a ponerle aquí.
Eso está chulo porque aquí tenéis todos los servicios con los que os podéis loggear.
Entonces voy a ponerle Twitch.
Y yo no sé si aquí es necesario.
Yo creo que no es necesario en el Singout poner nada.
Yo creo que no.
Lo bueno de esto es que ahora cuando le demos a iniciar sesión, ya directamente utilizará Twitch.
Y ya saldrá mucho mejor.
Ahora, parece que no está haciendo nada, pero para saber si ha hecho algo, lo que vamos a hacer aquí es importar el GetSession.
Y esto lo sacamos de AuthAstro barra server.
Y ahora vamos a poder recuperar la sesión del usuario.
Sabremos si el usuario realmente tiene sesión.
Para eso le tenemos que pasar la petición de Astro, porque aquí es donde tenemos la cookie, ¿vale?
El GetSession, ¿ves que le tenemos que pasar la request?
Entonces hay que pasarle la request, que es la misma de Astro, toda la petición.
A partir de ahí sacará los headers, las cookies, el token y toda la información que tenga que hacer.
Y vamos a hacer un console log con la sesión para ver si realmente el usuario, ¿ves?
Me aparece que ha iniciado la sesión.
Entonces ahora, mira, voy a hacer una cosa para que lo veamos más fácil.
Si tienes sesión, entonces, mira, podemos hacer esto, session.user.name.
Y esto lo deberíamos hacer así, ¿vale?
Y estás, esto no es necesario, sino que en todo caso tenemos que quitar esto.
Y aquí, en sesión, y si no tenemos sesión, aquí tendremos que poner, si no tenemos sesión, pues entonces haz el iniciar sesión.
Y ya está, tenemos el usuario iniciado con, vale, hostia, ¿por qué sale tan abajo?
Ah, sale tan abajo por culpa del minhscreen este que he puesto aquí, que lo he puesto antes por tenerlo ahí.
Porque ahora lo haremos, le damos un poquito de estilo, ¿vale?
Pronósticos, hola, Midudev, cerrar sesión, ¿vale?
Y al cerrar sesión no hace nada.
Vale, ¿por qué no hace nada?
Vamos a ver qué le pasa a esto.
No puede llamarlas...
Ah, porque no he puesto la idea.
Logout, logout, onclick, pero no está...
Ah, ¿ves?
¿Ves?
Claro, esto es que está petando el JavaScript.
Si tiene logout, entonces hace esto, ¿vale?
Para que funcionen los dos.
Vale, y a ver ahora, cerrar sesión, vale, cierra la sesión.
Este error es porque se está bloqueando un tema de scripts.
Vale, cierra la sesión, inicia la sesión, ¿vale?
Esto es inevitable, el parpadeo ese blanco no se puede hacer nada porque tiene que ir a la página de Twitch.
Y ves, ahora, hola, Midudev, cerrar sesión.
O sea, ya tenemos usuario, ya tenemos usuario.
Y esto, aunque yo me vaya a otra pestaña, ¿ves?
Ya tiene la sesión iniciada.
O sea, que con esto al menos ya tendríamos la sesión iniciada.
Este console.log ahora mismo no lo necesitamos.
Voy a quitar esto por aquí.
Y vamos a crear...
Esta será para crear la página.
Total, como ahora mismo no pasa nada, si alguien entrase barra pronóstico, pues no pasa nada.
Esta información también la necesitamos.
Así que, a ver, agregado archivo, configuración, autenticación.
Vale, me parece bien.
Y el astroconfig...
Hostia, este es que acabo con el servidor.
Hay cosas...
A ver, la página funcionar va a funcionar perfectamente.
No va a haber ningún problema.
Pero hay cambios que deberíamos intentar hacer para que mejorase el rendimiento en algunas cosas.
¿Vale?
Pero bueno, por ahora yo creo que lo podemos subir.
Change output to server.
No hay problema, ¿vale?
Vale, por ahora subo esto.
Ah, mira, también debería haber subido este, ¿no?
Para que la gente sepa cómo funciona archivo, con configuración, etc.
Y tal, ¿vale?
Y ya vamos.
Ahora le damos forma a la página de pronósticos, ¿eh?
Se puede desactivar el prerender en el hybrid.
Bueno, el hybrid es que ahora vamos a tener que poner en el server.
Y lo vamos a tener que hacer servir, ¿eh?
¿Tendrás que añadir un aviso de cookies a la web?
No.
A ver, cuando tienes cookies que son tuyas, first party,
no hay ningún tipo de problema, ¿vale?
No hay ningún problema.
¿Por qué?
Porque son las mínimas que necesita la página para funcionar.
Tienes que informar que tienes cookies cuando son de terceros, especialmente.
Y además tienes que indicar qué cookies se están utilizando.
Pero es que nosotros no estamos utilizando ninguna cookie de terceros.
Todas las cookies que se están utilizando son first party.
Incluso YouTube lo estamos cargando sin la necesidad de hacerlo.
Pero Twitch no es de terceros, claro.
Pero fíjate que de Twitch no estamos guardando una cookie de Twitch.
Estamos guardando un token nuestro.
No estamos guardando una cookie de Twitch.
Lo que está yendo es a Twitch para verificar si puede iniciar sesión y luego está volviendo.
Y eso lo que hace es volver con un token y ese token nosotros lo estamos guardando.
No es exactamente lo mismo que si estuviésemos utilizando una cookie de Twitch,
que es una cosa totalmente.
Si alguna vez haces mal el aviso de cookies, se te da un aviso, ¿no?
¿Qué ocurrirá en esos casos?
Muy buena pregunta.
Pues yo he estado en ese caso.
¿De qué pasa si por lo que sea hacen mal el aviso de cookies?
Pues sí que te dan un aviso.
En España, en España sí existe la obligación de aviso de cookies.
Pero como digo, Torrenet, en España el tema del aviso de cookies no es por usar cookies,
sino que es por usar cookies de terceros, ¿vale?
Porque no es tan fácil como decir...
Cuando son cookies que necesitas para funcionar la página, es que son normales.
Tienes que avisar si tienes cookies de terceros porque eso está violando la privacidad del usuario.
Cuando tú tienes cookies para que funcione tu página y si no, no puede funcionar,
que son técnicas, que se le llaman, no tienen ningún tipo de problema.
El problema es, el problema es, ¿pasa algo si no pones el banner de cookies?
¿Qué pasa en ese caso?
Pues en ese caso te avisan.
Te meten un aviso y te dicen que tienes tanto tiempo para arreglarlo.
En el caso que no lo arregles, entonces sí que te van a poner una multa.
Pero yo he estado en una empresa en la que básicamente también le avisaron
o incluso sé de casos como el de Bueling, que le avisaron
y luego es que no lo arreglaron o lo arreglaron muy tarde.
O no lo arreglaron bien del todo.
Incluso le dan moratorias y cosas así, pero luego te pueden llegar a hacer
bastante daño, como miles de euros.
Y puede ser incluso te puede llegar a poner una multa por el tanto porciento
de cuánto dinero es.
Es un tema tremendo.
¿Te pueden llegar a demandar?
Te pueden llegar a demandar.
Totalmente que te pueden llegar a demandar.
Ya te digo yo que sí.
Ya te digo yo que sí.
Bueno, pues venga, vamos a continuar.
Vamos a darle un poquito al pronósticos este.
Voy a hacer una cosa.
Este pronósticos, vamos a dividir aquí.
Pronósticos.
Vamos a dividir la página en dos.
En el intro.astro y en el vote.astro.
¿Vale?
El intro será para los usuarios para cuando todavía no han iniciado sesión.
¿Vale?
Para que cuando esté iniciando la sesión, pues le enseñemos algo para que vean
que se tiene que iniciar sesión.
Entonces, me voy a copiar todo esto aquí.
Y aquí vamos a quitar este get.
No, no.
Esto no necesitamos.
Claro, claro.
Este get session.
Esto no necesitamos aquí.
Esto.
Pronósticos.
Vale.
Todo esto.
Este iniciar sesión lo voy a poner aquí con un botón tal.
¿Vale?
Vamos a tener este componente.
Este componente intro.
¿Vale?
Este componente intro será.
¿Vale?
Esto.
Quitamos el logout.
Esto seguro que tiene que estar.
Esto fuera.
Esto lo quitamos.
Básicamente vamos a tener dos componentes.
Un componente va a ser el de iniciar sesión donde le explicamos al usuario.
Oye, vas a pronosticar, no sé qué.
Y le ponemos una imagen y lo que sea.
Que por cierto, estoy pensando que esa imagen la tengo por aquí.
Un momento.
Public.
Tengo una imagen pensada.
No.
No tengo.
A ver.
Un momento.
Mira, tengo un portátil aquí.
Vamos a hacer.
Vamos a subir aquí rápidamente.
Una cosa.
Es que tengo una imagen que es la que quiero utilizar.
Entonces.
Confirmamos.
Bajamos.
Y subimos.
No.
Limpia el trabajo, el repositorio antes de la desprotección.
Vaya, por Dios.
A ver.
Si puedo pushear la imagen.
No puedo pushear la imagen.
No puedo pushear la imagen.
Ay.
Ay.
A ver.
Es que estoy haciendo un pull y un push.
Pero claro, como he hecho cambios, ahora me está dando problemas de que me dice, no.
No puedes hacer cambios.
Así.
Vale.
Quitamos esto.
Quitamos pull.
A ver ahora.
Tampoco.
Otro conflicto.
Conflicto de intereses.
Ah.
Dios mío.
Que tengo conflictos.
¿Sabéis qué?
Voy a tardar menos si me envío la imagen y me la pego aquí.
Voy a utilizar airdrop y me pego la imagen aquí.
Y ya está.
¿Ves?
Eso es que me he enviado la imagen.
Y aparece por aquí.
Vale.
Perfecto.
Ala.
Quería hacer un commit y ya ha sido más fácil hacerlo así.
Vale.
Pues ya tengo esta imagen aquí.
Que es esta imagen en la que vamos a mostrarles los pronósticos.
¿Vale?
Que está bonita.
Está bonita.
Que por cierto, no he probado, pero creo que en los combates, una cosa que había intentado,
a ver si sale, lavelada.es, es que cuando se comparta el combate, yo que sé, por ejemplo
aquí, a ver la imagen, cada combate tiene su propio open graph.
De forma que, si por ejemplo ponemos este, lavelada.es, debería salir cada uno con
con su imagen.
¿Qué os parece?
¿Eh?
Eso no os habéis fijado, ¿eh?
Detalles, detalles.
Pero bueno, está chulo porque así, pues ves, pone...
Lo que tendríamos que mejorar era alguna cosa, ¿eh?
Porque fijaos que el título de la descripción todavía se tiene que mejorar.
Pero al menos cuando alguien comparta, pues en el combate aparecerá con la imagen del combate.
Y eso es un detalle que está bastante bien.
Todavía tenemos que ayudar bastante el title y la descripción, pero bueno, algo es algo.
Entonces, en pronósticos vamos a tener dos posibilidades, dos estados, ¿no?
Uno, cuando tenemos la sesión, si la sesión...
O sea, el usuario acaba de entrar.
Entonces, la sesión es null.
Y ahí lo que vamos a hacer es renderizar la intro.
Y si tenemos sesión, ¿vale?
Si tenemos sesión, si es diferente a null, básicamente, pues sería user.
Que bueno, esto se podría simplificar y ya, pues, utilizarlo así, ¿no?
Y hacer una ternaria.
Y ya está.
Intro y user.
Ah, no, user no.
Vote.
Le hemos llamado vote.
Así que vamos a importar estos dos.
El intro, from, barra, components, barra, predictions, pre...
Ay...
Es una rabia que no...
Pronósticos.
Pron...
¿Ves?
No tiene el autocomplete.
Me pone de los nervios.
Vale, pronósticos.
Y este sería el vote, ¿vale?
Ya con esto tendríamos esto fuera.
Y todo esto también nos lo podemos quitar de aquí.
Tampoco necesitamos.
Solo necesitamos ver la sesión esta.
Esto tiene que ir aquí arriba.
Y entonces, si es uno u otro, pues renderizará uno u otro, ¿vale?
Por ahora este tampoco vamos a ponerle mucha cosa.
Pronostica.
Cerrar sesión.
Esto ahora lo arreglaremos también.
Sync out.
Sync out.
Esto no hace falta.
Y esto log out.
Y log out.
¿Vale?
Y aquí vamos a poner por ahora typography.
Variante h1.
Typography.
Vamos a poner que sea del...
No, esto sería como...
Renderiza esto como a un h1.
La variante.
Quiero que sea la de atomic title, si no me equivoco.
Y vamos a poner por ahora esto.
Y le ponemos aquí que sea...
Bota tus...
O...
Haz tu pronóstico.
Haz tu pronóstico.
Por ahora hacemos esto.
Esto lo tenemos que sacar de components, ¿vale?
¿Y qué me dice aquí?
Typography.
¿Cuál me falta?
Ah, color.
Me falta color.
Que vamos a poner white mismo.
¿Vale?
Y en intro sería algo parecido.
Así que vamos a poner por ahora esto.
Y al menos que ya veamos que las dos cosas están funcionando.
Y ahora empezamos un poco a...
A mejorar los estilos del...
De este.
Typography.
¿Vale?
Components.
Barra typography.
Vale.
Entonces, si nos vamos a...
Localhost.
4321.
Barra pronósticos.
¡Hostia!
¿Vale?
Vale.
En normal.
Es porque el layout sobra.
Interesante.
Interesante.
Vale.
De hecho, todo esto sobra también.
Esto vamos a hacer que sean sections.
¿Vale?
Section.
Y quitamos...
Quitamos todo el tema del layout.
Que el layout solo tiene que estar a nivel de página una vez.
Entonces, esto.
Section.
¿Vale?
Y aquí.
Barra.
Section.
¿Vale?
Ahora sí.
Entonces, haz tu pronóstico.
¿Vale?
Todo esto tiene que estar en minúsculas.
Haz tu pronóstico.
Y el cerrar sesión debería estar aquí abajo.
Y aquí, el cerrar sesión este.
Vamos a poner...
Vamos a utilizar el action.
Action.
Action.
Este.
El del calendario.
Todo esto.
Nos lo vamos a traer aquí.
Solo que vamos a poner la idea del layout.
Vamos a poner aquí cerrar sesión.
Cerrar sesión de usuario.
Esto no lo necesitamos.
El action básicamente es el componente que nos permite crear como botoncitos.
¿Vale?
Y que ya tiene los estilos.
Ahí.
Esto es action.
Vale.
Cerrar sesión.
Vale.
Ahí tenemos el cerrar sesión.
Nos faltaría...
Esto ahora todavía nos falta un montón de estilillos.
¿Eh?
Pero bueno.
Al menos para que tenga un poquito...
Cerrar sesión.
Vale.
Y aquí un poquito lo mismo.
Entonces voy a usar exactamente lo mismo para que tengamos otra vez lo mismo.
Y aquí...
Action.
Y ahora estilamos el de iniciar sesión.
¡Ojo!
¡Ah, coño!
Claro.
Iniciar sesión.
Claro.
Digo, hostia.
¿Qué ha pasado aquí?
Que está mal.
Que no sé qué.
Y es que me la acabo de copiar exactamente igual.
Iniciar sesión de usuario.
Es que si no, no lo puedo...
Aquí.
Iniciar sesión.
Hace esto.
Cerrar sesión.
Vale.
Vamos a arreglar los estilos de iniciar sesión para que lo tengamos mejor.
Y ya está.
Vale.
Vamos a crear aquí.
Vamos a...
Vamos a...
Vamos a poner la imagen en un lado.
¿Vale?
Para que lo tengamos bien.
Vamos a poner dentro del...
Aquí vamos a poner un aside.
Y aquí vamos a poner el deep.
Y al menos para que tengamos esto ya presentable.
Y aquí...
Como la imagen...
Es que estoy pensando.
Cuando se utilizar un background...
Bueno, voy a utilizar una imagen por ahora.
Imagen o ilustración...
Bueno.
Imagen de la velada 4 con todos los luchadores.
Voy a utilizar la imagen que justamente me he traído.
¿Vale?
El pronóstico...
¿Cómo lo he llamado?
Pronóstico background web.
¿Vale?
Pues esto.
Lo ponemos por aquí.
Pronóstico...
Barra...
Image...
Barra...
Pronóstico...
Diagnóstico...
Tal, tal, tal...
Y esto lo vamos a poner aquí.
Por ahora lo estoy poniendo así porque...
Podría ser un background.
Podría ser un background.
Que a lo mejor tendría sentido.
Pero bueno, por ahora lo ponemos uno al lado del otro.
Y luego vemos cómo lo hacemos.
Luego aquí voy a poner un esmal de para participar necesitas una cuenta de Twitch.
Para que la gente tenga esta información.
Iniciar sesión para participar.
O inicia sesión para participar.
Y aquí le vamos a poner un poquito de información.
¿Vale?
Como H1, el Atomic Title, vamos a hacer esto.
Que esté como...
Este efecto que hemos hecho en algunos sitios que sale como curvado.
Lo vamos a hacer también.
Que sea Text Wrap, Text Center.
Haz tu pronóstico.
Y justo debajo le vamos a poner un párrafo con un poquito de información.
Esto ya no va a ser el texto definitivo.
Pero básicamente para que tengamos alguna cosa para enseñarle al usuario.
Entonces le ponemos aquí.
Podemos poner...
Haz tu quiniela de...
Quien ganará cada combate de la velada 4.
Comparte tu pronóstico.
En redes sociales.
E invita a tus amigos a hacer el suyo.
O a participar.
A participar.
Y a ver que me he puesto.
El ganador se llevará un premio.
Es mentira.
Es mentira.
Pero os voy a contar algo.
Os voy a contar algo.
Que a lo mejor no sabíais.
Vamos a...
Vamos a sortear eventualmente entradas para la velada.
Vamos a sortear entradas doble para que podáis asistir a la velada.
O sea, ojo, cuidado.
Que están muy, muy cotizadas.
Ahora es quiniela.
No quiniela.
Es quiniela.
Quiniela.
Entonces, lo malo.
Pues que no se paga el viaje.
Obviamente.
No se paga el viaje.
¿Es valido para el ATAM?
Sí.
Pero no entra el viaje.
Solo entran las entradas.
No.
Puede participar quien quiera.
Gente de LATAM.
De Ecuador.
De Costa Rica.
De Panamá.
De quien quiera.
Pero.
Pero.
No.
No entra el viaje.
Claro.
Pensad que si ya entras el viaje.
Es todo lo que he podido conseguir.
O sea, que luego no me vengáis.
Ay, que no sé qué.
Eh.
InfoJob no paga el viaje.
Pero me digo sí.
Sí, hombre.
Claro.
Sí.
Ya solo las entradas son la hostia.
Hombre.
Madre mía.
Si va a ser increíblemente difícil conseguirlas.
Os toca.
Os toca el viaje.
Pues os tomáis el viaje de vuestra vida.
A ver.
Que he puesto mal Quiniela.
Me decís.
Ah.
He escrito mal Kuniela.
Y es.
Tenéis.
Es verdad.
Es Quiniela.
Perdón.
Me gusta el proyecto.
No el evento.
Bueno.
Pues nada.
A ver.
No pasa nada.
Que tampoco nadie está obligado a participar.
Midu.
Soy diseñadora gráfica.
Y a pesar de no entender mucho.
Me gusta verte.
Saludos desde Chile.
Oh.
Muchas gracias.
Flan.
Sustancia.
Pues muy bonito.
Gracias.
Te lo agradezco un montón.
Un montón.
Que te pases.
Aunque no entiendas lo que estoy haciendo.
Pero muchas gracias.
Igual las vendo.
También las podéis vender.
Yo ahí ya no me meto.
Yo ahí ya no me meto.
Aunque no sé si serán personales.
Eso ya es un poco más complicado.
Pero bueno.
Para que sepáis.
Una Quiniela es un sorteo que se realiza en España.
Consistente en pronosticar los partidos de fútbol en la liga profesional.
Sí.
No sé si Quiniela en la RAE significa algo.
Juego de pelota.
Apuesta muta en la que los apostantes pronostican los resultados de los partidos de fútbol.
Carreras de caballos.
Y otras competiciones.
¿No entendéis la palabra Quiniela?
Porque si no la entendéis la cambiamos.
¿Entendéis Quiniela o no?
A lo mejor.
Ah, vale.
México significa lo mismo.
Hostia.
México.
Hay que entender que en México polla significa sorteo.
Me parece.
Lotería, ¿no?
O algo así.
O sea.
Voy a buscar la polla de México.
Pero me da miedo buscarlo.
Pero me da miedo buscarlo porque puede aparecer de todo.
Puede aparecer de todo aquí.
Puede aparecer de todo.
Puede aparecer de todo.
Pero, ¿en serio?
¿Qué en México?
No, en Chile.
En Chile, perdón.
En Chile, en Chile.
Es en Chile.
Chile.
Es en Chile.
En Chile.
En Chile.
Ahí está.
Ahora, ahora, ahora sí.
En Chile es donde tienen un sorteo que se llama polla.
Y aquí en España, polla significa una cosa totalmente diferente.
Entonces, me hace mucha gracia por ir por ahí, como vas viendo por todos los sitios.
Aquí está la polla.
Y hay incluso, en Chile, hay un sorteo que se llama el pollón.
Que me hace mucha...
A ver, sé que es mental, ¿eh?
O sea, ¿ves?
Tienen un sorteo que se llama polla y pollón.
Me hace mucha gracia porque es que en España no podríamos decir este tipo de cosas.
El decir, me ha tocado la polla.
Imagínate decir, me ha tocado la polla.
Sería una cosa súper rara en España.
No puedes decir, me ha tocado la polla o me ha tocado el pollón.
Sería muy raro, ¿eh?
Pero Chile tiene al viejito pascuero.
No sé qué es, ¿eh?
En México, polla puede ser una gallina.
Ah, sí, no.
En España también, pero nadie en España utiliza esa excepción.
Bueno, que me ha hecho gracia.
Sé que mi edad mental son cinco años, ¿vale?
Pero bueno, solo lo quería compartir para que tengáis esta información también útil en vuestra vida.
Vale, pues bueno, esto ya va pintando un poquito mejor.
Ya va pintando un poquito mejor.
Vale.
Ah, espérate.
Iniciar, tatatá, haz tu...
Vale, entonces, decís que quiniela no se entiende.
Entonces, ¿cómo puede ser que pongamos lo de quiniela, si queréis?
Si queréis.
No sé, ¿cómo lo hacemos?
Es que no quiero repetir otra vez pronóstico.
Bueno, mientras vais pensando, ¿vale?
Yo voy a ir haciendo cositas.
Como voy a poner un absolute por ahí, podría poner un float, pero voy a poner un absolute.
Vamos a poner que uno queda al lado del otro.
Justify between, que bueno, un absolute tampoco hace falta, ¿no?
O sea, podríamos ponerlo así.
Para que esté uno al lado del otro, ponemos el gap.
No hace falta un absolute.
Igual después...
Ah, ya sé para qué vamos a necesitar un absolute.
Ya sé.
Justify...
Más que between, sí.
No, between, claro, claro.
Es que estaba pensando en hacer el center y no tiene sentido.
Mejor el between para que justamente...
Vamos a ponerle un máximo aquí para que no...
Para que esto sea más pequeño, el tema del texto.
Porque esto no es tan necesario.
Y no sé si poner algo así.
Y el justify center, item center, ¿vale?
Yo creo que así esto tiene un poquito más de sentido.
Esto, el small, mt4, ¿vale?
Bueno, mt2, tampoco hace falta que mucho.
Haz tu pronóstico, haz tu opinión de general, comparte tu número en internet, ¿vale?
El tema es que vamos a hacerle...
Porque el modo mobile es un poco pirata.
Claro, para que quepa bien y como quiero que más o menos aparezca la imagen...
Que por cierto, la imagen está cortada.
Esto lo he explicado hoy en Instagram.
Si has estado atento en Instagram, habrás visto que hoy justamente he explicado con Alana...
He explicado cómo arreglar esto.
Ya lo hemos hecho unas cuantas veces, pero ¿ves?
Que sale cortado.
Cortado, está cortado.
¿Cómo se puede arreglar esto?
Con el mask image.
Pues ya lo hemos hecho unas cuantas veces, ¿ves?
Pues nada, fácil.
Además, por defecto el mask image ya queda bastante bien.
Porque mask image.
Porque ya utilizando el linear gradient, justamente por defecto es de arriba a abajo.
Entonces le decimos que pinte hasta el 80% de la imagen y luego que sea transparente.
Y ya hace este efecto que hace que la imagen quede mejor integrada.
¿Vale?
Y lo que sí que vamos a poner aquí en el aside, esto es donde va a estar el asunto.
En modo móvil, no sé si ponerlo en LG.
En LG a lo mejor.
Relative.
¿Vale?
Básicamente para que quede detrás.
Como obviamente esto queda un poco raro, vamos a tener que poner bastante opacidad, ¿vale?
Para que no moleste tanto, ¿sabes?
Que quede algo así, como casi imperceptible.
Algo así.
Incluso, no sé si poner a lo mejor que ocupe menos espacio.
No sé.
Opacidad LG, opacidad 100.
¿Vale?
En LG la opacidad tiene que ser 100.
Algo así.
Y también aquí, claro.
Esto tendría que ser que como mínimo...
No sé si el section...
Claro.
Esto va a quedar un poco de aquella manera.
Pero ahí lo tendríamos.
Bueno, no me desagrada.
Lo que pasa es que...
Uy.
Uy.
Vale.
Esto, mgh auto.
Min h.
Esto se puede quitar.
Feed min content.
Vale.
Pues algo así.
Vale.
¿Por qué cuando se pone pequeño...?
Hay un momento...
Ah, porque este...
Vale.
Pues algo así.
No sé.
¿Qué os parece?
¿Queda bien?
Más o menos.
Para que se vea más o menos.
¿Qué os parece?
Se ve bien.
Sí, ¿no?
Yo creo que...
No sé si ponerlo más arriba.
¿No?
O sea, que a lo mejor...
Esto de pronóstico y tal...
Creo que debería ir más arriba.
¿No?
Porque a lo mejor en móvil...
No se ve.
Entonces yo creo que lo deberíamos poner un poquito más arriba.
A ver.
¿Por qué esto está tan arriba?
Claro.
El problema es que esto debería...
Claro.
Como le hemos puesto min...
Hmin...
En lugar de poner...
Es que también es por el script.
Se ve perfecto.
Midu, midu, wow.
Midu, midu, wow.
No.
Pues todavía yo creo que...
Que podríamos hacer algo...
Para que no quede tan...
¿No?
Porque...
No es 72.
Vale.
Algo así.
Algo así.
Es que si no queda demasiado bajo.
¿Vale?
Entonces ahora...
Quedaría así.
Y si lo miramos en móvil...
A ver cómo queda móvil.
Móvil...
Vale.
Perfecto.
¿No?
O sea, yo creo que bien.
Que se vea ahí de fondo.
Y ya está.
Y cuando lo quitamos...
Vale.
Pues venga.
Vamos a poner este pronóstico.
Add pronóstico page width de intro.
Venga.
Vamos con el de...
Vamos...
No sé si poner ya base de datos o con el de los votos.
Utiliza predicción.
Vale.
¿Predicción?
No gusta más pronóstico.
Predicción.
A ver.
Haz tu predicción.
Aquí sí que lo puedo poner.
Pero no sé si...
No.
Es que apuesta...
Apuesta es polémico.
Porque apuesta...
Puede ser algo nocivo.
Puede ser algo nocivo.
Y hay gente que puede entender que hay dinero por medio.
O que...
Entonces no quiero poner apuesta.
¿Vale?
Apuesta es...
Hay que evitarlo.
¿Vale?
Apuesta lo evitamos.
Haz tu pronóstico.
Dices que este a lo mejor podría ser el primary.
Entonces mejor.
O predicción.
Predicción me gusta.
Pronóstico también me gusta.
Mira.
Haz tu pronóstico.
Haz tu pronóstico.
Inicia sesión para participar.
Ta, ta, ta.
Entonces se supone que ahora le daremos clic.
Y al darle clic debería...
Esto que es inevitable.
No se puede hacer nada.
Y aquí haz tu pronóstico.
O sea, ya al menos tenemos la página del haz tu pronóstico.
Eh...
Ostras.
Un detalle.
Un detalle.
Porque he visto una cosa.
Cuando le damos...
Esto se puede mejorar un poco.
Voy a hacer esto que es una tontería.
Y me parece un nice to have.
Que le da ese toque.
Ese toquecito.
A ver.
El tema es que cuando le damos clic.
Como esto tarda un rato.
Lo que podríamos hacer es...
Primero dejamos el singing.
Pero el login lo vamos a desactivar.
Creo que con el área disable mejor.
Y lo ponemos en true.
¿Vale?
Y luego le vamos a cambiar también el inner text.
Y le vamos a poner aquí iniciando sesión.
Creo que es un detallito.
Que puede quedar bien.
Uy, ha hecho algo raro.
¿Por qué ha desaparecido el texto?
Debería aparecer de una el texto.
Ha hecho algo raro.
A ver.
Ah, es que es el span.
Vale.
Entonces.
Punto.
Query selector.
Span.
Vale.
Punto.
Inner text.
A ver ahora.
Ahora mejor.
Bueno.
Le da un toque, ¿no?
Porque como hay un retardo ahí.
Pues así.
Además no le puedes dar más veces.
Bueno.
Es una tontería, ¿eh?
Pero bueno.
Creo que le da un toquecito.
Sesión.
Iniciando.
Sesión.
Text and disable button.
Vale.
Vamos con más cositas.
Poco a poco.
Poco a poco.
Vamos avanzando.
Vamos avanzando, amigos.
Sincronizamos cambios.
A ver.
Voy a mirar un momento las PRs.
No vaya a ser que haya algo ahí que se me esté escapando y que hayáis arreglado que
sea increíble.
17.
Declaración boxeadores.
Cambiar besos en los combates.
Refactorización de lógica por coherencia en UI.
Uf, madre.
He hecho que las declaraciones se vean más anchas en desktop.
Vale.
A ver si encuentro esto para ver el preview.
Si es que le pedí a Alejandra.
A ver si las podía hacer más anchas.
Vale.
Lo que pasa es que a lo mejor demasiado anchas porque como que ocupan mucho.
Vale.
Lo miraré.
La hablaré con ella.
Cambiar besos por 2 vs 2.
Hostia.
Esto me da bastante rabia.
Esto lo voy a arreglar en un momento.
Lo voy a arreglar porque es que cada vez que lo veo.
Esta solicitud de extracción introduce cambios para resolver problemas donde los adversarios
seleccionados por click no se mantenían consistente al pasar ratón por encima de otros
boxeadores y luego navegar hacia atrás.
El último boxeador sobre el cual se pasaba ratón se marcaba con seleccionado, lo que
causaba confusión al mostrar una selección diferente al que usuario había hecho
click originalmente.
No entiendo esto.
No entiendo.
Modificación de la lógica.
Vamos a ver lo que hace esto.
¿Qué es lo que hace?
Esto lo está guardando el local storage.
Pero claro, el local storage, claro, esto puede funcionar bien en algún momento, pero
el local storage es muy peligroso, sobre todo cuando trabajas con pestañas, ¿no?
Porque si le das más importancia al local storage, se pasaba ratón se marcaba con
seleccionado, lo que causaba confusión al mostrar una selección diferente.
al usuario al que había hecho click originalmente.
Claro, porque se cambia la URL cuando se hace hover, ¿no?
O sea, cuando estamos aquí, se cambia la URL cada vez que se hace hover y entonces tú
le puedes dar click a algo, pero a lo mejor vuelves para atrás.
Bueno, no sé, es un poco raro.
No entiendo muy bien.
Es verdad que cuando haces hover se cambia la URL y que le puedes dar click a otro, pero
no sé, me parece un poco rebuscado, ¿no?
¿Te enteras más en lenguaje de programación que humanos?
No, sí, sí, sí, a veces pasa, ¿eh?
No por nada, no por nada, sino porque creo que es más fácil, ¿eh?
No se puede hacer que esa ventana blanca de autentificación se abra un pop-up de manera
que no se vea esa carga.
No hay forma fácil, la verdad, porque tiene que hacer una redirección en la página.
Entonces, creo que no, lo podríamos mirar, pero es que sería algo muy interno de la página.
Entonces, creo que no.
No se puede hacer nada con la página que se ve.
No sé si podría, es que no, no se me ocurre.
No, no se me ocurre.
No puedo duplicar el error, es más complicado hacer el error.
Sí, sí, es que es complicado, ¿eh?
El error me parece un poco complicado.
A ver, voy a arreglar una cosa que me tiene un poco molesto, ¿vale?
Y es que en boxeadores, a ver, es que ya lo he visto unas cuantas veces y lo tengo que arreglar.
En temas que cuando vamos a los boxeadores, por ejemplo, vamos a Nisakster,
aquí, esto que se ve aquí no es el nombre, es la ID.
Y claro, queda un poco raro porque, ¿ves?
Es que es raro, es raro.
A ver, vamos a ver esto, un momento.
Vamos a ver un momento esto.
He visto lowercase, ta, ta, ta, versus boxername.
Vale, boxername.
El tema este del boxe...
Ah, no, boxer.name, o sea, que sí que es el nombre.
Pensaba que no, pero sí, sí, sí que es el nombre.
Pensaba que era la idea, eso es que lo han tenido que arreglar.
O sea, que ya es un tema visual, más que otra cosa.
Vale, pues vamos a hacer una cosa, porque como me parece chulo esto del versus y tal,
le vamos a dar la vuelta a esto un momento.
Es que, más que nada, porque es que parece como que está raro.
Y yo creo que es por el peso de los... como del texto.
Entonces, vamos a hacer que esto esté en un span.
Este le vamos a poner que tenga un text white.
Vamos a hacerlo al revés.
Y que esto sea primary.
¿Vale?
Vale.
Y aquí hay que poner un espacio.
Es que creo que queda mejor.
Es que si no queda raro, porque el título...
Como los nombres de los luchadores no los hemos puesto así en ningún sitio,
queda un poco raro que se vea así, porque parece que sean la acidez, justamente, ¿no?
Entonces creo que tiene más sentido que hagamos algo así.
Lo que podríamos hacer también, no sé si hacen o más pequeño el versus...
No, o más grande.
No sé si hacen lo más pequeño o más grande.
¿Sabes?
Para que llame más la atención, más que lo otro.
Pero bueno, al menos ya me quedo más tranquilo.
Algo así, ¿sabes?
Algo así.
Para que se vea un poquito mejor.
A ver, entre los combates, evento...
Si vamos a uno de estos, que son los más complicados.
La verdad es que aquí yo creo que lo que vamos a poner aquí es el rey de la pista.
¿Sabes?
Como más fácil.
Esto lo arreglaremos para que no aparezca versus versus, que queda un poco raro.
Y aquí...
A ver cómo queda esto.
Versus...
Claro, y esto está mal.
Este está mal porque no debería poner versus.
Debería ser Zelling y Nisakster versus Alana y Amaulitz.
Que esto lo ha arreglado alguien en una PR.
Lo que pasa es que no me terminaba de convencer la forma en que lo ha arreglado.
Pero bueno, vamos a arreglar en los estilos estos.
Fixed styles for names.
Que creo que tiene más sentido porque es que de lo otro queda un poco raro, ¿no?
Sí, con un and podría ser también, ¿no?
Con un and también, lo que sea.
El rey de la pista suena que van a bailar.
Sí, sí, totalmente, ¿eh?
Totalmente.
Vale.
Pues vamos con...
Vamos con...
Podría hacer...
O el bot...
Voy a hacer el bot.
Va.
Vamos a intentar darle...
Empezar.
No sé si lo terminaremos, pero al menos para avanzarlo bastante.
De el bot sería el componente.
Cuando vamos a pronósticos...
Pronósticos...
¿Vale?
Aquí.
Esta es la página, ¿no?
Haz tu pronóstico.
Por ahora, la idea sería mostrar los combates.
Entonces, primero vamos a mostrar los combates, que sería algo parecido a lo que tenemos aquí en el index.
Tendríamos que sacar un montón de cosas porque este componente, este método lo hemos pegado ya un montón de veces.
Y lo ideal sería no repetirlo.
Pero bueno, primero lo hacemos, luego lo arreglaremos.
¿Ok?
Combates y el rey de la pista.
Rey de la pista.
Se supone que aquí es donde ya podemos votar.
¿Vale?
O sea, aquí ya deberíamos ser capaces de ver todos los combates.
Entonces, primero vamos a listar todos los combates, solo que el cómo vamos a listar los combates será diferente a la página de combates.
Porque deberíamos poder elegir izquierda o derecha quién creemos que va a ganar.
Entonces, voy a copiarme esto por aquí.
Vamos a...
Básicamente, la lógica de renderizado sería la misma.
Pero el renderizado que vamos a hacer debería ser diferente.
¿Vale?
Image.
¿De dónde es el image?
De este.
¿Por qué?
No es de astro...
A ver, import, image.
¿De dónde sale?
¡Hostia!
Ahora no estoy importando el image de ningún sitio.
Si lo estamos utilizando el otro día.
Image.
Aquí.
¿De dónde lo saca?
Ajá.
Ah, es que es de assets.
Vale, vale.
Es así, es nombrado.
Vale, vale.
Es que estaba alucinando.
Estaba alucinando.
Digo, ¿por qué no lo saca?
Vale.
Primero que se vean listados los combates.
Vale.
¿Qué pasa?
¿Qué pasa?
Que esto es complejo.
Es complejo porque, de hecho lo tengo por aquí, este no, pronóstico, esto sí, vale.
Tengo por aquí estas imágenes, que son las imágenes de los luchadores, o sea, de los equipos separados.
No tengo todos todavía, porque claro, es que esto es un trabajo, pero la idea es que aparecerá cada uno al lado en la mitad.
Bueno, vamos a ver cómo queda, pero en la mitad aparece esto, al lado aparece este,
al lado aparece este, los dos aparecen con un color bastante como en blanco y negro,
y cuando te pongas encima, pues la idea es que se ajuste.
¿Qué pasa?
Con el rey de la pista va a ser un poco más complicado, y seguramente lo que haremos es que para el rey de la pista
aparezcan los muñecos así, ¿sabes?
O sea, los muñecos.
Pobrecitos, pobrecitos los muñecos.
No, que aparezcan en pequeñito, ¿sabes?
Que aparezcan así en pequeñito y que le des al ganador, solo a uno de ellos y ya está.
Eso sería el tema.
¿Qué dice?
Dice, tres repeticiones y strike, lo dice el bueno de Martin Fowler.
Bueno, pues mirad, he hecho tres repeticiones, ahí lo hemos dejado, ¿eh?
Así que no pasa nada.
Ya perdiste la cabeza.
Cada vez peor, antes al menos eran personajes, totalmente, ¿eh?
Pero que me perdonen, que me perdonen.
Vale, pues venga, vamos a ver si somos capaces de hacer esto.
Venga, vámonos a los pronósticos otra vez.
Pronósticos, pronósticos, pronósticos.
Y aquí, vale, no queremos estas imágenes.
También es verdad que necesitamos otra cosa, que necesitamos un montón de cosas.
Necesitamos los equipos de los combates.
Entonces, los combates...
Aquí tenemos boxers, Agustín, boxers.
Aquí vamos a poner teams.
Vamos a poner Celine y Zaxter.
A ver.
A ver, source, pronósticos, en public, imágenes.
Vamos a poner aquí boxers.
No sé si boxers o match.
No sé si...
Vale, yo creo que son boxers en general.
O sea, esto que tenemos aquí, esta gente.
Vamos a optimizar estas imágenes.
Estas imágenes, las quitamos.
Es que son PNGs de 3 megas, ¿sabes?
Entonces, vamos a optimizar estas imágenes.
Permitimos esto.
Vamos a poner solo webp.
Que como no hace falta que sean tan grandes, vamos a hacer que sean 1200.
Vale, le damos a Start.
Ahí, he dejado el sufijo.
Ah, bueno, como no ha funcionado todavía.
Stop loading.
Vale, Start.
Vale, ya está.
Y aquí tenemos las imágenes optimizadas.
Que se ve casi que igual.
Vale.
Entonces, en los combates deberíamos tener a Lana Amablitz.
Aquí.
Y esto aquí.
Estos serían los equipos.
Y aquí una coma.
Entonces, vale.
Teams.
Teams.
Vamos a tener...
Bueno, un string.
Bueno, sí.
Tiene que ser un string de arrays.
Pero que esto sea opcional.
Vale.
Esto no lo tendrán todas.
Pero como es un caso especial, pues ya lo tendríamos ahí.
Vale.
Entonces, en los votos, el tema es...
Esto, ¿por qué no...?
El...
Ah, porque no he puesto la VL.
Este.
Esto tiene que es una lista.
Que aquí es donde haremos todos los votos.
Vale.
Aquí tenemos la lista.
Ahora, la imagen esta.
Esta imagen no la queremos.
Solo aparecerá esta imagen.
Y a los lados es que deberíamos poner cada uno de los...
De los luchadores.
Entonces, este anchor tampoco lo necesitamos.
Esto es lo que decía que íbamos a cambiar algunas cositas.
Dentro de cada anchor se supone que debemos tener la imagen de...
Vamos a ver.
Vale.
Para simplificarlo al principio, porque si no sería un poco raro cómo lo teníamos todo.
Y como tenemos aquí todos los...
Alana...
Vale.
WP, WP, WP...
Vamos a hacer que todos sean el Mariana.
Para simplificar.
Vamos a hacer que todos sean el Mariana.
Ah.
Se me ha olvidado Plex.
Aquí.
Madre mía.
Está fuerte ahí Plex, ¿eh?
Sale...
Sale fachero.
Sale bien bonito.
Vale.
Vamos a poner Plex.
Este por aquí.
Este por acá.
Esto sería Flex.
Flex row.
Aunque...
Justify between.
Sí, es que estoy pensando en una cosa con esto.
¿Vale?
Aquí deberíamos poner fotografía de...
Y de hecho esto deberían ser botones.
O sea, esto debería ser un botón.
Que esto además tendría que ser contrast cero.
O sea, contraste cero.
Pero cuando hacemos hover, pues el contraste va a 100.
Con el transition.
Vale.
Esta sería un poco la idea.
Vamos a añadir aquí los dos.
A ver cómo va quedando.
Hostia.
No veas.
La que hemos liado ahí.
La que hemos liado ahí.
Vale.
¿Por qué no me están saliendo las imágenes?
Porque la imagen esta tiene que estar en barra, image, barra, boxers.
Vale.
Botón uno a cada lado.
Voy a cerrar esto también.
Vale.
No es el contraste.
No es el contraste.
La he liado parda con el contraste.
No es el contraste.
¿Sería el brightness?
No, el saturate.
Es el saturate.
¿Vale?
La saturación.
Saturate.
Vale.
Vale.
Y esa sería un poco la idea.
Lo que podemos hacer es que la saturación sea bastante alta cuando haga algo así.
Hostia.
Ah, digo, porque este...
Vale.
Porque este botón también lo tengo que hacer aquí.
Vale.
Y esto debería quedar en medio.
O sea, que esto...
Esto que pone absolute.
Esto lo ponemos relativo.
Esto le ponemos que sea...
Inset 0 m auto.
Vale.
Y ahora lo que deberíamos hacer es que cada uno tenga uno.
¿Vale?
O sea, aquí esto es el Mariana.
Este debería ser el Mariana.
El Mariana.
Y esa sería la idea.
Ahora esto lo hacemos un poco más pequeño porque obviamente es demasiado grande.
Y además deberíamos en realidad...
Deberíamos separarlos.
¿Sabes?
Deberían como que estar...
O sea, que el problema no es tanto que ocupe más.
A ver.
2XL.
2XL.
Sino que cada imagen...
La class de la image...
Esto debería tener un tope de alto.
Y vamos a poner que la altura...
O sea, si ponemos que esto sea automático...
Le ponemos que la altura tenga una altura...
Yo qué sé.
Hostia.
Pobrecito.
Pero si le he puesto que es automático.
¿Por qué no me está guardando la relación de aspecto?
Ahí...
Claro, es que poner la relación de aspecto en todos es un poco problemático.
Claro, le puedo poner esto, pero...
Es que quiero que tengan la misma altura.
Porque es que si no va a ser un poco...
A ver, ¿por qué la he liado aquí?
A ver si me lo comentáis, ¿eh?
Es en el botón.
Es en el botón.
Bueno, también puede ser.
Hauto.
Es en el botón.
No tengo muy claro que sea en el botón, pero...
Vale.
Si no, le deberíamos poner Object Fit y tal.
A ver.
En este caso, no.
Me está ignorando mi mente, ¿eh?
Ahí me está ignorando.
A ver.
Vamos a hacer esto un poquito más grande.
Esto por aquí.
Vale.
Este es el botón.
¿Ves?
El botón no es este.
Hauto.
Full.
No.
Esto debería ser, pues, algo así, ¿no?
Entonces, a partir de aquí, ya lo tendríamos que poner así.
O sea, cada botón, más que la altura, deberíamos decir que la anchura sea una en concreto, ¿no?
Vamos a poner 260.
A ver.
El problema es que, como tenemos que ir cambiando los dos, es un poco molesto, ¿eh?
Vale.
Y luego aquí, el tema, tenemos un botón, aquí el carrera, no sé qué, no sé cuánto, y aquí otro botón.
Y esto tendría que ser un poco más grande.
De hecho, no sé si poner más bien así.
Para que así, cuando le quitemos este...
Tu, tu, tu, tu, tu, tu.
¿Max width 100%?
A ver.
Es que estoy pensando, si le ponemos, por ejemplo, 1000, algo así.
Pero claro, es que tiene que quedar...
Este también tiene que tener un max width.
O sea, este es que ahora mismo no tiene...
Tiene un width ahí puesto a manija.
O sea, un tanto por ciento.
Tendríamos que ponerle algo así.
¿Vale?
350.
Vale.
Entonces nos vamos aquí a la imagen.
Y en lugar de que sean medios...
Bueno, ya ahora mismo no tenemos nada de esto.
Vamos a ponerle que sea una cosa en concreto.
Tu, tu, tu, tu, tu, tu, tu.
200.
¿Cuánto hemos puesto aquí?
350.
Bueno, pues vamos a poner...
320.
Hauto.
¿Vale?
Y ahora este...
Este además le vamos a poner pointErevenSknown.
Porque como está ahí en medio, que no moleste.
¿Vale?
Y al menos ahora ya teníamos estos dos.
¿Vale?
Vamos a hacer ahora que tengan la separación.
Porque básicamente esto...
Vale.
El tema es que en algún punto...
Puede ser este.
Ahí está.
Este section necesitamos que ocupe todo el espacio.
¿Vale?
Full.
No sé si este sea necesario.
No es necesario.
Vale.
Entonces, ya tenemos ahí el full.
Este no es necesario.
Y aquí...
Este sí que sería necesario para hacer...
Flex Direction Column.
Justify Center.
Align Center.
Claro, pero en cuanto pongo el Align Center...
Cabrón este.
Ahora sí.
Vale.
Entonces.
En el ul ponemos...
Flex.
Justify Center.
Item Center.
Esto.
¿Y qué más?
Ah.
Flex Call.
Y aquí...
Esto lo voy a comentar por ahora.
Que no lo vamos a poner.
Y aquí en el Lee...
Vamos a ponerle...
Este full.
Con el máximo.
¿Vale?
Y ahora sí le vamos a poner el Mariana.
El Mariana.
Para que tenga ahí la fotografía correcta.
Vale.
Esto de cerrar sesión lo vamos a cambiar.
¿Eh?
Porque es como demasiado grande.
Y esto por ahora no...
Ahí no tiene mucho sentido.
Y este...
Obviamente...
También tendríamos que poner Text Center.
Y...
Tu pronóstico.
Vale.
Y ahí...
Ahí va ya...
Va tirando.
Va pillando.
Qué bien queda que esté delante de uno u otro detrás del cartelito.
Bueno, eso ha sido sin querer.
¿Te concentra más si estás haciendo stream o siempre que estás tan enfocado?
No, hombre.
Me concentro más cuando no estoy haciendo stream.
Porque no estoy pensando nada, ¿no?
¿Qué he cambiado hasta guañar?
Sí, sí ha cambiado.
Se ha puesto ya fuertísimo.
Tendría que tener un pequeño scale.
Ahora vamos mejorando.
Como un recuadro transparente no es intencional.
Sí, hay algunas imágenes que se ha colado un...
Esto se ha colado una sombra que tengo que arreglar.
Lo arreglaremos.
Está un poco exagerada la situación.
Creo que cuando se pasa por encima.
Solo es cuando se pasa por encima.
Es cuando se pasa por encima.
Igualmente la imagen tiene bastante saturación.
Lo he hecho aquí.
De hecho el Saturate lo podemos cambiar.
Para que sea del 100.
Hover, Scale.
Y así le he cambiado la escala.
¿Vale?
Y hacemos algo así.
Para que elijas el ganador.
Y ahora ya sí que podemos ponerle otra vez todo el tema del mask.
Mask, image.
El Linear, gradient.
Alguien una vez me hicieron una pregunta muy interesante sobre esto.
Que me decía.
Oye, ¿por qué no lo haces con Photoshop?
¿Por qué no lo haces con Photoshop esto?
Y hay una explicación bastante buena.
De por qué.
Tiene un por qué.
Tiene un por qué no hacer esto con Photoshop.
¿Ves?
Este efecto así.
¿Por qué no hacerlo con Photoshop?
Pues lo interesante de no hacerlo con Photoshop son dos cosas.
Uno.
Haces que la página de...
O sea, que la imagen ocupe menos.
Porque si lo haces con Photoshop.
Lo que son los degradados de transparencias y tal.
Suelen ocupar bastante espacio.
La rasterización de la transparencia de opacidad.
Y hacer esa transición.
Suele ocupar bastante.
Y hace que tus imágenes pesen un montón.
Eso es lo primero.
Y lo segundo.
Es que obviamente.
Va a permitir que tus imágenes.
Sean mucho menos personalizables.
Y siempre que quieras cambiar la transparencia.
O el tipo de transparencia.
Vas a tener que pasar por Photoshop.
En cambio.
Si lo haces por CSS.
Lo bueno que vas a tener.
Es que básicamente.
Pues si dices.
No.
Aquí lo quiero así.
Aquí lo quiero así.
Quiero ahora cambiarlo.
O lo que sea.
Pues va a ser mucho más fácil.
Y mucho más sencillo.
Eso sería.
Básicamente las dos razones por las que hacerlo.
¿Hay una cosa mala?
Pues obviamente.
Siempre hay cosas malas.
La cosa mala.
Sería.
Que.
Que.
Que.
Le estás añadiendo un poquito de trabajo al navegador.
Pero lo bueno es que es una cosa que está pasando.
En la tarjeta gráfica.
Y que en general.
No deberías tener problemas de rendimiento.
No sería mejor que en el joven hagan la saturación a las dos imágenes.
No Mauricio.
Igual has llegado tarde.
Pero si tienes que elegir a un ganador.
Solo puedes elegir a uno.
¿No?
Solo puedes elegir a uno.
No puedes elegir a los dos.
Que yo sé que te gustaría elegir a los dos.
Porque yo sé que el Plex y el Mariana.
Pues están facheros.
Y están fuertes y tal.
Pero.
Solo puedes elegir a uno.
¿Vale?
Entonces.
La idea es que elijas solo a uno de los dos ganadores.
Tienes que elegir en el pronóstico.
Quién crees que va a ganar.
¿Ok?
Entonces.
Esa es la razón.
En el rey de la pista.
Plas.
Luego cada uno lo haremos.
Y no hay empate.
No.
No hay empate.
De hecho en el rey de la pista.
No sé si podremos.
No sé si hacer el ganador.
O los tres.
Porque se puede.
Creo que quedan tres primeros.
No sé.
Lo pensaré.
A ver cómo lo hacemos.
Ponle filtro de gatito al Mariana.
Qué malos sois.
Vas a ver el gatito.
Vais a ver el gatito.
Estaría guapo que pusiera winner abajo.
Hostia.
Claro.
Estaría chulo que cuando te pongas encima.
Aparezca aquí.
Ganador.
Muy bien.
Me parece.
Me parece interesante.
Como eso lo tenemos en el select your boxer.
Que tenemos.
No.
En el column boxer.
Tenemos aquí.
Oponente.
¿No?
Oponente.
¿Dónde tenemos lo de oponente?
Aliado.
Joder.
¿Dónde?
¿Por qué no me encuentra nada esto?
Aliado.
Yo juraría que esto lo tenemos aliada.
Claro.
Es que es aliada.
No es aliado.
Es aliada.
Ok.
Claro.
Porque solo está para las chicas.
Pues lo que podríamos hacer.
Es que el botón.
Vamos a hacer que el botón.
Class.
Vote.
Vote team.
¿Vale?
Vote team.
Y vote team.
¿Vale?
Podríamos hacer que cuando estamos.
Tu, tu, tu, tu, tu.
Vote team.
Cuando hagamos el hover.
Hover.
Ganador.
Apply.
Eh.
Apply.
A font atomic.
Ganador.
¿Vale?
Vale.
Esto es con uno.
Solo.
Ganador.
De hecho.
Podríamos hacer esto un poco mejor incluso.
O sea.
Porque esto.
Si ya lo hacemos que.
Bueno.
A ver.
No hace falta.
No sé si vale la pena hacer esto.
Pero básicamente que apareciera con un.
A ver si lo puedo hacer.
Animate fading.
No sé si esto va a funcionar.
Bueno.
En lugar de fading.
Podemos hacer fading up.
O fading o up.
Slide.
In top.
A ver.
Ah.
Es que sin top es.
Lo malo es que queda.
Puede quedar raro.
Por el.
Por el efectillo ese.
Pero.
A ver.
Bottom.
Left.
Cero.
Y el.
Vote team este.
Aquí tendríamos que dé un relative.
Y aquí otro relative.
Vale.
Y aquí.
Te te te te.
Left.
Right.
Cero.
MX auto.
Bueno.
No sé si hacer solo opacidad.
Y ya está.
¿No?
Porque igual es demasiado movimiento.
Creo que.
Con fading ya.
Mate fading.
Ya estaría.
Lo único malo de.
Lol.
¿Qué está pasando aquí?
¿Qué está pasando?
Pero bueno.
Esta sería un poco la idea.
Me gusta.
Sin animación.
Bueno.
Yo creo que con fading solo.
Yo creo que con fading ya estaría.
Yo creo que con fading ya estaría.
O sea.
Algo así.
Un poquito.
Mejor ese winner solo salga cuando ya lo seleccionaste.
Para que no se vea que.
Ya se vea que es tu gallo.
Bueno.
Podríamos poner.
Selecciona.
No sé.
¿Cómo lo podríamos hacer?
¿No sería mejor colocar el nombre de cada boxeador debajo de la imagen de cada quien y dejar solo en el medio el símbolo de versus?
Bueno.
Eso es porque para reutilizar esta imagen.
Y ya está.
Que está bastante bonita.
El tema de carrera versus.
Y ya.
Yo creo que se entiende más o menos quién es cada uno.
Ahora.
Lo que habríamos que hacer es cambiar las imágenes.
En un slider no se verían mejor.
En un slider.
Pero es que aquí no tiene sentido hacerle un slider.
Porque hay que elegir cada uno.
O sea.
Hay que darle un clic a este.
Hay que darle un clic a este.
Hay que darle un clic a este.
Yo creo que puede estar bien con un scroll más que con un slider.
Y además que justamente sería peor el hecho de tener que estar scrollando.
Y según donde lo hagas es un poco raro.
¿Y si el zoom se hace solo cuando se hace clic?
¿Sí?
Pues a ver.
Lo podemos probar.
Y la info de cada boxeador con el hover.
Y cuando se haga clic se quede saturado.
La info.
Pero qué info quieres que aparezca.
No estás tomando en cuenta los que tienen las animaciones desactivadas.
Las animaciones desactivadas.
Pero estas animaciones las van a ver igualmente.
O sea.
Tú puedes desactivar lo que quieras.
Lo que vamos a hacer es que cuando des clic vaya al siguiente.
Eso es lo que vamos a hacer.
Que cuando le des clic.
Pues entonces vaya al siguiente.
Y luego al siguiente.
Y que automáticamente tú haces un clic.
Y vaya al siguiente.
Que creo que estaría chulo.
¿Quedaría guapo poner el ganador el nombre del pelador?
Ganador Plex.
Ganador Mariana.
Info importante para saber nombre, altura.
No.
Pero esa información ya la tenemos en otro sitio.
Es que aquí.
O sea.
Esa información ya la tenemos aquí.
Entonces.
Vamos a mostrar otra vez.
Todo el rato la misma información.
Y ahí está.
¿Se refiere al prefered reduced motion?
Claro.
Claro.
Pero es que el prefered reduced motion.
O sea.
Lo podemos añadir.
Y lo añadiremos.
Y tal.
Pero no sé si se refiere a que no iba a haber el hover.
Porque eso sí que lo va a haber.
Bueno.
Igualmente estaría bien dejar la preselección antes de enviar los votos.
Vamos a hacer que cada vez que seleccione uno envíe el voto.
Entonces.
Si tú cambias el voto.
Pues se vuelve a enviar y ya está.
Y ya está.
O sea.
Lo vamos a hacer así.
Porque si no va a ser un poco rollo.
¿Sabes?
Que la gente va a estar ahí pendiente de.
No.
Es que le tengo que dar al enviar final y tal.
Porque hay gente que a lo mejor o no quiere enviarlos todos.
Lo que sea.
Vamos a hacer eso y ya está.
Entonces.
Tú le vas a ir dando clic.
Y cuando le des clic irá al siguiente.
Y lo vamos a hacer así.
Porque si no la gente.
Lo que sí que puede ser es que enseñemos el tanto por ciento.
Eso sí que creo que lo vamos a hacer.
Y luego cuando veamos esto.
Porque cuando tengamos las imágenes finales.
Adaptaré lo del medio.
Porque estas no son las imágenes finales.
Cuando tengamos las imágenes finales de los luchadores.
Seguramente los separaremos un poco más.
Y lo que yo creo que vamos a enseñar.
Es el tanto por ciento de los votos.
Que eso sí que me parece interesante.
Así que por ahora.
Vamos a añadir aquí las imágenes.
Add images for voting system.
Y la semana que viene empezamos base de datos.
La semana que viene empezamos base de datos.
Así que estén atentos.
Add new vote system.
Empezamos la base de datos.
Que eso va a estar interesante.
Vamos a utilizar astroDB.
Y a ver qué tal.