How can I make the rectangles move in columns when I pick them up? So now the eventListener is working, just that dragRectangle won't make the picked up rectangles move to the other column


<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");
          rectangle.dataset.columnIndex = columnIndex + i;
          rectangle.style.left = columnIndex * columnWidth + 'px';
          rectangle.style.top = -rectangle.offsetHeight / 2 + 'px';
        });

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