We’ve reach 100 hours 🎉

Changes:

Fixed timer not displaying in sidebar
Removed the square display after time is over
Fixed timer setInterval running multiple times and made countdown timer code cleaner
Fix TimeMenu not closing
Removed unused imports
Designed the sidebar to add new data
Added the new design
Added animation to make the square notation that appears on the chessboard disappear

First of all, we have reached 100 hours let’s goooooo. I would like to thank everybody who have followed my project read, liked or commented on my devlogs . My project has recently started getting some traction. Special thanks to @PAPER_01 💖.

I have done a lot of things this devlog. I will try to cover these in as short as possible.

It seems that the setInterval in progress.jsx was running twice. I found out this while I was making the countdown timer code cleaner. So to fix that I reset the hasCountdownCompleted as soon as the timer in progress.jsx runs out. Now, countdown and progress timer work as intended with cleaner code.

The random color option in color menu now works. It was a little tricky making that work. Let’s just say it wasn’t working as expected but the fix wasn’t that hard.

I liked what chess.com were doing. They were displaying the square notation and then the square notation would just disappear. The square rotation will also live in the sidebar so that if user forgets what the square was just displayed, they can easily look at the sidebar. I really like this idea and decided to implement on my project as well.

But before I added this to the website, I first designed it on Figma. I also thought of displaying the score and best score on sidebar. Designing it was fun and tricky. I didn’t really like how the previous score and best score were looking and after some trial and error it looked okay.

All of these things were fine and enjoyable to do but making the best score work was so frustratingggggg. It’s the reason that I couldn’t devlog yesterday.

The issue was score was showing to be zero inside updateTimer function even though the score was greater than zero everywhere else. I thought fixing it wouldn’t be really hard. I tried console log score everywhere to see when the value was being zero but there was no sign of the score turn into zero. Later I found out that due to the updateTimer function being inside a setInterval the value is kind of locked and used useRef hook to solve the issue.

Okay, that’s all for this devlog. Now that I have reached 100 hours let’s aim for 150 hours as soon as possible. I have taken very long to write this devlog so I like would be heavily appreciated 😄.