1
00:00:04,600 --> 00:00:08,333
We have progressed a lot
on different functionalities and rules

2
00:00:08,358 --> 00:00:09,733
behind our wordle game.

3
00:00:10,067 --> 00:00:12,100
I think it's a good time for us

4
00:00:12,125 --> 00:00:15,567
to polish the style of our application
a little bit more.

5
00:00:15,707 --> 00:00:20,133
To achieve that, I have done
these two new commits over here.

6
00:00:20,333 --> 00:00:22,467
Let me explain them to you.

7
00:00:24,023 --> 00:00:26,700
I wanted to add a little shake animation

8
00:00:26,733 --> 00:00:30,333
whenever the user fails
to submit a guess.

9
00:00:31,333 --> 00:00:34,790
To achieve this,
I went into the GuessInput component

10
00:00:34,800 --> 00:00:38,867
and created a boolean ref
called ηasFailedValidation.

11
00:00:39,533 --> 00:00:41,633
This ref flips to true

12
00:00:41,658 --> 00:00:44,300
as soon as the user fails
to submit their guess,

13
00:00:44,467 --> 00:00:48,767
and then flips back
to false 500 milliseconds later.

14
00:00:49,433 --> 00:00:54,267
I use this to bind to a css class
called shake.

15
00:00:55,000 --> 00:01:00,048
This class just triggers
a little translateX animation

16
00:01:00,073 --> 00:01:02,067
on the DOM element that has it.

17
00:01:03,552 --> 00:01:05,767
So let's see what it looks like.

18
00:01:06,420 --> 00:01:08,967
If I try to make an input
that is invalid,

19
00:01:11,913 --> 00:01:13,900
the shake animation triggers.

20
00:01:16,580 --> 00:01:20,333
I also wanted to have
a little card flipping animation

21
00:01:20,433 --> 00:01:24,367
after a guess is successfully submitted.

22
00:01:25,853 --> 00:01:28,500
There are many ways
for us to achieve this.

23
00:01:29,833 --> 00:01:35,067
What I decided to do
is to make use of scss.

24
00:01:36,123 --> 00:01:40,367
scss is a very popular css preprocessor.

25
00:01:40,547 --> 00:01:42,067
Amongst other things,

26
00:01:42,092 --> 00:01:46,905
it allows you to define for loops
while creating your css rules,

27
00:01:46,999 --> 00:01:48,700
like this one over here.

28
00:01:50,198 --> 00:01:55,667
scss is going to read this loop over here
and compile it into this.

29
00:01:57,383 --> 00:01:59,600
This is an amazing way for you

30
00:01:59,633 --> 00:02:03,233
to drastically reduce repetition
in your css.

31
00:02:03,699 --> 00:02:06,835
But honestly,
feel free to do your styling

32
00:02:06,860 --> 00:02:10,767
using whatever resources
and tools you may prefer.

33
00:02:10,933 --> 00:02:14,485
If you're comfortable
using Tailwind css, for example,

34
00:02:14,533 --> 00:02:17,105
please don't hesitate to use it.

35
00:02:17,567 --> 00:02:22,033
The goal here is just to have
the game looking a little bit nicer.

36
00:02:22,800 --> 00:02:25,767
And there are many ways for us
to achieve this.

37
00:02:26,900 --> 00:02:29,242
Your choice of css resources

38
00:02:29,267 --> 00:02:33,467
will not be impacting
your progression over this course.

39
00:02:34,367 --> 00:02:36,533
I also want to point out that,

40
00:02:36,733 --> 00:02:40,700
we have two different variables
for the colors of the card now.

41
00:02:40,725 --> 00:02:43,767
There is the front color
and the back color.

42
00:02:43,926 --> 00:02:45,957
And the idea behind this, is that,

43
00:02:45,967 --> 00:02:50,250
the card flipping animation
will take the card from the front color

44
00:02:50,267 --> 00:02:53,233
to the back one,
as you can see over here.

45
00:02:53,300 --> 00:02:57,600
We start by showing the front color,
then the card rotates 90 degrees.

46
00:02:57,820 --> 00:03:03,167
And once it's flipped all the way through,
it's going to be showing the back color.

47
00:03:04,597 --> 00:03:07,900
I've opted to start by having
a front color of white

48
00:03:07,925 --> 00:03:09,700
and a black color of gray.

49
00:03:12,510 --> 00:03:16,023
I didn't want all instances
of the guest-view

50
00:03:16,048 --> 00:03:18,133
to trigger this flipping animation.

51
00:03:18,400 --> 00:03:22,367
The reason being that I want
the card animation to happen

52
00:03:22,400 --> 00:03:25,800
for the guest-views
that are used to show past guests.

53
00:03:25,833 --> 00:03:29,167
But I didn't want it to happen
for the guest-view

54
00:03:29,200 --> 00:03:32,300
that is used by the guest-input component.

55
00:03:32,800 --> 00:03:37,467
To achieve this, I've made
an optional prop called shouldFlip

56
00:03:37,467 --> 00:03:39,133
that defaults to false.

57
00:03:40,967 --> 00:03:45,300
Therefore, the guest-view
that is used by the wordleboard,

58
00:03:45,325 --> 00:03:47,867
will be providing
the value of should-flip.

59
00:03:48,357 --> 00:03:52,217
But the guest-view that is used
by the guest-input

60
00:03:53,390 --> 00:03:55,170
is not providing that value.

61
00:03:55,195 --> 00:03:59,833
And therefore, will not have
the card flipping animation.

62
00:04:00,717 --> 00:04:03,867
Well, let's take a look
at what we have now.

63
00:04:06,117 --> 00:04:10,967
Awesome, we had a good opportunity
to observe how we can make use of vue

64
00:04:10,992 --> 00:04:15,067
to trigger specific css behaviors
in our components.

65
00:04:15,293 --> 00:04:19,867
And folks, I have not written
any tests for these style changes

66
00:04:19,900 --> 00:04:21,400
that I've implemented.

67
00:04:21,467 --> 00:04:22,900
As a rule of thumb,

68
00:04:22,900 --> 00:04:27,333
we should focus our tests
on behavior and user stories,

69
00:04:27,433 --> 00:04:30,167
not on design choices or looks.

70
00:04:30,813 --> 00:04:33,833
With that said, in an upcoming episode,

71
00:04:33,867 --> 00:04:37,467
we will be exploring together
visual regression tests,

72
00:04:37,533 --> 00:04:40,600
which is a very neat way
to protect your application

73
00:04:40,633 --> 00:04:44,933
against suffering drastic changes
to its visual style.