TypeScript, Tailwind & framer-motion
Connect 4 is a turn-based 2-player game played on a 7x6 board. Each player places their checkers from the lowest row until the highest one. The goal is to align four checkers horizontally, vertically, or diagonally
Framer Motion was used to create drop animation on players' moves
For check is the player has won I've created 3 functions checkRows(), checkColumns(), checkDiagonals()
To manage states I've used Recoil. modalAtom is managing which modal is open right now. gameAtom is taking care of game status, which player is turn, pause status, actual player score, who is the winner, and winner array to mark which fields are winner one. boardAtom is used to print each board field
Design by Kevin Powell for Scrimba The Frontend Developer Career Path