Create a two-player game of Connect Four

Requirements

• The board should be 7 wide by 6 high
• It should alternate between the 'red' and 'yellow' players turn
• Clicking the "Drop" button should drop a token of the current player's to the bottom-most free position
• Clicking the "Drop" button on a full column should have no effect
• If either player gets four in a row (horizontally, vertically, or diagonally):
  • The "COLOR's turn" heading should be replaced by "COLOR won!"
  • The "Drop" buttons should be replaced by a "Play again" button
• If the board is full and there is no winner:
  • The "COLOR's turn" heading should be replaced by "Draw!"
  • The "Drop" buttons should be replaced by a "Play again" button

Important

• Checking the win condition is and outside the scope of this question (unless you want the extra challenge!). We have provided a utility to check whether there is a winner or draw. If you are forking a Frontend Eval codepen template, you can access it via window.connectFour.checkForWinner, or you can download it here. Example usage:

// Board must be a 2D array filled with `null` for empty space
// and primitive values representing player tokens (numbers, strings)
// e.g. 1 or 2, 'red' or 'yellow', 'player 1' or 'player 2'
//
// returns `null` for no winner, 'draw' for draw, or the value of the winning token
const exampleBoard = [
  [1,2,null,null,null,null],
  [1,1,1,1,null,null], // player `1` has 4 in a row
  [2,null,null,null,null,null],
  [2,null,null,null,null,null],
  [2,null,null,null,null,null],
  [null,null,null,null,null,null],
  [null,null,null,null,null,null]
];

const winner = window.connectFour.checkForWinner(exampleBoard);
console.log(winner); // 1

• If you're using React, we have provided a separate utility to make a deep copy of an array/object. You may find this useful if you store the board in React state. Example usage:

const clonedBoard = window.connectFour.deepClone(board);