Hemos avanzado mucho en diferentes funcionalidades y reglas
detrás de nuestro juego de palabras.
Creo que es un buen momento para nosotros
para pulir el estilo de nuestra aplicación un poco más.
Para lograr eso, he hecho estos dos nuevos commits aquí.
Déjame que te los explique.
Quería añadir una pequeña animación
cada vez que el usuario no en enviar una conjetura.
Para lograr esto, entré en el componente GuessInput
y creé una ref booleana llamado ηasFailedValidation.
Esta ref cambia a true
tan pronto como el usuario no en enviar su conjetura,
y luego cambia de nuevo a falso 500 milisegundos después.
Uso esto para enlazar a una clase css llamada shake.
Esta clase sólo activa una pequeña animación translateX
en el elemento DOM que la contiene.
Veamos qué aspecto tiene.
Si intento hacer una entrada que no es válida,
se dispara la animación de sacudida.
También quería tener una pequeña animación de giro de tarjeta
después de una conjetura se envía con éxito.
Hay muchas maneras de conseguirlo.
Lo que he decidido hacer es hacer uso de scss.
scss es un preprocesador css muy popular.
Entre otras cosas,
te permite definir bucles for mientras creas tus reglas css,
como este de aquí.
scss va a leer este bucle de aquí y compilarlo en esto.
Esta es una manera increíble para que
para reducir drásticamente la repetición en tu css.
Pero honestamente, siéntete libre de hacer tu estilo
utilizando cualquier recurso y herramientas que prefieras.
Si te sientes cómodo usando Tailwind css, por ejemplo,
por favor, no dudes en usarlo.
El objetivo aquí es sólo tener el juego un poco más bonito.
Y hay muchas maneras para nosotros para lograr esto.
Tu elección de recursos css
no afectará tu progresión en este curso.
También quiero señalar que,
tenemos dos variables diferentes para los colores de la tarjeta ahora.
Hay el color frontal y el color trasero.
Y la idea detrás de esto, es que,
la animación de volteo de la tarjeta tomará la tarjeta del color frontal
al de atrás, como puedes ver aquí.
Empezamos mostrando el color frontal, luego la tarjeta gira 90 grados.
Y una vez que se voltea completamente, mostrará el color del reverso.
He optado por empezar por tener un color frontal de blanco
y un color negro de gris.
No quería que todas las instancias de la vista de invitado
para desencadenar esta animación de volteo.
La razón es que quiero que ocurra la animación de la tarjeta
para las vistas de invitados que se utilizan para mostrar los huéspedes anteriores.
Pero no quería que ocurriera para la vista de invitados
que es usado por el componente guest-input.
Para lograr esto, he hecho un prop opcional llamado shouldFlip
que por defecto es false.
Por lo tanto, la vista de invitado que es usada por el wordleboard,
proporcionará el valor de should-flip.
Pero el guest-view que es utilizado por el guest-input
no proporciona ese valor.
Y por lo tanto, no tendrá la animación de volteo de la tarjeta.
Bien, echemos un vistazo a lo que tenemos ahora.
Impresionante, hemos tenido una buena oportunidad de observar cómo podemos hacer uso de vue
para activar comportamientos css específicos en nuestros componentes.
Y amigos, no he escrito ninguna prueba para estos cambios de estilo
que he implementado.
Como regla general
debemos centrar nuestras pruebas en el comportamiento y las historias de usuario,
no en las opciones de diseño o la apariencia.
Dicho esto, en un próximo episodio,
vamos a explorar juntos las pruebas de regresión visual,
que es una manera muy clara de proteger tu aplicación
de sufrir cambios drásticos en su estilo visual.