Write me a function that when I pick up rectangles (I can only pick up same colored rectangles) and I put it down, it checks for same colored rectangles in the area (in a row or in a column) and if there are 4 or more rectangles, changes it's backgroundcolor to ""

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Sobics Game</title>
	<style>
		#game-board {
			width: 300px;
			height: 600px;
			margin: 0 auto;
			border: 1px solid black;
		}
		.row {
			display: flex;
		}
		.rectangle {
			width: 28px;
			height: 28px;
			margin: 1px;
			cursor: pointer;
			user-select: none;
		}
		.selected {
			border: 2px solid white;
		}
	</style>
</head>
<body>
	<button onclick="startGame()">Start Game</button>
	<div id="game-board"></div>

	<script>
		const boardWidth = 10;
		const boardHeight = 14;
		const numFilledRows = 5;

		let selectedRectangle = null;

		function startGame() {
      const gameBoard = document.getElementById('game-board');
			gameBoard.innerHTML = '';

			for (let row = 0; row < boardHeight; row++) {
				const divRow = document.createElement('div');
				divRow.classList.add('row');

				for (let col = 0; col < boardWidth; col++) {
					const divRectangle = document.createElement('div');
					divRectangle.classList.add('rectangle');
          divRectangle.addEventListener("click", pickRectangle);
					if (row < numFilledRows) {
						divRectangle.style.backgroundColor = getRandomColor();
					}
					divRow.appendChild(divRectangle);
				}

				gameBoard.appendChild(divRow);
			}
		}

		function getRandomColor() {
			const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'];
			const randomIndex = Math.floor(Math.random() * colors.length);
			return colors[randomIndex];
		}


let click = 0;    
let draggedRectangles = [];
let numberOfRectangles = 0;
let rectangleColor = null;
let i = 0;
let pickedUpRectangles = 0;

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);
        draggedRectangles.push(...getColoredRectangles(columnIndex));

        // Find the bottom-most empty row in that column
        const rectangles = document.getElementsByClassName("rectangle");
        rectangleColor = draggedRectangles[0].style.backgroundColor;
        numberOfRectangles = draggedRectangles.length;
        pickedUpRectangles = draggedRectangles.length;
        draggedRectangles.forEach(rectangle => {
            rectangle.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;
                draggedRectangles[i] = rectangle;
                numberOfRectangles--;
                i++;
                if (numberOfRectangles === 0) {
                    break;
                }
            }
        }

        document.addEventListener("mousemove", dragRectangle);
        click = 1;
        i = 0;
    } 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");

        // Restore colors for the dragged rectangles and place them
        draggedRectangles.forEach(rectangle => {
            const rectanglePlace = getLastNonColoredRectangle(columnIndex);
            if (rectanglePlace) {
                rectangle.style.backgroundColor = "";
                rectanglePlace.style.backgroundColor = rectangleColor;
            }
        });

        draggedRectangles = [];

        click = 0;
        document.removeEventListener("mousemove", dragRectangle);
       
    }
}

function dragRectangle(event) {
  if (draggedRectangles.length > 0) {
    draggedRectangles.forEach((draggedRectangle) => {
      draggedRectangle.style.left = event.clientX - draggedRectangle.offsetWidth / 2 + 'px';
      draggedRectangle.style.top = event.clientY - draggedRectangle.offsetHeight / 2 + 'px';
    });
  }
}

function getLastNonColoredRectangle(columnIndex) {
  const rectangles = document.getElementsByClassName('rectangle');
  let lastNonColoredRectangle = null;
  
  for (let row = 0; row < boardHeight; row++) {
    const index = row * boardWidth + columnIndex;
    const rectangle = rectangles[index];
    
    if (!rectangle.style.backgroundColor) {
      lastNonColoredRectangle = rectangle;
      break;
    }
  }
  
  return lastNonColoredRectangle;
}

function getColoredRectangles(columnIndex) {
    const rectangles = document.getElementsByClassName("rectangle");
    const coloredRectangles = [];
    let rectangleColor = null;

    for (let row = boardHeight - 1; row >= 0; row--) {
        const index = row * boardWidth + columnIndex;
        const rectangle = rectangles[index];

        if (rectangle.style.backgroundColor) {
            if (rectangleColor === null) {
                rectangleColor = rectangle.style.backgroundColor;
            }
            if (rectangleColor && rectangle.style.backgroundColor === rectangleColor) {
                coloredRectangles.push(rectangle);
            } else if (rectangleColor !== null && rectangle.style.backgroundColor !== rectangleColor) {
                break;
            }
        }
    }

    return coloredRectangles;
}


	</script>
</body>
</html>