Can you make me a function that checks whenever there is a gap in the columns? So in column 5 there is 3 rectangles than a gap than 1 more rectangle, that 1 more rectangle then should go to the 4th row instead of being in the 5th row. You should iterate through the whole table checking each column individually and the function should be called every 100ms.

<!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;

		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;
            }
        });

        let rectanglePlace = getLastNonColoredRectangle(columnIndex);
        const rectangleIndex = Array.from(rectangles).indexOf(rectanglePlace) - 10;
        console.log(rectangleIndex);

        click = 0;
        document.removeEventListener("mousemove", dragRectangle);
        checkConnectedRectangles(rectangleColor, rectangleIndex);
        draggedRectangles = [];
    }
}

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;
}

function checkConnectedRectangles(rectangleColor, index) {
  const rectangles = document.getElementsByClassName("rectangle");
  const draggedRow = Math.floor(index / boardWidth);
  const draggedCol = index % boardWidth;

  const directions = [[1, 0], [-1, 0], [0, 1], [0, -1]];
  let totalCount = 0;
  let indicesToClear = new Set();

  function checkForConnected(row, col) {
    const index = row * boardWidth + col;
    console.log("Lefutok gecisbugyi " + index);
    if (
      row >= 0 &&
      row < boardHeight &&
      col >= 0 &&
      col < boardWidth &&
      rectangles[index].style.backgroundColor === rectangleColor
    ) {
      console.log(indicesToClear);
      const alreadyChecked = indicesToClear.has(index);
      console.log(alreadyChecked);
      if (!alreadyChecked) {
        indicesToClear.add(index);
        // Check for connected rectangles in all directions
        directions.forEach(([rowStep, colStep]) => {
          const currentRow = row + rowStep;
          const currentCol = col + colStep;
          console.log(currentRow + " row geci");
          console.log(currentCol + " col geci");
          checkForConnected(currentRow, currentCol);
        });
      }
    }
  }

  // Check the starting rectangle
  checkForConnected(draggedRow, draggedCol);
  totalCount = indicesToClear.size;

  if (totalCount >= 4) {
    // Found 4 connected rectangles, make them transparent
    indicesToClear.forEach((indexToClear) => {
      rectangles[indexToClear].style.backgroundColor = "";
    });
  }
}

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