1
00:00:04,600 --> 00:00:08,333
Hemos avanzado mucho
en diferentes funcionalidades y reglas

2
00:00:08,358 --> 00:00:09,733
detrás de nuestro juego de palabras.

3
00:00:10,067 --> 00:00:12,100
Creo que es un buen momento para nosotros

4
00:00:12,125 --> 00:00:15,567
para pulir el estilo de nuestra aplicación
un poco más.

5
00:00:15,707 --> 00:00:20,133
Para lograr eso, he hecho
estos dos nuevos commits aquí.

6
00:00:20,333 --> 00:00:22,467
Déjame que te los explique.

7
00:00:24,023 --> 00:00:26,700
Quería añadir una pequeña animación

8
00:00:26,733 --> 00:00:30,333
cada vez que el usuario no
en enviar una conjetura.

9
00:00:31,333 --> 00:00:34,790
Para lograr esto,
entré en el componente GuessInput

10
00:00:34,800 --> 00:00:38,867
y creé una ref booleana
llamado ηasFailedValidation.

11
00:00:39,533 --> 00:00:41,633
Esta ref cambia a true

12
00:00:41,658 --> 00:00:44,300
tan pronto como el usuario no
en enviar su conjetura,

13
00:00:44,467 --> 00:00:48,767
y luego cambia de nuevo
a falso 500 milisegundos después.

14
00:00:49,433 --> 00:00:54,267
Uso esto para enlazar a una clase css
llamada shake.

15
00:00:55,000 --> 00:01:00,048
Esta clase sólo activa
una pequeña animación translateX

16
00:01:00,073 --> 00:01:02,067
en el elemento DOM que la contiene.

17
00:01:03,552 --> 00:01:05,767
Veamos qué aspecto tiene.

18
00:01:06,420 --> 00:01:08,967
Si intento hacer una entrada
que no es válida,

19
00:01:11,913 --> 00:01:13,900
se dispara la animación de sacudida.

20
00:01:16,580 --> 00:01:20,333
También quería tener
una pequeña animación de giro de tarjeta

21
00:01:20,433 --> 00:01:24,367
después de una conjetura se envía con éxito.

22
00:01:25,853 --> 00:01:28,500
Hay muchas maneras
de conseguirlo.

23
00:01:29,833 --> 00:01:35,067
Lo que he decidido hacer
es hacer uso de scss.

24
00:01:36,123 --> 00:01:40,367
scss es un preprocesador css muy popular.

25
00:01:40,547 --> 00:01:42,067
Entre otras cosas,

26
00:01:42,092 --> 00:01:46,905
te permite definir bucles for
mientras creas tus reglas css,

27
00:01:46,999 --> 00:01:48,700
como este de aquí.

28
00:01:50,198 --> 00:01:55,667
scss va a leer este bucle de aquí
y compilarlo en esto.

29
00:01:57,383 --> 00:01:59,600
Esta es una manera increíble para que

30
00:01:59,633 --> 00:02:03,233
para reducir drásticamente la repetición
en tu css.

31
00:02:03,699 --> 00:02:06,835
Pero honestamente,
siéntete libre de hacer tu estilo

32
00:02:06,860 --> 00:02:10,767
utilizando cualquier recurso
y herramientas que prefieras.

33
00:02:10,933 --> 00:02:14,485
Si te sientes cómodo
usando Tailwind css, por ejemplo,

34
00:02:14,533 --> 00:02:17,105
por favor, no dudes en usarlo.

35
00:02:17,567 --> 00:02:22,033
El objetivo aquí es sólo tener
el juego un poco más bonito.

36
00:02:22,800 --> 00:02:25,767
Y hay muchas maneras para nosotros
para lograr esto.

37
00:02:26,900 --> 00:02:29,242
Tu elección de recursos css

38
00:02:29,267 --> 00:02:33,467
no afectará
tu progresión en este curso.

39
00:02:34,367 --> 00:02:36,533
También quiero señalar que,

40
00:02:36,733 --> 00:02:40,700
tenemos dos variables diferentes
para los colores de la tarjeta ahora.

41
00:02:40,725 --> 00:02:43,767
Hay el color frontal
y el color trasero.

42
00:02:43,926 --> 00:02:45,957
Y la idea detrás de esto, es que,

43
00:02:45,967 --> 00:02:50,250
la animación de volteo de la tarjeta
tomará la tarjeta del color frontal

44
00:02:50,267 --> 00:02:53,233
al de atrás,
como puedes ver aquí.

45
00:02:53,300 --> 00:02:57,600
Empezamos mostrando el color frontal,
luego la tarjeta gira 90 grados.

46
00:02:57,820 --> 00:03:03,167
Y una vez que se voltea completamente,
mostrará el color del reverso.

47
00:03:04,597 --> 00:03:07,900
He optado por empezar por tener
un color frontal de blanco

48
00:03:07,925 --> 00:03:09,700
y un color negro de gris.

49
00:03:12,510 --> 00:03:16,023
No quería que todas las instancias
de la vista de invitado

50
00:03:16,048 --> 00:03:18,133
para desencadenar esta animación de volteo.

51
00:03:18,400 --> 00:03:22,367
La razón es que quiero
que ocurra la animación de la tarjeta

52
00:03:22,400 --> 00:03:25,800
para las vistas de invitados
que se utilizan para mostrar los huéspedes anteriores.

53
00:03:25,833 --> 00:03:29,167
Pero no quería que ocurriera
para la vista de invitados

54
00:03:29,200 --> 00:03:32,300
que es usado por el componente guest-input.

55
00:03:32,800 --> 00:03:37,467
Para lograr esto, he hecho
un prop opcional llamado shouldFlip

56
00:03:37,467 --> 00:03:39,133
que por defecto es false.

57
00:03:40,967 --> 00:03:45,300
Por lo tanto, la vista de invitado
que es usada por el wordleboard,

58
00:03:45,325 --> 00:03:47,867
proporcionará
el valor de should-flip.

59
00:03:48,357 --> 00:03:52,217
Pero el guest-view que es utilizado
por el guest-input

60
00:03:53,390 --> 00:03:55,170
no proporciona ese valor.

61
00:03:55,195 --> 00:03:59,833
Y por lo tanto, no tendrá
la animación de volteo de la tarjeta.

62
00:04:00,717 --> 00:04:03,867
Bien, echemos un vistazo
a lo que tenemos ahora.

63
00:04:06,117 --> 00:04:10,967
Impresionante, hemos tenido una buena oportunidad
de observar cómo podemos hacer uso de vue

64
00:04:10,992 --> 00:04:15,067
para activar comportamientos css específicos
en nuestros componentes.

65
00:04:15,293 --> 00:04:19,867
Y amigos, no he escrito
ninguna prueba para estos cambios de estilo

66
00:04:19,900 --> 00:04:21,400
que he implementado.

67
00:04:21,467 --> 00:04:22,900
Como regla general

68
00:04:22,900 --> 00:04:27,333
debemos centrar nuestras pruebas
en el comportamiento y las historias de usuario,

69
00:04:27,433 --> 00:04:30,167
no en las opciones de diseño o la apariencia.

70
00:04:30,813 --> 00:04:33,833
Dicho esto, en un próximo episodio,

71
00:04:33,867 --> 00:04:37,467
vamos a explorar juntos
las pruebas de regresión visual,

72
00:04:37,533 --> 00:04:40,600
que es una manera muy clara
de proteger tu aplicación

73
00:04:40,633 --> 00:04:44,933
de sufrir cambios drásticos
en su estilo visual.