We have progressed a lot on different functionalities and rules
behind our wordle game.
I think it's a good time for us
to polish the style of our application a little bit more.
To achieve that, I have done these two new commits over here.
Let me explain them to you.
I wanted to add a little shake animation
whenever the user fails to submit a guess.
To achieve this, I went into the GuessInput component
and created a boolean ref called ηasFailedValidation.
This ref flips to true
as soon as the user fails to submit their guess,
and then flips back to false 500 milliseconds later.
I use this to bind to a css class called shake.
This class just triggers a little translateX animation
on the DOM element that has it.
So let's see what it looks like.
If I try to make an input that is invalid,
the shake animation triggers.
I also wanted to have a little card flipping animation
after a guess is successfully submitted.
There are many ways for us to achieve this.
What I decided to do is to make use of scss.
scss is a very popular css preprocessor.
Amongst other things,
it allows you to define for loops while creating your css rules,
like this one over here.
scss is going to read this loop over here and compile it into this.
This is an amazing way for you
to drastically reduce repetition in your css.
But honestly, feel free to do your styling
using whatever resources and tools you may prefer.
If you're comfortable using Tailwind css, for example,
please don't hesitate to use it.
The goal here is just to have the game looking a little bit nicer.
And there are many ways for us to achieve this.
Your choice of css resources
will not be impacting your progression over this course.
I also want to point out that,
we have two different variables for the colors of the card now.
There is the front color and the back color.
And the idea behind this, is that,
the card flipping animation will take the card from the front color
to the back one, as you can see over here.
We start by showing the front color, then the card rotates 90 degrees.
And once it's flipped all the way through, it's going to be showing the back color.
I've opted to start by having a front color of white
and a black color of gray.
I didn't want all instances of the guest-view
to trigger this flipping animation.
The reason being that I want the card animation to happen
for the guest-views that are used to show past guests.
But I didn't want it to happen for the guest-view
that is used by the guest-input component.
To achieve this, I've made an optional prop called shouldFlip
that defaults to false.
Therefore, the guest-view that is used by the wordleboard,
will be providing the value of should-flip.
But the guest-view that is used by the guest-input
is not providing that value.
And therefore, will not have the card flipping animation.
Well, let's take a look at what we have now.
Awesome, we had a good opportunity to observe how we can make use of vue
to trigger specific css behaviors in our components.
And folks, I have not written any tests for these style changes
that I've implemented.
As a rule of thumb,
we should focus our tests on behavior and user stories,
not on design choices or looks.
With that said, in an upcoming episode,
we will be exploring together visual regression tests,
which is a very neat way to protect your application
against suffering drastic changes to its visual style.