Прочитай код и помоги с решением такой проблемы: при повторных быстрых кликах анимация рисует перемещение в одну и ту же ячейку, сделай так, что при повторных быстрых кликах анимация шла уже в следующую ячейку, даже если еще не отрисована фигурка в предыдущей
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
let pyramid = [];
let cells = Array(7).fill(null);
let message = document.getElementById('message');
let restartButton = document.getElementById('restart-button');

// Инициализация пирамиды
function initPyramid() {
    pyramid = []; // Сброс пирамиды
    cells = Array(7).fill(null); // Сброс ячеек
    restartButton.style.display = 'none'; // Скрываем кнопку перезапуска
    const colorCount = {}; // Объект для подсчета фигурок каждого цвета

    // Генерируем 15 фигурок (по 3 для каждого цвета)
    const totalPieces = 15; // Общее количество фигурок
    const piecesPerColor = totalPieces / colors.length; // Количество фигурок для каждого цвета

    // Заполняем объект colorCount
    colors.forEach(color => {
        colorCount[color] = piecesPerColor; // Устанавливаем количество фигурок для каждого цвета
    });

    // Создаем слои пирамиды
    for (let i = 0; i < 5; i++) { // 5 слоев
        let layer = [];
        for (let j = 0; j < i + 1; j++) {
            // Находим цвет, который еще не исчерпан
            let color;
            do {
                color = colors[Math.floor(Math.random() * colors.length)];
            } while (colorCount[color] <= 0); // Повторяем, пока не найдем цвет с оставшимися фигурками

            layer.push({ color: color, active: true });
            colorCount[color]--; // Уменьшаем счетчик для выбранного цвета
        }
        pyramid.push(layer);
    }

    renderPyramid();
    renderCells();
    message.innerText = ''; // Сброс сообщения
}

// Отрисовка пирамиды
function renderPyramid() {
    const pyramidDiv = document.getElementById('pyramid');
    pyramidDiv.innerHTML = '';
    pyramid.forEach((layer, i) => {
        const layerDiv = document.createElement('div');
        layerDiv.className = 'layer'; // Добавляем класс для слоя
        layer.forEach((piece, j) => {
            const pieceWrapper = document.createElement('div');
            pieceWrapper.className = 'piece-wrapper'; // Обертка для отступов

            const pieceDiv = document.createElement('div');
            pieceDiv.className = 'piece'; // Устанавливаем класс для фигуры
            pieceDiv.style.backgroundColor = piece.active ? piece.color : ''; // Устанавливаем цвет только для активных фигурок
            pieceDiv.onclick = () => {
                if (piece.active && isPieceActive(i, j)) { // Проверяем, активна ли фигурка
                    // Удаляем фигурку из пирамиды сразу после клика
                    pyramid[i][j].active = false;
                    renderPyramid(); // Обновляем пирамиду, чтобы отобразить изменения
                    movePieceToCell(i, j);
                }
            };

            // Устанавливаем класс для неактивной фигурки
            if (!piece.active) {
                pieceDiv.classList.add('inactive');
            }

            pieceWrapper.appendChild(pieceDiv); // Добавляем фигурку в обертку
            layerDiv.appendChild(pieceWrapper); // Добавляем обертку в слой
        });
        pyramidDiv.appendChild(layerDiv);
    });
}

// Отрисовка ячеек
function renderCells() {
    const cellContainer = document.getElementById('cell-container');
    cellContainer.innerHTML = '';
    cells.forEach((color, index) => {
        const cell = document.createElement('div');
        cell.className = 'cell';
        if (color) {
            const pieceDiv = document.createElement('div');
            pieceDiv.className = 'piece'; // Устанавливаем класс для фигуры
            pieceDiv.style.backgroundColor = color; // Устанавливаем цвет ячейки
            pieceDiv.style.opacity = '1'; // Полная непрозрачность для фигурки в ячейке
            cell.appendChild(pieceDiv); // Добавляем фигурку в ячейку
        }
        cellContainer.appendChild(cell);
    });
}

// Проверка, активна ли фигурка
function isPieceActive(layer, index) {
    // Проверяем, есть ли фигурки на верхнем слое
    if (layer === pyramid.length - 1) {
        return true; // Фигурки на верхнем слое всегда активны
    }
    // Проверяем, есть ли фигурки на слое выше
    const upperLayer = pyramid[layer + 1];
    const leftIndex = index; // Индекс для левой фигурки
    const rightIndex = index + 1; // Индекс для правой фигурки

    // Проверяем, закрыта ли фигурка двумя фигурками сверху
    const isBlocked = (upperLayer[leftIndex] && upperLayer[leftIndex].active) || 
                      (upperLayer[rightIndex] && upperLayer[rightIndex].active);

    return !isBlocked; // Если фигурка закрыта, она не активна
}

// Перемещение фигурки в ячейку
function movePieceToCell(layer, index) {
    const color = pyramid[layer][index].color;

    const pieceDiv = document.createElement('div');
    pieceDiv.className = 'piece moving'; // Устанавливаем класс для фигуры и добавляем класс для анимации
    pieceDiv.style.backgroundColor = color; // Устанавливаем цвет фигурки
    document.body.appendChild(pieceDiv); // Добавляем фигурку в body для анимации

    // Получаем координаты ячейки
    const cell = document.querySelectorAll('.cell')[cells.indexOf(null)];
    const cellRect = cell.getBoundingClientRect();

    // Получаем координаты фигурки в пирамиде
    const pyramidDiv = document.getElementById('pyramid');
    const pieceRect = pyramidDiv.children[layer].children[index].getBoundingClientRect();

    // Устанавливаем начальные координаты фигурки
    pieceDiv.style.position = 'absolute';
    pieceDiv.style.left = `${pieceRect.left}px`; // Начальная позиция по X
    pieceDiv.style.top = `${pieceRect.top}px`; // Начальная позиция по Y

    // Запускаем анимацию перемещения с использованием requestAnimationFrame
    requestAnimationFrame(() => {
        pieceDiv.style.transform = `translate(${cellRect.left - pieceRect.left}px, ${cellRect.top - pieceRect.top}px)`;
    });

    // Завершаем перемещение
    setTimeout(() => {
        document.body.removeChild(pieceDiv); // Удаляем фигурку из body
        placeInCell(color); // Помещаем цвет в ячейку
    }, 510); // Время должно совпадать с длительностью анимации
}

// Помещение в ячейку
function placeInCell(color) {
    const emptyIndex = cells.indexOf(null);
    if (emptyIndex !== -1) {
        cells[emptyIndex] = color;
        renderCells();
        checkCells();
    } else {
        message.innerText = 'Игра окончена: ячейки заполнены!';
    }
}

// Проверка ячеек
function checkCells() {
    const colorCount = {};
    cells.forEach(color => {
        if (color) {
            colorCount[color] = (colorCount[color] || 0) + 1;
        }
    });
    for (let color in colorCount) {
        if (colorCount[color] === 3) {
            cells = cells.map(c => (c === color ? null : c));
            renderCells();
            message.innerText = 'Фигурки исчезли!';
            return;
        }
    }

    // Если ячейки заполнены, убираем пирамиду и ячейки
    if (cells.every(cell => cell !== null)) {
        document.getElementById('pyramid').style.display = 'none'; // Скрываем пирамиду
        document.getElementById('cells').style.display = 'none'; // Скрываем ячейки
        message.innerText = 'Уровень не пройден!'; // Выводим сообщение
        restartButton.style.display = 'block'; // Показываем кнопку перезапуска
    }
}

// Обработчик события для кнопки перезапуска
restartButton.onclick = () => {
    document.getElementById('pyramid').style.display = 'flex'; // Показываем пирамиду
    document.getElementById('cells').style.display = 'block'; // Показываем ячейки
    initPyramid(); // Перезапускаем игру
};

// Запуск игры
initPyramid();