Connect-Four

This was one fun and quite challenging. Added ESC key functionality on the game board component for pausing the game. Added error handlers for wrong routes.

Didn't make it as responsive only followed the 3 dimensions that figma provided. Desktop 1440x900 Tablet 768x1024 Mobile 375x812

Difficulties:

• Coding out the game logic.
• Naming conventions for CSS class names.
• Had an issue with my event listener causing lag on each rerender, found a fix with the use of useCallback. I needed to memoize the event listener.
• Creating the pause menu with a timer, had to have the timer pause as well.
• Creating a mobile friendly and tablet version.
• Practicing SRP near completion at the end I just had to get functionality working
• States got pretty messy.
• Creating the grid layout and designing the grid layout.

Areas of unsureness.

• proper values for height and width of divs.
• the use of divs for almost everything.
• the use of CSS, majority of the elements had static values. Not sure how to improve on that area.

Best practice?

• How I did my components, not sure if that is the right way to go.
• My states were all over the place.
• I had to prop drill a restart function down to a child component and have that child pass in its setState functions into the function in order for all the states to be accessed by one component. It was a beautiful mess of a code.

Extra: Wanted to added local storage caching when an ongoing game is happening if a user decides to refresh or accidentally refreshes the page. But due to how convoluted my states where I decided not too xD.

Also was gonna add a computer player as one of the bonuses. But Id rather just work on another challenge.

Shout out to visauldennis for the feedback on my last solution. Rem is a pretty useful value for font sizes and I added visual clarity when hovering over buttons.