Mostly cleaning up the code and breaking things

Changes:

• Made timer code better and cleaner
• Added functionality to timeMenu options
• Added countdown before starting the timer and displaying the squares
  -Added VisionContext.jsx to make code cleander and broke down vision page into smaller components

As I said in the previous dialogue, the timer code was messy. So I decided to clean the code now it looks much better.

---

Also now the time button options work now the timer will have 15, 30 or 45 seconds according to what you choose.

---

So before, after cleaning on start the timer would start right away and the square would also show up. But this might make the user frustrated as they have to click start and right away move their mouse to the chessboard. I saw that chess.com has a countdown timer so I also made one. The code for this countdown timer is also messy so I will probably make it more cleaner next time.

---

This is the main thing I have doing this whole devlog which I cannot show you because it’s just making the code cleaner. The vision pays had a chessboard component and then sidebar element to it. The sidebar element had all the code which was making the vision page could a lot messy. So I have broken down components into components and those components in the further components. I think this is making the code much more easy to read and find and debug each component more easily.

---

But in the process of cleaning my messy code, things have broken down. The timer isn’t working, I will fix that later. I don’t have much to show here today so the see the countdown timer working and the broken timer 😝.

---

I will fix everything in the next devlog. So stay tuned. Bieee…