Can you rewrite dragRectangle function to make it so when my mouse is on the other column, the picked up rectangle changes positions (so we change the styles from one column to another). So you need to search for the bottom-most rectangle that doesn't have any backgroundcolor and just make draggedRectangles[i] be that rectangle


<body>
	<div id="screen">
		<div id="score"></div>
		<button id="mute" onclick="mute()">Mute</button>
		<div id="game-board"></div>
	</div>
	<button id="startBtn" onclick="startGame()">Start Game</button>
	<div id="menu">
		<button id="restartBtn" onclick="restartGame()">Restart</button>
		<div id="leaderboard-container"></div>
	</div>
	

	<script>
		const boardWidth = 10;
		const boardHeight = 17;
		const numFilledRows = 5;
    const backgroundMusic = new Audio('../music/backgroundmusic.mp3');
    let isGameEnded = false;
	
	muteCount = 0;
	function mute(){
		const btn = document.getElementById('mute');
		if(muteCount%2 == 0){
			btn.textContent = "Unmute";
			backgroundMusic.muted = true;
		}else{
			btn.textContent = "Mute";
			backgroundMusic.muted = false;
		}
		muteCount++;
	}
	
function restartGame() {
  // Stop the background music
  backgroundMusic.pause();
  backgroundMusic.currentTime = 0;

  // Clear the game board and reset the score
  document.getElementById("menu").style.display = "none";
  const gameBoard = document.getElementById('game-board');
  gameBoard.innerHTML = '';
  const scoreElement = document.getElementById('score');
  scoreElement.innerHTML = 'Score: 0';

  // Reset the game variables
  click = 0;
  draggedRectangles = [];
  numberOfRectangles = 0;
  rectangleColor = null;
  i = 0;
  pickedUpRectangles = 0;
  isGameEnded = false;
  score = 0;
  cycle = 1;

  // Start a new game
  startGame();
}

	function startGame() {
			document.getElementById("startBtn").style.display = "none";
			const gameBoard = document.getElementById('game-board');
			gameBoard.innerHTML = '';

			for (let row = 0; row < boardHeight; row++) {
				const divRow = document.createElement('div');
				divRow.classList.add('row');
        if (row === 9) {
          const divLine = document.createElement('div');
          divLine.classList.add('line');
          gameBoard.appendChild(divLine);
        }

				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();
						divRectangle.classList.add('visible');
					}
					divRow.appendChild(divRectangle);
				}

				gameBoard.appendChild(divRow);
			}
          // Create a new HTML element to display the score
      const scoreElement = document.getElementById("score");
      scoreElement.innerHTML = 'Score: 0'; // Initialize score value in the element

      backgroundMusic.play();
      backgroundMusic.loop = true;

      setTimerAndAddRow();
		}

		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 && !isGameEnded) {
        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, i) => {
          rectangle.style.backgroundColor = "";
          rectangle.classList.remove("visible");
        });

        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;
				rectangle.classList.add("visible");
                draggedRectangles[i] = rectangle;
                numberOfRectangles--;
                i++;
                if (numberOfRectangles === 0) {
                    break;
                }
            }
        }

        document.addEventListener("mousemove", dragRectangle);
        click = 1;
        i = 0;
    } else if (click === 1 && !isGameEnded) {

        // 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 = "";
				rectangle.classList.remove("visible");
                rectanglePlace.style.backgroundColor = rectangleColor;
				rectanglePlace.classList.add("visible");
            }
        });

        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) {
  console.log("lefutok")
  if (draggedRectangles.length > 0) {
    const gameBoard = document.getElementById("game-board");
    const boardRect = gameBoard.getBoundingClientRect();
    const columnWidth = gameBoard.offsetWidth / boardWidth;
    
    draggedRectangles.forEach((draggedRectangle) => {
      // Calculate the new column based on the position of the mouse
      const newColumnIndex = Math.floor((event.clientX - boardRect.left) / columnWidth);
      
      // Calculate the new position based on the original column and the new column
      const originalColumnIndex = parseInt(draggedRectangle.getAttribute('data-column-index'));
      const newX = draggedRectangle.offsetLeft + (newColumnIndex - originalColumnIndex) * columnWidth;
      const newY = event.clientY - draggedRectangle.offsetHeight / 2;
      
      // Set the new position
      draggedRectangle.style.left = newX + 'px';
      draggedRectangle.style.top = newY + 'px';
    });
  }
}

function getLastNonColoredRectangle(columnIndex) {
  const rectangles = document.getElementsByClassName('rectangle');
  let lastNonColoredRectangle = null;
  
  for (let row = 0; row < boardHeight - 4; 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 - 4; 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;