Can you rewrite me the checkConnectedRectangles() function so that it checks if there are 4 same coloured rectangles in a row/column  in an area where we put the draggedRectangle down. (so if there is a red rectangle in x=0,y=0 and three red rectangles in x=0,y=1 / x=0,y=2 / x=0,y=3, it should count as 4 connected rectangles and it should make them transparent colored). It shouldn't check all the board and it also should only check the draggedRectangle's color


function pickRectangle(event) {
  if(click === 0){
    const gameBoard = document.getElementById('game-board');
    const boardRect = gameBoard.getBoundingClientRect();
    const columnWidth = gameBoard.offsetWidth / boardWidth;
    const columnIndex = Math.floor((event.clientX - boardRect.left) / columnWidth);
    draggedRectangle = getLastColoredRectangle(columnIndex);

      // Find the bottom-most empty row in that column
      const rectangles = document.getElementsByClassName('rectangle');
      const rectangleColor = draggedRectangle.style.backgroundColor;
      draggedRectangle.style.backgroundColor = '';
      for (let row = boardHeight - 1; row >= 0; row--) {
          const index = row * boardWidth + columnIndex;
          const rectangle = rectangles[index];

          if (!rectangle.style.backgroundColor) {
              rectangle.style.backgroundColor = rectangleColor;
              draggedRectangle = rectangle;
              break;
            }
        }

    document.addEventListener('mousemove', dragRectangle);
    click = 1;
  }

  else if (click === 1) {

        // Find the column that the mouse is in
        const gameBoard = document.getElementById('game-board');
        const boardRect = gameBoard.getBoundingClientRect();
        const columnWidth = gameBoard.offsetWidth / boardWidth;
        const columnIndex = Math.floor((event.clientX - boardRect.left) / columnWidth);

        // Find the bottom-most empty row in that column
        const rectangles = document.getElementsByClassName('rectangle');
        const rectangleColor = draggedRectangle.style.backgroundColor;
        draggedRectangle.style.backgroundColor = '';
        let rectanglePlace = getLastNonColoredRectangle(columnIndex);
        rectanglePlace.style.backgroundColor = rectangleColor;

        draggedRectangle = null;
        click = 0;
    }

    document.removeEventListener('mousemove', dragRectangle);
    checkConnectedRectangles();
}

function checkConnectedRectangles() {
  const rectangles = document.getElementsByClassName('rectangle');

  // Check rows
  for (let row = 0; row < boardHeight; row++) {
    let count = 1;
    let prevColor = null;
    for (let col = 0; col < boardWidth; col++) {
      const index = row * boardWidth + col;
      const rectangle = rectangles[index];
      const color = rectangle.style.backgroundColor;
      if (color === prevColor && color !== '') {
        count++;
        if (count === 4) {
          // Found 4 connected rectangles, make them white
          for (let i = 0; i < 4; i++) {
            const indexToWhite = index - i;
            const rectangleToWhite = rectangles[indexToWhite];
            rectangleToWhite.style.backgroundColor = '';
          }
          return;
        }
      } else {
        count = 1;
        prevColor = color;
      }
    }
  }

  // Check columns
  for (let col = 0; col < boardWidth; col++) {
    let count = 1;
    let prevColor = null;
    for (let row = 0; row < boardHeight; row++) {
      const index = row * boardWidth + col;
      const rectangle = rectangles[index];
      const color = rectangle.style.backgroundColor;
      if (color === prevColor && color !== '') {
        count++;
        if (count === 4) {
          // Found 4 connected rectangles, make them white
          for (let i = 0; i < 4; i++) {
            const indexToWhite = index - (i * boardWidth);
            const rectangleToWhite = rectangles[indexToWhite];
            rectangleToWhite.style.backgroundColor = '';
          }
          return;
        }
      } else {
        count = 1;
        prevColor = color;
      }
    }
  }
}