Things are going great

Changes:

Added chessboard component with ranks and colored squares
Added function for generating random squares and displayed them
Added feature to display green and req squares to indicate whether the user clicked correctly or incorrectly in the chessboard
Displayed attempt made by user in the sidebar with respective colors for correct and incorrect ones

I thought doing all of these took me at least four hours but I was wrong. It seems that it’s only been about like three hours.

This time I have worked on the chessboard itself on the vision page. Before it was just a plain whiteboard but now there are individual squares which was pretty easy to implement. I however needed some time to figure out how to add colours to the squares. But it also wasn’t that difficult.

Then I created a function for generating random squares with the help of math.random(). I created an absolute element to display the random squares at the centre of the chessboard.

To indicate the user that the square they have clicked is correct or incorrect I played the small animation that changed the colour of the user clicked square into red or green depending upon whether the user input was correct or incorrect.

I was stuck here because I didn’t know how to reverse the animation. Of course I could just change the colour to green and then the colour of the square but that didn’t look quite right as I am probably going to change the chessboard colour later. So I wanted the animation to be flexible I was trying to play and reverse a animation timeline but it was so much easier than that later. I just remember there was the repeat and yo-yo property that will easily accomplish this effect I’m looking for.

I have found a new bug with this if I spam click a square the square permanently turns into either red or green so definitely I will fix that in the next devlog.

Also now the squares that the user clicks will be displayed on the side bar. The colour of this square notation will be red or green depending upon the user selected the square correctly or incorrectly. I have found out that there’s a flex related css bug in attempts element. I will look into that tomorrow.

Okay bie.. Hope you have a great day 💖